Learning to Detect UI Principle Violations via Reinforcement Learning

Immagina di insegnare a un robot come dipingere quadri. Gli mostri milioni di foto e gli dici: "Assicurati che i colori corrispondano all'oggetto e che le linee siano dritte". Il robot diventa bravissimo a seguire quelle regole. Ma poi, gli chiedi di dipingere una porta. Dipinge una porta che è tecnamente un rettangolo con una maniglia, ma dipinge la maniglia così piccola che non si può afferrare, o dipinge la cornice della porta dello stesso colore della parete così non si capisce dove inizi la porta. Il robot ha seguito perfettamente le tue istruzioni, ma il risultato è inutile o addirittura pericoloso per un essere umano. Questo è il problema dei moderni "robot da codifica" (agenti IA) che costruiscono siti web. Sono bravissimi a creare codice che funzioni (la porta si apre), ma spesso trascurano le "regole umane" su come le cose dovrebbero apparire o essere percepite.

Per risolvere questo problema, gli scienziati hanno bisogno di un modo per controllare il lavoro del robot senza assumere un essere umano per guardare ogni singola pagina. Non possono usare un semplice elenco di controllo, perché alcuni cattivi design sono insidiosi (come un pulsante che sembra una trappola), e non possono assumere un essere umano per ogni pagina perché richiederebbe troppo tempo e costerebbe troppo. Questo articolo parla della costruzione di un "robot ispezione intelligente" che possa guardare un sito web, vedere l'immagine, leggere il codice e dire: "Ehi, questa maniglia della porta è invisibile!" oppure "Questo cartello sta cercando di ingannarti!". I ricercatori hanno utilizzato un metodo di addestramento speciale chiamato Apprendimento per Rinforzo, che è come insegnare a un cane dandogli un premio quando fa la cosa giusta e nessun premio quando sbaglia, finché non impara a individuare gli errori da solo.

---

Il Robot che ha imparato a individuare il Cattivo Design

Ecco la storia: un team di ricercatori dell'Università della California, Santa Cruz e della Carnegie Mellon University ha deciso di costruire un piccolo, super-intelligente robot ispezione per catturare gli errori che commettono le IA di programmazione. Lo chiamano un "critico UI/UX". Immaginatelo come un severo insegnante d'arte che non si limita a controllare se il disegno è finito, ma controlla anche se le regole dell'insegnante sulla prospettiva e sul colore sono state seguite.

Il Problema: Il Sito Web "Funziona, ma Fa Schifo"
Attualmente, gli strumenti di IA stanno produggendo siti web a ritmi altissimi. Sono addestrati per garantire che il codice giri e che i pulsanti siano cliccabili. Ma spesso ignorano il "vibe" e la "sicurezza" del sito. Un sito web potrebbe funzionare perfettamente, ma potrebbe avere:

• Barriere di accessibilità: Come una maniglia della porta troppo piccola per chi ha mani tremolanti, o un testo così chiaro da non essere leggibile.
• Dark pattern (modelli oscuri): Come un pulsante "No grazie" nascosto in un testo minuscolo e invisibile, o un cartello che dice: "No grazie, preferirei pagare il prezzo pieno", facendoti sentire in colpa per aver detto di no.
• Layout confusi: Come un menu con 20 opzioni che sembrano tutte uguali, facendo sentire il tuo cervello come se stesse cercando di mangiare un'intera pizza in un solo boccone.

I ricercatori sapevano che controllare queste cose manualmente era troppo lento, e usare modelli di IA enormi ed costosi per controllarle era troppo dispendioso. Avevano bisogno di una soluzione "Goldilocks" (né troppo grande, né troppo piccola, ma giusta): un modello piccolo e poco costoso che potesse comunque essere abbastanza intelligente da individuare questi errori subdoli.

La Soluzione: Il Gioco "Inject and Verify" (Inserisci e Verifica)
Per insegnare al loro piccolo robot ispezione, avevano bisogno di una quantità massiccia di test di pratica. Ma trovare siti web reali con questi specifici cattivi design è difficile. Così, hanno inventato un gioco astuto chiamato "Inject and Verify".

