Comment concevoir les états vides et les recherches sans résultat

Une liste de projets vide peut signifier que la personne n’a encore créé aucun projet. Elle peut aussi signifier que sa recherche n’a trouvé aucun projet correspondant. Ces écrans présentent peut-être le même rectangle vide, mais ils appellent des explications et des actions différentes.

La différence pratique tient à la raison pour laquelle le contenu est absent. Une collection réellement vide a généralement besoin d’un moyen de commencer ou d’une explication sur l’arrivée du contenu. Une vue sans résultat doit permettre de modifier la requête, les filtres ou le périmètre qui masquent du contenu pourtant disponible. Envoyer les deux personnes vers « Créer un projet » peut transformer un simple problème de recherche en travail en double.

L’absence de résultats est une forme d’état vide. La distinction utile oppose une collection vide à une requête infructueuse : la première change lorsque du contenu arrive ; la seconde, lorsque la demande change.

Demandez-vous ce qui ferait apparaître du contenu

Avant d’écrire un titre, terminez cette phrase : du contenu apparaîtrait ici si la personne faisait quoi ? La réponse suffit souvent à distinguer un état vide utile d’un écran générique.

Si la réponse est « créait son premier projet », l’écran peut expliquer ce qu’un projet contient et proposer cette action. Si c’est « retirait le filtre Archivé », il doit aider à modifier le filtre. Si c’est « attendait la fin de la requête », l’interface est encore en cours de chargement. Si c’est « retrouvait les droits d’accès », un bouton de création peut être sans rapport ou indisponible.

Cette question évite aussi une erreur fréquente de rédaction : considérer l’absence de lignes visibles comme la preuve qu’aucune donnée n’existe. La vue sait peut-être seulement qu’aucune fiche accessible ne correspond à la demande actuelle. Son message doit refléter cette connaissance, sans affirmer davantage à propos de tout l’espace de travail.

L’article de Nielsen Norman Group sur les états vides rappelle l’intérêt d’expliquer l’état du système et de proposer une entrée adaptée dans la tâche. Il met également en garde contre l’affichage d’un message d’absence de résultats pendant que le contenu charge encore. Cette base est utile ; le choix précis dépend toujours de ce que l’application sait de la collection et de la demande actuelles.

Power BI explique l’arrivée du contenu ; NexTag montre l’importance de la hiérarchie

L’article de NN/G sur les états vides présente une vue des éléments récents de Microsoft Power BI qui explique comment le contenu y arrive : ouvrir un contenu le rend disponible dans Recents. Le détail important est le lien de cause à effet. La vue ne laisse pas entendre que tout le compte est vide ou que la personne doit créer quelque chose.

Un cas contrasté apparaît dans les recherches de NN/G sur les pages sans résultat. Sur une ancienne page de recherche NexTag, une personne n’a pas remarqué le petit message d’absence de correspondance et a regardé le contenu plus visible placé en dessous. Le tracé oculométrique n’a enregistré aucune fixation sur le message lui-même. Des suggestions pour poursuivre existaient, mais la personne n’avait pas compris pourquoi elle en avait besoin.

Cela ne signifie pas que chaque vue vide exige un titre immense. Le message de Power BI a une fonction locale : expliquer une vue dans un espace de travail existant. Une page de recherche doit interrompre l’attente selon laquelle la zone principale contient des résultats correspondants. Donnez au statut assez de visibilité pour son contexte, puis rendez l’action utile suivante facile à trouver. Les illustrations décoratives et les recommandations sans rapport peuvent perturber cet ordre, même si le texte est techniquement présent.

Choisissez l’état à partir des faits, pas d’un tableau vide

Une réponse de longueur nulle ne suffit pas pour choisir l’interface. La requête peut être en attente, avoir échoué, être limitée par les droits ou avoir réussi sans résultat. Dans une vraie implémentation, le message doit dépendre du statut et du périmètre de la requête, pas seulement du nombre de fiches visibles.

Ce tableau devient particulièrement utile pour examiner les transitions. Saisissez une requête, remplacez-la immédiatement par une autre et laissez les réponses arriver dans l’ordre inverse. La vue doit montrer l’état de la requête active. Une ancienne réponse vide ne doit pas effacer un résultat plus récent et réussi. C’est un défaut de circulation des données ; une illustration supplémentaire n’y changera rien.

