Dix designs originaux d'états vides pour la première utilisation, l'absence de résultats, les boîtes de réception vidées, les erreurs et les permissions manquantes, avec du code modifiable et un générateur de message accessible.
Un état vide est ce qu'affiche un écran quand il n'y a encore rien à lister : un nouveau compte, une recherche sans correspondance, une boîte de réception vidée ou un chargement qui a échoué. Chacun a besoin d'une explication simple et d'une suite possible. Les dix designs ci-dessous couvrent tous les cas courants avec du HTML et du CSS modifiables, plus un générateur qui écrit un balisage accessible.
Les cinq types d'états vides et ce que chacun doit proposer
Les écrans vides sont la première chose que rencontrent les nouveaux utilisateurs et l'endroit où l'on atterrit après une recherche ratée, pourtant ce n'est souvent qu'une boîte grise qui dit Aucune donnée. Ces exemples traitent chaque type d'état vide différemment, car le bon message après une faute de frappe n'est pas le bon message le premier jour. Chaque extrait est autonome et utilise des formes simples plutôt que des illustrations de banque d'images.
C'est l'écran ou le panneau affiché quand une liste, un tableau, un tableau de bord ou une recherche n'a rien à afficher. Les bons expliquent pourquoi et proposent l'action suivante ; les mauvais affichent un espace blanc ou un simple Aucune donnée.
Utilisez un vrai titre et du texte, pas seulement une image. Marquez les illustrations décoratives avec un texte alt vide. Si le message vide apparaît après un filtre ou une recherche sans rechargement de page, placez-le dans un élément avec role="status", qui a implicitement un réglage live poli, et ne déplacez pas le focus dessus.
Cela peut aider lors de la première utilisation, par exemple un projet de démonstration que l'utilisateur peut ouvrir et supprimer. Indiquez clairement qu'il s'agit d'un exemple pour que personne ne le prenne pour ses propres données.
Répétez le terme, dites que rien ne correspond, et suggérez des solutions : vérifier l'orthographe, retirer un filtre ou parcourir une catégorie. Un bouton Effacer les filtres en un clic est l'action unique la plus utile.
Un état vide signifie qu'il n'y a réellement rien à afficher. Une erreur signifie qu'il y a peut-être des données mais qu'elles n'ont pas pu être chargées. Dites de quoi il s'agit, car annoncer à quelqu'un qu'il n'a aucune commande alors que le serveur a échoué est inquiétant.
Un contour en pointillés suggère où l'élément apparaîtra. Le bouton est dans la zone vide, personne n'a donc à le chercher.
Proposer de créer ou d'importer respecte les personnes qui ont déjà des données ailleurs.
Une courte liste avec la première étape marquée transforme un tableau de bord vide en plan d'action.
Une ligne d'exemple clairement indiquée montre à quoi ressemblera l'écran une fois rempli.
Répétez le terme, suggérez des solutions et gardez un moyen de revenir à tout le contenu.
Afficher les filtres actifs sous forme de puces supprimables désigne directement la cause.
Certains écrans vides sont une bonne nouvelle. Une confirmation sobre suffit ; pas besoin de bouton.
Nommez le problème honnêtement, dites que les données sont en sécurité si c'est le cas, et proposez de réessayer.
Dites aux gens à qui s'adresser, et donnez-leur un bouton qui fait la demande.
Garder les en-têtes de colonnes montre ce qui apparaîtra, et une seule ligne les couvre avec le message.
Les factures que vous envoyez apparaîtront ici, avec leur statut et leur date d'échéance.
Créer une facture
Générateur d'état vide
Rédigez le titre, la phrase et le bouton, choisissez le type, et copiez un HTML et un CSS accessibles. Résultat de départ :
Explication
Libellé du bouton
Première utilisation
Aucun résultat
Erreur
Aperçu de votre état vide
Copier le HTML
Copier le CSS
Commencer gratuitement · Sans carte bancaire