Eye tracking y patrones de lectura: F, Z, lectura en capas y cómo escribir para ellos

La primera vez que vi una grabación de eye tracking de una web que habíamos diseñado, me llevé una lección de humildad. El círculo que marcaba la mirada saltaba del titular a una foto, rozaba el menú, bajaba en diagonal y se detenía, por fin, en un precio. El párrafo que más nos había costado escribir, el que contaba la historia de la marca, apenas recibió dos fijaciones. La persona encontró lo que buscaba, pero por un camino que no habíamos imaginado.

Desde entonces, los estudios de seguimiento ocular forman parte de nuestra forma de pensar cada página. No porque hagamos eye tracking en todos los proyectos, sino porque lo que han descubierto en los últimos veinte años sobre cómo leemos en pantalla es tan consistente que cambia la manera de escribir y maquetar.

Esta guía explica qué es el eye tracking, qué patrones de lectura ha documentado (el famoso patrón F, la lectura en capas, el patrón Z y otros menos conocidos) y cómo traducirlos en decisiones concretas para que lo importante de tu web se vea a la primera.

01Qué es el eye tracking y qué nos dice

El eye tracking, o seguimiento ocular, registra hacia dónde mira una persona mientras observa una pantalla, un envase o un lineal. La mayoría de los equipos usan luz infrarroja y una cámara que detecta el reflejo en la córnea y la posición de la pupila.

Para entender sus resultados conviene conocer tres conceptos:

• →Fijación. Momento en el que el ojo se detiene en un punto, normalmente entre 200 y 300 milisegundos durante la lectura. Es entonces cuando captamos información.
• →Sacada. Salto rápido entre una fijación y la siguiente. Durante la sacada, prácticamente no vemos.
• →Regresión. Vuelta atrás a algo ya mirado, a menudo porque no se ha entendido.

Los resultados se muestran de dos formas: los mapas de calor, que acumulan dónde han mirado muchas personas, y los recorridos de mirada (gaze plots), que muestran la secuencia de una sola persona. Los mapas son vistosos; los recorridos suelen enseñar más.

02El patrón F: lo que pasa cuando el texto no ayuda

En 2006, Jakob Nielsen publicó los resultados de un estudio de Nielsen Norman Group con 232 personas que miraban miles de páginas web. Los mapas de calor dibujaban a menudo una forma de F:

1. 01Una primera lectura horizontal en la parte de arriba del contenido.
2. 02Una segunda lectura horizontal, más corta, un poco más abajo.
3. 03Un recorrido vertical por el margen izquierdo, leyendo solo el principio de las líneas.

En 2017, Kara Pernice revisó el patrón con nuevos estudios en escritorio y móvil. La conclusión fue doble: el patrón F sigue apareciendo y, además, se malinterpreta a menudo. No es una plantilla para diseñar en forma de F; es el síntoma de un texto que no ofrece ayudas para escanear. Cuando hay muros de texto sin titulares, sin negritas y sin listas, la gente hace lo único que puede: leer el arranque y bajar por la izquierda.

La lectura útil del patrón F es que las primeras palabras de cada línea, párrafo y titular hacen casi todo el trabajo. Nielsen Norman Group lo resumió en una pauta muy práctica: cuidar las dos primeras palabras de cada titular, enlace o elemento de lista, porque son las que el ojo realmente lee al escanear.

03Otros patrones de lectura documentados

En la revisión de 2017, el equipo de Nielsen Norman Group describió otros patrones que conviene conocer porque cada uno pide una respuesta de diseño distinta.

El patrón que buscamos provocar en casi todas las webs es la lectura en capas (layer-cake): la persona recorre los titulares como si fueran un índice, entiende la estructura y se detiene en la sección que le interesa. Es la forma más eficiente de escanear, y depende por completo de cómo están escritos los subtítulos.

Clave: el patrón de lectura no lo elige solo el lector; lo provoca el diseño. Un texto con titulares que informan invita a leer en capas, y un muro de texto empuja a leer en F.

04El patrón Z y el diagrama de Gutenberg

El patrón Z aparece mucho en manuales de diseño, pero procede más de la tradición de composición que de los estudios de eye tracking. Describe un recorrido natural en páginas con poco texto y elementos separados: la mirada empieza arriba a la izquierda (logo), cruza a la derecha (navegación o botón), baja en diagonal por el centro (imagen o mensaje) y termina abajo a la derecha (llamada a la acción).

Está emparentado con el diagrama de Gutenberg, atribuido al tipógrafo Edmund Arnold, que divide una página de lectura uniforme en cuatro zonas y sitúa el final natural del recorrido abajo a la derecha.

Lo útil de estos modelos es como punto de partida para portadas, anuncios o la cabecera de una landing. Lo que manda, en cualquier caso, es la jerarquía visual: un elemento grande y contrastado atrae la mirada aunque esté fuera del recorrido teórico. Lo tratamos en la guía de jerarquía visual y, desde la atención, en la de efecto Von Restorff y saliencia.

05Más hallazgos que cambian cómo maquetamos

