Un système de guidelines UI et UX élaboré par Google

Présenté pour la première fois lors de la conférence Google I/O en juin 2014, le Material Design s’est rapidement imposé dans toutes les interfaces des applications Google. Inspiré par les tendances graphiques de l’époque comme le Flat Design ou le Responsive Design, ce nouveau système de guidelines a su reprendre certains aspects comme le minimaliste ou les aplats de couleurs en y intégrant des effets plus modernes comme la profondeur, les transformations, les ombres ou la réactivité des composants.

Des guidelines pour les interfaces web et mobiles développées par Google
Des guidelines pour les interfaces web et mobiles

Libre à chaque développeur de reprendre plus ou moins ces directives dans les projets web, desktop ou mobile, mais elles sont le méritent d’être claires. On pourrait penser à un coup marketing de Google, mais il y a une véritable symbiose entre leurs guidelines et leurs applications. Ils se sont servis de leurs retours d’expériences pour améliorer les directives et en développer de nouvelles. En 2022 on en est à la troisième itération du Material Design pour améliorer l’expérience utilisateur et les interfaces.

Quelques exemples des composants du Material Design

Les exemples ci-dessous présentent quelques composants du Material Design issus de la librairie Material Components qui est développée par une équipe de développeurs et de graphistes chez Google et disponible en open source pour du le Web, Android et iOS.

Text button

Il existe plusieurs types de boutons dans les guidelines et celui ci-dessous est le simple text button permettant les actions des utilisateurs dans une interface. Au clic un effet d’ondulation est propagé sur le bouton à partir de l’endroit où l’utilisateur à appuyé. Le bouton reste actif après le clic pour montrer que c’est le dernier élément à avoir eu une interaction.

Text field

Le composant text field est très utilisé dans les applications Google. Le placeholder qui représente le texte par défaut du champ va se déplacer en haut au moment ou l’utilisateur va cliquer dessus. Cela permet de simplifier les informations et de toujours garder visible le nom du champ quand l’utilisateur va l’éditer.

Switch

Le composant switch est en fait une case à cocher un peu plus moderne. On retrouve ce composant dans de nombreuses interfaces comme les paramètres du système iOS ou Android afin d’activer ou non certaines options. Ce composant montre bien l’effet de réactivité du Material Design afin de signaler tout changement d’état à l’utilisateur.

Select

Le composant select permet de choisir un élément dans une liste. Un peu comme le textfield, le placeholder du composant reste visible quand l’utilisateur clique dessus et se positionne en haut du composant. Un effet de transformation ou bien de disparition est appliqué sur la liste au moment de l’ouverture et de la fermeture du composant.

  • Bread, Cereal
  • Vegetables
  • Fruit

Quelques librairies basées sur le materiel design

De nombreuses librairies ont été créées par des développeurs web et qui intègrent les guidelines du Material Design. On peut citer par exemple Vuetify pour le framework Vue.js ou encore Angular Material développé par Google pour Angular. En fonction du framework que l’on utilise, on peut trouver différentes librairies proposant des composants adaptés. Certaines sont gratuites et d’autres payantes afin de bénéficier des mises à jour de la librairie.

Google met à jour régulièrement les guidelines du Material Design dont les nouveautés sont dévoilées lors de la conférence annuelle Google I/O. Utiliser ces directives est un bon moyen de proposer des interfaces intuitives, évolutives et testées pour ses projets afin de renforcer l’expérience utilisateur.