L'état vide est votre produit, pas une réflexion après coup.

L'écran le plus important de votre produit est celui qui est vide. C'est celui que la plupart des équipes déploient en dernier, qu'elles soignent le moins, et dont elles oublient ensuite l'existence.

Ouvrez une nouvelle application pour la première fois. Votre boîte de réception est vide, votre liste de projets est vide, la recherche ne donne aucun résultat, vous venez d'effacer un tableau. Cinq moments différents, cinq écrans vides différents, et presque tous les produits les traitent comme un seul et même problème.

Or, il ne s'agit pas du même problème. Ce sont cinq surfaces de conception complètement différentes, et ensemble, elles déterminent si l'utilisateur continue à utiliser votre produit ou s'il ferme discrètement l'onglet.

Pourquoi l'écran vide est votre véritable première impression

Les utilisateurs ne jugent pas votre produit sur sa page d'accueil. Ils le jugent sur le deuxième écran, celui qui apparaît après l'inscription, celui où ils s'attendaient à quelque chose de magique et où ils découvrent une illustration triste indiquant « Rien ici pour le moment ».

Ce moment est l'argumentaire de vente complet, condensé. Il indique à l'utilisateur ce qui est possible, ce qu'il doit faire ensuite et à quel point vous avez pensé à lui. Réussissez, et ils s'investissent. Ratez, et ils s'en vont, et aucune relance par e-mail ne les fera revenir.

Un écran vide bien conçu remplit trois fonctions à la fois : il explique la fonction de l'application, il donne le ton émotionnel du produit et il propose à l'utilisateur une action suivante plus simple que de fermer l'onglet.

La plupart des écrans vides ne font rien de tout cela. Ils affichent un dessin sympathique, s'excusent d'être vides et espèrent que l'utilisateur se débrouillera. Ce n'est pas du design, c'est de l'indifférence.

Les cinq types d'écrans vides (et pourquoi ils nécessitent des traitements différents)

Traiter tous les écrans vides de la même manière est l'erreur originelle du design des écrans vides. Voici les cinq situations distinctes, classées par ordre de fréquence d'erreur des équipes.

1. Première utilisation : L'utilisateur vient de s'inscrire, il n'a jamais vu ce produit auparavant et l'écran est vide car il n'a rien fait. C'est l'écran vide le plus critique de votre produit.

2. Écran vide (état initial). L'utilisateur a déjà utilisé le produit, mais une zone spécifique est naturellement vide, comme un nouveau projet, un nouvel espace de travail ou une liste récemment créée. Il connaît le produit, mais pas cette partie.

3. Écran vide (après suppression). L'utilisateur vient de vider volontairement un élément. Il a vidé sa boîte de réception, terminé toutes ses tâches et archivé tous ses fichiers. C'est un moment d'accomplissement, pas d'absence.

4. Écran vide (erreur). L'écran est vide car une erreur s'est produite : la récupération des données a échoué, la connexion a été interrompue ou l'intégration est mal configurée. L'utilisateur pense que le produit est hors service, même si ce n'est pas le cas.

5. Écran vide (après recherche). L'utilisateur a saisi une requête et n'a obtenu aucun résultat. Il a fait preuve d'intention et a fourni un effort, mais vous n'avez rien renvoyé. C'est l'état vide le plus facile à gérer si vous intervenez correctement.

Chaque type d'erreur requiert une combinaison différente d'explications, d'actions et de ton. Un état initial doit être pédagogique, un état final doit célébrer, et un état de recherche vide doit suggérer des actions. Utiliser le même modèle générique « Rien ici » pour les cinq états revient à en gaspiller quatre.

Comparaison : ce que chaque état vide doit et ne doit pas faire

Les différences deviennent évidentes lorsqu'on les compare. Voici un aide-mémoire.

| Type d'état vide | Quand apparaît-il ? | Ce qu'il doit faire ? | Ce qu'il faut éviter ? |

|---|---|---|---|

| Premier état : l'utilisateur vient de s'inscrire et n'a encore rien fait. | Présenter l'action principale avec des exemples de données ou une première tâche guidée. | Message d'accueil sans destination, accompagné d'un « Commencer ». |

