Microsoft vient d'annoncer de nouvelles guidelines en termes de design et d'ergonomie. Il s'agit d'une grande étape pour Microsoft qui quitte le monde du flat pour entrer dans un nouveau paradigme immersif et multi-dimensionnel qu'il introduit sous le nom de "Fluent Design" aussi connu sous le nom de code "Neon"... Voici son logo :

Pourquoi est-ce important ?

Tout d'abord car le monde de l'interaction homme-machine au sens large du terme est en train d'évoluer : les outils/périphériques/unités de calculs sont de plus en plus divers, répandus et interconnectés(Microsoft parle d'Ubiquitous Computing).

Nous sommes habitués aux écrans plats (montres, téléphones, ordinateurs, télévisions, etc.) mais la réalité virtuelle ou mixte commence à prendre de l'ampleur. Il ne faut pas non plus oublier les interfaces à ... 0 dimension que sont les bots ou les périphériques commandés par la voix (Alexa, Cortana, etc.)...

Ces différentes interfaces sont aussi à considérer en termes d'interactions avec l'utilisateur : via la voix, via le toucher, via un clavier, via un stylo, via des accessoires dédiés, gestures visuelles, etc.

Cela devient encore plus complexe lorsque l'on envisage que les utilisateurs passent d'un device à un autre et souhaitent garder le même contexte !

Et deuxièmement parce que les attentes des utilisateurs en termes de créativité deviennent de plus en plus grande. Il n'y a qu'à regarder le succès des filtres Snapchat ou Facebook pour en avoir un exemple. Les gens communiquent maintenant pas uniquement via la voix mais surtout en racontant des histoires.

Les utilisateurs s'attendent à retrouver cette créativité au sein des interfaces applicatives qu'ils utilisent : immersivité, expériences sensorielles quel que soit l'usage (pro ou particulier).

Quels sont les axes de travail ?

Microsoft propose de travailler autour de 5 grands axes.

Lumière / Light

Permet de montrer facilement à l'utilisateur où il se trouve, ce qu'il faut regarder. Cela permet aussi de créer une certaine dimension émotionnelle plus immersive.

Profondeur / Depth

Cela est massivement utilisé dans les jeux vidéos et il est naturel de le retrouver dans les applications.

Mouvement / Motion

Permet de donner de la vie dans tout ce que l'on fabrique. Permet aussi de donner du contexte.

Etoffe / Material

Donne de la chaleur à une interface et donne envie de la toucher. Permet aussi d'instiller une hiérarchie visuelle.

Echelle / Scale

Il est bien sûr important de faire une interface capable de s'adapter à n'importe quelle taille d'écran ou au monde physique.

Comment va se manifester ce langage ?

Microsoft va commencer à intégrer ce nouveau langage visuel à partir de la mise à jour "Fall Creator Update" mais va le déployer par vagues. Ce que nous voyons maintenant est donc la première et les suivantes en seront des évolutions basées notamment sur le retour des utilisateurs mais aussi les nouveaux usages émergents.

La première vague est constituée notamment de plusieurs éléments :

• Une nouvelle animation de survol des éléments actifs (notamment les boutons) : on passe d'un mode binaire(actif/inactif) à une utilisation de la lumière pour montrer l'élément actif. Dans la capture d'écran de la calculatrice on peut par exemple voir comment la bordure des boutons actifs autour du 5 s'illuminent pour montrer à l'utilisateur qu'ils sont cliquables. Cela sera intégré de base dans les contrôles du Framework.
• Acrylic material : le fameux fond "semi-flou" qui permet de voir le fond d'écran par derrière l'application. Microsoft nous promet que beaucoup de choses se passent sous le capot pour produire cet effet visuel.
• Connected animations : déjà présent dans les précédentes versions (notamment l'anniversary update comme vous en parlait Jérôme dans son article de blog), les animations connectées deviennent la norme pour passer d'un écran à un autre.
• Conscious control - Faire que les interfaces graphiques aillent plus loin que d'être simplement responsive mais qu'elles aient conscience de ce que veut faire l'utilisateur. Ce sont notamment des petites touches à droite et à gauche comme l'élargissement d'une scrollbar lorsque l'utilisateur approche sa souris ou encore des zones de textes qui s'agrandissent lorsque l'utilsateur approche un styler au lieu d'utiliser son clavier.
• Perspective Parallax - donner de la profondeur et un sentiment de hiérarchie à vos interfaces. On retrouve ici des choses déjà vues sous Windows 8... mais qu'on appréciait :)

Et après ?

Microsoft a déjà en têtes les prochaines évolutions de ses guidelines avec notamment :

• la lecture de vidéos ou images à 360° : comment rendre cela intuitif pour les utilisateurs quel que soit son périphérique (écran plat versus HoloLens par exemple) ?
• Conscious headers : rendre les entêtes de liste dynamiques un peu à la manière de ce que l'on retrouve sur iOS.
• Speech, son spatial, Z-depth layering, etc.

Par où commencer en tant que développeur / designer ?

Pour éviter de se retrouver un peu perdu devant ce nouveau système de design, Microsoft propose de nous guider via la plateforme elle-même (applications natives, les contrôles du SDK et les samples) mais aussi de la documentation et des exemples.

Tout se trouve sur http://fluent.microsoft.com/ !

Plus important encore peut-être, Microsoft a travaillé avec Adobe pour intégrer directement le langage Fluent au sein de leurs outils et notamment au sein d'Adobe XD.

Que retenir ?

Au premier abord ce sont des modifications minimes au sein de Windows (et Microsoft au sens large) mais on peut se rendre compte qu'il s'agit ici d'un changement plus profond pour quitter (enfin diront certains) le monde de l'a-plat si cher à Microsoft jusqu'ici. La stratégie ici tenue de ne pas tout changer d'un bloc mais d'y aller par étapes ne peut que s'avérer payante. J'ai hâte de retrouver ces designs dans Windows et ... nos applications !