Les états vides sont le produit

L'écran le plus important de votre produit est celui où il n'y a rien. Pas le dashboard. Pas la page de réglages. L'écran sur lequel l'utilisateur atterrit avant que la moindre donnée existe. Cet écran, c'est tout le produit compressé en une seule image, et la plupart des équipes le traitent comme une réflexion après coup.

Les états vides sont confiés à celui qui a le temps. Ils héritent d'une illustration de stock : une personne avec une loupe, et une phrase qui dit « Rien ici pour l'instant. » Puis l'équipe livre et se demande pourquoi l'activation stagne. L'état vide n'était pas du vernis. C'était le produit. Vous avez juste construit le mauvais.

L'état vide est la surface d'activation

L'activation ne se produit pas dans le dashboard. Elle se produit dans l'état vide. C'est là que l'utilisateur décide si le produit mérite une deuxième session.

Un nouvel utilisateur ne voit ni votre roadmap ni vos études de cas. Il voit un écran blanc avec votre logo et une petite voix qui demande « bon, et maintenant ? ». Ce que l'écran dit ensuite devient le produit. L'état vide est le seul produit qu'il ait jamais utilisé.

Linear l'a compris. La boîte de réception vide n'affiche pas « Aucune issue. » C'est une toile composée avec soin, avec un raccourci clavier, une action suivante évidente, et le sentiment d'être dans un outil fait par des gens qui s'en soucient. L'état vide est l'activation. Le dashboard est la récompense.

Ce que dit chaque état vide

Un état vide, c'est le système qui parle quand il n'a rien d'autre à dire. Ce qu'il dit devient la marque et la première impression de l'utilisateur sur la façon dont ce produit le traite.

Un mauvais état vide s'excuse de ne pas avoir de données. Un bon suppose que l'utilisateur est là exprès et lui donne le prochain coup à jouer. La différence, c'est la posture. L'un dit « désolé, il n'y a rien ici ». L'autre dit « voici comment on démarre ».

Le document vierge de Notion est l'exemple le plus propre du secteur. Un prompt discret, un indice de menu slash, le focus clavier immédiat. Pas d'illustration, pas d'écran de bienvenue. Le fait de taper est l'activation, et l'état vide est le produit.

Les cinq archétypes que les designers ratent sans cesse

La plupart des équipes traitent l'« état vide » comme un seul problème de design. Il y en a cinq. Chacun apparaît à un moment différent, joue un rôle différent dans la rétention, et échoue pour une raison différente.

1. Zéro donnée, premier lancement

L'écran que l'utilisateur voit la première fois qu'il ouvre le produit. Aucun projet, aucun document, aucun historique. L'état vide aux enjeux les plus élevés de l'app, et généralement le plus négligé.

L'état de première ouverture de Cursor est une leçon. Une seule fenêtre d'éditeur, un prompt discret, une commande d'exemple prête pour le clavier. Pas de visite guidée, pas de défilé d'infobulles, pas de modale « Bienvenue dans Cursor ». L'utilisateur est déjà dans le travail.

Le canevas de nouveau fichier de Figma fait la même chose dans un autre registre. Un canevas infini propre, une barre d'outils à portée de main, un curseur là où vous l'avez laissé. Comparez avec les produits qui s'ouvrent sur une checklist en cinq étapes et un mur « Connectez votre espace de travail ». L'un ressemble à un outil. L'autre ressemble à des devoirs.

2. Zéro résultat après un filtre

L'utilisateur vient de demander quelque chose de précis et votre produit n'a rien à montrer. C'est un moment de confiance. L'état vide doit reconnaître la recherche, confirmer qu'elle a bien été exécutée, et proposer une suite.

Linear affiche le filtre actif, une explication d'une ligne et une action claire « Effacer les filtres ». Le dashboard des paiements de Stripe fait de même quand une plage de dates ne renvoie rien. La page ne disparaît pas. Elle explique, puis elle propose.

Le mode d'échec, c'est l'impasse : « Aucun résultat trouvé. » Point. Pas de contexte, pas d'issue. L'utilisateur est coincé dans un état créé par le produit, et le produit refuse de l'en sortir.

3. Zéro permission

L'état vide que personne ne conçoit et que tout le monde livre. L'utilisateur arrive sur un écran auquel il n'a pas accès, et le produit le punit d'être curieux. Un 403, une ligne « Vous n'avez pas la permission », une impasse.