La atención se concentra arriba

En su análisis de 2018 sobre scroll y atención, Nielsen Norman Group encontró que el 57 % del tiempo de visualización se concentraba en la primera pantalla y el 74 % en las dos primeras. La gente hace scroll, pero la atención decrece a medida que baja. Lo esencial tiene que aparecer pronto y el resto tiene que ganarse la continuación.

La mitad izquierda recibe más atención

En idiomas que se leen de izquierda a derecha, la mitad izquierda de la página recibe más fijaciones. En un estudio de Nielsen Norman Group de 2010, los participantes dedicaron en torno al 69 % del tiempo a la mitad izquierda. Por eso la navegación, los titulares y la información clave suelen funcionar mejor alineados a la izquierda.

La ceguera a los banners

Jan Benway y David Lane describieron en 1998 la ceguera a los banners: la tendencia a ignorar lo que parece publicidad, incluso cuando contiene la información que se busca. Cualquier cosa con aspecto de anuncio (recuadros de colores intensos en el lateral, animaciones, formatos estándar) corre el riesgo de quedar invisible. Lo que funciona es integrar los mensajes importantes en el flujo de contenido, con el mismo lenguaje visual que el resto.

Las caras dirigen la mirada

Las caras atraen mucho la atención, y la dirección de la mirada de una persona en una foto tiende a guiar la nuestra. Una foto de alguien mirando hacia el titular o el formulario ayuda a llevar la vista hasta allí; una que mira hacia fuera de la página la desvía.

06Leer en el móvil: el mismo ojo, otra pantalla

Buena parte de los estudios clásicos se hicieron en escritorio, y en el móvil algunos patrones cambian. La pantalla estrecha deja menos margen para recorrer en horizontal, así que el patrón F se aplana: casi todo es columna. A cambio aparece con más fuerza el patrón de marcado, en el que la mirada se queda fija en una zona de la pantalla, normalmente el tercio superior o el centro, y es el dedo el que hace pasar el contenido por delante.

Esto tiene consecuencias muy prácticas:

• →El ritmo importa más que la composición. Bloques de longitud parecida, separados con aire regular, permiten que el contenido «desfile» con comodidad bajo la mirada.
• →Los titulares tienen que verse al pasar. Un subtítulo con buen contraste de tamaño y peso actúa como señal para detener el dedo.
• →Las imágenes marcan pausas. Una foto entre bloques de texto ayuda a la persona a saber dónde está y a retomar la lectura.
• →Los datos clave, en la primera pantalla. En móvil, esa primera pantalla es todavía más pequeña, así que lo que no cabe ahí tiene que ganarse el desplazamiento con un buen titular.

En nuestras pruebas con usuarios en móvil, lo que mejor funciona es pensar cada sección como una tarjeta que se entiende sola, con su titular, una o dos frases y, si hace falta, un botón. Así, quien se detiene a mitad de página entiende dónde está sin tener que volver arriba.

07Cómo escribir y maquetar para la lectura en capas

Estas son las pautas que aplicamos en cada página, y que puedes usar para revisar la tuya:

1. 01Titulares que funcionan como resumen. Si alguien lee solo los ## de tu página, debería entender lo esencial. «Precio cerrado y sin sorpresas» informa; «Nuestra filosofía» no dice nada al escanear.
2. 02Lo importante, al principio. En titulares, párrafos y elementos de lista, empieza por la palabra que da la información.
3. 03Párrafos cortos. Tres o cuatro líneas en escritorio, menos en móvil. Una idea por párrafo.
4. 04Negrita con moderación. Dos o tres palabras clave por bloque. Si todo va en negrita, nada destaca.
5. 05Datos con formato propio. Precios, horarios, plazos y cifras en un estilo reconocible, para la lectura en manchas.
6. 06Listas con arranques variados. Evita que cinco elementos empiecen por «Nuestro…».
7. 07Medida de línea cómoda. Entre 45 y 75 caracteres por línea, con un interlineado de alrededor de 1,5.

Para el último punto, una base de CSS sencilla ayuda mucho:

.contenido {
  max-width: 68ch;      /* entre 45 y 75 caracteres por línea */
  font-size: 1.125rem;  /* 18 px en la mayoría de navegadores */
  line-height: 1.55;
}
.contenido h2 {
  margin-top: 2.5em;    /* más aire antes del titular que después */
  margin-bottom: 0.6em;
}

08Del laboratorio a tu web

No hace falta un laboratorio de eye tracking para aprovechar lo que estos estudios han descubierto. Basta con aceptar que la mayoría de las personas escanean, y diseñar para que ese escaneo sea fácil y eficaz. Cuando una página se deja leer en capas, quien tiene prisa encuentra lo que busca y quien tiene interés se queda.

En SIMA aplicamos estas pautas en cada proyecto de diseño web y experiencia digital, desde la estructura de contenidos hasta el último titular. Si quieres que revisemos cómo se lee tu web y qué cambios harían que lo importante se viera antes, escríbenos y lo vemos juntos.