Learning to Detect UI Principle Violations via Reinforcement Learning

Stel je voor dat je een robot leert om schilderijen te maken. Je laat het de robot miljoenen foto's zien en zegt: "Zorg ervoor dat de kleuren bij het object passen en de lijnen recht zijn." De robot wordt heel goed in het volgen van die regels. Maar dan vraag je de robot om een deur te schilderen. Hij schildert een deur die technisch gezien een rechthoek met een klink is, maar hij schildert de klink zo klein dat je hem niet kunt vastpakken, of hij schildert het deurkozijn in dezelfde kleur als de muur, zodat je niet kunt zien waar de deur begint. De robot heeft je instructies perfect opgevolgd, maar het resultaat is nutteloos of zelfs gevaarlijk voor een mens. Dit is het probleem met moderne "coderende robots" (AI-agenten) die websites bouwen. Ze zijn erg goed in het maken van code die werkt (de deur gaat open), maar ze missen vaak de "menselijke regels" van hoe dingen eruit moeten zien en hoe ze moeten aanvoelen.

Om dit op te lossen, hebben wetenschappers een manier nodig om het werk van de robot te controleren zonder een mens in te huren om elke pagina te bekijken. Ze kunnen niet simpelweg een checklist gebruiken, omdat sommige slechte ontwerpen verraderlijk zijn (zoals een knop die eruitziet als een valstrik), en ze kunnen niet voor elke pagina een mens inhuren omdat dat te lang zou duren en te veel zou kosten. Dit artikel gaat over het bouwen van een "slimme robot-inspecteur" die naar een website kan kijken, het plaatje kan zien, de code kan lezen en kan zeggen: "Hé, deze deurklink is onzichtbaar!" of "Dit bord probeert je te misleiden!" De onderzoekers gebruikten een speciale trainingsmethode genaamd Reinforcement Learning, wat lijkt op het trainen van een hond door hem een snoepje te geven wanneer hij het goed doet en geen snoepje wanneer hij het fout doet, totdat hij leert om de fouten zelfstandig te herkennen.

---

De Robot die Leerde Slecht Ontwerp te Herkennen

Dus, dit is het verhaal: Een team van onderzoekers van UC Santa Cruz en Carnegie Mellon University besloot een kleine, superintelligente robot-inspecteur te bouwen om de fouten te vangen die coderende AI maakt. Ze noemen dit een "UI/UX-criticus". Denk aan een strenge kunstleraar die niet alleen controleert of de tekening af is, maar ook controleert of de regels van de leraar over perspectief en kleur zijn gevolgd.

Het Probleem: De "Het Werkt, Maar Het Is Klote" Website
Op dit moment produceren AI-tools websites links en rechts. Ze zijn getraind om ervoor te zorgen dat de code draait en de knoppen klikken. Maar ze negeren vaak de "vibe" en de "veiligheid" van de site. Een website kan perfect werken, maar kan wel het volgende hebben:

• Toegankelijkheidsbarrières: Zoals een deurklink die te klein is voor iemand met trillende handen, of tekst die zo licht is dat je het niet kunt lezen.
• Dark patterns: Zoals een "Nee bedankt"-knop die verborgen is in pieptjeskleine, onzichtbare tekst, of een bord dat zegt: "Nee bedankt, ik betaal liever de volle prijs," waardoor je je schuldig voelt als je nee zegt.
• Verwarrende lay-outs: Zoals een menu met 20 opties die er allemaal hetzelfde uitzien, waardoor je brein het gevoel krijgt dat het een hele pizza in één hap wil eten.

De onderzoekers wisten dat het handmatig controleren van deze zaken te traag is, en het gebruik van enorme, dure AI-modellen om ze te controleren te kostbaar is. Ze hadden een "Goldilocks"-oplossing nodig: een klein, goedkoop model dat nog steeds slim genoeg kon zijn om deze sluwe fouten op te sporen.

De Oplossing: Het "Inject and Verify"-spel
Om hun kleine robot-inspecteur te leren, hadden ze een enorme hoeveelheid oefentoetsen nodig. Maar het is moeilijk om echte websites met deze specifieke slechte ontwerpen te vinden. Dus bedachten ze een slim spel genaamd "Inject and Verify".