La bonne version respecte l'utilisateur. Elle explique qui peut accorder l'accès, offre un bouton « Demander l'accès » en un clic, et dit ce qui se passe ensuite. Slack le fait quand vous cliquez sur un canal privé sans en être membre. L'état vide transforme un mur en porte.

4. Zéro connexion

L'utilisateur a ouvert votre produit et il n'est encore connecté à rien. Stripe avant le moindre paiement. Vercel avant le moindre déploiement. Un nouvel espace Slack avant que le moindre canal soit réel. Le plus haut risque d'abandon de l'app, parce que l'utilisateur fixe un produit vide et ne s'est pas encore engagé à le remplir.

L'état « aucun paiement pour l'instant » de Stripe Atlas est une leçon magistrale. Pas de graphique vide avec une tête triste. Il montre le type d'activité que le dashboard affichera, vous oriente vers votre première intégration, et renvoie directement à la clé API dont vous avez besoin ensuite.

La liste de projets vide de Vercel est l'inverse d'un vide. Un bouton de déploiement, une option d'import, un modèle d'exemple, le tout sur le même écran. Le premier déploiement est l'événement d'activation, et l'état vide est la piste de décollage.

5. Zéro sortie d'IA

Nouveau, et la plupart des produits y échouent. L'utilisateur a envoyé un prompt et le système n'a rien à renvoyer. Le modèle a expiré, l'entrée était insuffisante, ou un garde-fou de sortie l'a bloqué.

La mauvaise version dit « Désolé, une erreur s'est produite. » La bonne est précise. Pourquoi rien n'est revenu, ce que l'utilisateur peut changer, s'il existe un chemin de nouvel essai. Le flux de premier enregistrement de Loom gère bien un problème similaire : quand l'enregistrement échoue à l'envoi, l'état vide explique l'échec et propose un nouvel essai immédiat sans perdre le fichier. L'analyse sur l'onboarding des produits IA détaille comment la forme globale de l'onboarding change quand l'IA est la surface centrale.

Ce dont chaque état vide a besoin

Les plus solides partagent cinq éléments. Sautez-en un et l'écran retombe en mode excuses.

1. Contexte. Nommez ce que l'utilisateur regarde et pourquoi c'est vide. « Aucune issue pour l'instant » ne suffit pas. « Aucune issue dans ce cycle. Ajoutez la première avec C. » est un écran qui fait son travail.
2. Action. Une action principale, une touche, un bouton. Si vous écrivez trois phrases pour dire quoi faire, le design est mauvais.
3. Voix. La voix du système quand il n'a rien d'autre à dire doit correspondre au reste de la marque. Un ton d'erreur stérile dans un produit chaleureux brise le charme.
4. Hiérarchie. Titre, explication d'une ligne, action principale, lien secondaire optionnel. Quatre éléments portés par une vraie hiérarchie visuelle. Tout ce qui s'ajoute est du bruit.
5. Mouvement. Un signal discret que l'écran est vivant. Un curseur qui clignote, une légère pulsation de CTA, une petite flèche animée. Un signe que le produit attend l'utilisateur.

Les modes d'échec qui tuent les états vides

Six schémas tuent plus d'états vides que tout le reste.

Les illustrations fumeuses. Un personnage de dessin animé avec un presse-papiers. Un télescope. Un astronaute flottant. Elles remplacent le travail que l'écran devait faire, et signalent que le produit n'est pas assez sérieux pour écrire de vrais textes.

Les états en impasse. « Rien ici pour l'instant » sans prochaine étape. Un 404 sans issue. Un 403 sans chemin vers l'accès. Chaque état vide sans action suivante est une fuite dans la rétention.

Les états vides qui font la leçon. Un long paragraphe expliquant ce que fait cette section. L'utilisateur est venu utiliser le produit, pas lire un tutoriel. Si l'état vide demande trois paragraphes, c'est le produit qui a besoin de moins d'explications, pas l'écran de plus.

Le piège de l'inbox zero. Concevoir la célébration « tout est fait » avant le flux de « première action ». Superhuman mérite son inbox zero avec des mois de vrai travail. La plupart des produits copient la célébration sans la mériter, et les utilisateurs se sentent pris de haut dès le premier jour.

