📖 Guide complet

État vide : l'écran le plus sous-estimé de votre produit

Le premier véritable écran de chaque nouvel utilisateur est un écran vide : pas de données, pas de projets, pas d'historique. Ce qu'est un état vide, les cinq types présents dans tout produit SaaS, ce que contient un état vide réussi et neuf bonnes pratiques pour faire de vos écrans vides la première étape de l'onboarding plutôt que la dernière avant le churn.

📅 Mis à jour en octobre 2026 ⏱ 11 min de lecture ✍️ Par Kompassify
🌐 English Português Français Deutsch
Widgets d'onboarding no-code (une checklist, des infobulles et un fil de notifications créés avec Kompassify) superposés à l'écran d'un produit, qui transforment les états vides en parcours guidé

Les équipes produit soignent les écrans où vivent leurs utilisateurs les plus actifs : le tableau de bord rempli de graphiques, le board de projet en pleine effervescence, la boîte de réception qui déborde. Mais l'écran qui décide si un nouvel utilisateur deviendra un jour un utilisateur actif n'est aucun de ceux-là. C'est la version de votre produit où il n'y a rien : le tableau de bord sans données, le board sans cartes, la page de rapports qui annonce poliment qu'il n'y a rien à signaler. Cet écran, c'est l'état vide (empty state), et pour chaque nouvel inscrit, c'est lui, le produit.

C'est dans les états vides que l'onboarding utilisateur réussit ou échoue, sans bruit. Le parcours d'inscription se termine, l'e-mail de confirmation est ouvert, et l'utilisateur arrive sur… une page blanche. Si cette page s'explique et propose une prochaine étape évidente, l'utilisateur commence à avancer vers sa première réussite. Si elle se contente d'afficher « Aucune donnée disponible », il doit construire seul son premier succès à partir de rien, et une grande partie n'y parviendra pas. Ils ne s'en plaindront pas non plus. Ils fermeront simplement l'onglet. Voilà pourquoi les états vides ratés n'apparaissent presque jamais dans les retours clients, mais toujours dans les chiffres d'activation.

Ce guide fait le tour du sujet : ce qu'est un état vide en UX, les cinq types à bien distinguer, pourquoi le premier écran vide pèse si lourd sur le time to value et le churn, l'anatomie d'un bon état vide et neuf bonnes pratiques pour concevoir des états vides qui accompagnent l'onboarding, avec des exemples et des moyens d'enrichir vos écrans existants sans sprint de développement.

À retenir

  • Un état vide est tout écran sans contenu à afficher : le tableau de bord vierge d'un nouveau compte, une boîte de réception vidée, une recherche sans résultat, un chargement qui échoue ou une fonctionnalité verrouillée.
  • Pour un nouvel utilisateur, l'état vide EST le produit. L'essentiel de la valeur d'un SaaS réside dans les données de l'utilisateur, et chaque nouveau compte démarre sans aucune : l'état vide de premier usage est donc la vraie première impression.
  • Il existe cinq types (premier usage, tout est terminé, aucun résultat, erreur et accès restreint), et chacun appelle un message, un ton et un appel à l'action différents.
  • Un bon état vide comporte quatre éléments : un visuel rassurant, un titre qui dit à quoi sert cet espace, une ligne qui explique pourquoi il est vide et ce qui y apparaîtra, et une action claire qui permet de le remplir.
  • Ne laissez jamais d'impasse. Chaque état vide doit proposer une seule action principale (créer, importer, affiner, réessayer ou demander l'accès), plus des modèles ou des données d'exemple quand partir de zéro est difficile.
  • Les états vides sont des surfaces d'onboarding : en les associant à une visite guidée, une checklist d'onboarding et des infobulles contextuelles, l'écran vide devient un parcours guidé jusqu'à la première réussite, sans code.

Qu'est-ce qu'un état vide ? (Définition UX)

Un état vide est ce qu'une interface affiche quand elle n'a aucun contenu à montrer. Le conteneur existe (le tableau, le fil, le tableau de bord, la liste de résultats), mais le contenu qui le remplit normalement est absent : soit parce qu'il n'a pas encore été créé, soit parce qu'il a été entièrement supprimé, soit parce qu'une requête ne renvoie rien, soit parce que quelque chose n'a pas pu se charger. On parle aussi d'écran vide, de page vide, de « zero state » ou de « blank slate » ; les designers évoquent parfois les écrans « zéro donnée ». L'idée est la même : l'interface n'a rien à montrer et doit décider quoi dire à la place.

