Empty state : définition, types et bonnes pratiques UX

Empty state : la définition simple

Un empty state est l'écran, ou la zone d'écran, qu'une application ou un site affiche quand il n'y a aucun contenu à présenter. Une boîte de réception vide, un panier sans article, un tableau de bord tout neuf : ce sont des états vides. En français, on parle aussi d'« état vide » ou d'« écran vide ».

Ce n'est pas un bug. C'est une situation normale, que l'on peut prévoir dès la conception. La question n'est donc pas de l'éviter, mais de décider ce que l'utilisateur doit y voir. Sans ce travail, il tombe sur une page blanche, un tableau sans ligne ou un simple « Aucune donnée ».

L'empty state fait partie de ce que les designers appellent les états d'une interface. Une même liste peut être en chargement, pleine, vide ou en erreur. Chacun de ces états mérite son propre affichage. Pour le chargement, on utilise par exemple un skeleton screen. Pour le vide, on conçoit un empty state.

Empty state, empty state UI, empty state design : même chose ?

Oui, à peu de chose près. « Empty state UI » désigne l'élément d'interface lui-même : le texte, l'icône, le bouton. « Empty state design » désigne plutôt la démarche de conception qui mène à cet affichage. Les deux relèvent du travail UX et UI d'un produit numérique.

À quoi sert un état vide ?

Un écran vide arrive souvent à un moment clé. C'est le premier contact avec un logiciel, le premier jour d'un compte client ou une recherche qui n'aboutit pas. Si rien n'aide la personne à ce moment-là, elle ferme l'onglet. Pour un dirigeant de PME, c'est un client potentiel perdu, ou un salarié qui n'adopte pas l'outil acheté.

Rassurer l'utilisateur

Face à un écran vide, la première pensée est souvent : « Est-ce que ça marche ? ». Un bon empty state répond tout de suite. Il dit clairement qu'il n'y a encore rien ici, et que c'est normal. Cette phrase simple évite des tickets au support et des abandons silencieux.

Guider vers la prochaine action

Le rôle le plus utile d'un état vide est de montrer le chemin. Un espace vide est une place libre pour un appel à l'action clair : « Créer votre premier devis », « Ajouter un produit », « Importer vos contacts ». L'utilisateur sait quoi faire, et il le fait sans chercher dans les menus.

Expliquer la valeur du produit

Un tableau de bord vide ne montre rien de ce qu'il pourra offrir. L'empty state comble ce manque. Il décrit en une phrase ce que l'écran affichera une fois rempli. Dans un SaaS, c'est souvent ce qui décide si un nouvel inscrit va au bout de sa prise en main, ou s'il part grossir le churn.

Les types d'empty states

Tous les états vides ne se ressemblent pas. Il n'y a pas un modèle unique à copier partout. Le bon contenu dépend de la raison du vide. On distingue en général cinq grands types d'empty states.

Le premier usage (onboarding)

C'est le cas le plus courant : l'utilisateur découvre l'outil et n'a encore rien créé. Ce type est le plus précieux, car il touche chaque nouveau client. Il doit présenter l'écran, expliquer son intérêt et proposer une seule action pour démarrer. On peut aussi offrir des données d'exemple pour montrer à quoi ressemblera la page remplie.

La recherche sans résultat

Une recherche avec zéro réponse est une impasse si l'écran se contente d'afficher « 0 résultat ». Le visiteur avait pourtant une intention précise. Un bon état vide reprend le terme cherché, propose une orthographe proche, suggère d'élargir les filtres ou affiche des contenus populaires. Sur une boutique en ligne, c'est souvent la différence entre une vente et un départ.

Les tâches terminées

Parfois, le vide est une bonne nouvelle. La liste de tâches est à jour, toutes les factures sont réglées, plus aucun message à traiter. Ici, l'empty state peut féliciter l'utilisateur. Un ton léger convient bien. Inutile d'ajouter un bouton : il n'y a rien à faire, et c'est très bien ainsi.

Le vide créé par l'utilisateur

L'utilisateur a supprimé tous ses éléments, ou il a appliqué des filtres trop stricts. Le message doit le dire et proposer de revenir en arrière. Par exemple : « Aucun client ne correspond à ces filtres. Réinitialiser les filtres ». Sans cette précision, il croit que ses données ont disparu.

L'erreur ou l'accès refusé

Enfin, le contenu peut manquer pour une raison technique : connexion perdue, service indisponible, droits insuffisants. Cet état vide se rapproche d'une page d'erreur 404. Il doit nommer le problème sans jargon, dire si les données sont en sécurité et proposer une sortie : réessayer, contacter un administrateur ou revenir à l'accueil.

Comment concevoir un bon empty state

Un état vide réussi tient en peu d'éléments. Il ne s'agit pas de remplir l'espace, mais de répondre à trois questions : que se passe-t-il, pourquoi, et que faire maintenant. Voici les briques à assembler.

