Material design, le pour et le contre…

Il y a quelques années, Google a dévoilé sa vision du design et de l’ergonomie. Petit à petit, le géant du web s’est efforcé de l’intégrer dans toutes ses applications grand public. Depuis cette date, il ne se passe pas une semaine sans que nos clients nous demandent d’intégrer cette vision dans leur projet, c’est presque devenu un pré-requis technique : « Mon projet doit être material design » (quoi que ça veuille dire).

Dans cet article, nous verrons ce qu’est le material design, comment ça marche, quand il est conseillé de l’utiliser et surtout, quand ne pas l’utiliser ! Avec un peu de mauvaise foi comme toujours 😉

Commençons par un petit retour aux bases…

Qu’est-ce que le material design ?

Faisons au plus simple et prenons la définition fournie par Google :

« We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design. »

Google https://material.io/guidelines/

A la lecture de cette définition, une première réflexion nous vient à l’esprit (qui semble claire dès le début) : NON, le material design n’est pas une librairie de composants graphiques à rajouter à son projet pour faire cool. En l’état, c’est plus une spécification, _vivante, _de ce que Google considère comme étant le meilleur du design et de la conception d’écrans d’applications.

De même, ce n’est pas non plus une super charte CSSFeuilles de style qui permettent de mettre en forme des pages web. pour rendre votre application responsive !

En partant de ces constats, on peut rentrer dans le vif du sujet et découvrir ce qui se cache réellement derrière le terme de material design et surtout, qu’est-ce qu’on peut en faire.

Quand utiliser le material design ?

Les librairies Material Design

En partant des spécifications données par Google, de nombreux développeurs de la communauté open source -et pas que- ont développé des jeux de composants respectant les contraintes données par Google. Toutes ces librairies n’ont pas le même niveau de finition, cependant, certaines fonctionnent plutôt très bien ! Donc, à moins que vous ayez une équipe de designers et beaucoup de temps et d’argent, utiliser material design revient souvent à utiliser une de ses librairies. C’est déjà moins la folie 🙂 mais c’est vrai que c’est bien utile, ça remplace souvent le bon vieux bootstrap !

Que trouve-t-on dans les librairies material design ?

Un peu de tout ! Généralement, il y a beaucoup de composants avec des thèmes, et un peu d’animation. C’est vrai que c’est souvent assez joli et assez simple…

Alors, me direz-vous, pourquoi s’en passer pour votre nouvelle super appli ? Rentrons dans le détail… là où se niche le diable !

Pourquoi se passer des librairies Material Design pour votre application ?

Commençons par nous interroger avec une question toute simple : à qui sont destinées les applications de Google ? LE GRAND PUBLIC. Très bien… Et pourquoi est-ce important ? Tout bêtement car la cible de Google est constituée de personnes qui ne vont pas apprendre le logiciel pendant des heures. L’objectif est que les utilisateurs appréhendent l’outil en moins de quelques minutes !

La puissance du Material Design, et des produits Google en général, est d’être accessible au plus grand nombre, avec la complexité mentale la plus réduite possible ! Ceci n’est pas péjoratif, loin de là, mais oblige à faire de nombreux compromis pour l’usager. Ainsi, en diminuant le nombre de fonctionnalités et d’informations à l’écran, on gagne en lisibilité mais on perd en productivité pour l’utilisateur avancé.

Exemple : les tableaux de données

Dans une approche material design, on retrouvera notre tableau avec très peu de colonnes et très peu d’actions possibles. Par exemple : ajouter ou éditer une ligne. C’est donc très intuitif ! Prenons maintenant un utilisateur qui va travailler avec le logiciel tous les jours. Ce dernier va vouloir réaliser des actions sur de multiples lignes à la fois, ou encore, avoir un maximum d’informations à l’écran pour aller vite et ne pas avoir à se déplacer dans plusieurs écrans.

Toute personne amenée à travailler longtemps sur un logiciel aura tendance à vouloir densifier l’information au maximum (même si c’est vrai que quelquefois, ça peut être un peu de l’abus) et c’est normal !

Material design – les animations

Motion in the world of Material Design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.

Google https://material.io/guidelines/

Les animations sont une partie importante du material design et sont souvent mal comprises. L’idée des animations n’est pas de rajouter un petit effet yaouuu sur un clic de bouton pour se donner un look jeune ! Non, l’objectif des animations est d’apporter un plus à la compréhension des actions et des relations, transitions. Encore une fois, les animations doivent être ajoutées avec parcimonie et seulement quand celles-ci apportent un plus pour l’utilisateur afin d’éviter la crise d’épilepsie !

Personnellement, je recommande donc d’éviter les petits effets sur tous les boutons et les transitions façon powerpoint… car, en plus de ne servir à rien, ces animations vont :

• ralentir les performances des applications.
• vieillir à la vitesse de l’éclair ! Donc dans 2 ans, un jeune développeur viendra vous demander comment vous avez pu trouver ça cool 🙂 Si si, je vous promets que ça va arriver.
• vider la batterie : pensons mobilité !
• avoir un rendu différent d’un périphérique à un autre et donc, ajouter une source de bugs à contrôler.

Material design – Nos recommandations

Bon, c’est vrai qu’à lire cet article, vous pourriez penser que chez AXOPEN, on n’aime pas le material design… mais c’est tout le contraire ! On pense juste qu’il faut l’utiliser à bon escient. Avant toute chose, on recommande de lire la spécification de Google ou, à défaut, de la survoler pour bien comprendre la philosophie derrière. Ça vous permettra de faire taire le prochain mec qui vous dira que le material design, c’est une librairie de composants graphiques…