Le renoncement « rien ici pour l'instant ». Trois mots, pas de contexte, pas d'action, pas de voix. L'équivalent en état vide d'un designer qui abandonne. Si cette chaîne est livrée dans votre produit, votre rétention est déjà cassée.

Le générique pour tous les archétypes. Un seul composant réutilisé pour le premier lancement, l'absence de résultats, de permission, de connexion. Chaque archétype a des enjeux différents. Un seul composant ne peut pas tous les servir sans les aplatir.

L'audit des états vides

Passez chaque état vide au crible de ces sept questions. Si vous ne pouvez pas répondre oui clairement à toutes, l'écran n'est pas fini.

1. L'écran dit-il à l'utilisateur où il est et pourquoi c'est vide ? Un libellé, une explication d'une ligne, une raison. S'il doit deviner, l'écran a échoué avant même de charger.
2. Y a-t-il exactement une action principale ? Pas deux boutons concurrents. Une action, rendue évidente par la hiérarchie et le contraste, comme la hero section de l'écran qu'elle est en réalité.
3. La voix correspond-elle au reste du produit ? Lisez-la à voix haute à côté d'un écran rempli. Si le ton change, l'état vide porte une autre marque.
4. La prochaine étape est-elle faisable en une touche ou un clic ? Pas « allez dans les réglages, puis connectez, puis revenez ». Un seul geste. Tout ce qui est plus long est un travail que l'état vide aurait dû absorber.
5. L'écran paraît-il vivant, pas abandonné ? Un curseur, une pulsation, un placeholder, un indice. Un blanc statique paraît cassé même quand tout fonctionne.
6. L'écran est-il spécifique à l'archétype ? Chaque archétype a des enjeux et un texte différents. Un composant générique réutilisé est une odeur, pas un système.
7. Si l'utilisateur ne voit que cet écran, vend-il le produit ? Si la réponse est non, l'état vide ne tient pas son rôle, et c'est sur cet écran que la plupart des nouveaux utilisateurs jugeront le produit.

Un produit dont chaque état vide passe ces sept tests active sans effort. Tout le reste s'empile sur des écrans qui ont déjà fait le travail de conviction.

Choisissez le principe, puis livrez l'écran

Les états vides ne sont pas la couche de finition, ils sont la couche porteuse. Le produit qui gagne en 2026 est celui dont le premier écran, la page zéro résultat et le dashboard déconnecté ressemblent déjà au produit pour lequel l'utilisateur s'est inscrit. L'analyse des principes de design de landing page en est la version page marketing, et l'article sur les principes de web design explique comment le reste du produit suit.

Arrêtez de concevoir le dashboard en premier. Commencez par l'écran où il n'y a rien. Le dashboard est la récompense. L'état vide est le contrat.

Questions fréquentes

Quelle est la différence entre un état vide et un zero state ?

Dans la plupart des équipes, c'est la même chose. « Zero state » désigne plutôt spécifiquement les scénarios de premier lancement sans donnée. « État vide » est plus large et couvre tout écran où le contenu attendu est absent, y compris les résultats filtrés, les murs de permission et les échecs d'IA. Les principes sont identiques.

Chaque état vide doit-il avoir une illustration ?

Non. La plupart ne devraient pas. Une illustration se justifie quand elle porte de l'information, installe un ton dont la marque a besoin, ou ancre visuellement une explication complexe de premier lancement. Un personnage sympa avec un presse-papiers est de la décoration, pas du design. Si l'écran fonctionne sans l'illustration, livrez-le sans.

Comment écrire le texte d'un état vide ?

Deux phrases maximum. La première nomme ce que l'utilisateur regarde et pourquoi c'est vide. La seconde donne le prochain geste, à la voix active, avec un verbe. Coupez chaque adjectif et chaque excuse. Lisez à voix haute. Si ça sonne comme un template de stock, réécrivez.

Concevez d'abord l'écran vide

L'écran sans rien dessus est celui qui décide de tout. Le dashboard et les intégrations reposent sur une première impression que vous n'avez peut-être pas conçue exprès. Réussir cet écran coûte une semaine de plus. Le rater coûte une courbe de rétention que personne ne sait expliquer.

Si vous voulez une équipe qui conçoit les états vides comme une partie du produit et non comme un nettoyage de fin de parcours, engagez Brainy. Nous livrons des produits où le premier écran que l'utilisateur voit est celui dont il se souvient.