Benchmark de Mona
Todo lo que Mona ha medido, con los datos y el método. No necesitas leer esto para usar Mona: está aquí para quien quiera comprobarlo.
0,68mirada: correlación con miradas realesantes 0,66 · mapa medio 0,43
0,64detector de elementos: F1 (texto, botón, imagen)antes 0,59
5,5 ptsdiferencia de nota a partir de una sola imagenantes 8,1 · correlación 0,82
0,995navegador frente a Python: mapa de la miradadiferencia de nota de pantalla: 0,1 pt
Dónde se posa la mirada
Mona predice un mapa de calor: las zonas que la mirada visita durante los 3 primeros segundos. Se compara con mapas humanos reales (UEyes, 62 personas) y con una referencia sencilla: el mapa medio, es decir, la costumbre de mirar arriba y al centro. Imp1k nunca se usó para aprender.
- Mapa medio
- Mona antes
- Mona ahora
Ver los valores
| Mapa medio | Mona antes | Mona ahora | |
|---|---|---|---|
| UEyes (prueba) | 0,43 | 0,66 | 0,68 |
| Imp1k páginas web | 0,32 | 0,49 | 0,56 |
| Imp1k pantallas móviles | 0,37 | 0,43 | 0,47 |
- UEyes, validación
- Imp1k páginas web (dev)
Ver los valores
| época | UEyes, validación | Imp1k páginas web (dev) |
|---|---|---|
| 1 | 0,643 | 0,539 |
| 2 | 0,693 | 0,485 |
| 3 | 0,707 | 0,539 |
| 4 | 0,706 | 0,562 |
| 5 | 0,705 | 0,559 |
| 6 | 0,713 | 0,564 |
| 7 | 0,704 | 0,531 |
| 8 | 0,708 | 0,529 |
| 9 | 0,706 | 0,522 |
| 10 | 0,704 | 0,504 |
| 11 | 0,703 | 0,508 |
| 12 | 0,703 | 0,497 |
| 13 | 0,705 | 0,509 |
| 14 | 0,705 | 0,510 |
| 15 | 0,704 | 0,510 |
Leer la interfaz
Cuando Mona parte de una imagen (maqueta, captura), no puede leer el código de la página: un detector propio encuentra textos, botones, imágenes, campos e iconos. Aprendió con unos 1500 sitios públicos cuyas etiquetas vienen del código de las páginas. Esta prueba usa sitios que nunca ha visto.
- Antes
- Ahora
Ver los valores
| Clase | Antes: exhaustividad / precisión | Ahora: exhaustividad / precisión | F1 antes | F1 ahora |
|---|---|---|---|---|
| texto | 0,59 / 0,64 | 0,72 / 0,75 | 0,61 | 0,73 |
| botón | 0,51 / 0,59 | 0,59 / 0,59 | 0,55 | 0,59 |
| imagen | 0,65 / 0,57 | 0,61 / 0,60 | 0,61 | 0,60 |
| campo | 0,24 / 0,38 | 0,38 / 0,70 | 0,29 | 0,49 |
| icono | 0,15 / 0,34 | 0,31 / 0,43 | 0,21 | 0,36 |
La nota de una imagen
Para saber si la lectura desde una imagen es lo bastante fiable, se calcula la nota dos veces: con el código de la página (la referencia) y luego con lo que el detector ve solo en la imagen. Diferencia media de 5,5 puntos (mediana 3,3); el 80 % de las pantallas a menos de 10 puntos.
- Antes
- Ahora
- Con cajas exactas
Ver los valores
| Antes | Ahora | Con cajas exactas | |
|---|---|---|---|
| Todo | 8,1 | 5,5 | 3,8 |
| Contraste | 18,7 | 6,0 | 5,9 |
| Tamaño del texto | 24,9 | 14,9 | 10,9 |
| Botón | 9,5 | 6,3 | 1,8 |
| Sobrecarga | 0,0 | 0,0 | 0,0 |
| Cantidad de texto | 8,3 | 5,0 | 3,4 |
| Jerarquía | 25,4 | 13,3 | 7,7 |
El cerebro
Un modelo predice la reacción de 20 zonas de la corteza visual a una imagen, aprendido con mediciones de resonancia (THINGS-fMRI). Está validado con fotos, no con páginas web: en los informes es orientativo y no cuenta en la nota.
Ver los valores
| Zona | Valor |
|---|---|
| V1 | 0,68 |
| V2 | 0,59 |
| V3 | 0,51 |
| V4 | 0,31 |
| V3ab | 0,47 |
| LO | 0,51 |
| MT | 0,57 |
| VO | 0,31 |
| FFA caras | 0,61 |
| OFA caras | 0,59 |
| EBA cuerpos | 0,63 |
| STS social | 0,32 |
| PPA lugares | 0,60 |
| RSC lugares | 0,41 |
| TOS lugares | 0,52 |
| LOC objetos | 0,52 |
| IT objetos | 0,51 |
| atención FEF IPS | 0,35 |
| OFC valor | 0,08 |
| vmPFC valor | 0,00 |
Lo que hace Mona, sin ocultar nada
Cada paso, cada dato, cada límite. Si falta algo aquí, es un fallo de esta página.
Los pasos de un análisis
- Captura (servidor). Un servidor abre la dirección en Chrome (1440 × 900), espera las animaciones de entrada, se desplaza por hasta 12 pantallas y anota, en cada pantalla, el texto, los tamaños, los colores y los botones. Devuelve las imágenes y esas anotaciones, y luego lo olvida.
- Mirada (tu navegador). Dos pequeños modelos ONNX (unos 8 MB juntos) predicen dónde se posa la mirada durante los 3 primeros segundos. Mona hace la media de sus mapas.
- Cerebro (tu navegador). Un modelo de unos 6 MB predice la reacción de 20 zonas de la corteza visual, comparada con unas 500 páginas web. No cuenta en la nota.
- Legibilidad (tu navegador). Seis reglas: contraste del texto (peso 2), tamaño del texto (1), botón principal visible (2,5), sobrecarga (1,5), cantidad de texto (1), jerarquía (1,5).
- Nota. Media ponderada por pantalla sobre 100; la primera pantalla cuenta la mitad, las siguientes la otra mitad.
- Informe. Guardado en el almacenamiento de tu navegador (IndexedDB). Exportación JSON, impresión PDF, borrado en cualquier momento.
Los modelos se guardan en media precisión para reducir su peso a la mitad; el resultado es idéntico (correlación de la mirada con mapas reales: 0,681 con o sin). La versión en JavaScript de las reglas se comprueba frente a la de Python: mapas de mirada correlacionados a 0,995, nota de pantalla con 0,1 puntos de diferencia.
Los datos usados
| Fuente | Sirve para | Detalle |
|---|---|---|
| UEyes (Jiang et al., CHI 2023) | entrenar la mirada | 1980 interfaces, 62 personas. CC BY 4.0. |
| Imp1k (Fosco et al., 2020) | solo medir | 200 páginas web y 200 pantallas móviles, con importancia anotada. Nunca se usó para aprender; una mitad sirve para elegir el modelo y la otra para anunciar el resultado. |
| THINGS-fMRI (Hebart et al.) | entrenar el cerebro | 8740 imágenes vistas por 3 personas. Datos CC0; las imágenes THINGS están reservadas a la investigación. |
| Unos 1500 sitios públicos (lista Tranco) | entrenar el detector de elementos | 3 pantallas por sitio, etiquetas sacadas automáticamente del código de las páginas. Sitios para adultos, de apuestas y de piratería excluidos. Capturas no publicadas. |
Lo que sale, lo que se queda
- El servidor de captura ve la dirección que das y el contenido de la página durante el análisis. No guarda ni imágenes, ni texto, ni informes. Mantiene en memoria, durante una hora, un contador por dirección IP para limitar los abusos.
- La mirada, el cerebro, las reglas y la nota se calculan en tu navegador. Una vez recibida la captura, no sale nada más.
- Sin cuenta, sin cookies, sin medición de audiencia. Las fuentes y las bibliotecas las sirve este sitio, no un tercero. El alojamiento de la página (Vercel) ve las visitas como cualquier alojamiento.
- El servidor rechaza las direcciones internas (localhost, redes privadas), los puertos inusuales y las redirecciones hacia ellas.
Lo que Mona no sabe hacer
- Decir si una página gusta. Mide la mirada y la legibilidad, no el gusto, y no sustituye una prueba con personas reales.
- La mirada se aprende con la observación libre de los 3 primeros segundos: no predice la búsqueda de una información concreta.
- La capa del cerebro no se ha validado en páginas web (sí en fotos). Es orientativa.
- Partiendo de una imagen, la lectura de la interfaz es menos fiable que desde el código de la página. La diferencia de nota medida aparece en los gráficos de arriba.
- El texto dibujado dentro de una imagen no se lee. Una pantalla solo se ve en un instante: carruseles, vídeos y ventanas que se abren más tarde escapan al análisis.
- Las páginas tras un inicio de sesión, un aviso que bloquea o una protección antirrobots dan un informe parcial. Se analizan como máximo 12 pantallas.
- Mona no sustituye una auditoría de accesibilidad completa: comprueba el contraste y el tamaño, no la navegación con teclado ni los lectores de pantalla.
En resumen
Para quienes solo quieren saber si Mona es para ellos, sin leer los gráficos.
¿Es fiable?
Sí, para una primera opinión rápida sobre la mirada y la legibilidad. No, para decidir por ti.
Mona se probó con páginas y pantallas que nunca había visto, y se comparó con mediciones reales. Es buena para detectar lo que atrae la mirada y lo que dificulta la lectura. No sabe lo que gusta.
Sí, se puede confiar
Para lo que se mide directamente:
- Dónde se posa la mirada. Mona encuentra lo esencial de lo que miran personas reales: 0,68 sobre 1 frente a 0,43 para la simple costumbre de mirar arriba y al centro. En páginas web que nunca ha visto: 0,56 frente a 0,32.
- Lo que dificulta la lectura de un sitio en línea. Texto demasiado pequeño, contraste demasiado bajo, demasiado texto, botón poco visible: son reglas precisas, aplicadas al pie de la letra. El cálculo en tu navegador da lo mismo que la versión original (diferencia de 0,1 puntos sobre 100).
Sí, pero con prudencia
Útil, no exacto:
- La nota de una imagen o de una maqueta. Sin el código de la página, Mona adivina los textos y los botones. Resultado: una nota a unos ±5,5 puntos de la que daría con el código (la mitad de las veces a menos de 3,3 puntos; 80 pantallas de cada 100 a menos de 10 puntos). Piensa en un termómetro que se equivoca por unos grados.
- Los elementos pequeños. Los iconos y los campos de texto a menudo se pierden (puntuación de 0,4 y 0,5 sobre 1). No cuentan en la nota.
- La reacción del cerebro. Se predice con fotos, no con páginas web, y no cuenta en la nota: tómala como una curiosidad.
No, no es su función
Mona no sabe:
- Decir si tu página gusta, ni si da ganas de comprar o de registrarse. Mide la mirada y la legibilidad, no el gusto.
- Sustituir una prueba con personas reales. Sirve para ordenar tus ideas antes de mostrarlas, no para cerrar la discusión.
- Hacer una auditoría de accesibilidad completa. Comprueba el contraste y el tamaño del texto, no el teclado ni los lectores de pantalla.
- Leer páginas protegidas con contraseña, ni una aplicación móvil nativa.
Para qué sirve, en concreto
- «¿Se ve mi botón principal?» Mona muestra un mapa de calor: en rojo, lo que la mirada visita en los primeros segundos. Si tu botón está en una zona fría, lo sabrás.
- «¿Se lee bien mi texto?» Detecta los textos demasiado pequeños o demasiado pálidos, y te dice dónde.
- «¿Qué corrijo primero?» Ordena los problemas del más importante al menos importante, pantalla por pantalla, con una nota sobre 100.
- «¿Mi nueva versión es mejor?» Analiza la antigua y la nueva: comparas dos notas y dos mapas de calor.
Para quién
Es para ti si…
- creas o mejoras un sitio, una página de ventas, una landing page o una maqueta;
- eres diseñador, desarrollador, autónomo, estudiante o gestionas el sitio de una pequeña organización;
- quieres una opinión rápida y gratis antes de mostrar tu trabajo, o para elegir entre dos ideas;
- no tienes presupuesto para una prueba con seguimiento ocular.
No basta si…
- tienes que tomar una decisión costosa (un gran rediseño): haz también una prueba con personas reales;
- tienes que demostrar una conformidad legal de accesibilidad;
- tu página está tras un inicio de sesión, o es una aplicación móvil nativa;
- quieres saber si la gente va a comprar: Mona no mide eso.
Las cifras, explicadas con sencillez
- Correlación, por ejemplo 0,68
- Medida del parecido entre el mapa de Mona y el de personas reales: 0 = ninguna relación, 1 = idénticos. 0,68 es «se parece claramente»; la simple costumbre de mirar arriba en el centro solo llega a 0,43.
- Diferencia de 5,5 puntos
- Si la nota «real» de una página es 70, Mona, leyendo solo una imagen, caerá la mitad de las veces entre 67 y 73, y 8 de cada 10 veces entre 60 y 80.
- F1 (detector de elementos)
- Una puntuación de 0 a 1 que dice si Mona encuentra bien los textos, botones e imágenes sin inventarse ninguno. 0,73 para los textos: encuentra la mayoría, con algunos errores.
- «Nunca visto durante el aprendizaje»
- Las pruebas usan páginas que Mona nunca ha visto, como un examen con preguntas nuevas: eso es lo que hace honestas las cifras.
Si solo recuerdas una cosa: Mona es una buena primera mirada, rápida y gratis, a lo que atrae la vista y lo que se lee mal. Corrige con ella y luego comprueba con personas reales.