Learning to Detect UI Principle Violations via Reinforcement Learning

Stellen Sie sich vor, Sie bringen einem Roboter das Malen bei. Sie zeigen ihm Millionen von Fotos und sagen: „Achte darauf, dass die Farben zum Objekt passen und die Linien gerade sind.“ Der Roboter wird sehr gut darin, diesen Regeln zu folgen. Aber dann bitten Sie ihn, eine Tür zu malen. Er malt eine Tür, die technisch gesehen ein Rechteck mit einem Griff ist, aber er malt den Griff so klein, dass man ihn kaum greifen kann, oder er malt den Türrahmen in der gleichen Farbe wie die Wand, sodass man nicht sieht, wo die Tür beginnt. Der Roboter hat Ihre Anweisungen perfekt befolgt, aber das Ergebnis ist nutzlos oder sogar gefährlich für einen Menschen. Das ist das Problem moderner „Coding-Roboter“ (KI-Agenten), die Websites bauen. Sie sind großartig darin, Code zu erstellen, der funktioniert (die Tür öffnet sich), aber sie übersehen oft die „menschlichen Regeln“, wie Dinge aussehen und sich anfühlen sollten.

Um dies zu beheben, brauchen Wissenschaftler eine Möglichkeit, die Arbeit des Roboters zu überprüfen, ohne einen Menschen zu engagieren, der sich jede einzelne Seite ansieht. Sie können nicht einfach eine Checkliste verwenden, da einige schlechten Designs knifflig sind (wie ein Button, der wie eine Falle aussieht), und sie können nicht für jede Seite einen Menschen engagieren, weil das zu lange dauern und zu viel kosten würde. In dieser Arbeit geht es darum, einen „intelligenten Roboter-Inspektor“ zu bauen, der eine Website betrachtet, das Bild sieht, den Code liest und sagt: „Hey, dieser Türgriff ist unsichtbar!“ oder „Dieses Schild versucht dich reinzulegen!“ Die Forscher verwendeten eine spezielle Trainingsmethode namens Reinforcement Learning (bestärkendes Lernen), was so ist, als würde man einen Hund lehren, indem man ihm ein Leckerli gibt, wenn er es richtig macht, und kein Leckerli, wenn er es falsch macht, bis er lernt, die Fehler von selbst zu erkennen.

---

Der Roboter, der lernte, schlechtes Design zu erkennen

Hier ist die Geschichte: Ein Team von Forschern der UC Santa Cruz und der Carnegie Mellon University beschloss, einen winzigen, superintelligenten Roboter-Inspektor zu bauen, um die Fehler abzufangen, die Coding-KIs machen. Sie nennen dies einen „UI/UX-Kritiker“. Stellen Sie sich das wie einen strengen Kunstlehrer vor, der nicht nur prüft, ob die Zeichnung fertig ist, sondern auch, ob die Regeln des Lehrers über Perspektive und Farbe befolgt wurden.

Das Problem: Die „Es funktioniert, aber es ist mies“-Website
Im Moment produzieren KI-Tools Websites links und rechts. Sie sind darauf trainiert, sicherzustellen, dass der Code läuft und die Buttons anklickbar sind. Aber sie ignorieren oft den „Vibe“ und die „Sicherheit“ der Seite. Eine Website kann perfekt funktionieren, aber sie könnte Folgendes haben:

• Barrieren in der Zugänglichkeit: Wie ein Türgriff, der zu klein für jemine mit zittrigen Händen ist, oder Text, der so hell ist, dass man ihn nicht lesen kann.
• Dark Patterns (Manipulative Muster): Wie ein „Nein danke“-Button, der in winziger, unsichtbarer Schrift versteckt ist, oder ein Schild, das sagt: „Nein danke, ich würde lieber den vollen Preis bezahlen“, was einem ein schlechtes Gewissen bereitet, wenn man „Nein“ sagt.
• Verwirrende Layouts: Wie ein Menü mit 20 Optionen, die alle gleich aussehen, was das Gefühl vermittelt, man versuche, eine ganze Pizza in einem einzigen Bissen zu essen.

Die Forscher wussten, dass das manuelle Überprüfen dieser Dinge zu langsam ist und die Verwendung riesiger, teurer KI-Modelle zur Überprüfung zu kostspielig wäre. Sie brauchten eine „Goldlöckchen-Lösung“: ein kleines, günstiges Modell, das dennoch intelligent genug sein konnte, um diese heimlichen Fehler aufzuspüren.

Die Lösung: Das „Inject and Verify“-Spiel
Um ihren kleinen Roboter-Inspektor zu lehren, brauchten sie eine massive Anzahl an Testprüfungen. Aber es ist schwer, echte Websites mit diesen spezifischen schlechten Designs zu finden. Also erfanden sie ein kluges Spiel namens „Inject and Verify“ (Einfügen und Verifizieren).

