Empty states, que faire du vide ? Les concepts de design d’intéraction

Qu’est-ce qu’un empty state ?

C’est un pattern de design dans les applications. Il en existe une grande quantité mais celui-ci est particulièrement crucial car non seulement il est très récurent mais également car c’est la première impression qu’à l’utilisateur face à l’application.

Et concrètement ?

Un empty state est l’état vide qui permet d’expliquer à l’utilisateur que faire et comment le faire. L’idée est de lui expliquer le plus clairement possible et aussi avec un brin de sympathie ses options. Cela peut-être quand une liste est vide, quand un explorateur d’images n’en contient encore aucune, etc. En résumé, quand vous installez une application qui permet de créer mais que vous n’avez pas encore commencer.

github-emptystates

Github propose à l’utilisateur de créer une première page, lorsque le wiki est vide.

Yalty, un exemple parmi d’autres

Récemment nous avons contribué à l’amélioration de l’expérience utilisateur de l’application RH Yalty. En effet, celle-ci demande plusieurs empty states : l’ajout de collaborateurs, de lieux de travail, etc. ainsi que l’ajout d’heures de vacances ou d’absences pour ne citer que ces deux exemples.

Yalty est une application à caractère sympathique, pour illustrer ce caractère, nous avons proposé d’illustrer les empty states avec une mascotte et un ton amicale. L’action principale est accessible grâce au call to action et il y a également la possibilité de contacter un support si l’utilisateur ne comprend toujours pas comment effectuer une des actions voulues.

yalty-emptystates

L'ajout d'absences sur l'application Yalty.

Pourquoi cet état est très important ?

L’empty state est très important pour l’expérience utilisateur. Il permet tout d’abord de combler le vide en expliquant le fonctionnement de la section (comment la remplir, ce qu’elle doit contenir, etc.). Mais également d’exprimer l’identité et le tone of voice de la marque. Ajouter l’aspect humain, un peu de créativité et d’humour dans les empty state est toujours une bonne idée et permet de rendre l’application plus sympathique.

L’objectif principal de l’empty state est d’amener les utilisateurs à réaliser l’action principale, en leur expliquant comment l’effectuer et en proposant le bouton directement au milieu de l’écran.

Quand l’empty state est à la fin

Dans certains cas, le but est d’arriver au vide. Une liste de tâches à effectuer par exemple peut avoir deux états vides. “Que devez-vous faire ?” Puis, une fois vos tâches effectuées, “Bravo, vous avez terminé votre liste, profitez de votre journée”. Ce deuxième état vide intervient à la fin du processus et permet de féliciter l’utilisateur.

L’empty state comme état final ou désiré est très clair dans inbox from Gmail, le nouveau client mail de Google qui affiche un soleil.

Pour conclure

Une citation qui montre l’importance des empty states dans nos applications de manière générale.

“People largely abandon applications for reasons which are within our control: because they do not perceive value from interacting with the software.”

–Patrick Mckenzie

Ressources

Invision : http://blog.invisionapp.com/why-empty-states-deserve-more-design-time/

Empty states : http://emptystat.es/

Pttrns : http://pttrns.com/?scid=30

Techcrunch : https://techcrunch.com/2015/11/22/the-most-overlooked-aspect-of-ux-design-could-be-the-most-important

Pour les designers ;) : https://material.google.com/patterns/empty-states.html