Les empty states (états vides)
Comme son nom l’indique, l’empty state est un composant utilisé lorsque l’interface ne contient pas d’information, ou pas encore.
Si vous êtes perplexe face au vide sur une page, alors imaginez comment les personnes utilisatrices de votre produit peuvent réagir…
- Elles peuvent être frustrées - « Ah… bah je pensais pouvoir faire ça ! »)
- Elles peuvent être stressées - « Euh… qu’est-ce que je suis sensé faire ? Help ! 😧 »
Voici les différents types d’empty states :
- L’empty state d’une section vide
En cas de première utilisation ou lorsqu’il n’y pas de données à afficher à un moment… donné. Par exemple, un panier d’achat vide ou une boîte de réception vide.
- L’empty state d’une action sans résultat
La plupart du temps, il s’agit d’une recherche qui n’a pas donné de résultats.
- L’empty state lié à la gestion d’erreur
Cela peut-être une erreur système ou de connexion à Internet, une limitation de permission (l’utilisateur·trice n’a pas les droits d’accès) ou une configuration requise.
- L’empty state de vente incitative ou vente croisée (up-selling/cross-selling)
Par exemple, pour inciter un ou une utilisatrice à changer de forfait afin d’accéder à une fonctionnalité.
Exemple d’un empty state pour une section vide - Cheerz
Pour commencer à créer un album photos, la première étape est de sélectionner les photos qui y figureront. Cet empty state explique pas-à-pas les étapes pour créer l’album.
Exemple d’un empty state pour une recherche qui n’a pas donné de résultats - Gmail
Google pose le constat : il n’y a pas de message correspondant à cette recherche. Puis, on nous indique l’action à faire pour préciser la recherche et ainsi trouver la réponse à ce que l’on cherche.
Exemple d’un empty state pour la gestion de permission - Confluence*
Cet empty state essaye de trouver une solution et débloquer l’utilisateur·trice en suggérant une alternative pour accéder à la connexion demandée. Les variables utilisées permettent de bien contextualiser le problème : nom de l’utilisateur ou de l’utilisatrice, adresse e-mail, adresse de connexion recherchée…
*Design modifié pour l’exemple.
Exemple d’un empty state pour la gestion d’une erreur - Slack
Le problème rencontré est clair : Slack ne peut pas charger le contenu de l’espace de travail. Le texte dans l’encadré est humain et rassurant, et donne une porte de sortie à l’utilisateur·trice. Le bouton permet de donner un accès rapide pour agir, abaissant ainsi la charge cognitive de l’utilisateur·trice.
Qu’il s’agisse de la première utilisation d’une fonctionnalité, d’un panier vide, d’une recherche qui n’a pas donné de résultats…
En laissant un écran vide avec un simple message d’erreur, on risque de perdre l'utilisateur·trice qui ne comprend pas forcément :
- ni ce qui devrait se trouver là en temps normal ;
- ni ce qu’elle devrait ou pourrait faire pour avancer.
Profitez plutôt de ce vide pour entamer le dialogue et engager les utilisateurs et utilisatrices. Servez-vous des empty states pour apporter de la valeur et améliorer l’utilisabilité de votre produit :
→ Expliquez pourquoi c’est vide
→ Indiquez ce qui doit se trouver là
→ Informez les utilisateurs et utilisatrices de ce qu’ils et elles peuvent faire
→ Encouragez-les à faire une action (écrire, importer, commencer, compléter, etc.)
