El patrón Z al leer contenido Web UX

En este articulo te hablaré un poco acerca del patrón Z al leer contenido que encuentras en cualquier sitio web.

Es fácil que imaginemos a cada usuario leyendo emocionadamente cada cosa que escribes. Te recomiendo tener una mejor percepción de ello, porque los usuarios no hacen esto. Ellos escanean el contenido. Escaneo significa que sólo se detienen a leer cuando algo llama la atención.

Como diseñador, tienes mucho control sobre dónde ve la gente cuando está viendo una página web que has diseñado. Para crear la ruta correcta que los ojos del visitante van a seguir, necesitas entender cómo nuestros ojos procesan la información. En este artículo, te voy a explicar la teoría y la práctica de la creación de jerarquías visuales en diseño web utilizando Z-patrón.

¿Qué es el patrón Z, cómo funciona y por qué funciona?

Como habría de esperar, el diseño del patrón z sigue la forma de la letra Z. El diseño de un patrón z traza la ruta que el ojo humano recorre cuando escanea la página, de izquierda a derecha, de arriba a abajo:

• En primer lugar, la gente escanea desde la parte superior izquierda hasta la parte superior derecha, formando una línea horizontal
• A continuación, hacia abajo y hacia el lado izquierdo de la página, creando una línea diagonal
• Por último, hacia atrás a la derecha otra vez, formando una segunda línea horizontal.

Cuando los ojos de los espectadores se mueven en este patrón, forma una forma imaginaria de "Z":

Este patrón funciona porque la mayoría de los lectores occidentales escanearán tu página de la misma manera que escanearían un libro: de arriba a abajo, de izquierda a derecha.

¿Dónde usarlo?

El escaneado de patrones Z se produce en páginas que no están centradas en el texto (para páginas con texto pesado como artículos o resultados de búsqueda, es mejor utilizar el patrón F).

Esto hace que el patrón Z sea buena solución para diseños simples con una copia mínima y algunos elementos clave que necesitan ser vistos. Páginas minimalistas o páginas de destino que se centran principalmente alrededor de uno o dos elementos principales pueden implementar el patrón Z para animar a los usuarios a seguir este método natural.

Un Layout Z realmente brilla en los proyectos de diseño donde la simplicidad y una llamada a la acción son el principio más importante. Página de destino de Facebook es un ejemplo de Layout Z

¿Cómo usarlo?

Antes de empezar a trabajar el diseño de la página es esencial encontrar respuesta a las siguientes preguntas:

• Cuando el visitante aterriza en una página, ¿qué información deseas que observe?
• ¿En qué orden quieres que vean la información?
• ¿Qué quieres que hagan?

La premisa de la disposición Z es realmente bastante simple: imponer la letra Z en la página. Idealmente, quieres que la gente vea primero tu información más importante y la segunda información más importante en segundo lugar. Por lo tanto, los elementos importantes deben colocarse a lo largo de la ruta de exploración y deben ser presentados a los visitantes con la información correcta en el momento adecuado.

Es esencial crear un flujo

El flujo es acerca de llevar el ojo de una parte de una página a otra en la dirección que desea que se mueva. Crea flujo a través de una combinación de peso visual y dirección visual. Estas son algunas de las mejores prácticas que te recomiendo a tener en cuenta al crear un flujo:

• Punto 1. El punto # 1 es un punto de partida del viaje del espectador. Es una ubicación privilegiada para el logotipo.
• Punto # 2. Coloque los elementos que desea que el lector vea primero a lo largo de la parte superior de la Z. El ojo, naturalmente, seguirá el camino de la Z, por lo que el objetivo es colocar un segundo "llamada a la acción" al final. Pon más peso visual en el elemento del punto # 2 - haga que el botón (u otro elemento clave) sea brillante y colorido para llamar la atención de los usuarios y guiar a los usuarios a lo largo del patrón Z.
• Centro de la página. El truco a esta área es llenarlo con el contenido que interesa al usuario, mientras exhorta su vista hacia abajo a la línea siguiente. Por ejemplo, puedes colocar una imagen destacada en el centro de la página para separar las secciones superior e inferior y guiar los ojos a lo largo de la ruta Z.
• Punto # 3. El propósito del punto # 3 es guiar a los usuarios a la llamada final a la acción en el punto # 4. Por ejemplo, si tu página promueve algún producto que deseas vender, deseas que los clientes potenciales vean la copia que los convencerá a comprar antes de que vean el botón "Comprar ahora". Por lo tanto, puedes utilizar el punto # 3 para proporcionar beneficios u otra información útil para ellos.
• Punto # 4. El punto # 4 es la línea de meta, la fila entre él y el punto 3 debe contener el contenido que empuja la vista del usuario a la esquina. El punto # 4 por sí mismo es un lugar ideal para una llamada primaria a la acción.

Debajo te dejo dos buenos ejemplos de Layout Z de Basecamp y Evernote:

Patrón de zigzag

Lo interesante y útil de saber acerca del patrón Z es que podemos extender este patrón un poco viéndolo más como una serie de movimientos z en lugar de un gran movimiento z.

Como se puedes ver a continuación, esto es exactamente lo que hace Dropbox guiando a los usuarios a través de algunas características clave del producto y terminando su patrón Z repetido con el botón de llamada a la acción de "Regístrate gratis". En este diseño, los botones "Más información" desempeñan un papel de botones de llamada a la acción secundarios que ayudan a los lectores a ir a la siguiente página relevante sin necesidad de leer una copia completa.

Conclusión

El Layout Z tiene algunas grandes cosas que ofrecer, y esto es exactamente la razón por la que ha sido adoptado por numerosos sitios web. Puedes tomar ventaja del patrón Z y dar un lugar importante a la información donde el ojo naturalmente caería para aumentar su prominencia visual. Sólo recuerda priorizar la información que estas intentando comunicar.

Espero tus comentarios acerca de este articulo. Gracias por tu tiempo.