Learning to Detect UI Principle Violations via Reinforcement Learning

Imagina que le estás enseñando a un robot a pintar cuadros. Le muestras millones de fotos y le dices: "Asegúrate de que los colores coincidan con el objeto y que las líneas sean rectas". El robot se vuelve muy bueno siguiendo esas reglas. Pero luego, le pides que pinte una puerta. Pinta una puerta que es técnicamente un rectángulo con un pomo, pero pinta el pomo tan pequeño que no puedes agarrarlo, o pinta el marco de la puerta del mismo color que la pared para que no puedas ver dónde empieza la puerta. El robot siguió tus instrucciones perfectamente, pero el resultado es inútil o incluso peligroso para un humano. Este es el problema con los "robots de codificación" modernos (agentes de IA) que construyen sitios web. Son excelentes creando código que funciona (la puerta se abre), pero a menudo pasan por alto las "reglas humanas" de cómo deberían verse y sentirse las cosas.

Para solucionar esto, los científicos necesitan una forma de revisar el trabajo del robot sin tener que contratar a un humano para que mire cada página. No pueden usar simplemente una lista de verificación, porque algunos malos diseños son complicados (como un botón que parece una trampa), y no pueden contratar a un humano para cada página porque tomaría demasiado tiempo y costaría demasiado. Este artículo trata sobre la construcción de un "robot inspector inteligente" que puede mirar un sitio web, ver la imagen, leer el código y decir: "¡Oye, este pomo de la puerta es invisible!" o "¡Este cartel está intentando engañarte!". Los investigadores utilizaron un método de entrenamiento especial llamado Aprendizaje por Refuerzo, que es como enseñarle a un perro dándole un premio cuando lo hace bien y ningún premio cuando lo hace mal, hasta que aprende a detectar los errores por sí solo.

---

El robot que aprendió a detectar el mal diseño

Así que, esta es la historia: Un equipo de investigadores de la Universidad de California en Santa Cruz y la Universidad Carnegie Mellon decidió construir un pequeño y superinteligente robot inspector para atrapar los errores que cometen las IA de codificación. Lo llaman un "crítico de UI/UX". Piensa en ello como un estricto profesor de arte que no solo revisa si el dibujo está terminado, sino que también revisa si se siguieron las reglas del profesor sobre perspectiva y color.

El Problema: El sitio web que "Funciona, pero es Malo"
En este momento, las herramientas de IA están produciendo sitios web a diestra y siniestra. Están entrenadas para asegurar que el código se ejecute y que los botones hagan clic. Pero a menudo ignoran la "vibra" y la "seguridad" del sitio. Un sitio web puede funcionar perfectamente, pero podría tener:

• Barreras de accesibilidad: Como un pomo de puerta que es demasiado pequeño para alguien con manos temblorosas, o un texto que es tan claro que no puedes leerlo.
• Patrones oscuros (Dark patterns): Como un botón de "No, gracias" que está oculto en un texto diminuto e invisible, o un cartel que dice: "No, gracias, prefiero pagar el precio completo", haciéndote sentir culpable por decir que no.
• Diseños confusos: Como un menú con 20 opciones que se ven todas iguales, haciendo que tu cerebro sienta que está tratando de comerse una pizza entera de un solo bocado.

Los investigadores sabían que revisar estas cosas manualmente es demasiado lento, y usar modelos de IA enormes y costosos para revisarlas es demasiado caro. Necesitaban una solución "Goldilocks" (punto medio ideal): un modelo pequeño y barato que pudiera ser lo suficientemente inteligente como para detectar estos errores sigilosos.

La Solución: El juego de "Inyectar y Verificar"
Para enseñar a su pequeño robot inspector, necesitaban una enorme cantidad de pruebas de práctica. Pero encontrar sitios web reales con estos diseños específicos es difícil. Así que inventaron un juego ingenioso llamado "Inyectar y Verificar".

