“Material is the metaphor”
Le Material Design est une évolution logique dans l’approche des interfaces Homme-Machine des dernières années. Pour esquisser cette tendance au cours de la dernière décennie, résumons celle-ci en trois étapes majeures.
Copier la réalité : le Skeuomorphisme
Élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine. Wiktionary
Une fonction est symbolisée par une représentation détaillée de son alter ego en dehors du système.
Cette tendance trouve sa justification dans la volonté de rapprocher le monde réel et le monde virtuel, y compris aux yeux d’utilisateurs moins expérimentés. Bien que ce type de design soit moins présent aujourd’hui, il n’en demeure pas moins beaucoup utilisé dans les interfaces de logiciels spécialisés, comme ici Garage Band par exemple pour la musique.
Se concentrer sur le message : le Flat
Le Flat Design est né de la volonté à la fois de se concentrer sur l’information, mais également d’accompagner les évolutions techniques. Son principe est de simplifier à l’extrême les représentations des fonctions, par les formes et les aplats de couleurs afin de garder une cohérence globale. Ce n’est pas un hasard si cette tendance a accompagné le développement du Responsive Design, qui ne laisse que peu de place au superflu et se concentre sur une constante hiérarchisation de l’information, et qui préfère utiliser les représentations simples vectorielles plutôt que celles détaillées pouvant difficilement être mises à l’échelle.
Le meilleur des deux mondes : Material Design
Partant du constat que le Flat Design peut se perdre dans le minimalisme et en devenir contre-productif du point de vue de l’ergonomie, le Material Design tend à redonner aux interfaces une composante tri-dimensionnelle et matérielle. Alors que le Flat éliminait toute notion d’ombre, jugée superflue, Material les réintroduit et utilise ainsi les ombres portées afin de mettre en emphase l’élévation relative des éléments les uns par rapport aux autres.
L’autre composante majeure de Material consiste en son utilisation d’un matériau de base qui imite les propriétés du papier. Cette approche permet de définir les règles physiques qui s’appliquent à ce matériau, règles qui se rapprochent fortement de celles auxquelles nous sommes habitués lorsque nous manipulons des Post-its. Ce comportement unifié, tel que par exemple le fait que deux objets ne peuvent occuper simultanément le même emplacement, permet une compréhension instinctive de l’interface par l’utilisateur. Cet instinct est renforcé par un autre principe du Material Design : Motion provides Meaning. Les animations sont encouragées tant qu’elles donnent du sens à l’action et permettent de donner un retour immédiat à l’utilisateur, mais non dans un but purement esthétique. Enfin, malgré la volonté d’uniformisation des périphériques, ces règles demeurent légèrement adaptables en fonctions de critères techniques comme la définition de l’écran et le support de l’accélération matérielle pour le rendu.
Vers une uniformisation du Design ?
Le principal reproche adressé au Material Design est également de mise pour le Flat Design. Il est en effet légitime de s’inquiéter d’une codification universelle du design qui pourrait être perçue comme un frein à la créativité et à l’originalité. Je pense pour ma part qu’à l’image de n’importe quel outil graphique préconçu, une direction artistique et ergonomique forte dès le début d’un projet permet de garder une identité propre. De plus, Material ne se présente pas comme la solution unique, mais en tant qu’exemple d’application de bonnes pratiques de conception d’interface, énoncées par Google. Citons par exemple l’étude des fonctions d’easing et des meilleures trajectoires en fonctions des axes de déplacements (notamment la prise en compte d’une composante de gravité sur l’axe Y) afin d’obtenir les déplacements d’éléments les plus naturels possibles.
Quelques ressources
La “bible” du Material Design :
Deux frameworks Material :
Material Design Lite
A front-end template that helps you build fast, modern mobile web apps.
getmdl.io
Utiliser des composants Material avec AngularJS
