Learning to Detect UI Principle Violations via Reinforcement Learning

Imaginez que vous appreniez à un robot à peindre des tableaux. Vous lui montrez des millions de photos et lui dites : « Assure-toi que les couleurs correspondent à l'objet et que les lignes sont droites. » Le robot devient très doué pour suivre ces règles. Mais ensuite, vous lui demandez de peindre une porte. Il peint une porte qui est techniquement un rectangle avec une poignée, mais il peint la poignée si petite qu'on ne peut pas la saisir, ou il peint le cadre de la porte de la même couleur que le mur pour qu'on ne voie pas où la porte commence. Le robot a suivi vos instructions parfaitement, mais le résultat est inutile, voire dangereux pour un humain. C'est le problème des « robots de codage » modernes (les agents d'IA) qui construisent des sites web. Ils sont excellents pour générer du code qui fonctionne (la porte s'ouvre), mais ils oublient souvent les « règles humaines » sur l'aspect visuel et le ressenti.

Pour corriger cela, les scientifiques ont besoin d'un moyen de vérifier le travail du robot sans avoir à embaucher un humain pour regarder chaque page. Ils ne peuvent pas simplement utiliser une liste de contrôle simple, car certains mauvais designs sont sournois (comme un bouton qui ressemble à un piège), et ils ne peuvent pas embaucher un humain pour chaque page car cela prendrait trop de temps et coûterait trop cher. Ce document traite de la construction d'un « inspecteur robot intelligent » capable de regarder un site web, de voir l'image, de lire le code et de dire : « Hé, la poignée de cette porte est invisible ! » ou « Ce panneau essaie de vous tromper ! ». Les chercheurs ont utilisé une méthode d'entraînement spéciale appelée Apprentissage par Renforcement, qui consiste à enseigner à un chien en lui donnant une friandise lorsqu'il réussit et aucune friandise lorsqu'il échoue, jusqu'à ce qu'il apprenne à repérer les erreurs par lui-même.

---

Le robot qui a appris à repérer les mauvais designs

Voici donc l'histoire : une équipe de chercheurs de l'Université de Californie à Santa Cruz et de l'Université Carnegie Mellon a décidé de construire un petit inspecteur robotique super intelligent pour attraper les erreurs commises par les IA de codage. Ils appellent cela un « critique UI/UX ». Voyez cela comme un professeur d'art sévère qui ne se contente pas de vérifier si le dessin est terminé, mais vérifie aussi si les règles de perspective et de couleur ont été respectées.

Le Problème : Le site web qui « fonctionne, mais qui est nul »
Actuellement, les outils d'IA produisent des sites web à tour de bras. Ils sont entraînés pour s'assurer que le code s'exécute et que les boutons cliquent. Mais ils ignorent souvent « l'ambiance » et la « sécurité » du site. Un site web peut fonctionner parfaitement, mais il pourrait présenter :

• Des barrières d'accessibilité : Comme une poignée de porte trop petite pour quelqu'un ayant les mains tremblantes, ou un texte si clair qu'on ne peut pas le lire.
• Des dark patterns (pièges de conception) : Comme un bouton « Non merci » caché dans un texte minuscule et invisible, ou un panneau qui dit : « Non merci, je préfère payer le prix fort », vous faisant culpabiliser de dire non.
• Des mises en page confuses : Comme un menu avec 20 options qui se ressemblent toutes, donnant l'impression à votre cerveau d'essayer de manger une pizza entière en une seule bouchée.

Les chercheurs savaient que vérifier ces éléments manuellement était trop lent, et utiliser de gros modèles d'IA coûteux pour les vérifier était trop onéreux. Ils avaient besoin d'une solution « Goldilocks » (ni trop chaud, ni trop froid) : un modèle petit et bon marché qui soit tout de même assez intelligent pour repérer ces erreurs sournoises.

La Solution : Le jeu « Injecter et Vérifier »
Pour enseigner à leur petit robot inspecteur, ils avaient besoin d'un énorme nombre de tests de pratique. Mais trouver de vrais sites web présentant ces designs défectueux spécifiques est difficile. Ils ont donc inventé un jeu ingénieux appelé « Injecter et Vérifier ».

