Diseño web: patrones básicos para crear jerarquía visual

0
377

Las formas de lectura en web no son siempre las mismas como leemos un texto, por ello es importante conocer cuáles son las formas básicas de escaneo del ojo para generar una adecuada jerarquía visual y atraer la atención del usuario.

Notas relacionadas
Cómo hacer lucir la tipografía en tu diseño: 7 claves
Crea tu portafolio en línea en 4 fáciles pasos
Para amantes de la tipografía: términos explicados con ilustraciones

1. Patrón F

Es recomendable para sitios web de texto pesados como los blogs, pues permite al ojo humano leer de una línea vertical del lado izquierdo en busca de palabras claves, puntos de interés. Cuando el lector encuentra algo que les gusta, comienza a leer normalmente, formando líneas horizontales, es decir, el escaneó es similar a la letra F o E.

Beneficios:
* Los usuarios rara vez leen cada palabra del texto.
* Los dos primeros párrafos son los más importantes y deben contener su gancho.
* Inician párrafos, subtítulos y viñetas con palabras clave que tientan.

Es muy útil para los sitios que desean incrustar publicidad. El patrón F puede sentirse aburrido después de las primeras líneas.

patron f

2. Patrón Z

El escaneo tipo Z se produce en las páginas que no se centran en el texto. El lector escanea primero una línea horizontal en la parte superior de la página, ya sea por la barra de menú, o simplemente por el hábito de la lectura de izquierda a derecha desde la parte superior. Cuando el ojo llega al final, se dispara hacia abajo y hacia la izquierda (de nuevo basado en el hábito de la lectura), y repite una búsqueda horizontal en la parte inferior de la página.

Z-Patrón Fuente: Entendiendo la Z Layout
El Z-patrón es aplicable a casi cualquier interfaz web, ya que se ocupa de los requisitos básicos de sitios web, tales como la jerarquía, la marca, y hace un llamamiento a la acción. El Z-patrón es perfecta para las interfaces donde la simplicidad es una prioridad y la llamada a la acción es la comida para llevar principal. Forzando una Z-patrón para un sitio web con contenido complejo puede no funcionar tan bien como el patrón F, pero un Z-patrón puede ayudar a traer un sentido de orden a los diseños más simples (y aumentar las tasas de conversión). Aquí hay un par de buenas prácticas a tener en cuenta:

Beneficios
Punto 1. Privilegia el logotipo

Punto 2. Una llamada a la acción secundaria puede ayudar a los usuarios a guiar a lo largo del Z-patrón.
Centro de la página. Una foto principal deslizante en el centro de la página separará las secciones.

Punto 3. Comienza sección de íconos que se mueven a lo largo del eje inferior para guiar a los usuarios al punto 4.

Punto 4. Esta es la línea de meta, y un lugar ideal para su llamada a la acción principal. El modelo se puede repetir.

patron z

Via: Awwwards