La mayoría de los diseños tienen patrones que se generan por los elementos que conforman dicho diseño (imágenes, botones, bloques de texto, etc). Esto hace que los usuarios escaneen un diseño siguiendo dichos patrones, los cuales pueden ser estudiados mediante técnicas de eye tracking (registro visual).

Aunque estos patrones están en constante evolución por los cambios tecnológicos y culturales, podemos identificar los 3 más conocidos: Guttenberg, Patrón Z (z-pattern), y Patrón F (f-pattern).

Patrón de lectura Gutenberg

Este patrón es generalmente asociado con avisos impresos y grandes bloques de texto (de ahí su nombre). Dado que las páginas web tienen un tipo de lectura muy diferente al del diseño impreso, este tipo de patrón no es tan común en formatos digitales. Sin embargo, con el surgimiento de la tendencia de grandes imágenes de cabecera (también conocidas como hero images), o páginas diseñadas para tabletas, este patrón se vuelve a ver.

El patrón Gutenberg básicamente se explica por los ejes de orientación y la gravedad. Dado que en Occidente leemos de izquierda a derecha y de arriba a abajo, nuestra mirada se focaliza en puntos de atención que siguen esta dirección.

El patrón Gutenberg divide el área visual en 4 partes divididas por ejes de coordenadas. Estas partes tienen distintos grados de interés, que se relacionan con el eje de dirección de lectura izquierda-derecha y con el eje de gravedad (arriba a abajo). Sin embargo, este eje de gravedad no cae verticalmente como lo haría una piedra, sino que es influenciado por el eje de dirección. Imaginen una hoja que cae de un árbol y es a la vez soplada por el viento, cayendo así en forma oblicua.

Entonces, el patrón Gutenberg luce así:

Como decía más arriba, este patrón tuvo un resurgimiento en los últimos años. Veamos la página de Uber:

Aquí se puede ver como el logo y el slogan están ubicados en el área de énfasis primario, las opciones más genéricas en el área de seguimiento fuerte, el área de seguimiento débil está completamente vacía y el área terminal tiene el formulario y el CTA, que es lo que le interesa a Uber: que los usuarios se registren.

Patrón Z

El patrón-Z es un patrón de lectura que forma una Z. Este patrón fue uno de los más comunes por largo tiempo, y aún se sigue viendo constantemente. Como podrán apreciar, es casi igual al Gutenberg, pero en este patrón los usuarios pasan por las áreas de seguimiento débiles y fuertes.

Este patrón luce de la siguiente manera:

Y si se preguntan cómo se aplica en diseños reales, veamos la página web de Evernote:

Pero Evernote no se queda aquí, sino que luego utiliza una variación del Patrón-Z que es el Patrón Zig-Zag, que no es otra cosa que el Patrón-Z repetido una y otra vez. Veamos el ejemplo (dar clic para ver tamaño completo):

Patrón F

Finalmente el patrón-f es hoy por hoy el más común, y es aquel en que los usuarios pueden percibir un patrón con forma de letra F o E. Este patrón fue descubierto por Norman Nielsen Group (ver estudio aquí, en inglés) luego de estudiar miles de casos por medio de la técnica de registro visual o eye tracking. Al analizar los resultados, descubrieron que la gran mayoría de los usuarios escanean un sitio formando este patrón de F. Veamos un ejemplo:

¿Alguien ve una F por ahí?

Para ver un ejemplo muy visible, fijémonos en el diario LA Times y su uso del patrón-f  (dar clic para imagen completa):

Consideraciones sobre los Patrones de Lectura

Quizás alguien se pregunte para qué nos sirven estos patrones. Y la respuesta es que al seguir patrones conocidos y habituales para los usuarios, podemos ubicar el contenido que más nos interese en los lugares más apropiados.

Algunos puntos de interés sobre el tema:

• Personalmente, y usando la técnica de eye tracking pude detectar un patrón que he llamado como N invertida. Este patrón suele ser visible cuando los usuarios visitan motores de búsqueda, o listas en columnas (por ejemplo tablas de precios) .
• Este artículo considera la lectura LTR (Left to Right, de izquierda a derecha) ya que es la que usamos en Occidente. Sin embargo, en lenguajes que usan escritura RTL, estos patrones se siguen mostrando, sólo que al revés.
• Aunque es recomendable seguir estos patrones, hay que tener cuidado en no ser muy evidente, dado que el diseño tendría una predictibilidad que atentaría contra las conversiones
• La combinación de distintos patrones suele ser muy confusa y dar malos resultados. Sin embargo, es posible crear un elemento conocido como pattern breaking (rompimiento de patrón) para crear un elemento disonante que llame la atención