UI/UX : concevoir aussi les états invisibles sur une maquette

Une maquette montre rarement tout le produit

Une belle page présente généralement des données parfaites. Dans l'usage réel, une liste peut être vide, une requête peut échouer et un formulaire peut contenir une erreur. Je définis ces états dès la conception pour éviter qu'ils ne deviennent des improvisations de dernière minute.

Pour chaque composant interactif, je note son état normal, survolé, focalisé, désactivé, en cours et en erreur. Un bouton de filtre indique visuellement et sémantiquement s'il est actif. Un champ de formulaire conserve un libellé visible et relie son message d'erreur au bon champ.

Tester au-delà de la souris

Je parcours la page au clavier, vérifie l'ordre de tabulation et la visibilité du focus. Je contrôle également le contraste, la taille des cibles tactiles et les préférences de réduction des animations. Une animation peut clarifier un changement d'état, mais le contenu doit rester compréhensible lorsqu'elle est désactivée.

Le design system sert à rendre ces décisions cohérentes : couleurs, typographie, espacements et états deviennent des règles réutilisables plutôt que des exceptions par page.

Pour aller plus loin : WCAG 2.2 du W3C.