3 règles pour tirer le meilleur de Material Design sur Android

Je suis fier d’annoncer aujourd’hui le lancement de notre nouvelle application Android compatible avec Material Design. Nous sommes d’autant plus heureux que cette nouvelle version a été choisie par Google pour être mise en avant dans le Store Google Play !

C’est le moment idéal pour revenir sur la façon dont nous avons appréhendé Material Design et partager ce que nous avons appris avec la communauté.

Version Material Design sur Nexus 10

L’occasion fait le laron

Quand nous avons développé la première version de Dashlane sur Android, notre priorité était de réaliser un produit stable, rapide et 100% sécurisé. Après tout, stocker ses données et y accéder de manière sécurisée, ce sont ce que les utilisateurs attendent en priorité d’un gestionnaire de mots de passe.

A cette époque, même si j’ai un peu honte de l’avouer, nous n’avions pas passé beaucoup de temps sur le design de notre application.

Comme beaucoup de startups qui démarrent, nous manquions de ressources de design en interne, et nous pensions naïvement, qu’à condition de respecter les quelques principes simples de l’expérience utilisateur Android, nous pourrions réutiliser une grande partie du design de notre application iPhone.

Comme vous vous en doutez, ça n’est jamais aussi simple !

L’application fonctionnait bien, mais si nos utilisateurs n’avaient pas de problème à s’en servir, l’engouement provoqué par celle-ci ne correspondait pas à nos ambitions.

Quand Google publia ses recommandations sur le Material Design, nous avons tout de suite voulu saisir l’occasion pour améliorer ça. Non seulement, Material Design est très esthétique mais également très bien documenté. C’était aussi le signal d’un changement d’ère pour l’écosystème Android. Les attentes des utilisateurs en termes de qualité de design et d’interaction allaient être revue à la hausse.

En résumé, l’annonce du Material Design était pour nous à la fois une opportunité et un signal que l’on se devait d’améliorer l’existant. 

Interpréter les recommandations de Google

Les lignes directrices des plateformes en règle générale et de Google en particulier sont très utiles pour deux raisons:

Tout d’abord, comme de nombreuses applications les suivent, elles facilitent la compréhension de la navigation par les utilisateurs pour qui votre application devient plus instinctive. Par exemple la façon dont on ajoute un élément dans l’application est la même que dans la majorité des applications conforme à Material Design. En s’appuyant sur les mêmes principes d’ergonomie, les applications travaillent les unes pour les autres.

Par ailleurs, en standardisant les éléments basiques d’expérience utilisateur, elles facilitent également certains choix et permettent aux éditeurs de consacrer plus d’énergie à la mise au point d’effets et d’animations innovantes.

Animation pour déverouiller l’application

Il faut toutefois prendre certaines précautions. De la même façon que la méthode Agile ne se cantonne pas à avoir un “Product Owner” et un “whip”, le Material Design ne se limite à des éléments plats et un bouton “+” en bas de chaque écran. Que ce soit au niveau des polices, des espacements, des couleurs, des animations ou encore de l’architecture, l’attention au détail est clé. L’un des pièges serait de croire qu’en suivant les lignes directrice, on puisse se passer d’un designer. Pratiquement chaque écran de notre application a été créé en interne par notre designer.

3 principes pour un bon produit en Material Design

1. Restez focalisés sur vos utilisateurs

En travaillant sur notre projet de redesign, nous sommes restés concentrés sur le cœur de notre expérience utilisateur.

C’est pour gérer leurs données personnelles que la plupart des gens installent Dashlane. Par conséquent, nous avons fait en sorte que ces éléments soient trouvables et manipulables dans l’application.

L’écran de détail des mots de passe

2. Pensez à tous les formats et tous les systèmes d’exploitation

Une application Android se doit fonctionner sur les téléphones, les tablettes et les phablettes. Dashlane a été conçu pour être déployé partout et notre expérience utilisateur varie donc d’un format à l’autre. Une vue en liste fonctionne par exemple très bien sur un téléphone, mais sur les tablettes, une vue en grille est préférable.

Liste de mots de passe sur mobile
Liste de mots de passe sur tablette

Par ailleurs, nous nous sommes contraints à proposer une expérience utilisateur optimale pour toutes les versions d’Android. Personne ne doit se sentir laissé pour compte. Certains éléments du Material Design sont plus faciles à mettre en place avec Lollipop, qui propose des animations toutes faites, mais nous les avons redéveloppées pour que l’expérience soit identique sur les anciennes versions d’Android encore beaucoup utilisées.

Breakdown of new Dashlane users by Android operating system versions

3. Un bon design ne vaut qu’au service de bonnes fonctionnalités

Si nous avons beaucoup travaillé sur le design, cela ne veut pas dire que nous avons laissé les fonctionnalités de côté. Nous avons cherché à utiliser le Material Design pour proposer des expériences innovantes à nos utilisateurs. A l’occasion de cette nouvelle version, nous avons ainsi lancé une fonctionnalité qui permet la connexion automatique à n’importe quelle application. C’est une formidable avancée pour nos utilisateurs qui n’auront ainsi plus jamais à rentrer un mot de passe pour se connecter à d’autres applications Android.

Nouvelle fonctionnalité d’authentification automatique dans les applications

Et la suite ?

On peut passer des années à redesigner une application. C’est pourquoi il est nécessaire d’encadrer le projet lorsqu’on est arrivé à un résultat satisfaisant. Une fois que l’ensemble des objectifs de notre checklist ont été atteints, nous avons décidé de déployer l’application.

Mais cela ne veut pas dire que nous allons en rester là.

Gardez un œil sur les prochaines versions car nous avons encore de nouveaux éléments qui n’ont pas été inclus dans celle-ci ! Et pour vous remercier d’avoir lu le post dans son intégralité, voici un aperçu des animations qui ne sont pas dans la version en cours mais que nous sommes en train d’ajouter.

Animation d’authentification non incluse dans cette version
Animation de sauvegarde de mots de passe non incluse dans cette version