1. La Tela Pulita: Per prima cosa, hanno generato migliaia di siti web perfetti e puliti usando l'IA.
2. Il Sabotaggio: Poi, hanno chiesto a una "IA Insegnante" super-intelligente di rompere segretamente questi siti web. L'IA Insegnante prendeva una pagina perfetta e iniettava violazioni specifiche, come rendere un pulsante minuscolo, nascondere una commissione in un testo sbiadito o rendere un link "No grazie" offensivo.
3. Il Controllo di Realtà: Ecco la parte magica. L'IA Insegnante non si limitava a dire: "L'ho rotto". Doveva dimostrarlo. Il sistema prendeva uno screenshot della pagina rotta. Se l'IA Insegnante sosteneva di aver reso invisibile un pulsante, ma lo screenshot mostrava ancora chiaramente il pulsante, il sistema diceva: "No, riprova". La violazione doveva essere visibilmente rotta nell'immagine, non solo nel codice.
4. Il Dataset: Sono arrivati a circa 10.000 pagine, ognuna con da 1 a 3 errori visibili e verificati. Questo è diventato la scuola di addestramento per il loro robot studente.

L'Addestramento: Imparare Facendo
Il robot studente che hanno scelto era un "Modello Visione-Linguaggio" (un modello da 4 miliardi di parametri). Ciò significa che può leggere il testo (il codice) e guardare le immagini (gli screenshot del sito web) contemporaneamente.

Non si sono limitati a mostrargli le risposte. Hanno usato l'Apprendimento per Rinforzo. Immaginate che il robot stia giocando a un videogioco in cui deve trovare trappole nascoste.

• Se individua una trappola (una violazione), riceve un punto.
• Se manca una trappola, perde un punto.
• Se dà falsi allarmi (dice che un buon design è cattivo), perde un punto.
• Se parla troppo e finisce il tempo prima di dare una risposta, riceve zero punti.

Il robot ha giocato a questo gioco ripetutamente, aggiustando il suo cervello ogni volta che otteneva un punto o ne perdeva uno. Ha imparato a guardare gli screenshot, non solo il codice, perché alcuni errori (come un pulsante troppo piccolo) sono visibili solo nell'immagine, non nel testo.

I Risultati: Da Incompetente a Esperto
Prima dell'addestramento, il robot era piuttosto scarso in questo. Poteva leggere il codice e trovare errori di testo ovvi, ma se gli chiedevi di guardare un'immagine e dire: "Questo pulsante è troppo piccolo?", sbagliava la maggior parte delle volte. Il suo punteggio era solo del 36% (una misura chiamata micro-F1). Era come uno studente che aveva studiato il libro di testo ma era stato bocciato all'esame pratico.

Dopo l'addestramento con l'Apprendimento per Rinforzo, il robot è diventato un professionista. Il suo punteggio è balzato all'84%.

• È diventato molto bravo a individuare errori visivi, come colori a basso contrasto (passando dallo 0% al 64% di accuratezza) e spaziature disordinate (dal 4% al 94% di accuratezza).
• È diventato eccellente nel catturare design insidiosi, come i "dark patterns" che cercano di ingannare gli utenti.
• Ha imparato a essere conciso, interrompendo il suo processo di "pensiero" in tempo per dare una risposta chiara, il che lo ha reso più veloce e affidabile.

Cosa Può Fare Ora
Questo piccolo robot non è solo un giocattolo. I ricercatori dicono che può essere usato per:

• Auditare nuovi siti web istantaneamente per vedere se sono sicuri e facili da usare.
• Filtrare i dati di addestramento scadenti in modo che le future IA di programmazione non imparino da esempi negativi.
• Premiare le IA di programmazione quando creano buoni design, aiutandole a diventare esse stesse dei designer migliori.

I Limiti
I ricercatori sono onesti riguardo a ciò che il loro robot non può ancora fare. Ha ancora difficoltà con le cose davvero difficili che richiedono il confronto di molti elementi contemporaneamente, come capire se un menu ha troppe opzioni (un concetto chiamato Legge di Miller) o se un pulsante è troppo lontano da dove devi cliccare (Legge di Fitts). Queste richiedono un po' più di "ragionamento spaziale" che l'attuale robot trova complicato. Inoltre, poiché è stato addestrato su errori "iniettati", non sono sicuri al 100% di come gestirà i siti web disordinati e bizzarri del mondo reale, anche se sospettano che lo farà bene.

In breve, questo articolo dimostra che non serve un cervello gigante ed costoso per controllare un cattivo design. Con un po' di addestramento intelligente e molta pratica, un piccolo e poco costoso robot può imparare a individuare le trappole invisibili e i layout confusi che gli utenti umani odiano, rendendo internet un posto più amichevole per tutti.