Composants : actions et états cohérents de bout en bout

Distinguer la destination, portée par un lien, de l’action, portée par un bouton. Hiérarchiser les actions selon leur rôle et leur conséquence. Libeller l’action avec un résultat prévisible.

Définir pour chaque composant les états pertinents, notamment focus, erreur, chargement et succès. Réutiliser les mêmes rôles d’apparence et vérifier qu’un état garde une indication compréhensible.

Exemple

Sur un formulaire, distinguer clairement l’envoi, l’annulation et la reprise, puis annoncer l’état de l’envoi.

Erreur courante

Styliser tous les liens comme des actions principales et supprimer le focus visible.

Contrôle

Rejouer le parcours avec souris, clavier et réseau ralenti. Photographier les états et comparer les actions récurrentes entre écrans. Les composants restent identifiables, l’action principale est prévisible et le résultat est compréhensible dans chaque état.