Concevoir les états vides : guider l’étape suivante quand le contenu manque
Une méthode pratique pour concevoir les états de première utilisation, de recherche sans résultat, de données effacées et d’erreur, avec des textes utiles, des actions claires et un traitement visuel adapté au contexte.
Un panneau vide est ambigu. Une personne peut se demander si l’application charge, si sa recherche a échoué ou si elle doit ajouter quelque chose. Un état vide utile nomme ce qui se passe et l’aide à décider de l’étape suivante.
Commencez par déterminer pourquoi le contenu manque. Une première utilisation, une recherche sans résultat, des données volontairement effacées et une erreur système demandent des messages et des actions différents. Les exemples présentés sont des exercices de conception hypothétiques, et non des études de cas ou des affirmations sur la performance d’un produit.
Points clés à retenir
- Déterminez pourquoi le contenu est absent avant de choisir le texte, l’illustration ou l’action.
- Distinguez le retour de chargement et d’échec d’un résultat vide confirmé.
- Rédigez un titre précis, une courte explication si nécessaire et une étape suivante pertinente.
- Examinez l’état dans son contexte, notamment l’accessibilité, les mises en page étroites et les chemins de reprise.
1. Diagnostiquer pourquoi l’espace est vide
Considérez un état vide comme une information sur le produit, pas comme une occasion de décoration. Demandez-vous ce qui s’est passé juste avant son apparition, ce que le système sait et si la personne peut changer la situation. NN/g décrit les états vides comme des occasions de communiquer un état, de faciliter l’apprentissage et d’ouvrir des voies vers les tâches importantes. Ces possibilités supposent d’abord d’identifier correctement l’état.
En particulier, n’affichez pas « Aucun élément » pendant qu’une requête est encore en cours. Gardez un indicateur de chargement ou un squelette visible jusqu’à ce que le résultat soit connu. Si la requête échoue, expliquez l’échec et la possibilité de réessayer. Si elle réussit sans élément, dites qu’aucun contenu correspondant n’existe. Cette distinction évite de prendre un retard temporaire ou un problème système pour un véritable résultat.
| État | Ce qu’il signifie | Réponse utile |
|---|---|---|
| Première utilisation | La fonctionnalité est prête, mais la personne n’a encore rien ajouté ni créé. | Expliquez ce qui apparaîtra ici et proposez un moyen direct de créer, d’ajouter ou d’explorer. |
| Aucun résultat | Une recherche, un filtre ou une plage de dates s’est achevée sans correspondance. | Confirmez que les critères n’ont donné aucun résultat ; suggérez un ajustement pertinent ou la suppression d’un filtre. |
| Données effacées | La personne a terminé ou supprimé les éléments habituellement affichés ici. | Reconnaissez l’achèvement ou le résultat vide sans laisser entendre qu’il y a un problème ; proposez une autre tâche si cela aide. |
| Erreur | Le système n’a pas pu récupérer ou afficher le contenu attendu. | Expliquez simplement ce qui a échoué et proposez une action de reprise, comme réessayer. |
| Chargement | Le système n’a pas encore déterminé si le contenu existe. | Montrez la progression ou un état de chargement ; n’annoncez pas prématurément un résultat vide. |
2. Rédiger un texte adapté à la cause
Utilisez un titre pour nommer l’état et un texte d’accompagnement pour expliquer ce qu’il signifie ou comment poursuivre. Le titre doit être facile à parcourir. N’ajoutez une phrase que si elle répond à une vraie question. Les recommandations de rédaction d’Apple préconisent des étapes suivantes claires sur les écrans vides, des libellés orientés vers l’action et des erreurs directes expliquant comment résoudre le problème. Évitez les traits d’esprit qui brouillent le sens, les titres vagues comme « Rien ici » et les formulations qui culpabilisent.
Par exemple, lors d’une première utilisation, un écran hypothétique d’éléments enregistrés pourrait indiquer « Vos guides enregistrés apparaîtront ici », suivi de « Enregistrez un guide pour le retrouver plus tard » et d’un bouton « Parcourir les guides ». Une liste de tâches terminée pourrait afficher « Vous êtes à jour » et proposer « Voir les tâches terminées ». Ces exemples décrivent des réalités différentes : le premier explique comment remplir une fonctionnalité, le second confirme un résultat réussi.
Pour une recherche achevée sans correspondance, un message hypothétique pourrait être « Aucun projet ne correspond à “orchidée” » avec la suggestion « Essayez un terme plus large ou effacez les filtres ». Conservez la requête et, si possible, rendez les changements de filtres réversibles. En cas de panne réseau, écrivez « Impossible de charger les projets » avec « Réessayer ». N’affirmez pas qu’aucun projet n’existe si le système n’a pas pu le vérifier.
- Nommez l’objet ou les critères concernés afin que le message reste compréhensible hors contexte.
- Utilisez un verbe sur le bouton, comme « Créer un projet », « Effacer les filtres » ou « Réessayer ».
- Placez les instructions près du contenu concerné et utilisez du texte en plus de la couleur ou des images.
- Évitez « Oups », les reproches et les codes techniques, sauf s’ils aident à résoudre le problème.
3. Proposer une étape suivante utile, sans l’imposer systématiquement
Proposez une action lorsque la personne peut raisonnablement changer la situation ou poursuivre sa tâche. La première utilisation gagne souvent à offrir la création ou l’ajout ; une recherche sans résultat peut bénéficier de la suppression d’une contrainte ; une erreur peut proposer de réessayer. Une boîte de réception vidée ou un entraînement terminé peuvent ne demander aucune action. N’imposez pas un bouton à chaque état simplement pour rendre le panneau interactif en apparence.
Adaptez la reprise à la gravité du problème. L’échec d’un rafraîchissement appelle généralement une explication dans la page et une nouvelle tentative, pas une alerte bloquante. Apple recommande d’adapter le retour à l’importance de l’information et de réserver les alertes aux situations critiques sur lesquelles on peut agir. Pour la recherche, préservez le travail de la personne et proposez des ajustements raisonnables au lieu de modifier discrètement la requête. Material Design suggère aussi un contenu de départ, de brèves explications ou des meilleures correspondances clairement étiquetées lorsque cela aide vraiment.
N’utilisez une illustration que si elle ajoute du contexte, de la chaleur ou un repère. Elle ne doit pas rivaliser avec le message ni faire croire qu’une image décorative est interactive. Une simple icône peut suffire pour un résultat de filtre compact ; un espace de travail utilisé pour la première fois pourrait bénéficier d’un petit exemple du contenu qu’il accueillera. Si un contenu de départ est présent, rendez-le facile à reconnaître et à supprimer.
- Choisissez une action principale qui répond directement à la cause.
- Ajoutez un accès secondaire à l’aide uniquement s’il répond à une question probable.
- Utilisez un message discret de fin lorsque le résultat vide est une bonne nouvelle.
- Veillez à ce que l’action reste compréhensible au clavier et avec un lecteur d’écran.
4. Examiner l’état entier, pas seulement l’illustration
Examinez l’état dans son contenant réel : une vue plein écran de première utilisation, une petite barre latérale et un tableau filtré n’ont pas les mêmes besoins d’espace et de hiérarchie. Gardez le message près de la zone qu’il décrit. Assurez-vous qu’il reste lisible lorsque le texte s’agrandit ou passe à la ligne, et que l’action principale se trouve facilement sans reconnaître les couleurs. Testez aussi les transitions : du chargement au vide, du chargement à l’erreur, de la nouvelle tentative à la réussite et d’un changement de filtre au retour des résultats.
L’examen pratique d’une bibliothèque commence par un déclencheur et une reprise attendue. Pour chaque modèle, consignez l’état, le titre, l’explication facultative, l’action principale, l’autre voie possible et ce qui se passe après le choix. Comparez les captures pour leur structure et leur hiérarchie visuelle, puis vérifiez le comportement du produit en contexte ; une image fixe ne permet pas de savoir si l’on peut résoudre une erreur ni si un résultat est réellement vide. Parcourez la bibliothèque d’interfaces ScreenKits pour des références visuelles et explorez toutes les catégories afin de trouver des modèles voisins.
- Peut-on savoir si le contenu est absent, encore en chargement ou indisponible à cause d’une erreur ?
- Le message reflète-t-il la requête, les filtres, le compte ou la tâche terminée actuels ?
- L’action préserve-t-elle les saisies utiles et mène-t-elle à un résultat visible ?
- L’état fonctionne-t-il dans un petit espace, avec un texte traduit plus long et les technologies d’assistance ?
- Peut-on résoudre une erreur ou trouver comment ajuster une recherche infructueuse ?
Questions courantes
Un état vide doit-il toujours comporter un appel à l’action ?
Non. Ajoutez une action lorsqu’elle aide à ajouter du contenu, à ajuster une recherche ou à résoudre un problème. Une tâche terminée ou une vue naturellement vide peut n’avoir besoin que d’une brève confirmation.
Un écran sans résultat est-il un état d’erreur ?
Généralement non. Si la recherche ou le filtrage a abouti, indiquez qu’il n’y a aucune correspondance et proposez un ajustement utile. Réservez le langage de l’erreur à une panne du système qui a empêché de déterminer ou d’afficher le résultat.
Que faut-il afficher pendant le chargement des résultats ?
Utilisez un état de chargement ou un indicateur de progression jusqu’à la fin de la requête. N’affichez un résultat vide qu’après confirmation par le système qu’une réponse réussie ne contient aucun élément correspondant.
