Ce qu’une IA ne voit pas dans une interface

Demandez à un assistant de code « une page de liste de projets avec un bouton pour en créer un ». Vous aurez une page propre, des cartes alignées, un bouton bleu. Elle marchera. Et elle sera incomplète d’une façon que personne ne remarque dans la conversation, mais que tout le monde remarque en l’utilisant.

Ce n’est pas une critique des outils. C’est la nature du problème : une interface se juge dans la main, pas sur une capture d’écran. Voici ce que je regarde systématiquement sur un écran généré, et que je trouve presque toujours à corriger.

Les états que personne n’a demandés

Un écran n’existe pas dans un seul état. Il se charge, il peut être vide, il peut échouer, et seulement ensuite il montre quelque chose. Une génération produit l’état « succès » parce que c’est celui du brief. Les trois autres restent à écrire.

Pour chacun, la question est la même : qu’est-ce que la personne comprend, et qu’est-ce qu’elle peut faire ?

• Chargement : montrer la forme de ce qui arrive, pas un spinner au milieu du vide. Un squelette garde la page stable et dit « ça vient ».
• Vide : ce n’est pas une erreur. Dire qu’il n’y a rien encore, et proposer la première action.
• Erreur : dire ce qui s’est passé sans jargon, rassurer sur ce qui n’a pas été perdu, et offrir une sortie. « Une erreur est survenue » n’aide personne.
• Succès : c’est le seul qu’on obtient gratuitement.

Le retour à l’action

Un bouton généré change de couleur au survol, et c’est tout. Il ne réagit pas à l’appui, il ne confirme rien, il ne dit pas si l’action est en cours. Sur mobile, où il n’y a pas de survol, il ne donne aucun signe de vie.

J’ai écrit un article entier sur ce seul point, parce qu’il change la sensation de toute l’interface. Le résumé : le retour visuel part à l’appui, l’action part au relâchement, et la confirmation arrive après.

Le clavier

Essayez de parcourir l’écran avec la touche Tab. Souvent, l’ordre de parcours ne suit pas l’ordre visuel, le focus n’est pas visible, et la carte cliquable n’est pas atteignable parce que c’est un div avec un @click. Rien de tout ça ne se voit sur une capture.

Les corrections sont petites : un vrai button ou un vrai lien, un :focus-visible dessiné, l’ordre du DOM aligné sur l’ordre de lecture. Mais il faut les faire, et il faut y penser.

Le texte

Les textes générés sont corrects et interchangeables. « Gérer vos projets », « Commencer maintenant », « Une erreur est survenue ». Ils remplissent la case. Un texte qui aide est spécifique : il nomme ce qui va se passer, dans les mots de la personne qui lit.

Je réécris presque tous les libellés d’un écran généré. C’est le poste qui prend le plus de temps après les états, et c’est celui qui se voit le plus.

Les écrans intermédiaires

Entre 375 et 1440 pixels, il y a des largeurs où tout casse : une grille à trois colonnes qui devient illisible à 800, un titre qui déborde à 390, un tableau qui force le défilement horizontal. Les générations sont testées sur un écran, le vôtre, et c’est souvent le seul qui marche.

Je redimensionne la fenêtre lentement, de la plus étroite à la plus large, et je note chaque endroit où quelque chose saute. Ça prend deux minutes et ça évite les retours clients.

Le mode sombre

Si le projet a un thème sombre, le code généré oublie une couleur sur trois. Un fond blanc codé en dur dans une carte, une ombre invisible, un texte gris sur gris. La solution est en amont : ne jamais écrire une couleur dans un composant, toujours passer par les variables du thème. Une fois la règle dans le fichier de conventions, l’assistant la suit.

Ma liste

Avant qu’un écran généré n’aille plus loin, je passe ces points dans l’ordre :

1. Les quatre états existent et disent quoi faire.
2. Chaque action a un retour à l’appui et une confirmation.
3. Tout est atteignable au clavier, dans le bon ordre, avec un focus visible.
4. Chaque libellé nomme ce qui va se passer.
5. L’écran tient à 390, 768, 1024 et 1440 pixels.
6. Aucune couleur n’est écrite en dur.

Six points, dix minutes. C’est la différence entre un écran qui fonctionne et un écran qu’on a envie d’utiliser.