L'état vide, en une définition. Un état vide est la conception délibérée d'un écran dont la zone de contenu est vide, qui indique à quoi sert cet espace, pourquoi il est vide pour l'instant et quelle action permettra de le remplir. Le mot clé est délibérée : un état vide n'est pas une absence de design, c'est un moment conçu. « Aucune donnée disponible » sur fond gris n'est pas un état vide ; c'est un état vide qui manque.

Pourquoi est-ce si important dans le SaaS en particulier ? Parce que les produits SaaS démontrent leur valeur à travers le contenu de l'utilisateur. Un outil de gestion de projet devient convaincant quand il contient vos projets ; un outil d'analytics prouve son utilité quand les graphiques montrent votre trafic. Autrement dit, chaque compte démarre dans la seule situation que la démo n'a jamais montrée : complètement vide. La distance entre « vide » et « premier élément créé » est exactement celle qui sépare un inscrit d'un utilisateur activé, le même trajet que l'onboarding utilisateur a pour mission de raccourcir.

Le premier écran vide est une bifurcation Inscription Premier écran : vide chaque compte démarre ici « Aucune donnée disponible. » confusion → onglet fermé → churn « Créez votre 1er projet → » 1er élément → 1re réussite 🎉 impasse tremplin

Même produit, même utilisateur, même base de données vide : la seule différence, c'est que l'écran vide soit une impasse ou un tremplin. Et cette différence se décide au design, pas au développement.


Les 5 types d'états vides (et ce que chacun doit dire)

Un écran peut être vide pour cinq raisons différentes, et la pire erreur consiste à afficher le même haussement d'épaules pour toutes. Un tout nouvel utilisateur, un utilisateur qui vient de vider sa boîte de réception et un utilisateur dont la recherche n'a rien donné sont dans trois états d'esprit complètement différents ; l'écran doit savoir à qui il s'adresse :

Type Quand il apparaît État d'esprit de l'utilisateur Le rôle de l'écran
Premier usage Un nouveau compte, une nouvelle fonctionnalité ou un nouvel espace de travail où rien n'a encore été créé Curieux mais hésitant : « qu'est-ce que je dois faire ici ? » Accompagner : expliquer l'espace, proposer une première action claire, fournir des modèles ou des données d'exemple
Tout est terminé L'utilisateur a tout traité ou tout supprimé : boîte de réception vide, toutes les tâches faites Satisfait : ce vide, il l'a mérité Célébrer la réussite, puis suggérer la suite (faire le bilan, planifier, explorer)
Aucun résultat Une recherche ou une combinaison de filtres ne renvoie rien Légèrement agacé : « où est ce que je cherche ? » Aider à affiner : rappeler la requête, suggérer des corrections, proposer de retirer les filtres ou d'élargir la recherche
Erreur Le contenu existe mais n'a pas pu se charger : réseau, serveur, délai dépassé Inquiet : « mes données ont-elles disparu ? » Rassurer sur la sécurité des données, expliquer simplement, proposer de réessayer
Accès restreint Le rôle ou l'offre de l'utilisateur ne donne pas accès à ce contenu Bloqué : « pourquoi je ne peux pas voir ça ? » Expliquer qui y a accès et indiquer la marche à suivre : demander l'accès, contacter un administrateur ou passer à l'offre supérieure

Des cinq, c'est l'état vide de premier usage qui mérite le plus d'attention : il se trouve précisément là où l'activation se gagne ou se perd, et chaque utilisateur le traverse une seule fois, au moment où sa motivation est au plus haut et sa connaissance du produit au plus bas. L'état « tout est terminé » est celui dont les équipes ratent le plus souvent le ton : afficher « Rien ici 😕 » à quelqu'un qui vient de boucler sa liste de tâches transforme une réussite en excuse. Et l'état d'erreur est celui que les utilisateurs pardonnent le moins quand il est bâclé : un graphique vide sans explication se lit comme « vos données ont disparu », un message bien pire que tout ce que vous auriez pu écrire.

