Dónde miran

Qué es y por qué importa

Quien abre tu landing o tu ficha en la App Store decide en pocos segundos si se queda. En esos segundos, ¿ve qué hace tu app y el botón para probarla? Normalmente lo descubres solo después del lanzamiento, por los números.

Foveacast te lo enseña antes. Es una página web gratuita y de código abierto (licencia MIT, el código está en GitHub). Arrastras una captura de tu página y te devuelve un mapa de calor, un mapa de colores: donde es claro, es probable que vayan los ojos; donde es oscuro, probablemente no. Y te lo muestra para tres momentos: el primer segundo, los tres primeros, los siete primeros.

El modelo aprendió de datos reales: el estudio UEyes (Jiang, Leiva y colegas, CHI 2023) siguió con un eye tracker, una cámara que registra adónde miran las pupilas, a 62 personas frente a 1.980 capturas de webs, programas, apps y carteles. Todo funciona en tu navegador: sin cuenta, y la imagen no se sube a ningún sitio.

1. Haz una buena captura

El resultado vale lo que vale la captura que le das. Yo lo hago así:

1. Abre tu página en el navegador del ordenador, con la ventana grande. Cierra el banner de cookies y cualquier popup: si se quedan, se llevan las miradas también en la predicción.
2. Captura la primera pantalla, la que se ve sin hacer scroll: el primer segundo se juega ahí. En Mac pulsa Cmd+Shift+4 y arrastra sobre la zona; en Windows pulsa Win+Shift+S.
3. Para el resto de la página, haz una captura por cada bloque, no una sola larguísima. El modelo trabaja con una versión pequeña de la imagen, 320 por 240 píxeles: una página entera en una única imagen vertical se aplasta y los detalles desaparecen.
4. Guárdala en PNG o JPG, por debajo de 20 MB. Si es más ancha de 2560 píxeles, la herramienta la reduce sola.

Para la App Store, abre la ficha de tu app desde el navegador del ordenador y haz lo mismo. No es como la ve quien la abre desde el móvil, pero te dice si el icono, el nombre y las primeras imágenes se hacen notar.

2. Lanza la prueba

1. Abre allaboutken.com/Foveacast desde el ordenador, con Chrome (u otro navegador basado en Chromium) o con Firefox. Mantén la ventana ancha: si mide menos de 900 píxeles, la página cree que estás en un móvil y te muestra un aviso.
2. La primera vez descarga los archivos del modelo, unos 57 MB: espera a que termine. Las siguientes veces los carga desde la caché del navegador y arranca enseguida.
3. Arrastra la captura a la página, pégala o cárgala con New Image.
4. Espera el análisis: primero llega la vista de 3 segundos, luego las otras dos. Haz clic en el mapa de calor para pasar de una vista a otra: First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Con Download PNG guardas la imagen: consérvala, la necesitarás para la comparación final.

3. Lee las tres vistas y el informe

Los colores van del violeta oscuro, poca atención prevista, al naranja, hasta el amarillo claro, la más alta. Dos cosas que saber antes de mirar:

• La escala es relativa a tu imagen: el punto más fuerte siempre es amarillo, aunque nada destaque de verdad. Amarillo no quiere decir «funciona», quiere decir «es lo más fuerte de esta página».
• La mira marca dónde cree el modelo que caerá la primera mirada. Es una estimación, no una medida.

Las tres vistas dicen cosas distintas:

• 1 segundo: lo que salta a la vista antes incluso de leer. Cuentan el contraste, los bordes, las caras, el texto grande.
• 3 segundos: una primera vuelta por la página. Empiezan a contar los títulos, las imágenes grandes, los menús y los botones.
• 7 segundos: una lectura más atenta. La atención llega también a los textos, los formularios y los detalles.

Debajo del mapa de calor está el informe, Analysis Report. Las partes que más uso:

• Attention by image region: la regla de los tercios, es decir, la página dividida en una cuadrícula de 3 por 3, con el porcentaje de atención en cada casilla.
• Eye movement sequence: el orden previsto en que la mirada pasa de una zona a otra, marcado con números.
• Attention shift: cómo se desplaza el centro de la atención de 1 a 7 segundos. Si baja en el orden en que quieres que se lea, la página guía bien.

