Avec la fin fulgurante de la Skeuomorphie à partir de 2010, le style Flat prend la relève – inauguré dans l’interface de Windows 8 – et s’impose rapidement dans les 3 années suivantes. C’était l’époque “disco” du design numérique – de la couleur, du mouvement à la Bootstrap, des polices criardes.
Le Flat Design a imposé plusieurs changements par rapport à la Skeuomorphie qui impactaient la conception ergonomique et éditoriale :
- Graphiquement, le Flat a supprimé tous les artifices esthétiques comme les ombres, les dégradés, la matière, la 3D des éléments numériques. La profusion de couleurs est, pourtant, autorisée et les couleurs associées à un “univers” sont à la mode.
- Ergonomiquement, les icônes font leur apparition comme aide informationnelle (voire comme information tout court). Il y a une naturalisation d’un certain nombre d’icônes comme le petit-coeur pour “Favoris”, le caddie associé à l’action “Acheter”, le gros-bonhomme pour “Mon compte”. Quelques fonctionnalités, très fortement inspirées des components de Bootstrap, envahissent les écrans – les toggles, les diaporamas, les menus burger. Flat Design est un style où on bouge, on se déplie, on se flip.
- Côté éditorial, les images décoratives disparaissent. Dans le Flat, l’image est uniquement informative.
Après une vie dédiée à la Skeuomorphie, s’adapter au Flat demandait une veille attentive dans des sites comme Dribbble et un retour aux forums professionnels pour essayer de comprendre et de ne rien rater de ses nouveautés, surtout quand on n’a pas assez de recul pour comprendre leurs motifs.
En 2014, re-changement de cap : Google présente son design system Material Design. Contrairement au style Flat Design, qui a été conceptualisé de façon dispersée et légèrement anarchique dans le web, Google présente le style et sa doc assortie. Material Design avait, à cette époque, des particularités qui faisaient que ses directives étaient très révolutionnaires. Tout d’abord, elles étaient sémantiques car Material intégrait totalement le concept d’interaction homme-machine dans tous ses composants et styles.
Par exemple, contrairement à Flat, qui avait banni tous les artifices associés à l’Skeuomorphie, Material récupère quelques éléments skeuomorphiques comme les ombres et la 3D. Cependant, Material donne à ces éléments un sens sémantique : une ombre sur un champ de texte signifie à l’utilisateur.trice que le support a compris son intention de saisir, le champ est ainsi sélectionné.
Dans cette première version, Material Design considère tous les superflus comme des parasites attentionnels, une serif devient un superflu et la police officielle de l’internet devient Roboto (à savoir, une variante d’Arial mieux fichue).
Et surtout, il intègre la gestuaire mobile, en prenant en compte un apprentissage collectif de ces outils par l’utilisateur.trice final.e. Quand Google introduit Material en 2014, une quantité exponentielle d’utilisateur.trice.s commencent à migrer des écrans desktop vers les écrans mobile – avec toute les implications qui font avec : des nouveaux gestes pour les interactions et actions comme les clics, etc, une surface plus petite pour l’affichage de l’information, une nouvelle appréhension du mouvement dû au rétrécissement de l’écran, entre autres. Et Material Design est 100% affiné avec ces nouveaux usages, toutes ses consignes ergonomiques privilégiant les supports smartphone.
Dès sa sortie, j’ai commencé à me pencher sur ce design system non comme un catalogue de guidelines ergonomiques mais comme un puissant traité de communication ergonomique : chez Material Design, tout s’accordait pour créer une expérience utilisateur intuitive, fluide, engageante.
Tout comme Bootstrap m’avait initié à l’accessibilité numérique en 2011, Material Design m’a permis d’entamer, en 2014, un apprentissage plus formel et théorique sur l’ergonomie.
