Vide, chargement, erreur : les écrans qu’on oublie de dessiner
Les maquettes montrent l’écran idéal, les utilisateurs voient souvent autre chose. Les cinq états d’un écran et comment bien les concevoir.
Les maquettes montrent presque toujours l’écran idéal : rempli, chargé, sans erreur. Pourtant, une bonne partie du temps, l’utilisateur voit autre chose. Ces états méritent d’être dessinés autant que le reste.
Les cinq états d’un écran
| État | Quand | Ce qu’il doit dire |
|---|---|---|
| Vide | Aucune donnée encore | Quoi faire pour commencer |
| Chargement | Les données arrivent | Que quelque chose se passe |
| Partiel | Peu de données | Que c’est normal |
| Erreur | Quelque chose a échoué | Ce qui s’est passé et comment réessayer |
| Idéal | Tout va bien | Le contenu, simplement |
Un chargement qui ressemble au contenu
Un squelette qui reprend la forme de la page rassure davantage qu’un simple rond qui tourne. Et quand le chargement est très court, il vaut mieux ne rien afficher que de faire clignoter un indicateur.
Des erreurs humaines
« Erreur 500 » ne dit rien à personne. Un bon message explique ce qui s’est passé, sans accuser, et propose une action : réessayer, revenir, contacter quelqu’un.
Les intégrer au design system
Ces états ne sont pas des exceptions à traiter projet par projet. Ils ont leurs composants, leurs illustrations et leurs textes types, au même titre qu’un bouton.
En résumé
- Cinq états par écran, pas un seul.
- Des chargements qui ressemblent au contenu.
- Des erreurs claires, avec une action possible.
- Des états intégrés au design system.
