A propos du Material Design et des applis qui l'utilisent

A propos du Material Design et des applis qui l’utilisent

Le Material Design est en fait un ensemble de règles de design que Google met à la disposition des éditeurs d’applications afin qu’il existe une expérience utilisateur commune entre les applications disponibles sur le Google Play. Le but étant que le mobinaute retrouve les mêmes schémas de navigation, et plus largement un même « esprit graphique », d’une application à l’autre et optimise ainsi leur utilisation.

Près d’un an après l’apparition du Material Design, je vous propose un petit bilan. Quels sont les principes de design phares à retenir et comment se traduisent-ils dans les applications publiées sur le Google Play ?

Le Material Design, ce qu’il faut en retenir

Je vous liste ici les 4 points qui me semblent les plus importants. Ce ne sont pas des principes novateurs, seulement du bon sens en fait, largement utilisables sur tous les supports web et mobiles.

Une conception de l’espace en 3D : des aplats et des ombres

Il y en a beaucoup pour dire que le Material Design est en fait le flat design « à la Google ». Ce n’est pas faux car le géant de l’internet prône en effet l’utilisation d’aplats de couleurs. Mais contrairement au flat design, il encourage également l’utilisation d’ombres afin de matérialiser les différents plans sur lesquels apparaissent les éléments d’interface dans l’écran. L’ombre permet également de distinguer un changement de plan d’un changement d’échelle.

Une gamme colorée maîtrisée et concise

On dit souvent qu’il ne faut pas marier plus de 3 couleurs ensemble (et c’est un principe valable dans le design comme dans l’habillement) ! Le Material Design va plus loin. Il préconise le choix d’une couleur majeure accompagnée de 2 nuances découlant de cette même couleur et complétées par une tonique choisie dans une palette de couleurs différentes. L’usage de la tonique étant préconisé pour le signalement des boutons d’interaction principaux et les liens. Et pour vous aider, Google vous met même à disposition des nuanciers touts prêts à être intégrer dans Photoshop et Illustrator !

Une iconographie vecteur d’émotions et de sens

Exit les images toutes droites sorties des banques d’images (oui oui, on parle bien de celles avec les personnages aux sourires dentifrice pas du tout naturel par exemple) ! Google préconise au contraire l’authenticité et l’émotion dans les photographies illustrant les interfaces. De même, il conseille d’éviter les « images fourre-tout » pour que le propos soit facilement identifiable et compréhensible.

Ergonomie et accessibilité : penser pratique et pour tous

Google revient sur la zone tactile minimale à prévoir sur les zones d’interaction : il préconise une zone minimale de 48×48 pixels. Étant précisé que les éléments interactifs doivent être suffisamment espacés entres eux pour éviter toute erreur de manipulation.
Veillez également à ménager un contraste suffisant textes/fond d’écran et assurez-vous que la mise en page n’explose pas si l’utilisateur (malvoyant notamment) augmente la taille des polices. Quant aux intitulés des boutons, soyez précis et contextualisez-les (évitez les « Télécharger » et préférez « Télécharger la photo » par ex.).
Enfin, on envisage souvent l’accessibilité pour les personnes en difficultés comme les malvoyants, mais rarement pour qu’une application conserve son utilisabilité auprès de mobinautes d’autres cultures. Ainsi, Google encourage les concepteurs d’applications à prévoir l’effet miroir pour les cultures où les textes se lisent de droite à gauche et non de gauche à droite.

 

Quelles sont les applications qui utilisent le Material Design ?

Elles sont nombreuses mais je vous en ai sélectionné 3 qui devraient parler à tout le monde, histoire d’observer comment le Material Design est concrètement appliqué. Bien sûr, toutes ne suivent pas à la lettre toutes les règles du Material Design, mais on en retrouve l’esprit.

L’application Wikipédia

La nouvelle application Wikipédia (janvier 2015) n’utilise pas la typo Roboto préconisée par Google par exemple, mais on retrouve l’esprit du Material Design dans d’autres éléments à commencer par les menus, la barre de header ou encore dans le traitement des images (plein écran, avec un léger dégradé pour accueillir du texte en superposition).
> Télécharger l’appli sur le Google Play

Application Wikipédia reprenant des principes du Material Design

Application Wikipédia reprenant des principes du Material Design – Janvier 2015

L’application WhatsApp

C’est tout récent, elle vient de sortir et n’est pas encore dispo sur le Google Play (mais téléchargeable sur le site officiel WhatsApp). Avec ses pictogrammes homogénéisés, ses animations fluides et sa navigation, on ne peut lui nier l’inspiration Material Design promue par Google !
> Télécharger l’appli sur le site officiel

WhatsApp relloké en avril 2015 façon Material Design

WhatsApp rellookée en avril 2015 façon Material Design

Feedly

Pas de changement majeur dans l’architecture de l’application par rapport à la précédente version mais un travail apporté aux transitions/animations entre les écrans et une vraie application des principes de superpositions de plans pour établir un parralèle entre interface et réalité (cf la fameuse métaphore du papier dans le Material Design).
> Télécharger l’appli sur le Google Play

L'application Feedly en Material design - Fevrier 2015

L’application Feedly en Material design – Fevrier 2015

 

 

Quelques liens utiles :
Le site Google dédié au Material Design : http://www.google.com/design/spec/material-design/introduction.html

Partagez cet article sur les réseaux sociaux !Share on FacebookTweet about this on TwitterShare on Google+Email this to someone