État vide ≠ état d'erreur. Un état vide signifie qu'il n'y a légitimement rien à afficher ; un état d'erreur signifie qu'il y a quelque chose à afficher mais que le chargement a échoué. Les confondre, avec le même écran vide pour « pas encore de données » et « la requête a échoué », laisse l'utilisateur deviner s'il doit agir ou attendre. Ces deux états demandent des textes différents, et votre interface doit savoir dans lequel elle se trouve.


Pourquoi les états vides comptent : la page blanche est là où l'utilisateur décroche

On est tenté de ranger les états vides dans la catégorie « finitions visuelles » : une jolie illustration, une phrase sympathique, et on livre. Voici pourquoi ils ont plutôt leur place dans votre stratégie d'onboarding :


L'anatomie d'un bon état vide

Décortiquez n'importe quel état vide bien conçu, dans n'importe quel produit que vous admirez, et vous retrouverez les quatre mêmes éléments, à peu près dans le même ordre. Aucun n'est décoratif : chacun répond à une question que l'utilisateur se pose sans la formuler :

Les 4 éléments d'un état vide, et la question à laquelle chacun répond Créer le premier 1. Visuel « c'est cassé ? » → non 2. Titre « cet espace sert à quoi ? » 3. Explication « pourquoi vide ? et après ? » 4. Appel à l'action « je fais quoi, là ? » + voie secondaire modèle, exemple, aide

Un visuel, un titre, une explication, une action principale, plus une voie facultative plus simple pour les utilisateurs qui ne sont pas prêts à partir de zéro. S'il manque un élément, l'une des questions silencieuses de l'utilisateur reste sans réponse.

1. Le visuel : « est-ce que c'est cassé ? »

Une illustration ou une icône remplit deux rôles en une demi-seconde : elle signale que l'écran est volontaire (un graphisme soigné ne peut pas être un accident, donc rien n'est cassé), et elle donne le ton émotionnel : serein pour un premier usage, festif quand tout est terminé, compréhensif pour une erreur. Elle ne doit pas prendre toute la place : le visuel est un assaisonnement, et une illustration surdimensionnée qui noie l'action est la façon la plus courante de rater un état vide.

2. Le titre : « à quoi sert cet espace ? »

Une ligne courte qui nomme ce qui vit ici, centrée sur le travail de l'utilisateur plutôt que sur l'interface : « Vos visites guidées » vaut mieux que « Aucune visite trouvée ». Dites à quoi sert l'espace, pas ce qui lui manque pour l'instant.

3. L'explication : « pourquoi est-ce vide, et qu'est-ce qui va apparaître ? »

Une ou deux phrases qui lèvent l'incertitude : pourquoi il n'y a rien ici (vous n'en avez pas encore créé / votre recherche n'a rien donné / ce contenu se charge une fois une source connectée) et à quoi ressemblera l'espace une fois rempli. C'est la ligne qui enseigne le modèle mental du produit : consacrez-y un vrai effort d'écriture.

4. L'appel à l'action : « qu'est-ce que je fais maintenant ? »

