En 2014, Google présentait le Material Design à l’occasion de la conférence annuelle Google I/O. Cette nouvelle règle de restructuration du design est également appelée design contextuel, même si l’expression est un peu délaissée sans doute parce que finalement moins accessible, bien que les termes utilisés soient français (qu’en disent nos amis québécois, voilà la vraie question).

Depuis son arrivée, le Material Design a bien évidemment suscité curiosité et discussions. C’est une tendance ? C’est un langage ? C’est une tendance incarnée dans un langage ? Dans tous les cas, le sujet mérite qu’on s’y arrête, notamment parce qu’il soulève des questions UX, de celles qui ne cesseront probablement jamais de nous passionner. UX un jour, UX toujours…

Le material design en quelques mots

Commençons par la définition de Google himself, dans son introduction officielle au Material Design :

a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science

Le Material Design repose sur trois principes :

material is the metaphor : un principe de réalité tactile, inspiré par le papier et l’encre mais qui puisent dans la technologie, l’imagination et la magie d’interprétation de ces matériaux. Avec l’affordance comme priorité et l’utilisation de la lumière, du mouvement, des surfaces…

bold, graphic, intentional : flatter l’oeil, oui également faire preuve d’empathie et surtout donner une architecture et un sens au contenu pour proposer à l’utilisateur une expérience immersive.

— motion provides meaning : les mouvements déclenchés par l’utilisateur préservent l’unité de lieu, le design se transforme et se réorganise sans rupture de l’expérience utilisateur.

Les trois combinaisons du Material Design

Source : Uxdesignmastery.com

Certains voient dans le material design une évolution du flat design, le mouvement en plus, tandis que pour d’autres, c’est une véritable innovation.

Notre cerveau est capable de comprendre qu’une ombre est synonyme de volume ou de changement de plan : le material design utilise justement des classiques du flat design en leur injectant une dose supplémentaire d’affordance par les ombres, les dégradés de couleur…

Material Design et UX

Le Material Design, c’est donc un design unique pour tous les services Google, c’est à dire que sur chaque terminal (tablette, smartphone, phablettes…) le design reste le même,  avec à la clé, une expérience utilisateur optimiséeAnthony expliquait récemment les contraintes que nous nous mettons volontairement pour envoyer des emails accessibles, qui s’adapteront à un maximum d’usages. Google ne dit souhaiter rien de moins quand il précise que penser mobile, c’est important et même indispensable… mais ce n’est pas une raison pour laisser de côté la souris et le clavier.

On évoquait aussi plus tôt le skeuominimalisme, envisagé comme un pont entre le skeuomorphisme et le flat design. Comme cette tendance hybride, le Material Design valorise l’affordance, qui faisait parfois défaut au skeuomorphisme : quand on représente un carnet de contacts par l’icône d’un vrai carnet avec des feuilles, on peut s’attendre à la possibilité de les tourner… alors que non. On laisse alors l’utilisateur son smartphone à la main, inconsolable.

User mobile

Source : Google.com

Côté designers, la révolution se trouve du côté de l’animation : le mouvement est au cœur du Material design, source de lien et de fluidité, et rassure l’utilisateur sur les conséquences de ces actions.

On parle donc bien d’UX et si tout n’est certainement pas Material Design, on continue à baliser le chemin du web design vers l’utilisateur et ça, c’est plutôt enthousiasmant !