Une question pratique pour la revue est : « Que feriez-vous maintenant ? » Montrez l’écran sans commencer par décrire son état. Si une personne choisit Créer parce qu’elle ne trouve pas la requête conservée, les commandes permettant de poursuivre sont à revoir. Si elle attend parce que la vue paraît inachevée, clarifiez si le traitement est terminé. Notez l’interprétation, pas seulement le clic sur le bouton attendu : un clic correct par hasard peut masquer un état mal compris.

Rédigez en fonction de la cause de l’absence de contenu

Première utilisation : un début crédible

Une vue de première utilisation doit aider à comprendre l’objet que l’on s’apprête à créer. « Rien ici pour le moment » reconnaît le vide, mais n’explique pas l’utilité de la zone. « Regroupez les briefs, les liens et les notes de revue de vos projets » donne une raison plus concrète de commencer.

Associez cette explication à une action réellement accessible. Si créer un projet ne demande qu’un nom, « Créer un projet » peut ouvrir cette première étape légère. Si la configuration exige de connecter un service externe, l’action doit plutôt nommer cette connexion. Un bouton qui paraît simple mais ouvre un parcours de configuration étonnamment complexe peut créer un nouveau problème juste après avoir résolu celui du vide.

La quantité d’explications doit correspondre à la familiarité probable de la personne. Quelqu’un qui ouvre un espace projet pour la première fois appréciera peut-être un court exemple. Quelqu’un qui vient de supprimer volontairement la dernière recherche enregistrée n’a probablement pas besoin d’une introduction à la recherche. La collection est vide dans les deux cas, mais leurs connaissances diffèrent.

Soyez prudent avec les exemples de contenu. Des lignes de démonstration rendent un concept tangible, mais doivent être clairement identifiées comme exemples, sans se faire passer pour les données de la personne. Si le projet de démonstration porte un statut « Approuvé par le client », il ne doit pas pouvoir être confondu avec une vraie validation. L’état vide doit réduire l’incertitude, pas la remplacer par une fiction séduisante.

Aucun résultat : modifier la demande

« Aucun résultat » indique que la recherche est terminée, mais laisse sa raison et la suite à donner dans le flou. Un message utile préserve le lien entre la demande et son résultat. Pour une recherche, gardez la requête saisie visible et modifiable. Pour un filtrage, laissez les filtres actifs visibles. Sinon, la personne doit se rappeler ce qu’elle a demandé avant de décider quoi changer.

Dans notre exemple, un titre clair serait « Aucun projet ne correspond à “autumn launch” ». Si le filtre de date semble être la restriction en cause, l’explication peut préciser : « La période actuelle va du 1 au 7 octobre. » Cette information reste utile même lorsque l’application ne sait pas si l’absence de correspondance vient de la requête ou de la période.

Choisissez des actions qui modifient la condition pertinente. « Retirer le filtre de date » est plus précis que « Recommencer » lorsqu’un seul filtre de date est actif. « Effacer tous les filtres » convient si tous sont effectivement retirés ; si la requête reste en place, le libellé doit rendre cette distinction compréhensible. Une réinitialisation qui change silencieusement la recherche et le périmètre de filtrage peut surprendre une personne qui ne souhaitait modifier qu’un élément.

Les recommandations de Nielsen Norman Group sur les pages de recherche sans résultat préconisent de rendre l’issue évidente, de garder des chemins pour poursuivre et d’éviter un ton qui se moque de la personne. Appliquez ces principes à la tâche réelle. Une recherche de projets, un catalogue de produits et une bibliothèque de documents juridiques n’ont pas besoin des mêmes suggestions ni des mêmes images.

Si vous proposez des alternatives, expliquez ce qu’elles représentent. Les « Projets associés » ne doivent pas ressembler aux résultats de la requête infructueuse. Placez l’explication de l’absence de résultats avant les suggestions et donnez un libellé distinct à cette collection alternative. La personne ne devrait pas avoir à deviner pourquoi des éléments apparemment sans rapport apparaissent après une recherche précise.

N’affirmez que ce que le système peut établir

« Aucun projet n’existe » est une affirmation large. « Aucun projet ne correspond à ces filtres » est plus restreint. « Aucun projet n’est visible pour vous dans cet espace de travail » décrit encore une autre limite. Choisissez selon les informations dont dispose l’interface, pas selon la phrase qui tient le mieux sur une ligne.