4. Las dos preguntas del primer segundo

De todo el informe, me interesan dos preguntas. Las miro en la vista de 1 segundo:

1. ¿Se ve la promesa? La promesa es la frase que dice qué hace tu app y para quién. Debería estar clara en las tres vistas. Si solo se enciende a los 3 o a los 7 segundos, probablemente es demasiado pequeña o tiene poco contraste con lo que tiene alrededor.
2. ¿Se ve el botón principal? Es el que hace descargar o registrarse. Si en 1 segundo sigue oscuro, probablemente nadie lo vea antes de irse.

Luego mira quién roba la atención: un logo, una foto puesta solo de adorno, dos zonas claras juntas que compiten entre sí. Decide qué tiene que ganar.

Escribe en dos líneas lo que has visto: es lo que le darás a Claude Code.

5. Arregla la página con Claude Code

Abre Claude Code en la carpeta de tu web y dale las imágenes: arrástralas a la ventana, pégalas con Ctrl+V o escribe la ruta del archivo. Un cambio cada vez, si no, no sabrás qué ha funcionado.

Te adjunto la captura de mi landing y el mapa de calor de la atención prevista en 1 segundo. El botón principal «[texto del botón]» se queda casi a oscuras: probablemente nadie lo ve.
Haz que destaque: más contraste con el fondo, más espacio vacío alrededor y, si hace falta, más grande o más arriba.
No toques los textos, los colores de la marca ni el resto de la página.
Antes de cambiar nada, dime en tres líneas qué quieres hacer.

El título «[tu frase]» solo se enciende en la vista de 7 segundos. Quiero que se vea en el primer segundo.
Trabaja solo en el tamaño, el grosor y el contraste del título, y en el espacio que lo rodea. No cambies las palabras.
Al final, hazme una lista de los valores que has cambiado, antes y después.

En el mapa de calor de 1 segundo, [el elemento] es la zona más clara y le quita atención al título y al botón.
Hazlo menos fuerte, con menos contraste o más pequeño, sin quitarlo.
Deja el resto como está.

Antes de repetir la prueba, abre la página y comprueba que todo sigue funcionando, también desde el móvil.

6. Repite la prueba y luego pregunta a personas reales

1. Repite la captura con la misma ventana y el mismo punto de la página, pásala por Foveacast y guarda el PNG. Si cambias el encuadre, la comparación no vale.
2. Pon lado a lado los dos mapas de calor de 1 segundo, antes y después. La pregunta es una: ¿el botón y la promesa están ahora más claros, comparados con el resto de la página?
3. Mira también las vistas de 3 y 7 segundos: has movido la atención, comprueba que no se la has quitado a algo que importa.
4. Si está peor, vuelve atrás. Si está mejor, quédate con el cambio y pasa al siguiente.

Y luego no te fíes demasiado. Es una predicción sobre una persona media que mira la página sin buscar nada; tus usuarios llegan con un objetivo, y quien busca algo mira de otra forma. Con textos densos, tablas y mapas se equivoca más. Existen servicios de pago con eye tracking medido en personas reales, pero para una comprobación antes del lanzamiento basta con esto: úsalo para encontrar los problemas evidentes, después enseña la página a algunas personas reales y pregúntales qué hace esta app y dónde harían clic.

Errores comunes

• Pasar toda la página en una única imagen larguísima. Se aplasta: haz una captura por bloque.
• Leer el amarillo como «funciona». Solo es el punto más fuerte de tu imagen.
• Mirar solo la vista de 7 segundos. La promesa y el botón se juegan en el primero.
• Pedirle a Claude Code cinco cambios a la vez y luego no saber cuál ha ayudado.
• Tomar el mapa de calor por tus usuarios reales. Es una media, no tu gente.

Lista de comprobación

• Captura desde el ordenador, sin banners ni popups
• Una captura de la primera pantalla y una de cada bloque importante
• La promesa está clara en las tres vistas
• El botón principal no está oscuro en 1 segundo
• Le he pedido a Claude Code un cambio cada vez
• He repetido la prueba con el mismo encuadre y he comparado los dos PNG
• He enseñado la página a algunas personas reales

Preguntas frecuentes