| État zéro : une zone spécifique est nouvelle, mais l'utilisateur connaît déjà le produit. | Suggérer 2 ou 3 actions concrètes, faire allusion à des modèles. | Répéter l'intégralité du parcours d'intégration. |

| Post-recherche vide : l'utilisateur vient de terminer, d'archiver ou de vider une liste. Célébrez, puis proposez la prochaine action pertinente | Faites comme si l'utilisateur avait commis une erreur |

| Erreur - écran vide | Les données n'ont pas pu être chargées ou synchronisées | Indiquez clairement l'erreur, proposez une nouvelle tentative, fournissez un lien vers une page d'état | Afficher un écran vide générique et faire comme si de rien n'était |

| Recherche - écran vide | L'utilisateur a saisi une requête, aucun résultat | Afficher la recherche, suggérer des requêtes associées, proposer la création de résultats | « Aucun résultat trouvé » sans issue |

Remarquez que les modes d'erreur sont presque identiques dans tout le tableau. La plupart des produits affichent par défaut le même message générique pour chaque écran vide, ce qui explique pourquoi chaque écran vide dans la plupart des applications donne une impression de médiocrité.

Les quatre techniques de conception pour des écrans vides efficaces

Il existe précisément quatre techniques à mettre en œuvre. La plupart des écrans vides réussis en utilisent deux ou trois simultanément, jamais les quatre à la fois, car cela crée une confusion.

1. Données d'exemple. Pré-remplissez l'écran avec un contenu d'exemple réaliste que l'utilisateur peut manipuler, modifier ou effacer. Le tableau de bord de Stripe, avec son bouton « Afficher les données de test », est un modèle à suivre.

2. Actions suggérées. Mettez en avant deux ou trois actions concrètes à venir sous forme de boutons ou de cartes, plutôt qu'un vague bouton « Commencer ». Les suggestions de modèles de Notion sur une nouvelle page sont une excellente approche.

3. Illustration pédagogique. Utilisez un visuel pour montrer à quoi ressemblera l'espace une fois rempli, et non une illustration triste. Un petit aperçu de ce à quoi ressemblera une boîte de réception ou un tableau une fois rempli est préférable.

4. Texte d'introduction. Trois à douze mots qui définissent la personnalité du produit et indiquent à l'utilisateur la finalité de cet espace. Le texte de la boîte de réception vide de Linear exprime mieux l'identité de la marque en une seule phrase que la plupart des pages d'accueil.

L'astuce consiste à choisir la bonne combinaison pour chaque état. Lors de la première utilisation, on recherche des exemples de données et des actions suggérées ; après la validation, on souhaite un texte d'introduction et peut-être une petite célébration ; lorsqu'une page est vide, on recherche des suggestions et une offre de création. Adaptez votre approche à la situation.