Un bouton principal qui commence à remplir l'espace : créer, importer, connecter, parcourir les modèles. Un seul : un état vide avec quatre boutons équivalents impose un choix, et les choix bloquent justement les utilisateurs que l'écran est censé aider. Un lien secondaire, moins mis en avant (utiliser un modèle, charger des données d'exemple, voir comment ça marche), rattrape ceux qui ne sont pas prêts à partir d'une page blanche.


Comment concevoir un état vide : 9 bonnes pratiques

Les principes, dans l'ordre où les appliquer :

1. Inventoriez vos états vides : vous en avez plus que vous ne le pensez

Créez un compte neuf dans votre propre produit et faites une capture de chaque écran tel qu'un nouvel utilisateur le découvre. Ouvrez ensuite chaque onglet de fonctionnalité, lancez une recherche absurde et chargez une page avec une connexion bridée. La plupart des équipes trouvent ainsi une douzaine d'écrans vides, voire plus, et découvrent que la moitié n'a jamais été conçue : on a simplement laissé s'afficher ce que la bibliothèque de composants rend quand la liste est vide.

2. Ne laissez jamais d'impasse : chaque état vide a une prochaine étape

C'est la seule règle non négociable. Le premier usage propose « créer » ou « importer ». L'absence de résultat propose « retirer les filtres » ou une suggestion corrigée. L'erreur propose « réessayer ». L'accès restreint propose « demander l'accès ». Un écran qui dit à l'utilisateur qu'il n'y a rien ici sans rien lui proposer pour y remédier n'est pas un état vide : c'est une sortie.

3. Expliquez, ne vous excusez pas

Un écran vide au premier usage n'est pas un échec, alors ne le rédigez pas comme tel : pas d'icône triste, pas de « C'est bien calme ici » sans indication. L'état vide de premier usage est un moment pédagogique : ce que fait cet espace, à quoi il ressemble quand il fonctionne et comment y arriver. Un microcopy assuré et précis (« Les visites que vous créez apparaîtront ici. La plupart des équipes commencent par une visite de bienvenue en 3 étapes ») l'emporte à chaque fois sur un texte mignon mais perdu.

4. Proposez des modèles et des données d'exemple, pas seulement une page blanche

« Partir de zéro » est la version la plus difficile possible de la première étape. Les modèles et les données d'exemple permettent à l'utilisateur de découvrir l'écran rempli avant d'avoir fourni le moindre effort : le produit fait ses preuves d'abord, il demande un effort ensuite. Si votre tableau de bord a réellement besoin d'une semaine de données, affichez-le rempli de données d'exemple clairement identifiées plutôt qu'un vide accompagné d'une promesse.

5. Adaptez le ton au type

Les cinq types méritent cinq voix. Premier usage : encourageant et directif. Tout est terminé : félicitations, l'utilisateur a mérité ce vide, célébrez-le et suggérez la suite. Aucun résultat : pratique, rappelez la requête, proposez des solutions. Erreur : calme et honnête, les données sont en sécurité, voici le bouton pour réessayer. Accès restreint : transparent, qui a accès et comment l'obtenir. Appliquez le même modèle « sympathique + illustration » aux cinq, et au moins trois sonneront faux.

6. Guidez de l'état vide jusqu'à la première réussite : ne vous arrêtez pas au premier clic

Le CTA lance le parcours ; il le termine rarement. « Créez votre première visite » ouvre un éditeur avec vingt options, et l'utilisateur qui bloque là a simplement churné un écran plus tard. Reliez l'état vide à une courte visite guidée qui accompagne l'utilisateur du bouton jusqu'à un premier élément terminé, et laissez un parcours de bienvenue orienter chaque persona vers sa propre première réussite : la bonne première étape d'un marketeur et celle d'un développeur sont rarement les mêmes.

7. Utilisez une checklist pour relier plusieurs états vides

Un nouveau compte a généralement plusieurs espaces vides à remplir : le profil, le premier projet, la première intégration, le premier coéquipier. Une checklist d'onboarding avec une barre de progression transforme cette dispersion en une séquence unique et visible, et entretient l'élan d'une session à l'autre : quel que soit l'écran vide sur lequel l'utilisateur arrive, la checklist lui montre où il en est dans le parcours global et ce qu'il doit remplir ensuite.

8. Concevez l'état « tout est terminé » comme une récompense

Quand un utilisateur vide sa file d'attente ou termine sa liste, l'écran qu'il voit est une petite salle des trophées. Saluez la réussite (« Tout est à jour 🎉 »), puis montrez la suite : revoir ce qui a été livré, planifier demain, explorer une fonctionnalité pas encore essayée. Les équipes qui traitent l'état « terminé » comme une surface d'engagement gagnent un moment de réengagement en prime, précisément quand l'utilisateur a la meilleure opinion du produit.

9. Mesurez vos états vides comme les étapes de funnel qu'ils sont

Suivez la part de nouveaux utilisateurs qui effectuent l'action principale de l'état vide, et combien de temps ils hésitent avant d'agir ou de partir. Un écran vide que la plupart des nouveaux visiteurs quittent aussitôt est un bug d'activation, capture d'écran à l'appui. Corrigez le pire, observez la cohorte suivante, recommencez : la même boucle que pour n'importe quelle autre étape de l'onboarding.

Une checklist d'onboarding no-code avec barre de progression créée dans Kompassify, qui guide un nouvel utilisateur des écrans vides jusqu'à ses premières étapes de configuration terminées
(Une checklist avec barre de progression relie les espaces vides d'un nouveau compte en une seule séquence guidée : quel que soit l'écran vide sur lequel l'utilisateur arrive, l'étape suivante est visible)

Exemples d'états vides : impasse ou tremplin

Voici le même écran, la page des visites guidées d'un compte tout neuf, conçu de deux façons. À gauche, ce que la bibliothèque de composants affiche par défaut ; à droite, la version qui applique l'anatomie décrite dans ce guide :

Aucune donnée disponible.

❌ L'impasse : rien à apprendre, rien à faire
🧭
Vos visites guidées sont ici

Créez une visite pas à pas qui mène les nouveaux utilisateurs à leur première réussite. La plupart des équipes commencent par une visite de bienvenue en 3 étapes.

Créer votre première visite ou partir d'un modèle →
✅ Le tremplin : visuel, titre, explication, une seule action

Appliquez la même transformation à chaque type, et le principe se vérifie :

Remarquez ce qui a changé dans chaque réécriture : l'écran a cessé de décrire l'absence pour décrire le chemin. Tout le savoir-faire tient dans cette seule habitude.


Design d'un état vide : à faire et à éviter

✅ À faire

  • Concevoir chaque état vide délibérément et les auditer avec un compte neuf
  • Donner à chaque écran une seule action principale claire
  • Expliquer à quoi sert l'espace et ce qui y apparaîtra
  • Proposer des modèles ou des données d'exemple pour une première étape plus simple
  • Adapter le ton au type : célébrer les états « terminé », rassurer dans les états d'erreur
  • Associer les écrans de premier usage à une visite ou une checklist jusqu'à la première réussite
  • Utiliser les états vides des fonctionnalités pour présenter les nouveautés
  • Mesurer la conversion de l'état vide vers la première action

❌ À éviter

  • Livrer ce que la bibliothèque de composants affiche pour une liste vide
  • Écrire « Aucune donnée disponible » et considérer que c'est conçu
  • Proposer quatre boutons équivalents, ou aucun
  • Laisser l'illustration prendre le pas sur l'action
  • S'excuser qu'un compte tout neuf soit vide
  • Utiliser le même écran vide pour « aucune donnée » et « échec du chargement »
  • Plaisanter dans les états d'erreur pendant que l'utilisateur s'inquiète pour ses données
  • Le concevoir une fois et ne plus jamais regarder ses indicateurs

Enrichir ses états vides sans mobiliser l'équipe technique

Repenser chaque écran vide dans le code est un vrai projet : utile, mais rarement réalisé ce trimestre. La bonne nouvelle : la couche la plus impactante d'une stratégie d'états vides, c'est l'accompagnement, et l'accompagnement n'a pas besoin d'attendre un sprint. Avec Kompassify, vous ajoutez le tremplin par-dessus les écrans vides que vous avez déjà, sans code :

Tout se crée dans un éditeur visuel, se cible par segment, s'installe avec un seul snippet de script et se mesure dans les analytics intégrés : vous voyez évoluer, semaine après semaine, la part d'utilisateurs qui passent de l'écran vide à la première action. Kompassify est conforme au RGPD et hébergé dans l'UE, gratuit en dessous de 100 utilisateurs actifs mensuels, avec des offres payantes à partir de 129 $/mois.

Transformez vos écrans vides en tremplins

Kompassify vous permet d'ajouter des parcours de bienvenue, des visites guidées, des checklists d'onboarding et des infobulles par-dessus vos états vides existants : sans code et sans attendre un sprint. Installez-le avec un seul snippet de script et voyez davantage d'inscrits atteindre leur première réussite. Conforme au RGPD, hébergé dans l'UE et gratuit en dessous de 100 utilisateurs actifs mensuels.

Commencer gratuitement →

Questions fréquentes

Qu'est-ce qu'un état vide en UX ?

Un état vide (empty state) désigne tout écran qu'un utilisateur voit lorsqu'il n'y a aucun contenu à afficher : un tableau de bord tout neuf sans données, une boîte de réception sans message, une recherche sans résultat ou une liste que l'utilisateur vient de vider. En design UX, l'état vide est le moment où l'interface n'a rien à montrer et doit décider quoi dire à la place. Un état vide bien conçu explique ce que l'écran contiendra, pourquoi il est vide pour l'instant et quelle action unique permet de le remplir. L'impasse devient alors la première étape de l'onboarding.

Pourquoi les états vides sont-ils importants ?

Parce que pour un nouvel utilisateur, l'état vide EST le produit. La plupart des produits SaaS montrent leur valeur à travers les données de l'utilisateur lui-même (tableaux de bord, projets, rapports), et chaque nouveau compte démarre donc sans aucune de ces données. Si ce premier écran vide ne donne aucune indication, l'utilisateur doit construire seul son premier succès à partir de rien, et beaucoup abandonnent en silence. Un bon état vide réduit le time to value, améliore l'activation et diminue le churn précoce, car il transforme le point de blocage le plus fréquent de l'onboarding en une prochaine étape guidée.

Quels sont les différents types d'états vides ?

Cinq types couvrent presque tous les cas. L'état vide de premier usage apparaît quand un nouvel utilisateur n'a encore rien créé : c'est le type le plus important pour l'onboarding. L'état « tout est terminé » apparaît quand l'utilisateur a tout traité, comme une boîte de réception vidée : un moment à célébrer, pas à excuser. L'état « aucun résultat » apparaît quand une recherche ou un filtre ne renvoie rien et doit aider l'utilisateur à affiner sa requête. L'état d'erreur apparaît quand le contenu n'a pas pu se charger et doit expliquer le problème et proposer de réessayer. L'état d'accès restreint apparaît quand le rôle ou l'offre de l'utilisateur ne donne pas accès au contenu et doit expliquer comment l'obtenir.

Que doit contenir un état vide ?

Quatre éléments : un visuel rassurant (illustration ou icône) qui donne le ton et confirme que rien n'est cassé ; un titre court qui dit à quoi sert cet espace ; une ou deux lignes d'explication sur la raison du vide et sur ce qui apparaîtra ici ; et un appel à l'action principal et clair qui crée le premier élément, éventuellement complété par un lien secondaire vers un modèle, des données d'exemple ou l'aide. Le test d'un bon état vide : un utilisateur qui le découvre sait en quelques secondes exactement quoi faire, sans ouvrir la documentation.

Quel est l'impact des états vides sur l'onboarding utilisateur et l'activation ?

L'état vide de premier usage est en général le premier véritable écran de l'onboarding : c'est là que le parcours d'inscription s'arrête et que le produit commence. S'il mène à une impasse, les utilisateurs se bloquent précisément là où se joue l'activation, entre la création du compte et la première action utile. Traiter les états vides comme des surfaces d'onboarding, avec une prochaine étape claire, des modèles ou des données d'exemple et un accompagnement comme une visite guidée ou une checklist d'onboarding, augmente de façon mesurable la part d'inscrits qui atteignent leur première réussite, ce qui est précisément la définition de l'activation utilisateur.

Quelle est la différence entre un état vide et un état d'erreur ?

Un état vide signifie qu'il n'y a légitimement rien à afficher : pas encore de données, aucun résultat pour cette requête ou tout est terminé. Un état d'erreur signifie que du contenu existe (ou devrait exister) mais n'a pas pu s'afficher parce que quelque chose a échoué : problème réseau, erreur serveur, délai dépassé. Les messages doivent être différents : l'état vide guide l'utilisateur vers la création ou la recherche de contenu, tandis que l'état d'erreur le rassure sur la sécurité de ses données, explique simplement ce qui s'est passé et propose de réessayer. Utiliser le même écran vide générique pour les deux laisse l'utilisateur se demander s'il doit agir ou attendre.

Comment améliorer ses états vides sans mobiliser l'équipe technique ?

Vous pouvez superposer un accompagnement à vos écrans vides existants sans toucher au code. Avec une plateforme no-code comme Kompassify, vous pouvez ajouter un parcours de bienvenue qui oriente chaque utilisateur vers le bon point de départ, lancer une courte visite guidée qui l'emmène de l'écran vide à son premier élément créé, afficher une checklist d'onboarding avec barre de progression qui entretient l'élan d'une session à l'autre, et placer des infobulles (tooltips) ou des widgets d'annonce directement sur les écrans vides. Le tout s'installe avec un seul snippet de script, est conforme au RGPD et hébergé dans l'UE, gratuit en dessous de 100 utilisateurs actifs mensuels, avec des offres payantes à partir de 129 $/mois.