1. Die leere Leinwand: Zuerst generierten sie mit KI tausende perfekte, saubere Websites.
2. Die Sabotage: Dann baten sie eine superintelligente „Lehrer-KI“, diese Websites heimlich zu manipulieren. Die Lehrer-KI nahm eine perfekte Seite und fügte gezielte Verstöße ein, wie etwa einen winzigen Button, versteckten Text für Gebühren oder einen „Nein danke“-Link, der unhöflich klingt.
3. Der Realitätscheck: Hier liegt der Zauber. Die Lehrer-KI sagte nicht nur: „Ich habe es kaputt gemacht.“ Sie musste es beweisen. Das System machte einen Screenshot der kaputten Seite. Wenn die Lehrer-KI behauptete, sie habe einen Button unsichtbar gemacht, der Screenshot aber den Button immer noch deutlich zeigte, sagte das System: „Nee, versuch es nochmal.“ Der Verstoß musste im Bild sichtbar defekt sein, nicht nur im Code.
4. Der Datensatz: Sie endeten mit etwa 10.000 Seiten, von denen jede 1 bis 3 verifizierte, sichtbare Fehler enthielt. Dies wurde die Trainingsschule für ihren Schüler-Roboter.

Das Training: Lernen durch Tun
Der Schüler-Roboter, den sie wählten, war ein „Vision-Language Model“ (ein Modell mit 4 Milliarden Parametern). Das bedeutet, er kann Text (den Code) lesen und gleichzeitig Bilder (die Website-Screenshots) betrachten.

Sie zeigten ihm nicht einfach die Antworten. Sie nutzten Reinforcement Learning. Stellen Sie sich vor, der Roboter spielt ein Videospiel, in dem er versteckte Fallen finden muss.

• Wenn er eine Falle entdeckt (einen Verstoß), bekommt er einen Punkt.
• Wenn er eine Falle übersieht, verliert er einen Punkt.
• Wenn er „Wolf schreit“ (einen guten Entwurf als schlecht bezeichnet), verliert er einen Punkt.
• Wenn er zu viel redet und die Zeit ablaufen lässt, bevor er eine Antwort gibt, bekommt er null Punkte.

Der Roboter spielte dieses Spiel immer und immer wieder und passte sein Gehirn jedes Mal an, wenn er einen Punkt bekam oder einen verlor. Er lernte, auf die Screenshots zu achten, nicht nur auf den Code, denn manche Fehler (wie ein Button, der zu klein ist) sind nur im Bild sichtbar, nicht im Text.

Die Ergebnisse: Von ahnungslos zu Experte
Vor dem Training war der Roboter ziemlich schlecht darin. Er konnte den Code lesen und offensichtliche Textfehler finden, aber wenn man ihn fragte, das Bild anzusehen und zu sagen: „Ist dieser Button zu klein?“, lag er meistens falsch. Sein Score lag nur bei 36 % (ein Maß namens Micro-F1). Es war wie ein Schüler, der das Lehrbuch gelernt, aber die praktische Prüfung verhauen hat.

Nach dem Reinforcement-Learning-Training wurde der Roboter zum Profi. Sein Score sprang auf 84 %.

• Er wurde sehr gut darin, visuelle Fehler zu entdecken, wie etwa geringen Kontrast (von 0 % auf 64 % Genauigkeit) und unordentliche Abstände (von 4 % auf 94 % Genauigkeit).
• Er wurde exzellent darin, trickreiche Designs zu entlarven, wie etwa „Dark Patterns“, die versuchen, Nutzer zu täuschen.
• Er lernte, prägnant zu sein, indem er seinen „Denkprozess“ rechtzeitig stoppte, um eine klare Antwort zu geben, was ihn schneller und zuverlässiger machte.

Was er jetzt leisten kann
Dieser kleine Roboter ist nicht nur ein Spielzeug. Die Forscher sagen, dass er dazu verwendet werden kann, um:

• Neue Websites sofort zu auditieren, um zu sehen, ob sie sicher und einfach zu bedienen sind.
• Schlechte Trainingsdaten zu filtern, damit zukünftige Coding-KIs nicht von schlechten Beispielen lernen.
• Coding-KIs zu belohnen, wenn sie gute Designs erstellen, was ihnen hilft, selbst bessere Designer zu werden.

Die Grenzen
Die Forscher sind ehrlich darüber, was ihr Roboter noch nicht kann. Er hat noch Schwierigkeiten mit den wirklich schweren Aufgaben, die den Vergleich vieler Dinge gleichzeitig erfordern, wie etwa festzustellen, ob ein Menü zu viele Optionen hat (ein Konzept namens Millers Gesetz) oder ob ein Button zu weit weg von dort ist, wo man klicken muss (Fitts's Law). Diese erfordern eine etwas mehr ausgeprägte „räumliche Logik“, die der aktuelle Roboter schwierig findet. Außerdem wurden sie auf „injizierten“ Fehlern trainet, daher sind sie sich nicht zu 100 % sicher, wie der Roboter mit den chaotischen, seltsamen Websites der realen Welt umgehen wird, obwohl sie vermuten, dass er gut abschneiden wird.

Kurz gesagt zeigt diese Arbeit, dass man kein riesiges, teures Gehirn braucht, um schlechtes Design zu prüfen. Mit ein wenig klugem Training und viel Übung kann ein kleiner, günstiger Roboter lernen, die unsichtbaren Fallen und verwirrenden Layouts aufzuspüren, die menschliche Nutzer hassen, und das Internet so zu einem freundlicheren Ort für alle macht.