• Un titre court qui décrit la situation : « Aucun devis pour l'instant ».
• Une phrase d'explication qui dit pourquoi et ce que l'écran affichera plus tard.
• Une action principale, sous forme de bouton, quand une action est possible.
• Un visuel discret, icône ou illustration, qui aide à comprendre sans voler la vedette.
• Un lien secondaire facultatif vers l'aide, un tutoriel ou un import de données.

Soigner le texte avant l'image

Les illustrations d'empty state sont jolies, mais c'est le texte qui fait le travail. Écrivez comme vous parleriez à un client au téléphone. Utilisez des verbes d'action et évitez les termes techniques. « Aucune donnée disponible » n'aide personne ; « Vous n'avez pas encore de commande. Elles apparaîtront ici dès votre première vente » rassure et informe.

Choisir une icône ou une illustration utile

Une icône simple suffit dans la plupart des cas, surtout dans un logiciel métier. Une illustration plus riche peut convenir à un premier usage ou à une application grand public. Dans tous les cas, le visuel doit rester cohérent avec la charte du produit et ne pas ralentir l'affichage. Pensez aussi au texte alternatif pour l'accessibilité.

Une seule action principale

Proposer cinq boutons sur un écran vide revient à n'en proposer aucun. Choisissez l'action qui fait le plus avancer l'utilisateur et mettez-la en avant. Les autres options peuvent apparaître en liens plus discrets. Ce choix se prépare dès le wireframe, pas à la fin du projet.

Utiliser les composants existants

Si votre produit s'appuie sur une bibliothèque de composants, regardez s'il existe déjà un bloc prévu. La bibliothèque shadcn/ui, par exemple, propose un composant dédié à l'empty state, avec un emplacement pour l'icône, le titre, la description et les boutons. Les outils de création de sites comme Webflow permettent aussi de définir l'affichage d'une collection CMS vide. Partir d'une base commune garantit des états vides homogènes sur tout le produit.

Les erreurs courantes à éviter

La plupart des états vides ratés ne viennent pas d'un mauvais design. Ils viennent d'un oubli : personne n'a pensé à ce cas. Voici les pièges que l'on rencontre le plus souvent lors d'un audit d'interface.

Laisser l'écran vraiment vide

C'est l'erreur la plus fréquente. Un tableau sans ligne, une page blanche, un graphique sans courbe. L'utilisateur ne sait pas si le chargement est en cours, si une erreur s'est produite ou s'il n'y a simplement rien. Cette confusion entre états est la source de nombreuses incompréhensions.

Confondre vide et chargement

Afficher « Aucun résultat » pendant une demi-seconde avant que les données n'arrivent est déroutant. L'utilisateur croit d'abord que sa liste est vide, puis la voit apparaître. Il faut distinguer clairement l'état de chargement de l'état vide. Le développeur doit attendre la réponse du serveur avant de décider qu'il n'y a rien à afficher.

Écrire un message culpabilisant ou trop technique

« Requête invalide », « Erreur 0 élément », « Vous n'avez rien fait » : ces formulations froides ou accusatrices font fuir. Le message doit rester neutre, bienveillant et compréhensible par quelqu'un qui n'a jamais lu de documentation. Si le vide vient d'une erreur, assumez-la côté produit plutôt que d'en faire porter la faute à l'utilisateur.

Utiliser le même message partout

Un message générique copié sur toutes les pages ignore le contexte. Une recherche sans résultat, un premier usage et une liste terminée n'appellent pas la même réponse. Prenez le temps d'écrire un texte par situation. C'est un petit effort qui change beaucoup la perception de qualité du produit.

Oublier le mobile

Sur un petit écran, une grande illustration peut pousser le bouton d'action hors de vue. L'utilisateur voit une image, mais pas la solution. Vérifiez chaque empty state sur téléphone, avec le texte et l'action visibles sans défiler.

Pourquoi l'empty state compte pour une PME

Pour une petite entreprise, chaque inscription coûte cher : publicité, temps commercial, référencement. Perdre ce prospect au premier écran parce qu'il ne comprend pas quoi faire est un gâchis. Un état vide bien pensé fait partie des détails qui transforment un outil en produit que l'on utilise vraiment.

C'est aussi un signal de sérieux. Un logiciel qui gère proprement ses cas limites inspire confiance, comme une boutique bien rangée. Il réduit les questions au support et facilite l'adoption par les équipes. Ces états se mesurent d'ailleurs : taux de clic sur le bouton d'un écran vide, part des recherches sans résultat, progression des nouveaux comptes.

Quand nous menons un projet de création de logiciel, nous listons les états vides dès la phase de maquette, écran par écran. Ce travail prend peu de temps au départ. Il en fait gagner beaucoup ensuite, et il évite de découvrir le problème le jour du lancement, devant les premiers clients.

Questions fréquentes