Image de présentation pour l'article expliquant ce qu'est le material design de Google

Qu’est-ce que le Material Design de Google ?

Comme vous le savez, Google est partout autour de nous et a une notoriété hors du commun grâce à son moteur de recherche, le système Android de nos téléphones ou encore l’incontournable YouTube. Afin d’unifier graphiquement l’expérience utilisateur de toutes ses plateformes et applications, l’entreprise a carrément développé un langage visuel appelé le « Material Design ».

 

Une métaphore du papier et de l’encre

Ils l’ont nommé « materiel » car il s’inspire du monde physique et de ses textures en étudiant le reflet de la lumière et les projections des ombres. C’est donc une métaphore du papier et de l’encre qui rappellent les racines de nos modes de vies pour les traduire sur des outils digitaux (ordinateurs, mobile,…). Cela a pour but de générer de l’affordance. Pour rappel, il s’agit de  la capacité d’un objet ou d’un système à évoquer son utilisation, sa fonction. En d’autres termes, cela permet d’offrir à l’utilisateur les moyens de se servir d’un objet et si possible sans mode d’emploi. On retrouve cette notion tous les jours : par exemple, on appelle « bureau » l’écran de notre ordinateur où l’on range des dossiers, une boite à outils regroupant nos logiciels ou encore la corbeille. Au travers cette interface, on retrouve la notion de bureau de la vie réel sur lequel on range nos différents fichiers, où on a tous nos stylos à disposition et la poubelle qui est proche de la chaise.

 

Par le biais de cette notion d’affordance, Google voulait, grâce à ce langage visuel, rendre tous ses outils accessibles et identifiables de tous. Au final, il s’agit d’un ensemble de règle de design qui composent ce langage afin de le rendre intuitif, adapté à tous les supports, interactif et homogène. L’une des bases de toutes ces règles est l’environnement 3D. Effectivement, puisqu’il s’agit d’une métaphore au papier et à l’encre, n’oublions pas que ces éléments ne peuvent être traversés et seul l’élément touché par l’internaute va réagir. On se retrouve donc avec trois coordonnées : X, Y et Z. L’axe Z concerne le niveau d’élévation d’un objet, ce qui va avoir un impact sur la dimension de son ombre et de sa disposition. En travaillant autour de ces trois axes, un élément peut être mis en avant suite à une action de l’utilisateur pour lui exprimer que son action est bien effectuée. Par exemple, lorsque vous voulez supprimer plusieurs de vos mails sur votre application gmail, vous appuyez longuement sur un des mails, une bulle s’affiche pour afficher ceux sélectionnés ou non pour enfin les supprimer grâce au pictogramme de corbeille situé en haut. Ce type d’animation vous aide dans votre navigation et répond à votre besoin de suppression de mails. Grâce au design qui évolue, vous savez qu’une action a bien été faite ou non.

Image présentant le principe d'élévation du Material Design de Google

Google a développé une réelle tendance graphique issue d’études et de recherches diverses afin de plaire à tous ses utilisateurs et le rendre accessible le plus possible. Ils ont poussé la démarche jusqu’au bout en sélectionnant des couleurs précises pour ce langage visuelle, des formes, typographies ou encore des règles de composition particulières. Toutes ces sources sont disponibles sur le site dédié au Material Design et expliquées de manière très simple.