Fluent Design System : Il faut penser global !

Je le répète assez souvent: Depuis quelques années, Microsoft produit une expérience utilisateur très innovante et souvent en avance de phase avec les tendances du marché. On citera volontairement le Flat Design, dont le principal étendard était Microsoft Modern Langage (ou Metro), popularisé avec la gamme Windows Phone 7.

Metro ?

Oui, le style et la charte radicalement différente de Microsoft pour son OS mobile, apparue en 2010, en mettant en exergue des valeurs de simplicité, de scalabilité, et de lisibilité, fut le premier à se vouloir « Mass Market », tout en se positionnant comme volontariste et innovant. En reprenant les codes du design helvétique, et en se basant sur l’élégance classique de la sobriété et de la lisibilité des polices, en portant ces recettes du monde du print vers le numérique, Microsoft faisait la preuve que des alternatives à l’ergonomie iOS, essentiellement skeuomorphiques à l’époque, existaient. Cette charte graphique fut ensuite reprise comme étendard de l’expérience de la famille Windows, avec les produits Windows 8, 8.1, Xbox One, mais aussi Windows 10, qui en est la représentation actuelle,  évoluée et maturée au contact des impitoyables retours d’expériences des utilisateurs.

Image de Windows Phone 7Windows8

Mais pourquoi, docteur ?

Loin d’une simple amélioration, Fluent Design propose une remise à plat globale des chartes graphiques de l’univers Windows. C’est d’ailleurs pour cela que l’on parle de « système » et pas de guidelines. (Une guideline est notamment utile lors de l’émergence d’une nouvelle fonctionnalité qui ne remet pas en cause l’intégralité de l’expérience -comme le support des notes dans Edge par exemple). Cette refonte est nécessaire car le medium et l’espace de travail de la gamme Windows continue de s’étendre hors des frontières initialement imaginées. On le sait, L’Os de Redmond s’exécute sur des machines qui affichent le contenu informatif en 2 dimensions. C’est le cas de toutes les générations de machines à écran, que cela soit le téléphone mobile, la tablette et le PC sous toutes ces formes, de 4 à 84 pouces.

Les PC de la gamme Surface

Pour autant, la génération montante de matériels sans écran (tels que les assistants  et boutons connectés, haut-parleurs intelligents, …), mais aussi l’arrivée de médias immersifs et l’avènement de la Mixed Reality (HoloLens, casques de réalité virtuelle) poussent l’interface de Windows dans ses derniers retranchements. Une nouvelle vision permettant à Microsoft d’adresser l’information en 2D, mais aussi en 3D, 4D ou même 0D devient donc impérative.

Image de nouveaux devices de realité mixte

Enfin, la volonté de renforcer certaines pratiques UX ou de nouveaux usages est aussi vecteur de changement. On citera ici l’arrivée des contrôleurs avancés (comme le Surface Dial), l’emploi systématisé de la voix comme interface (Cortana), l’emploi massif de contenus 3D (PaintD, 3D pour PowerPoint) ou le support des gestuelles et micro-gestures (Kinect, HoloLens).

Image inspirationelle du design Fluent

Image inspirationelle du design Fluent

On notera cependant que la première interface Fluent Design publique reste celle d’HoloLens, mais ce système est destiné à s’appliquer au software autant qu’au matériel.

Image du Shell HoloLens

Les 5 piliers

Fluent Design System repose sur 5 axes permettant de symboliser la volonté de Microsoft pour cette nouvelle génération d’interfaces. Ces 5 paradigmes sont autant de propositions visant à définir l’aspect, l’expérience, mais aussi la réflexion de Microsoft sur le sujet, permettant d’élaborer de nouvelles UX dans un avenir proche.

La profondeur :

Notre  vie est en 3D. On voit en 3D. On entend en 3D. Pourquoi nos systèmes informatiques ne reflètent pas cette réalité ? Par souci de complexité (actions masquées comme avec le 3D touch d’Apple)? Pour réduire la charge cognitive ? Windows Vista l’avait montré, c’est autant un souci d’UX que de capacités matérielles. Faire travailler une interface en 3D demande des ressources graphiques qui ont un impact critique sur les performances de la machine, autant que sur sa durée d’autonomie, point crucial aujourd’hui. En plus des ressources intellectuelles de l’utilisateur, pas toujours éduqué pour naviguer un contenu 3D.

Depth

Certains contrôles UWP (Universal Windows Platform) sont donc revus pour offrir une vision en 3D tout en utilisant des ressources comparables et rester au même niveau d’exigence de fluidité, tout en garantissant une interface simulant la profondeur, pour amener plus de contexte au contenu. C’est le cas du nouveau « brush » Background Acrylic, qui floute les éléments se trouvant directement dessous, sans perte de performances.

Un exemple de Brush Acrylic

Cela passe également par le retour d’ombres portées très douces, le grossissement des éléments au survol, des animations de défilement parallaxe, ou encore le support du son spatialisé. Tout ceci dans le but de permettre un environnement plus hiérarchique, contextualisé et comprenant la 3D nativement.

La lumière :

Notre environnement est fait de photons qui permettent de donner du volume à notre perception. L’ombre portée, souvent utilisé en UI, est une des conséquences d’un éclairage, permettant de mettre en avant un asset graphique particulier. Cet aspect, un peu délaissé par Microsoft Design Langage signe son retour avec Fluent.

Light

De retour car les exigences de la 3D, de la VR et de la Mixed Reality l’imposent. Sans lumière, tout est plat, sans nuances, ce qui est incompatible avec une perception en 3D. Perception et utilisation également: Comment savoir si un élément est bien sous le coup d’une sélection si on ne « l’allume » pas?