1. La toile vierge : D'abord, ils ont généré des milliers de sites web parfaits et propres grâce à l'IA.
2. Le sabotage : Ensuite, ils ont demandé à une « IA Professeur » super intelligente de casser secrètement ces sites web. L'IA Professeur prenait une page parfaite et injectait des violations spécifiques, comme rendre un bouton minuscule, cacher des frais dans un texte très pâle, ou rendre un lien « Non merci » insultant.
3. Le test de réalité : C'est là que réside la magie. L'IA Professeur ne se contentait pas de dire : « Je l'ai cassé ». Elle devait le prouver. Le système prenait une capture d'écran de la page cassée. Si l'IA Professeur affirmait avoir rendu un bouton invisible, mais que la capture d'écran montrait encore clairement le bouton, le système disait : « Non, réessaie ». La violation devait être visiblement brisée dans l'image, pas seulement dans le code.
4. Le jeu de données : Ils ont fini avec environ 10 000 pages, chacune contenant de 1 à 3 erreurs vérifiées et visibles. Cela est devenu l'école d'entraînement de leur robot étudiant.

L'Entraînement : Apprendre en faisant
Le robot étudiant qu'ils ont choisi est un « Modèle de Langage et de Vision » (un modèle de 4 milliards de paramètres). Cela signifie qu'il peut lire du texte (le code) et regarder des images (les captures d'écran du site web) en même temps.

Ils ne se sont pas contentés de lui montrer les réponses. Ils ont utilisé l'Apprentissage par Renforcement. Imaginez que le robot joue à un jeu vidéo où il doit trouver des pièges cachés.

• S'il repère un piège (une violation), il gagne un point.
• S'il rate un piège, il perd un point.
• S'il crie au loup (dit qu'un bon design est mauvais), il perd un point.
• S'il parle trop et manque de temps avant de donner une réponse, il obtient zéro point.

Le robot a joué ce jeu encore et encore, ajustant son cerveau chaque fois qu'il gagnait ou perdait un point. Il a appris à regarder les captures d'écran, et pas seulement le code, car certaines erreurs (comme un bouton trop petit) ne sont visibles que sur l'image, pas dans le texte.

Les Résultats : De l'incompétence à l'expertise
Avant l'entraînement, le robot était plutôt mauvais. Il pouvait lire le code et trouver des erreurs de texte évidentes, mais si on lui demandait de regarder une image et de dire : « Est-ce que ce bouton est trop petit ? », il se trompait la plupart du temps. Son score n'était que de 36 % (une mesure appelée micro-F1). C'était comme un étudiant qui avait étudié le manuel mais qui avait échoué à l'examen pratique.

Après l'entraînement par Apprentissage par Renforcement, le robot est devenu un pro. Son score a bondi à 84 %.

• Il est devenu très doué pour repérer les erreurs visuelles, comme les couleurs à faible contraste (passant de 0 % à 64 % de précision) et les espacements désordonnés (passant de 4 % à 94 % de précision).
• Il est devenu excellent pour débusquer les designs sournois, comme les « dark patterns » qui tentent de tromper les utilisateurs.
• Il a appris à être concis, arrêtant son processus de « réflexion » à temps pour donner une réponse claire, ce qui l'a rendu plus rapide et plus fiable.

Ce qu'il peut faire maintenant
Ce petit robot n'est pas qu'un jouet. Les chercheurs affirment qu'il peut être utilisé pour :

• Auditer de nouveaux sites web instantanément pour voir s'ils sont sûrs et faciles à utiliser.
• Filtrer les mauvaises données d'entraînement afin que les futures IA de codage n'apprennent pas d'exemples médiocres.
• Récompenser les IA de codage lorsqu'elles font de bons designs, les aidant ainsi à devenir de meilleurs concepteurs elles-mêmes.

Les Limites
Les chercheurs sont honnêtes sur ce que leur robot ne peut pas encore faire. Il éprouve encore des difficultés avec les tâches vraiment complexes qui nécessitent de comparer de nombreuses choses à la fois, comme déterminer si un menu contient trop d'options (un concept appelé la loi de Miller) ou si un bouton est trop éloigné de l'endroit où vous devez cliquer (la loi de Fitts). Cela nécessite une certaine « raison l'espace » que le robot actuel trouve difficile. De plus, comme il a été entraîné sur des erreurs « injectées », ils ne sont pas sûrs à 100 % de la façon dont il gérera les sites web désordonnés et bizarres du monde réel, bien qu'ils pensent qu'il s'en sortira bien.

En résumé, ce document montre que vous n'avez pas besoin d'un cerveau géant et coûteux pour vérifier un mauvais design. Avec un peu d'entraînement astucieux et beaucoup de pratique, un petit robot peut apprendre à repérer les pièges invisibles et les mises en page confuses que les utilisateurs humains détestent, rendant l'internet plus convivial pour tout le monde.