[new:31/10/2012]Ne m’appelez plus jamais Metro... Donc pour l’instant il semblerait qu’il faille dire tout simplement “Windows 8 App”, même pas “Style”. Mais laissons la guerre des noms d’un côté et regardons plutôt ce qui n’a pas changé : l’ergonomie Metro et ses principes de base.
Une histoire assez longue déjà
En réalité “Metro Style” ou “Windows 8 App” (style) est un Design assez ancien qui remonte à Zune (jamais vendu en France et arrêté dernièrement, mais dont le logiciel de synchro est resté pour les Windows Phones) et qui a été “popularisé” par Windows Phones 7.
C’est ensuite, lors de la préparation de Windows 8 que ce langage de Design a été formalisé et baptisé “Metro Style” avec livret explicatif à l’appui. Toute une communication déclinée sur le côté “urbain”, “clean”, signalétique de métro.
Les démêlés jamais réglés avec Metro AG, un gros distributeur allemand, auront eu raison de cette machine à gagner communicationnelle qui perd ce qu’il y a de pire pour un produit ou une idée, son identité.
Windows 8 app, c’est une appellation un peu courte. D’autant qu’on peut faire des applications Windows 8 en WPF 4.5 sous .NET pour bureau classique faisant par exemple des appels aux API spécifiques Windows 8 et que donc de telles applications sont bien des “Windows 8 Apps” puisqu’elles seraient conçues uniquement pour Windows 8. Mais elles ne fonctionneraient pas pour autant sous “Metro”...La confusion est dans l’air pour Microsoft, et c’est peu dire !
Toutefois ces aléas patronymiques ne changent rien à ce qu’est réellement Metro Style.
Un but, une UX nouvelle et agréable
Le but ultime de Metro Style (je l’appellerai encore comme ça un petit moment pour éviter qu’on le confonde avec les fraises de bois) est de fournir à l’utilisateur une “expérience utilisateur” (UX) nouvelle, agréable, réactive et intuitive.
Pour la nouveauté, c’est gagné. On ne peut reprocher à Microsoft d’avoir copier sur ses concurrents, il y a bien innovation.
Pour la réactivité, force est de constater que les équipes Windows ont fait un travail de fond remarquable et que l’OS répond vite et bien. On l’avait déjà vu dans Windows Phone où la réactivité était plutôt bonne malgré des machines techniquement moins gonflées que des équivalents Android ou Apple.
Agréable... On entre dans le subjectif. Et dans la zones de discordes. Pour une mamie qui fait du mail à ses petits enfants ou un gamin qui passe ses journées sur Youtube et FaceBook sur une tablette, certainement, c’est très agréable. Pour le professionnel qui doit switcher entre le menu Metro Style et le Bureau classique, et qui devrait rester le bras tendu toute la journée pour faire du tactile sur une machine Desktop, le côté agréable m’échappe totalement, ainsi qu’à tous ceux qui ont testé la bête dans ces conditions... Mais nous ne sommes visiblement pas la cible du produit. Et c’est à nous de rendre tout ça agréable finalement...
Intuitive... Là aussi ça coince un peu. Metro Style réclame une formation de l’utilisateur lorsque ce dernier est déjà rodé à la métaphore du Bureau... C’est une des raisons des réticences des entreprises dans un récent sondage d’ailleurs. Je comprends parfaitement les craintes des DSI face aux utilisateurs dits “de base” (secrétaires, techniciens, infirmières, etc), tous ces gens dont l’informatique est très loin de leur enseignement et qui auront du mal à comprendre qu’il faut mettre sous pouce ici et pas là, qu’il faut rester appuyer sur ce bouton mais pas trop longtemps... Toutefois le succès des Smartphones qui utilisent déjà le tactile à tout va doit tempérer cette appréhension. L’utilisateur de base n’est pas si idiot que ça, surtout si les applications sont bien designées !
Deux points assurés sur quatre. 50% de réussite certaine, 50% à voir, c’est bien ça qui d’ailleurs rend la période si électrique : si MS avait atteint les 80% au moins on aurait l’assurance du succès de Windows 8. Avec un fifty/fifty, c’est le jeté de pièce en l’air. Ca rend tout le monde nerveux dans le monde de l’édition, ça angoisse les développeurs qui se demandent s’il faut rester sur les acquis .NET ou bien se tourner vers Apple ou bien chercher une bonne poutre pour se pendre avec le câble de leur box internet...
Il n’en reste pas moins vrai que tout ce qui est nouveau chamboule les habitudes et que nous souhaitons tous que Windows 8 soit un succès immense mettant fin à cette période de doute et d’hésitation qui n’a que trop durée tant elle est nuisible au business.
Certains malins, qui semblent avoir fait l’impasse sur les cours de logique durant leurs études d’informatique voudraient prouver que Metro Style c’est forcément bien et révolutionnaire puisque ça bouscule les habitudes. Mais tout ce qui bouscule les habitudes n’est pas forcément un progrès. Tout ce qui choque n’est pas forcément moderne. La proposition logique originale est vraie, mais sa négation ne l’est pas automatiquement !
Bref, il faudra voir, car c’est justement l’utilisateur de base qui va trancher, et il n’y a plus longtemps à attendre. Mais une chose est sure :
Metro Style sera un succès si les applications suivent. Et cela implique un design très étudié.
D’autant que cette nouvelle interface a de nombreux aspects positifs et novateurs qu’on ne peut lui retirer et qu’elle se repose sur un OS dont on a aujourd’hui l’assurance de la qualité (en tout cas en termes de réactivité, consommation électrique, consommation mémoire, etc).
Moi j’aime bien Metro Style, j’ai juste peur qu’on se lasse vite des tuiles, trop radicalement simplistes, déjà “trop vues” avant même d’être sur le marché (enfin si, WP7 existe depuis longtemps mais reste toujours très confidentiel). Mais c’est un doute personnel qui engage mes gouts et je sais que sur ce terrain je ne représente pas la masse du marché visé donc que mes sentiments ne peuvent ici être traduits en prédictions, sauf à passer pour un guru à la manque si jamais Metro style fait un tabac auprès du public !
En tout cas, “Windows 8 App style”, Metro donc, change la donne et force le marché et ses acteurs à se poser des questions, à remettre en doute ses certitudes, et c’est positif.
Reste à voir quels sont les fondamentaux de ce nouveau “Style”.
Concevoir dans l’esprit Windows 8 App
La conception d’applications Windows 8 Metro Style est très différente de celle des applications de bureau traditionnelles. Ceux qui ne sont jamais passés par la case WPF ou Silverlight vont avoir un drôle de saut à faire !
Les lecteurs de Dot.Blog qui suivent mes articles notamment sur le Design et ceux qui m’ont fait l’honneur de venir écouter ma conférence sur le Design aux dernières TechDays à Paris sont peut-être un peu mieux préparés que les autres. C’est un juste retour sur investissement pour eux, supporter mes billets et mon humour va enfin payer 
En effet, concevoir des écrans qui sont assez petits (Smartphones ou tablettes) et qui se manipulent avec les doigts n’a que peu de chose en commun avec la conception d’une application Windows Forms ou ASP.NET pour un écran de bureau et une souris ! Même le clavier n’est pas forcément présent ou devient alors virtuel, occupant une partie du champ de vision.
Ces contraintes très fortes obligent à penser la mise en page et les commandes du logiciel de façon très spécifique.
Des modèles pour comprendre
Vous trouverez ici des ressources intéressantes pour vous lancer sous Metro.
Vous y trouverez des assets pour concevoir simplement des interfaces qui correspondent tout de suite aux contraintes à la fois de look & feel et de matériel (pas de clavier, pas de souris, etc...). Beaucoup de choses utiles sont à télécharger :
- Une variété de styles (clairs ou foncés) des tous les contrôles
- Des tuiles en ratio 1x1 ou 1x2, les principaux contrats de l’interface comme les charmes, la recherche, la configuration, les barres de menu, etc...
- Des mises en page de base conçues pour le plein écran, le portait ou le mode paysage, les vues dockées
- Des templates de projets en thème foncé ou clair.
C’est un bon point de départ pour qui veut se faire une idée de ce fameux look qui n’a plus de nom mais un caractère unique...
Les design patterns de l’UX Metro
Parlons maintenant des patrons de conception de l’UX. Ils englobent les principes les plus importants pour la conception d’applications Windows 8 Metro et sont des guides précieux pour la conception finale. Ces patrons vous aideront à trouver les réponses aux questions liées à l'organisation du contenu des pages, au placement des boutons et des commandes ainsi qu’à la bonne intégration de la gestuelles et ses interactions avec l’utilisateur.
La navigation
Les patterns de navigation guide le développeur pour l’aider à organiser le contenu de ses pages, sous-pages, sections et catégories de telle façon à ce que l’utilisateur se sente à l’aise et puisse manipuler le logiciel de façon intuitive, notamment lorsqu’il s’agit de changer de page, de naviguer dans toute l’application.
Ces patterns se focalisent sur deux modes principaux de navigation.
Vous trouverez ici des informations plus détaillées et d’autres assets à télécharger.
Le design en Hub
On l’appelle aussi pattern hiérarchique. C’est celui qui a été le plus utilisé dans la Consumers Preview par les applications de démonstration. Il est particulièrement bien adapté aux applications présentant beaucoup d’information dont la nature peut elle-même variée sensiblement.
Le contenu est organisé en “niveaux” et chaque niveau est responsable de la présentation d’un contexte spécifique. La page la plus haute de la hiérarchie, aussi appelée “Hub page” ou “page initiale” est l’emplacement où l’information est présentée en différentes sections et différents contextes. Généralement la Hub page propose beaucoup de catégories et de contextes mais peu de commandes et de fonctionnalités. Son but principal est de présenter de façon synthétique l’ensemble de l’information proposé par l’application.
Chaque section de la page Hub est associée à une page de Section qui est un peu plus spécifique dans sa présentation. Une page de Section contient généralement de nombreux items, chacun d’entre eux faisant l’objet d’un affichage détaillé dans une page dite de Détail. C’est le 3eme et dernier niveau de ce pattern de navigation.
Le design plat (flat design)
Ce pattern de navigation est principalement utilisé par des applications qui ont un but précis et facilement identifiable. Les interactions et le flux navigationnel sont clairs. C’est le cas des applications de création de documents par exemple qui possèdent un nombre restreint de pages qui doivent s’exécuter dans un ordre logique quasi immuable.
Les commandes
Les patterns de gestion des commandes que vous pouvez trouver ici décrivent les meilleures pratiques dans les applications Metro pour placer et utiliser des boutons de commande de toutes les façons possibles.
L'accent est mis sur ce que l'utilisateur devrait être capable de faire et comment cela devrait se produire. Lorsque cela est possible vous devez permettre de manipuler les éléments et d'exécuter les commandes directement à partir du canvas principal d’affichage et non par les charmes ou la barre de l'application. Les boutons de commande doivent être utilisés systématiquement dans toutes les vues de l'application d’une même façon constante et intuitive pour que les utilisateurs puissent exécuter les commandes partout sans avoir à se poser de questions. Afin de limiter la complexité, le nombre de commandes doit rester assez faible. On doit toujours tenir compte de l'emplacement des boutons pour améliorer l’ergonomie et la rapidité d’action.
Il existe des guidelines pour les opérations impliquant les opération tactiles, vous les trouverez ici.
La zone de confort des interactions
Si sur l’écran tactile d’un PC le confort reste moyen quelle que soit la position de l’utilisateur (à moins de mettre son moniteur 23” sur ses genoux...), il y a une façon de tenir une tablette tactile qui, de facto, rend certaines zones plus propices aux interactions et d’autres moins commodes d’accès.
Ci-dessus on voit un schéma des trois zones de confort sur une tablette et un smartphone, de la zone la meilleure pour les interaction “best” à la zone la moins pratique “ok” en passant par la zone intermédiaire “better”.
La zone de confort pour la lecture
Hélas cette zone de confort ne se confond pas réellement avec la précédente, ce qui implique une conception bien pensée pour satisfaire toutes ces contraintes ! On peut même dire qu’en fonction de la contrainte de confort pour les commandes la zone de confort de lecture est quasiment inversée :
La gestuelle standard
Windows 8 possède un nombre de commandes tactiles standard, des gestuelles qui doivent conserver le même sens tout le temps pour ne pas rendre fou l’utilisateur !
Les éléments de l’interface qui peuvent être déplacés doivent suivre la direction du doigt tant que l'affichage est touché, tout comme dans le monde réel – le stylo est dans votre main jusqu’à ce que vous le reposiez sur le bureau.
Toutes les interactions doivent être pistées par l’application, c'est-à-dire que l'utilisateur doit sentir ou voir une indication (rétroaction) de ses actions.
Il n'est pas acceptable d'appuyer sur un bouton avec un doigt et de ne voir aucun flash ou un autre type de rétroaction. L’utilisateur sera alors induit en erreur, pourra penser que l’action n’a pas été prise en compte ce qui l’incitera à refaire le geste (ce qui peut perturber l’application si elle ne gère pas convenablement les commandes en les désactivant tant qu’elles ne doivent plus être manipulées, etc).
Enfin, il toujours tenir compte de la taille des objets manipulables. Le taux d'erreur augmente quand la taille diminue. La taille minimale recommandée pour une cible de touch est de 7 x 7 mm (40 x 40 pixels) avec au moins 2 mm de padding. Ce genre de “détail” est essentiel et possède un impact gigantesque sur le design des écrans.
Les interactions tactiles sont importantes surtout pour les unités mobiles (smartphones et tablettes). Pensez bien au fait que ces interactions forment un véritable langage pour communiquer avec l’utilisateur, il faut que ce langage soit parlé de façon fluide et limpide...
Conclusion
Vous devez concevoir vos applications en vous mettant à la place de l’utilisateur, c’est un facteur essentiel de réussite et même de viabilité pour vos logiciels.
Pour cela les simulateurs de développement ne suffisent pas. Il faut des machines réelles sous le main pour tester et surtout “faire tester” par vos amis, votre famille, surtout pas vos collègues !
Il faut aussi de vrais designers. On n’engage pas un infographiste pour lui faire concevoir les écrans d’une application, ce n’est pas possible. Il faut des spécialistes qui connaissent toutes les contraintes techniques, que cela soit sous Silverlight, sous WPF et encore plus sous WinRT.
Il y a quelques informaticiens très doués pour le dessin, ils sont très rares, comme les infographistes étant capables de prendre en compte les contraintes techniques de plateformes techniques complexes comme .NET ou WinRT.
Ce qui est rare est cher. Mais surtout c’est rare...
Au sein de e-naxos je cherche toujours à proposer les meilleurs services au prix le plus juste. Ce qui est rare est cher, mais ne doit pas être hors de prix non plus... Pour régler ces problèmes de design j’utilise mon savoir-faire de compositeur (la musique et le dessin ont beaucoup en commun quand on les pratiques en les conceptualisant sans cesse) mais pour la qualité du tracé, l’idée graphique que je n’aurai pas, je m’appuie sur ma collaboration avec un infographiste. Plutôt que de chercher la perle rare sachant tout faire, je préfère ainsi proposer un tandem qui regroupe les deux compétences, cela coute cher, forcément, mais c’est accessible. Et mes clients ont l’assurance que graphiquement et techniquement le design de leurs applications sera pensé dans les règles. Car un beau dessin d’interface qui ne prend pas en compte les contraintes techniques coute très cher à (mal) réutiliser, de même qu’un design approximatif reste mauvais même si techniquement il respecte toutes les contraintes...
Dans un monde où l'utilisateur est au pouvoir et définit les normes, la conception et à la convivialité de votre application est l'emballage. Et un mauvais packaging dans un tel monde ne doit même pas être considéré comme une option.
Les utilisateurs zappent très vite sur un market place. Le look & feel de vos application est l’élément essentiel si vous voulez avoir ne serait-ce qu’une petite chance que vos applications soient téléchargées et testées... Et lorsque l’utilisateur vous aura fait cet honneur, vous n’aurez que quelques secondes, quelques minutes au plus pour le séduire et ne pas le décevoir. Personnellement quand je cherche une application faisant quelque chose de précis sur un market place il m’arrive de télécharger 5 ou 10 applications l’une derrière l’autre. Je ne leur laisse qu’une poignée de secondes pour me donner envie d’aller plus loin, et j’agis ici comme la grande majorité des consommateurs. Pensez-y !
Le lecteur intéressé par le sujet pourra se référer aux billets et vidéos suivants :
Créer des interface graphiques efficaces ! (un voyage initiatique au pays du Design) [long billet]
Le Design d’Interfaces efficaces et vendeuses [PDF]
Session DES150 TechDays 2012 sur le Design [vidéo]
Bon Design,
Et Stay Tuned !