Un écran vide est souvent la première chose que voit un nouvel utilisateur. Il doit dire pourquoi il est vide et quoi faire ensuite. Teste chaque liste, flux ou écran de données de ton app avec ces états.
La checklist
- Premier usage, compte tout neuf. - Pourquoi : c'est la toute première impression après l'inscription. - Comment vérifier : crée un compte neuf et ouvre chaque onglet principal. Chacun affiche une explication et une étape suivante, pas une zone blanche.
- Une action claire à faire. - Pourquoi : « Rien ici » sans bouton est une impasse. - Comment vérifier : chaque état vide propose une action évidente (ajouter, importer, parcourir) et elle fonctionne.
- Aucun résultat à la recherche. - Pourquoi : l'utilisateur doit distinguer « pas de correspondance » de « ça ne marche pas ». - Comment vérifier : recherche une chaîne absurde. L'écran nomme la requête et suggère une modification, comme vérifier l'orthographe ou effacer les filtres.
- Résultats masqués par des filtres. - Pourquoi : les utilisateurs oublient que des filtres sont actifs et pensent que les données ont disparu. - Comment vérifier : applique des filtres qui ne correspondent à rien. L'écran indique que des filtres sont actifs et propose « Effacer les filtres ».
- Tout supprimé. - Pourquoi : le dernier élément retiré ne doit pas laisser une liste cassée. - Comment vérifier : supprime les éléments un par un. L'état vide apparaît, sans en-tête périmé, compteur ni ligne restante.
- Compteurs et badges à zéro. - Pourquoi : « 0 élément » à côté d'une mise en page qui semble remplie prête à confusion. - Comment vérifier : sans données, contrôle les badges d'onglets, les totaux et les cartes de synthèse. Ils affichent zéro ou se cachent, de façon cohérente.
- État vide, chargement ou erreur. - Pourquoi : afficher « vide » pendant que les données se chargent, ou après un chargement raté, induit en erreur. - Comment vérifier : ralentis le réseau et fais échouer une requête. L'état vide n'apparaît qu'après un chargement réussi avec zéro élément. Voir la checklist des états d'erreur.
- Vide dû aux autorisations. - Pourquoi : une liste de photos vide peut simplement signifier que l'accès a été refusé. - Comment vérifier : refuse l'autorisation. L'écran explique la situation et renvoie vers les réglages, au lieu de dire « aucune photo ».
- Le contenu apparaît à l'arrivée des données. - Pourquoi : l'écran peut rester bloqué sur l'état vide. - Comment vérifier : depuis l'état vide, ajoute ou synchronise un élément. La liste se met à jour sans redémarrage.
- Mise en page et visuels.
- Pourquoi : des illustrations surdimensionnées repoussent l'action hors de l'écran sur les petits appareils.
- Comment vérifier : affiche les états vides sur un petit téléphone, un grand téléphone, en paysage et avec une grande police. L'action reste visible.
- Formulation et langue.
- Pourquoi : un texte triste ou accusateur sonne mal, et les chaînes non traduites sont fréquentes ici.
- Comment vérifier : lis chaque état vide dans chaque langue prise en charge.
- Accessibilité.
- Pourquoi : l'illustration décorative ne doit pas masquer le message.
- Comment vérifier : avec un lecteur d'écran, le texte et l'action sont lus dans un ordre cohérent, et l'image est ignorée ou décrite.
Voir aussi
Retour à toutes les checklists · Checklist des états de chargement · Checklist de recherche et de filtres
Tes nouveaux utilisateurs voient tes écrans vides en premier. Commence ici pour les voir à travers les yeux de quelqu'un d'autre : retour privé et structuré, 1 retour = 1 crédit.