1. Het Schone Canvas: Eerst genereerden ze duizenden perfecte, schone websites met behulp van AI.
2. De Sabotage: Daarna vroegen ze aan een superintelligente "Teacher AI" om deze websites stiekem kapot te maken. De Teacher AI zou een perfecte pagina nemen en specifieke overtredingen injecteren, zoals een knop minuscuul klein maken, een verborgen kostenpost in vage tekst verbergen, of een "Nee bedankt"-link gemeen laten klinken.
3. De Reality Check: Hier komt het magische deel. De Teacher AI zei niet alleen: "Ik heb het kapot gemaakt." Het moest het bewijzen. Het systeem nam een screenshot van de kapotte pagina. Als de Teacher AI beweerde dat het een knop onzichtbaar had gemaakt, maar de screenshot toonde de knop nog steeds duidelijk aan, dan zei het systeem: "Nee, probeer het opnieuw." De overtreding moest zichtbaar kapot zijn in de afbeelding, niet alleen in de code.
4. De Dataset: Ze kwamen uit op ongeveer 10.000 pagina's, elk met 1 tot 3 geverifieerde, zichtbare fouten. Dit werd de trainingsschool voor hun student-robot.

De Training: Leren door te Doen
De student-robot die ze kozen was een "Vision-Language Model" (een model met 4 miljard parameters). Dit betekent dat het tegelijkertijd tekst (de code) kan lezen en naar plaatjes (de screenshots van de website) kan kijken.

Ze lieten het de robot niet alleen de antwoorden zien. Ze gebruikten Reinforcement Learning. Stel je voor dat de robot een videogame speelt waarin hij verborgen vallen moet vinden.

• Als hij een val vindt (een overtreding), krijgt hij een punt.
• Als hij een val mist, verliest hij een punt.
• Als hij vals alarm slaat (zegt dat een goed ontwerp slecht is), verliest hij een punt.
• Als hij te veel praat en de tijd op is voordat hij een antwoord geeft, krijgt hij nul punten.

De robot speelde dit spel keer op keer en paste zijn brein aan elke keer dat hij een punt kreeg of een punt verloor. Hij leerde naar de screenshots te kijken, en niet alleen naar de code, omdat sommige fouten (zoals een knop die te klein is) alleen zichtbaar zijn in de afbeelding, niet in de tekst.

De Resultaten: Van Clueless naar Expert
Voordat de training begon, was de robot nogal slecht in dit werk. Hij kon de code lezen en duidelijke tekstfouten vinden, maar als je hem vroeg om naar een plaatje te kijken en te zeggen: "Is deze knop te klein?", gokte hij meestal fout. Zijn score was slechts 36% (een maatstaf genaamd micro-F1). Het was als een student die het tekstboek had bestudeerd maar de praktijkexamens niet haalde.

Na de Reinforcement Learning-training werd de robot een pro. Zijn score sprong naar 84%.

• Hij werd erg goed in het opsporen van visuele fouten, zoals kleuren met een laag contrast (van 0% naar 64% nauwkeurigheid) en rommelige tussenruimtes (van 4% naar 94% nauwkeurigheid).
• Hij werd uitstekend in het vangen van sluwe ontwerpen, zoals "dark patterns" die gebruikers proberen te misleken.
• Hij leerde beknopt te zijn, waarbij hij zijn "denkproces" stopte om op tijd een duidelijk antwoord te geven, wat hem sneller en betrouwbaarder maakte.

Wat het Nu Kan Doen
Deze kleine robot is niet zomaar een speeltje. De onderzoekers zeggen dat deze gebruikt kan worden om:

• Nieuwe websites direct te auditeren om te zien of ze veilig en gemakkelijk in gebruik zijn.
• Slechte trainingsdata te filteren, zodat toekomstige coderende AI's niet leren van slechte voorbeelden.
• Coderende AI's te belonen wanneer ze goede ontwerpen maken, wat hen helpt om zelf betere ontwerpers te worden.

De Limieten
De onderzoekers zijn eerlijk over wat hun robot nog niet kan. Het heeft nog steeds moeite met de echt moeilijke zaken die het vergelijken van veel elementen tegelijk vereisen, zoals bepalen of een menu te veel opties heeft (een concept genaamd Miller's Law) of of een knop te ver verwijderd is van waar je moet klikken (Fitts's Law). Deze vereisen een beetje meer "ruimtelijk redeneren" dat de huidige robot lastig vindt. Ook, aangezien ze hem getraind hebben op "geïnjecteerde" fouten, weten ze niet 100% zeker hoe hij zal omgaan met de rommelige, vreemde websites in de echte wereld, hoewel ze vermoeden dat hij het goed zal doen.

Kortom, dit artikel laat zien dat je geen gigantisch, duur brein nodig hebt om te controleren op een slecht ontwerp. Met een beetje slimme training en veel oefening kan een kleine, goedkope robot de onzichtbare vallen en verwarrende lay-outs opsporen waar menselijke gebruikers een hekel aan hebben, wat het internet een vriendelijker plek maakt voor iedereen.