1. El Lienzo Limpio: Primero, generaron miles de sitios web perfectos y limpios usando IA.
2. El Sabotaje: Luego, le pidieron a una "IA Maestra" superinteligente que rompiera estos sitios web secretamente. La IA Maestra tomaría una página perfecta e inyectaría violaciones específicas, como hacer un botón diminuto, esconder una tarifa en un texto tenue o hacer que un enlace de "No, gracias" suene grosero.
3. La Verificación de la Realidad: Aquí está la parte mágica. La IA Maestra no solo decía: "Yo lo rompí". Tenía que demostrarlo. El sistema tomaba una captura de pantalla de la página rota. Si la IA Maestra afirmaba que había hecho invisible un botón, pero la captura de pantalla aún mostraba el botón claramente, el sistema decía: "No, inténtalo de nuevo". La violación tenía que estar visiblemente rota en la imagen, no solo en el código.
4. El Conjunto de Datos: Terminaron con unas 10,000 páginas, cada una con 1 a 3 errores visibles y verificados. Esto se convirtió en la escuela de entrenamiento para su robot estudiante.

El Entrenamiento: Aprender Haciendo
El robot estudiante que eligieron fue un "Modelo de Lenguaje y Visión" (un modelo de 4 mil millones de parámetros). Esto significa que puede leer texto (el código) y mirar imágenes (las captas de pantalla del sitio web) al mismo tiempo.

No solo le mostraron las respuestas. Utilizaron Aprendizaje por Refuerzo. Imagina que el robot está jugando un videojuego donde tiene que encontrar trampas ocultas.

• Si detecta una trampa (una violación), recibe un punto.
• Si se le pasa una trampa, pierde un punto.
• Si da una falsa alarma (dice que un buen diseño es malo), pierde un punto.
• Si habla demasiado y se queda sin tiempo antes de dar una respuesta, obtiene cero puntos.

El robot jugó este juego una y otra vez, ajustando su cerebro cada vez que obtenía un punto o perdía uno. Aprendió a mirar las capturas de pantalla, no solo el código, porque algunos errores (como un botón que es demasiado pequeño) solo son visibles en la imagen, no en el texto.

Los Resultados: De Incapaz a Experto
Antes del entrenamiento, el robot era bastante malo en esto. Podía leer el código y encontrar errores de texto obvios, pero si le pedías que mirara una imagen y dijera "¿Es este botón demasiado pequeño?", fallaba la mayor parte de las veces. Su puntuación era de solo 36% (una medida llamada micro-F1). Era como un estudiante que estudió el libro de texto pero reprobó el examen práctico.

Después del entrenamiento de Aprendizaje por Refuerzo, el robot se convirtió en un profesional. Su puntuación saltó al 84%.

• Se volvió muy bueno detectando errores visuales, como colores de bajo contraste (pasando de 0% a 64% de precisión) y espaciado desordenado (pasando de 4% a 94% de precisión).
• Se volvió excelente detectando diseños engañosos, como los "patrones oscuros" que intentan engañar a los usuarios.
• Aprendió a ser conciso, deteniendo su proceso de "pensamiento" a tiempo para dar una respuesta clara, lo que lo hizo más rápido y confiable.

Lo que Puede Hacer Ahora
Este pequeño robot no es solo un juguete. Los investigadores dicen que puede usarse para:

• Auditar nuevos sitios web instantáneamente para ver si son seguros y fáciles de usar.
• Filtrar datos de entrenamiento malos para que las futuras IA de codificación no aprendan de ejemplos defectuosos.
• Recompensar a las IA de codificación cuando hacen buenos diseños, ayudándolas a aprender a ser mejores diseñadoras ellas mismas.

Las Limitaciones
Los investigadores son honestos sobre lo que su robot aún no puede hacer. Todavía tiene dificultades con las cosas realmente difíciles que requieren comparar muchas cosas a la vez, como determinar si un menú tiene demasiadas opciones (un concepto llamado la Ley de Miller) o si un botón está demasiado lejos de donde necesitas hacer clic (la Ley de Fitts). Esto requiere un poco más de "razonamiento espacial" que el robot actual encuentra complicado. Además, dado que lo entrenaron con errores "inyectados", no están 100% seguros de cómo manejará los sitios web desordenados y extraños del mundo real, aunque sospechan que lo hará bien.

En resumen, este artículo muestra que no necesitas un cerebro gigante y costoso para revisar un mal diseño. Con un poco de entrenamiento inteligente y mucha práctica, un robot pequeño y barato puede aprender a detectar las trampas invisibles y los diseños confusos que los usuarios humanos odian, haciendo que el internet sea un lugar más amigable para todos.