Cela compte dans les systèmes à contenus privés ou restreints. Un résultat vide ne signifie pas nécessairement qu’un objet est absent. Il peut signifier que la personne ne peut pas le voir. L’équipe produit doit décider ce qui peut être révélé et quelles actions sont adaptées. Le design ne doit pas révéler l’existence de fiches confidentielles simplement pour rendre un message plus précis.

Même sans question de droits, une vue peut ne disposer que d’informations partielles. Les index de recherche peuvent se mettre à jour après l’enregistrement du contenu et les imports peuvent être encore en traitement. Si l’application sait qu’un import est en cours, elle peut le décrire. Si elle l’ignore, n’inventez pas de promesse rassurante selon laquelle les éléments manquants apparaîtront bientôt.

Pour l’espace fictif, formulez une petite règle rédactionnelle : une requête réussie sans correspondance peut produire « Aucun projet correspondant » ; un nombre total confirmé à zéro peut produire « Aucun projet pour le moment ». Une requête en échec ne produit ni l’un ni l’autre. Cette distinction simple évite qu’un problème réseau emprunte le ton optimiste d’une première utilisation.

Conservez assez de structure pour faciliter l’action suivante

Une vue vide peut être visuellement plus calme qu’une liste remplie tout en gardant les commandes utiles en place. La recherche, les pastilles de filtres, le titre de page et le périmètre de la collection aident à comprendre où l’on se trouve. Les retirer au profit d’une illustration centrée peut embellir l’écran tout en compliquant la sortie de cette situation.

Pour notre liste de projets sans résultat, gardez le champ de recherche au même endroit et laissez l’espace de travail sélectionné visible. Placez l’explication dans la zone où les résultats apparaissent habituellement. La personne peut alors modifier sa demande sans chercher une commande qui aurait changé de place avec le nombre de résultats.

Un écran de première utilisation offre davantage de liberté. Il n’y a pas de lignes à comparer et un message d’introduction plus grand peut convenir. Même dans ce cas, conservez une navigation familière et un titre clair. Avant d’appuyer sur le bouton, la personne doit savoir si elle crée un projet dans son espace personnel ou dans un espace partagé avec l’équipe.

Ne faites pas dépendre l’encombrement visuel d’une unique phrase anglaise courte. Testez des noms de projets plus longs, des traductions plus longues et des filtres qui passent sur deux lignes. Les vues vides sont souvent conçues à une largeur de bureau confortable avant d’être comprimées dans des panneaux latéraux étroits. Un design qui ne fonctionne qu’avec « No items » n’est pas prêt à accueillir un contenu réaliste.

Choisissez l’action utile la moins coûteuse

Une action pour poursuivre doit faire avancer sans supprimer inutilement le travail déjà fait. Si la personne a soigneusement choisi un espace de travail, une période et un responsable, tout effacer constitue une remise à zéro importante. Cela peut rétablir des résultats, mais détruit aussi le contexte qu’elle essayait d’examiner.

Proposez une modification plus limitée lorsque le système le permet. Retirer un filtre peut être plus utile que vider toute la demande. Élargir la période peut préserver un mot-clé pertinent. Revenir au dossier parent peut apporter davantage que renvoyer vers la page d’accueil de l’application.

Ne laissez pas entendre que l’action la plus petite garantit un résultat. « Retirer le filtre de date » décrit honnêtement une opération. « Afficher vos projets » promet un résultat que l’interface ne sait peut-être pas pouvoir fournir. Si un décompte prévisionnel fiable existe, le produit peut faire une suggestion plus affirmée ; sinon, gardez un libellé factuel.

La création peut rester utile sur une page sans résultat, mais généralement au second plan. On peut chercher un projet avant de décider d’en créer un. Proposez cette voie sans en faire la seule issue apparente. Dans un système où les doublons coûtent cher, pensez à préciser que la recherche couvrait l’espace actuel plutôt qu’à suggérer trop vite un nouvel objet.

Suivez la même page dans le temps

La revue la plus révélatrice est une courte séquence, pas une série de captures vides isolées. Commencez avec une liste remplie, appliquez un filtre qui ne renvoie aucune correspondance, retirez-le et vérifiez que la liste d’origine revient. Créez ensuite une collection réellement vide et comparez le message et l’action.

Dans l’espace fictif, une personne commence avec six projets dans la collection actuelle. Elle choisit un responsable qui n’a aucun projet durant la semaine sélectionnée. La zone de résultats indique qu’aucun projet ne correspond et laisse visibles les commandes de responsable et de date. Retirer le filtre de date fait revenir les projets correspondants sur une période plus large, tout en préservant le responsable sélectionné.