Le roll-over est une exemple d’éclairage porté à un objet, et c’est encore plus flagrant sur les objets connectés, comme sur le Amazon Echo, ou une bague lumineuse indique la direction de la personne écoutée par le device.

On fera ainsi apparaître un léger éclairage sur les objets survolé (sous le curseur de votre pointeur), un appui sur l’item fera apparaître une vague lumineuse (Reveal Highlight), tandis que les blocs d’informations feront apparaître une ombre portée légère au survol. On pourra jouer également avec les bordures des éléments en les éclairant indépendamment.

Example d'animation de menu

RO

Le mouvement :

Bien que disposant d’un chapitre spécifique sur le sujet dans Microsoft Design Langage, il faut bien reconnaître que Material Design de Google a apporté un lot de nouveautés considérable sur le sujet. Il fallait donc remettre en ordre les prétentions de Microsoft sur le sujet des animations.

MoveEncore une fois, les animations de scrolling permettra de mettre en avant les effets devenus classiques, comme le parallaxe scroll. On y ajoutera les animations de conteneurs, comme le header persistant, mais moins grand, lors du scroll (histoire de conserver sa navigation accessible).

On devrait ainsi voir apparaître beaucoup plus d’animations contextuelles (survol, animations asymétriques), d’animations de feedbacks (loading, waiting, …), d’adaptation de contenu vers contenu (clic pour ouvrir un panneau, animation du panneau, animation dans les items du panneau), d’animations connectées (clic sur un item qui déclenche une animation contextualisée ailleurs). Ces animations seront rendues également possibles et faciles d’intégration grâce aux contrôles dit conscients du contexte.

Animation de controles

Les matériaux :

Se vouloir plus beau, plus attrayant, c’est aussi se vouloir plus proche des sens. Rapprocher l’expérience numérique des expériences physique, comme le propose la réalité mixte, en somme. L’idée d’abolir la barrière entre pixels et photons n’est pas neuve en soit, mais Microsoft entame une réflexion sur l’aspectisation des items numériques (doux/rugueux, lisse/granuleux, transparent/opaque) pour enrichir à nouveau la charte graphique des applications.

MatSi cet aspect ne se traduit vraiment (pour l’instant) que par le brush Acrylic, déjà évoqué plus haut, il est notable que ces notions existent déjà en 3D où l’emploi de shaders complexes permettent un rendu photo-réaliste des surfaces (employant au passage des termes barbares, tels que SubSurfaceScattering, multi directionnal reflectance distribution, etc…).

Cubes en 3D rebondissants

En 3D également, on implique les matériaux pour identifier des caractéristiques physiques (rebond, friction, …), donc, pour une certaine frange des animations. On évoquera bien entendu aussi la voix, comme un matériau spécifique de l’expérience utilisateur, ainsi que l’utilisation propre des machines (le stylet sur la dalle en verre, le contact du doigt avec un objet numérique).

L’échelle :

Depuis la convergence des plateformes de développement et l’avènement de UWP, les caractéristiques de mise à l’échelle des applications, via le développement responsif, puis adaptatif sont autant de piliers de la famille Windows. C’est d’autant plus vrai aujourd’hui, dans un monde où les applications peuvent être utilisées en holographie, déplacées dans un monde virtuel et persistant.

ScaleLe concept d’échelle s’applique de manière plus large à tout l’éventail des interfaces mis à votre disposition. On ajoutera ici, que, pour scaler une interface visuelle sur un device sans écran, on tirera profit de la dimension sonore. Sinon, nous avons déjà quelques outils à notre disposition pour scaler, tels que les contrôles conscients, les animations connectées.

En plus de la batterie classique des outils XAML, comme le layout responsif, les plateaux de résolution, les adaptive triggers ou encore les relative panels.

Image montrant une interface responsive animée

Une évolution en douceur

L’arrivée de Windows 8 et de Microsoft Design Langage avait déconcerté les utilisateurs. Trop de changements trop vite. C’est pourquoi le déploiement de Fluent Design se fera progressivement, en prenant en compte systématiquement les feedbacks des utilisateurs. Fluent Design est testé depuis quelques temps sur les versions béta publiques et privées de Windows, et les utilisateurs sont invités à commenter et apporter leurs idées à ce programme pour enrichir l’expérience de l’OS. Un groupe Linkedin est d’ailleurs à votre disposition pour discuter prospective, inspiration et feedbacks.

Nous sommes actuellement en « Wave1 », durant laquelle Microsoft consolide sa proposition et étudie des exemples d’applications re-développées en intégrant Fluent Design. Sont intégrés à ce stade le Reveal Highlight, le matériau Acrylic, les animations connectées, les contrôles conscients et les parallaxes perspectifs.

Viendront ensuite les autres phases, après l’automne, avec déjà des contrôles en cours de réflexion, comme le playback 360° (déjà en usage sur la plateforme Xbox One, dans l’application « Films et TV », si vous aimez fureter…). Encore une fois, l’idée est de faire évoluer Fluent Design avec les utilisateurs, en respectant les 5 grands paradigmes édictés plus haut. Vous pouvez laisser vos avis, remarques et envies ici. On pourra également se faire une idée des contrôles disponibles via l’application XAML Controls gallery, disponible sur le Windows Store US.

Exemple d'application listant les contrôles XAML

Finalement, je tenais à vous rappeler la phrase d’accroche de Fluent Design: Tout un programme !

Un design éloquent pour un monde complexe

Liens :

https://fluent.microsoft.com/

https://developer.microsoft.com/fr-fr/windows/apps/design

https://www.microsoft.com/en-us/Design/community

Publicités