C’est peut-être le titre d’article le plus étrange que j’ai jamais écrit. Je ne suis pas habitué à évoquer couramment la silhouette, ou éventuellement lorsque je parle de ma tendre épouse…Mais en fait, je voudrais mettre en lumière un sujet spécifique lié au style Windows 8. Vous devez savoir maintenant, si vous êtes ici, naviguant dans les blogs MSDN, que Windows 8 va bientôt être lancé et atterrir sur les étagères de votre commerçant favori dans les prochaines semaines. Génial ! Et vous devez être au courant également que Windows 8 est livré avec un tout nouveau modèle d’interface, encadré par de superbes lignes directrices. Ces préconisations spécifient un ensemble des détails sur la manière de designer une application, les éléments la constituant, les contrôles, les espaces et surtout comment organiser la disposition de manière claire et précise, comment utiliser les polices de manière hiérarchique, comment étaler les éléments sur un plein-écran, et comment supprimer toutes ces saletés que les gens appellent des boutons. Ces conseils et parfois ces règles sont justes géniales car elles nous servent à mieux comprendre la philosophie derrière l’OS, notamment le contrat d’interface de Windows pour les tablettes tactiles : créer une expérience utilisateur qui va réduire le temps d’apprentissage du fonctionnement des applications. Partager entre les applications une expérience commune qui conforte la confiance de l’utilisateur dans l’ergonomie et les principes mutuels des apps qui partagent le même profil. Disons le mot, la même silhouette.
La C-shape
Ok, vous avez téléchargé la Developer Preview, ou la Consumer Preview, ou la RTM de Windows 8. Voire les trois. Vous avez hanté le Windows Store et installé un tas d’applications. Vous-même, vous avez peut-être joué avec les outils disponibles pour créer toutes ces superbes apps. Super ! Alors, sûrement, et quand bien même vous seriez très myope, vous devez avoir remarqués que beaucoup de ces apps partagent un schéma commun que nous appelons la C-shape (forme en C). Cette forme spécifique a été désignée pour tirer parti des appareils Windows 8 et pour renforcer la confiance des utilisateurs qui reconnaîtront instantanément cette forme au travers des applications. Les outils utilisés pour créer ces apps, comme Blend pour Visual Studio, tirent parti de cette disposition et propose des gabarits basés sur cette C-shape. Voyons de plus près cette forme.
Vous voyez comment cette forme (ici en rouge, évidemment) se répète, d’application en application? Commençons par une analyse sommaire. Premièrement, Windows 8 est conçu pour l’usage multipoints. Cela signifie que l’objectif numéro 1 et clairement identifié de cet OS est de débarquer sur les tablettes sans compromission, notamment envers notre domaine favori qu’est l’univers PC, et faire face fièrement à ces concurrents. Pour cette nouvelle expérience, Microsoft a choisi d’adopter de nouveaux paradigmes et aussi de tirer parti de l’expérience acquise par les utilisateurs. Par exemple, les recommandations indiquent qu’une application de doit « glisser » que le long d’un seul axe, de manière à éviter la confusion et de fournir un rail solide pour le contenu et l’attention de l’utilisateur sur le sujet qu’il consulte.
D’un autre côté, Windows 8 dépend grandement des bords de l’affichage pour fournir de l’information, des interactions et de la navigation. Pour interagir, notamment, l’utilisateur invoquera la barre d’application située en bas de l’écran, ou fera apparaître la barre haute pour naviguer. Même chose pour la bande gauche de l’écran, dédiée à la bascule d’applications.
Toutes ces zones réservées sont bien sûr très utiles et doivent être persistantes dans l’expérience utilisateur. Mais une autre « loi » dit aussi que le contenu est la chose la plus importante dans une application du Windows Store. On se rend alors vite compte que ces barres ne devraient pas passer par-dessus le contenu et empêcher l’utilisateur d’accéder au contenu qu’il consulte. Voilà pourquoi Microsoft recommande d’utiliser la C-shape. Son principal avantage est en effet de libérer suffisamment d’espace pour le contenu, centré au milieu de l’interface, sans compromettre l’expérience utilisateur, ni au niveau de la navigation, pas plus qu’au niveau des interactions.
Dans l’image ci-dessus, on Remarque que le contenu n’est jamais caché par la barre de navigation. Et l’espace vide situé sur la gauche permet de basculer librement entre les applications ouvertes, même si cela porte aussi une autre signification d’importance : Si vous pouvez voir cet espace vide, c’est que vous vous trouvez au début de la page !
La C-shape a été conçue pour aider les designers à expliciter le contenu des applications sans compromis et tirer profit de l’interface à l’intérieur des applications de la même manière. N’est-ce pas cool ?
Si, bien entendu, Mais toute médaille a son revers et la mauvaise nouvelle, c’est que nous (Microsoft) avons pris l’habitude de livrer nos produits avec des outils. Et les gens aiment nos outils. Ils les aiment même tellement que parfois, ils les utilisent de manière un peu systématique. Par exemple, les gabarits livrés avec Blend pour Visual Studio sont justes ultimes pour comprendre l’idée générale et s’approprier le contexte de développement. Mais trop souvent, les designers et développeurs utilisent ces patterns comme des contenus « prêts à l’emploi », sans prendre le temps d’essayer de se montrer créatif et des créer l’écrin sur mesure pour leur contenu.
Mais la C-shape est géniale ! Alors, on fait comment ?
Comme nous l’avons vu plus haut, la C-shape est pour le moins explicite et sympa. Mais le fait de trouver aujourd’hui un très grand nombre d’applications utilisant le même motif encore et encore, sans ajouter un petit supplément d’âme, devrait nous donner matière à réfléchir. Alors quoi ?
En fait, la C-shape est une préconisation qui complète bien le matériel pour lequel elle a été conçue, par exemple une tablette Surface. Mais avec un peu de poésie, vous pouvez vous-même définir l’usage que votre application réclame de la part du « device », découvrir vos propres paradigmes, voire même, créer votre expérience singulière. Le but ultime de Modern UI (nom officiel de la charte associée aux applications du Windows Store pour Windows 8) est de porter le contenu vers un certain « état de l’Art », peu importe comment vous l’envisagez, du moment que cela reste cool, propre, propice au contenu et sexy. Ceci doit rester votre but majeur, quoi que vous puissiez lire sur le design Modern UI, sur la C-shape, etc…
Et s’íl se trouve que votre design, que l’expérience que vous voulez démontrer, que l’histoire que vous voulez raconter ne peut pas se conformer à la loi de la C-shape, et bien, brisez la loi… Et brisez la deux fois, s’il le faut ! La seule chose qu’il faut garder à l’esprit c’est que la silhouette que vous allez adopter doit rester consistante à travers tout vos écrans. Par exemple, si vous disposez un bel espace vide dans la partie basse de votre layout, tâchez de maintenir cet espace dans toutes les interfaces de l’application.
En fait, le vrai point ici est de ne pas suivre trop aveuglément les préconisations. Metro UI définit par exemple que vous devez éviter les références au monde réel, afin de parfaire une expérience authentiquement digitale. C’est génial ! Mais jetez aussi tout de même un regard à l’application Cocktail Flow, disponible sur le Windows Store. Vous voyez ces réflexions sous les verres et les bouteilles ? Mais c’est une métaphore au monde réel, ça ! Voyez comment les animations sont juste là pour le plaisir des yeux ? Est-ce que c’est Modern UI, ça ? Ah non, certainement pas ! Et ce que c’est cool ? Hooooo que oui ! Vous savez quoi ? Brisez les lois !
Un autre exemple? Téléchargez l’application My History Digest et ouvrez-la. Vous allez vite découvrir que vous pouvez « scroller » de gauche à droite, comme dans toutes les applications. Mais vous allez aussi découvrir asse vite que certains contrôles permettent aussi un scroll vertical, et tout ceci au sein de la page d’accueil ! C’est sûr nous voilà en présence d’une violation manifeste des préconisations Modern UI ! Mais voyez aussi comment l’application est fluide, comment elle est belle, colorée…Et vous savez quoi ? Cette appli un brin criminelle a traversé tout le processus de validation et finalement, elle est disponible sur le Store. Parce qu’elle est juste magnifique. Vous savez quoi ?
Brisez les lois !
Conclusion
La leçon derrière cette diatribe, et je pense que vous l’avez déjà compris, c’est de ne pas hésiter à lâcher la rampe pour aller nager un peu au large. Prenez bien-sûr au sérieux Modern UI, car cette charte est un tamis implacable et aura une grande influence sur l’expérience utilisateur de vos “clients”. Notamment sur l’adoption de l’application. Ceci dit, vous avez votre vision, votre talent singulier et êtes capable de définir en quoi votre application est la meilleure de sa catégorie. Vous savez aussi comment raconter votre propre histoire. C’est vous le chef ! Mais à vous, de votre côté, de proposer une expérience pertinente, adaptée et qui sert le but que vous poursuivez, c’est à dire délivrer le meilleur contenu possible, de la manière la plus propre et innovante possible, en maintenant une certaine persistance dans les interfaces.