Le bureau des UX: le cas de l’empty state

Bienvenue dans le Bureau des UX, où nous enquêterons ensemble sur les bonnes pratiques d’UX Design à ne pas négliger et celles trop souvent oubliées. Par une série d’astuces et de conseils, vous pourrez améliorer l’expérience utilisateur avec un minimum d’efforts.
Ouvrons tout de suite le premier dossier : les empty states. Profitez de vos écrans vides pour vous démarquer et améliorer le parcours de l’utilisateur en créant de l’engagement et en facilitant l’on-boarding ! Ces états vides sont parmi les premiers à être vus, et donc vos meilleurs ambassadeurs.

Le nœud du problème

Bien souvent lorsque l’on conçoit un produit numérique, on pense une série d’écrans qui affichent les données que l’on souhaite : une liste d’envie dans un panier, le détail d’un évènement, le chemin à suivre sur une carte… Et c’est bien normal ! Mais que se passe-t-il dans l’application s’il n’y a pas (encore) de données ? Si l’utilisateur se retrouve devant un écran blanc, toute l’expérience utilisateur que nous avons pu mettre dans les écrans précédents s’effondre comme un soufflé. Il faut donc réfléchir les empty states comme n’importe quel autre état de l’application, même si c’est celui où l’utilisateur passera (normalement) le moins de temps. Prendre soin de l’utilisateur à tout instant, c’est surtout ça l’UX Design.

On-boarding et empty state

La première fois que l’on arrive sur une application, en général, tout est vide. Bien gérer ce vide auquel l’utilisateur va se confronter, c’est souvent l’occasion de le faire rentrer dans un flux didactique. Il n’y a rien, mais ce n’est pas un problème, puisque nous expliquons quelle va être la prochaine étape. Ainsi, l’utilisateur n’a pas à avoir peur de cette « page blanche », et en plus c’est l’occasion rêvée de l’accompagner à travers les différents écrans. Les jeux vidéos ont compris ce principe très rapidement : un joueur inexpérimenté doit comprendre en un minimum de temps comment être autonome, et surtout, comment progresser.

Bon, très bien, mais du coup dans les faits, c’est quoi un bon écran vide ?

#1. Informer l’utilisateur

Il est rare d’arriver sur un écran qui affiche instantanément la donnée voulue. La première chose à faire est donc de personnaliser l’empty state à l’écran visionné. C’est le moment de laisser parler sa créativité, et de marquer les esprits avec une identité forte ! Ça peut être aussi simple qu’un texte bien tourné, et aussi fou qu’une image au design fort ou encore une vidéo. Regardez cet exemple de Discord : à droite, l’empty state est simple, mais le ton est donné. Au centre, sur la vue principale, on a mis plus d’effort pour remplir l’espace, et l’utilisateur se sent récompensé !

#2. Guider l’utilisateur

Le seconde niveau d’habillage d’écran vide, et surtout le principal, c’est d’engager l’utilisateur. Par une phrase l’invitant à procéder à la prochaine étape (créer son panier par exemple), ou mieux, un call-to-action (un bouton, un lien) l’accompagnant vers cette prochaine étape ! L’utilisateur saura ainsi 1) pourquoi il est devant un écran vide, et 2) quoi faire pour changer cet état.

#3. Aider l’utilisateur

Enfin, on peut dans certains cas envisager de proposer des éléments à ajouter sur cet écran. Vous êtes une bibliothèque, et dans le processus d’inscription vous demandez les goûts principaux : proposer à votre utilisateur des livres dans ses goûts ! Vous êtes un site d’information ? Proposez lui les dernières nouvelles. Il ne faut jamais oublier le contexte de la page en question, et toujours dans l’idée de faciliter la vie de l’utilisateur, lui donner des suggestions pertinentes peut lui éviter une étape potentiellement fastidieuse. Et un utilisateur satisfait est ce qui peut arriver de mieux à une application.

Un exemple qui reprend tout ça : créer une playlist sur Spotify. On a une phrase qui nous explique quoi faire, comment, un bouton pour nous y amener et une liste de propositions qui nous invite à remplir la playlist. Simple, efficace, rassurant.

Les écrans vides représentent une fraction d’un produit. Mais loin d’être secondaires et inutiles, c’est sur ces détails qu’une application peut faire la différence. L’expérience n’en sera que meilleure, et c’est un bon moyen que l’on se souvienne de vous.