Passez maintenant à un nouvel espace sans projet. La même zone présente l’utilité des projets et propose d’en créer un. Effacer les filtres est inutile : aucun n’est actif et la collection sous-jacente est vide. L’interface peut partager la typographie et les espacements du premier état sans reprendre son message.

Ce sont des questions d’implémentation autant que de design. Une comparaison statique peut définir le comportement attendu, mais l’application fonctionnelle a besoin de tests sur l’ordre des réponses et les changements d’état. Gardez la revue centrée sur ce petit parcours plutôt que de la transformer en catalogue sans rapport de tous les états possibles.

Adaptez le ton à la situation

Une liste personnelle de favoris vide peut être légère et accueillante. Un journal d’audit vide pendant une enquête sur un incident doit rester calme et précis. La même illustration souriante et la même formule « C’est parti ! » ne serviraient pas les deux situations.

Considérez la préoccupation la plus probable. Une nouvelle personne peut se demander : « Que met-on ici ? » Quelqu’un qui cherche un fichier connu peut se demander : « Ai-je perdu l’accès, choisi le mauvais emplacement ou saisi le mauvais nom ? » Quelqu’un qui examine le travail terminé a peut-être seulement besoin de confirmation qu’il ne reste rien. Le ton est plus facile à choisir lorsque la question sous-jacente est explicite.

Ne félicitez pas la personne simplement parce qu’une liste ne contient aucune ligne. Une file de tâches vide peut signifier que tout est terminé, mais aussi qu’un filtre masque les tâches. Une célébration exige une situation positive confirmée. Si l’application ne peut pas l’établir, une explication neutre est plus digne de confiance.

De même, ne vous excusez pas pour une première utilisation normale. Une nouvelle collection sans fiche ne présente rien d’anormal. Réservez le vocabulaire de l’interruption aux vraies interruptions et faites des vues vides ordinaires une étape normale de l’usage du produit.

Faites en sorte que les illustrations justifient leur place

Une illustration peut expliquer ce qui apparaîtra dans une collection ou distinguer une première utilisation d’une recherche infructueuse. Elle ne doit pas repousser l’action utile hors de la zone visible ni donner l’impression d’une impasse. Si retirer l’image rend le message plus facile à comprendre, revoyez la composition au lieu de défendre la décoration.

Dans notre exemple d’espace de travail, un dessin au trait discret d’une carte de projet peut montrer les informations qu’un projet contient. Une vue sans résultat n’a peut-être besoin que d’un petit symbole de recherche, puisque la requête et les filtres fournissent déjà le contexte. Les deux états peuvent appartenir à une même famille visuelle sans reprendre la même grande image.

Gardez les explications essentielles dans du véritable texte d’interface. Une illustration peut renforcer le lien entre un filtre et un résultat, mais le texte doit conserver son sens lorsque l’image n’est pas disponible. C’est particulièrement important si l’image contient de petits libellés nets dans le fichier de design mais illisibles dans une présentation étroite.

Examinez cette distinction dans OpenDesign

Un aperçu HTML pris en charge dans OpenDesign facilite la comparaison de ces variantes. Construisez les exemples de collection vide et de recherche sans résultat avec un texte réaliste, ajustez manuellement les textes ou les styles et examinez-les avec les formats de fenêtre prédéfinis. Les commentaires envoyés dans le chat peuvent désigner le message ou l’action exacte à modifier.

Pour une revue utile, demandez à quelqu’un d’expliquer ce qui s’est passé sur chaque écran et ce qu’il ferait ensuite. Ne présentez pas les écrans comme « état de première utilisation » et « état vide après filtrage » avant de poser la question : ces étiquettes donnent la réponse que le design doit communiquer. Si les deux écrans produisent la même interprétation, la différence n’est pas encore assez claire.

Vérifiez aussi les conditions des données dans l’application fonctionnelle : la requête active, le périmètre des droits et la réinitialisation des filtres doivent sélectionner le message examiné dans le design.

Une petite décision qui évite un malentendu plus large

Avant de valider une zone vide, lisez son titre comme une affirmation factuelle. Vérifiez ensuite que l’application en sait assez pour l’énoncer. Lisez son action principale comme une promesse sur ce qui va changer et vérifiez que la commande produit réellement ce changement.