Exemples de produits réussis (et ce qu'il faut retenir)

Le moyen le plus rapide d'intégrer ce principe est d'étudier les produits qui considèrent l'état vide comme un problème de conception. Voici un bref aperçu de quelques-uns des meilleurs exemples.

Boîte de réception vide de Linear. Linear considère la boîte de réception vide comme une petite pause. Le texte est sobre, légèrement humoristique, cohérent avec l'image de marque, et le visuel est apaisant plutôt que plaintif. Il n'y a pas de bouton « Commencer » car il n'est pas nécessaire.

Suggestions de modèles de Notion. Une nouvelle page Notion est techniquement vide, mais elle ne donne jamais cette impression. Le curseur est prêt à l'emploi, les commandes slash sont suggérées et des modèles apparaissent en fonction du contexte. Vous n'êtes jamais face à une page blanche, mais à un menu d'options.

Le mur des brouillons de Figma. Un nouveau compte Figma ne vous présente pas une liste de fichiers vide. Il vous montre l'espace Brouillons avec des exemples de fichiers, des conseils pour créer une équipe et un accès direct à votre premier canevas. Vous apprenez à utiliser le produit en l'observant.

Cron, désormais le calendrier intégré de Notion Calendar. Une fois la configuration terminée, le calendrier affiche vos événements connectés, ainsi que les raccourcis clavier et quelques exemples d'événements illustrant le fonctionnement du produit. Vous vous y retrouvez en dix secondes.

Premier lancement de Things 3. Things est livré avec un projet de prise en main qui utilise le produit pour apprendre à l'utiliser. Chaque tâche est une leçon. Une fois que vous aurez consulté le dernier élément, vous aurez utilisé toutes les fonctionnalités nécessaires et votre boîte de réception vide sera devenue votre quotidien.

Autres produits à s'inspirer (Granola, Superhuman, Stripe, Replit, ChatGPT)

Voici quelques autres exemples, avec une préférence pour les produits et outils d'IA plus récents, car les tendances y sont encore en développement.

Première suggestion de transcription de Granola. Granola sait que le moment le plus délicat est la première réunion, lorsqu'on n'a rien à transcrire. L'application propose donc d'enregistrer un court test ou d'importer un exemple de transcription pour observer le fonctionnement de l'IA. Cela évite le cercle vicieux de la poule et de l'œuf.

Intégration chez Superhuman. Superhuman propose un entretien d'intégration avec un véritable conseiller humain avant même que votre boîte de réception ne soit vide. Cependant, la première utilisation dans l'application permet tout de même de se familiariser avec l'application grâce à des exemples d'e-mails et une présentation des raccourcis clavier. Une fois que vous maîtrisez l'application, cette boîte de réception vide devient presque une fonctionnalité.

Tableau de bord vide de Stripe. Stripe affiche un tableau de bord complet avec des exemples de données dès votre inscription. Un indicateur « Affichage des données de test » est clairement visible, et un simple clic vous permet d'accéder à votre compte réel, encore vierge. Vous voyez la destination avant même de voir le chemin pour y parvenir.

Espace de travail vide de Replit. Un espace de travail Replit vierge n'est pas vide. Il s'agit d'un éditeur de code avec un fichier de démarrage, une console affichant un message de bienvenue et un bouton « Exécuter » fonctionnel. Vous pouvez commencer à coder en quelques secondes.

Page d'invite vide de ChatGPT. La page d'invite vide de ChatGPT se résume à une simple zone de texte, ce qui fonctionne plutôt bien grâce à l'attrait culturel du produit. Des suggestions d'invites s'affichent en bas de page pour les nouveaux utilisateurs, ce qui représente le strict minimum. Si vous ne possédez pas la marque ChatGPT, ne copiez pas l'état vide de ChatGPT.

Les modes de défaillance, identifiés et dénoncés

Les états vides problématiques suivent quelques schémas facilement reconnaissables. Dès que vous les identifiez, cessez de les déployer.

L'illustration triste. Une mascotte sympathique aux yeux tristes à côté de « Rien ici pour le moment ». C'est mignon dans Figma, mais insultant dans le produit. L'utilisateur n'est pas triste, il vient de s'inscrire.

Le bouton « Commencer » qui ne mène nulle part. Un appel à l'action imposant qui ouvre un formulaire de création générique sans contexte, sans modèle, sans exemple. L'utilisateur clique, voit un formulaire vierge, et voilà, l'état vide s'étend sur deux écrans.

L'impasse. La recherche ne donne aucun résultat, point final. Aucune suggestion, aucun résultat pertinent, aucune proposition de création de ce qu'ils ont recherché. L'utilisateur a saisi quelque chose, vous avez refusé, la conversation est terminée.

Le vide infini. Fréquent dans les produits d'IA. L'interface entière se résume à un champ de saisie vide, en attente d'une interaction. Aucun exemple, aucune valeur par défaut, aucune configuration prédéfinie. L'utilisateur tape « salut » et quitte la page.

Le calcul de l'activation : pourquoi les 60 premières secondes sont cruciales

Chaque produit possède un moment d'activation, la première fois que l'utilisateur effectue l'action qui lui confère sa valeur : envoi du premier message, création du premier projet, importation du premier contact, génération du premier résultat.

L'écran vide correspond à la période entre l'inscription et l'activation. Chaque seconde passée à fixer « Rien ici pour le moment » est une seconde perdue pour activer le produit, et le taux d'abandon est élevé. Les 60 premières secondes d'une session ont un impact plus important sur la rétention que les 60 minutes suivantes réunies.

C'est pourquoi les exemples de données et les actions suggérées sont presque toujours plus performants que les écrans vides. Ils réduisent le processus d'activation de « décider quoi faire, puis trouver comment, puis le faire » à « cliquer ici, voir ce qui se passe, apprendre à utiliser le produit ». Trois étapes pour une.

Si votre taux d'activation est faible, corriger les états vides est généralement la solution la plus économique pour l'ensemble du produit. Moins cher que de repenser l'intégration, les tutoriels ou les séquences d'e-mails. Il suffit d'afficher quelque chose d'utile à l'écran.

L'angle IA : concevoir pour l'infini vide

Les produits d'IA sont confrontés à un problème unique d'état vide. L'interface se résume souvent à un simple champ de saisie qui peut théoriquement tout faire, ce qui signifie qu'en pratique, elle ne peut rien faire tant que l'utilisateur ne sait pas quoi demander. C'est l'infini vide.

ChatGPT, Claude, les générateurs d'images, Cursor, tous les outils d'IA y sont confrontés. La solution naïve consiste en un immense champ de texte vide avec la mention « Posez-moi une question ». Face à une infinité de possibilités, l'utilisateur saisit une question sans enjeu, obtient une réponse générique et conclut que le produit est moyen.

La solution est la même que pour les produits classiques, mais en plus percutante. Des suggestions illustrent les capacités de l'IA, des exemples de conversations ou de générations démontrent sa qualité, et quelques modèles de démarrage facilitent la prise en main. Appliquez la méthode de Granola, « enregistrer une réunion test », à toutes les fonctionnalités de votre IA.

Considérez le champ de saisie comme une phrase que l'utilisateur est en train de terminer, et non comme une phrase qu'il commence. Donnez-lui le début. L'espace vide initial devient alors un guide pour une première interaction, et l'activation s'accélère.

Ton et interaction : l'impact émotionnel des espaces vides

La plupart des équipes s'arrêtent à la première utilisation. L'interaction après la validation permet au produit de se comporter comme un collègue attentif.

Le ton est primordial. Les espaces vides sont perçus comme des moments de doute. L'utilisateur est novice, perdu, vient de terminer une tâche ou a rencontré une erreur. Un message d'état vide sarcastique dans une application financière paraît irrespectueux, un message trop formel dans un outil créatif semble rigide, et un message trop joyeux en cas d'erreur semble maladroit. Rédigez les messages d'état vide avec un ton unique, en variant intentionnellement selon le contexte.

Une fois la boîte de réception vidée, il est temps de célébrer ! L'utilisateur vient de terminer une liste, d'archiver tous ses éléments et d'atteindre zéro. Things 3 affiche un petit message de félicitations lorsque toutes les tâches sont terminées. Linear célèbre discrètement une file d'attente de triage vide. La satisfaction est bien réelle, et c'est l'un des rares moments où le produit est vraiment satisfait de l'utilisateur.

N'en abusez pas. Une animation de confettis à chaque fois qu'un utilisateur termine cinq tâches devient vite lassante, tandis qu'un message de remerciement sobre et discret, accompagné d'une suggestion pertinente pour la suite, est toujours apprécié. Après avoir vidé sa boîte de réception, suggérez de planifier sa journée. Après avoir terminé un projet, suggérez de consulter le suivant.

Erreur et recherche : les états vides qui inspirent confiance

Ce sont les deux états vides qui importent le plus à l’utilisateur, car ils surviennent en pleine action, lorsque son intention est en jeu.

L’état « erreur » (boîte vide) doit inspirer confiance. Lorsqu’une donnée ne se charge pas, la plupart des produits affichent un état vide générique ou une trace de pile déguisée en erreur. Ces deux situations nuisent à la confiance, mais différemment. La version générique est pire, car l’utilisateur ignore que le produit est défaillant ; il suppose que sa boîte de réception est vide et ne revient jamais.

La solution ? Une communication claire et concise en cas d’erreur. Expliquez à l’utilisateur ce qui a échoué avec ses propres mots, pas les vôtres. Proposez-lui de réessayer, fournissez un lien vers une page d’état et indiquez le paramètre mal configuré. Un plus : si l’état « erreur » (boîte vide) reprend la structure visuelle de l’état initial, l’utilisateur comprendra ce qui lui manque.

L’état « recherche » (boîte vide) est le plus facile à récupérer. L’utilisateur a saisi du texte, vous savez exactement ce qu’il cherche, et afficher « Aucun résultat trouvé » avec un émoticône triste est une mauvaise pratique. La version minimale viable reprend la requête et suggère des recherches associées. La version correcte propose de créer ce que l'utilisateur a recherché. La version optimale utilise la requête pour suggérer un modèle, une action ou un article d'aide.

La recherche vide de GitHub suggère souvent de créer un ticket avec la requête comme titre. Notion suggère de créer une page. Linear suggère de signaler un bug. La recherche vide est le seul cas où le bouton « Commencer » est pertinent, car la destination est alors évidente.

Comment auditer les états vides de votre produit

On ne peut pas corriger ce qu'on n'a pas répertorié. La plupart des équipes sont surprises du nombre d'états vides qu'elles ont une fois qu'elles les comptent. Procédez à cet audit dans l'ordre suivant :

Ouvrez chaque page de votre produit dans une nouvelle session de navigation privée, en vous connectant avec un compte utilisateur inédit. Capturez une capture d'écran de chaque écran présentant une surface vide. Répertoriez-les dans un tableur, une ligne par écran, avec des colonnes pour le type, le texte actuel, l'aspect visuel actuel et l'action en cours.

Associez ensuite à chaque écran l'un des cinq types suivants : première utilisation, état initial, après effacement, erreur (vide) et recherche (vide). Vous constaterez que la plupart des produits comportent entre dix et trente états vides, et qu'un ou deux seulement ont été intentionnellement conçus.

Pour chaque écran, posez-vous trois questions : est-ce que cela explique la fonction de cette surface ? Est-ce que cela indique une action suivante précise ? Est-ce que cela est cohérent avec le reste du produit ? Si la réponse est oui à toutes les questions, n'y touchez pas. Si la réponse est non à une seule question, corrigez cette action et passez à la suivante.

Si vous souhaitez en faire une activité d'équipe, prévoyez 90 minutes et invitez le designer, le chef de produit et un ingénieur qui n'aime pas rédiger de contenu. L'ordre du jour est très simple et vous pouvez livrer les résultats la même semaine.

Pendant les 30 premières minutes, effectuez l'audit en équipe, en partageant un écran et en parcourant chaque surface vide. Discutez du type de chacune. Les désaccords sont acceptables, l'important est d'échanger.

Dans les 30 prochaines minutes, choisissez les trois pages vides les plus consultées et réécrivez-les immédiatement. Une phrase d'introduction percutante, deux actions suggérées et une décision quant à l'ajout ou non d'exemples de données. Résistez à la tentation de peaufiner les visuels : concentrez-vous d'abord sur le texte.

Dans les 30 dernières minutes, désignez des responsables et fixez un objectif de mise en ligne d'une semaine. N'en faites pas une initiative trimestrielle. Les pages vides sont courtes, ciblées et se mettent en ligne rapidement. Mettez-en trois en ligne cette semaine, trois autres la semaine prochaine, et en un mois, votre graphique d'activation progressera.

La page vide est le langage corporel du produit

Vous pouvez truquer le site marketing. Vous pouvez truquer la page d'accueil. Vous ne pouvez pas truquer la page vide, car c'est le moment où le produit cesse de promettre et commence à tenir ses promesses.

Lorsque l'utilisateur arrive sur une page vide, tous vos choix sont exposés. Avez-vous pensé à lui ou avez-vous simplement proposé la version par défaut ? Lui avez-vous expliqué le fonctionnement du produit ou vous êtes-vous excusé de son absence ? Votre texte sonne-t-il comme celui d'un humain ou comme celui d'un magicien des années 2000 ?

Considérez l'écran vide comme la porte d'entrée, pas comme une simple note de bas de page. Concevez-le en premier, pas en dernier. Contrôlez-le mensuellement. Désignez une personne responsable.

L'écran le plus négligé de votre produit est aussi celui que vos utilisateurs consultent le plus souvent. Soignez-le.