¿Qué es el Z pattern y cómo emplear este diseño en tu eCommerce?

¿Quién será el protagonista del post de hoy? ¿El Zorro y su característica Z? Frío frío, aunque es (casi) tan famoso como él: hablamos del conocido Z pattern, y de cómo este diseño te ayuda a empujar la conversión en tu eCommerce. 

Los estudios de seguimiento ocular muestran que los usuarios escanean las pantallas de una manera similar y predecible.

Es decir, obedecen a un patrón de comportamiento que, si lo conoces y aplicas en el diseño, te permitirá lograr una interfaz intuitiva y enfocada al cumplimiento de objetivos, ya sea tanto para aumentar la captación de leads como las ventas. 

Toca entrar en harina con uno de ellos, el patrón Z. Te voy a explicar qué es, cómo aplicarlo y ejemplos de diseños reales. 

¿Qué es el Z pattern?

---

Toda página web debe obedecer a una jerarquía visual. Con ello consigues que el usuario se concentre en la información importante. 

Es decir, si los elementos de la web se ubican de una manera correcta, el diseño ayudará a tu visita a que lleve a cabo la acción que buscas. Estás mejorando su experiencia de usuario.

El patrón Z se adapta a cómo leemos la información

Z pattern es una representación de la ruta que recorre el ojo cuando lee.

» Primero, partimos desde la parte superior izquierda hacia la parte superior derecha, como si dibujásemos una línea horizontal imaginaria. 

» Luego bajamos hacia la izquierda, trazando una diagonal.

» Por último, volvemos a la derecha en otra línea horizontal. 

Los ojos de los usuarios (y también los nuestros) leen la información, por lo tanto, dibujando esa “Z” imaginaria: de ahí el nombre del patrón Z. 

En esta imagen lo apreciamos en detalle:  

Las variaciones del Z pattern 

Aunque tengas el diseño de una “Z” en la cabeza es importante saber que no siempre poseerá esa forma tan marcada.  

El Z pattern indica la manera en la que el usuario consumirá la información, pero los ángulos varían en función de los elementos que presentes en tu eCommerce y de su situación en la pantalla.  

Por ejemplo, si colocas el tercer elemento más centrado la diagonal con el segundo punto será menos inclinada. Del mismo modo, si el cuarto elemento lo ubicas abajo o arriba del tercero no dibujará una línea horizontal perfecta… Pero seguirá siendo una Z. 

De igual manera, este patrón puede repetirse hasta el infinito formando un zigzag a lo largo de la web. 

¿Cómo aplicar el Z pattern a tu eCommerce?

---

El diseño de patrón Z es ideal para la tendencia actual de páginas de venta minimalistas, es decir, sin estridencias y con un contenido muy centrado y limpio, con lo que conseguimos dirigir la atención a 4 puntos importantes.

¿Qué es necesario incluir en cada elemento?  

» En la línea horizontal superior asegúrate de que incluyes los componentes principales, ya que es lo primero que verá el usuario. 

En general se incluye el logo (con lo que refuerzas tu imagen de marca) y un CTA dentro del menú (por ejemplo, información de inicio de sesión).

» Al final de la primera línea diagonal solemos colocar un breve texto y un botón de llamada a la acción.

» El cuarto elemento es el lugar perfecto para una imagen o vídeo que sirva como complemento al tercer punto.

De hecho, al ser accesorio, se considera el menos importante y, en ocasiones, es el gran “sacrificado” en versiones móviles.

» La línea horizontal inferior debe resaltar el CTA en cualquier punto a lo largo de ella.

De todos modos, ten en cuenta que los puntos tres y cuatro son intercambiables, así que puede ser una buena idea implementar un A/B testing para comprobar qué funciona mejor. 

Consejos para aplicar la jerarquía visual con el Z pattern

Si el éxito buscas en tu web, a los siguientes criterios has de atender.

» Tamaño: la escala de los elementos es un rasgo diferencial para guiar la atención del usuario. Aumenta el tamaño de los elementos más importantes. 

» Color: nos sentimos atraídos por los colores que resaltan. Atrae la mirada del visitante con un tono distinto al de los elementos secundarios, generando contraste. Es interesante que tengas tu propia paleta de colores con la que trabajar. 

» Alineación: con el constructor de PrestaShop es muy sencillo trabajar la alineación gracias a las columnas y los bloques. De esta forma, los elementos quedarán ordenados de la manera que desees. 

» Distancia entre elementos: en una lectura rápida separar los elementos importantes ayuda a focalizar la atención del lector. Para lograrlo bastará con no incluir otros objetos que generen distracción.

¿Lo ideal? Apostar por un fondo neutro. 

La clave es seguir al ojo

Si tu web ya cuenta con un diseño basado en el Z pattern es hora de comprobar que efectivamente funciona.

¿Cómo conseguirlo? Muy sencillo: siguiendo al ojo. 

Elige a una persona ajena al proceso de diseño de tu tienda Online y pregúntale qué es lo primero que ve. 

Si el diseño es correcto podrá identificar 4 elementos en el primer scroll. En el caso de que destaque algunos no deseados, convendría modificar la disposición de texto e imágenes para dotar de protagonismo a lo esencial. 

Una estrategia ganadora es despejar el área central, que quede relativamente vacía y sin distracciones: de esta forma el usuario avanzará más rápido entre elementos. 

Si has conseguido captar la atención tal y como buscabas, es el momento de clonar el patrón a lo largo de la landing page; de esta forma el visitante se moverá en zigzag por tus productos, servicios, CTAs o información destacable. 

El copy para enamorar y conseguir el clic

---

La principal premisa al aplicar un texto a un Z pattern es el ser conciso: el usuario no tiene ni el tiempo ni el interés en leer la mucha información de la que dispones, por lo que tu mensaje ha de ir directo a su mente.

Aquí el copywriting tiene trabajo que hacer. 

¿Cuáles son las fortalezas de tu producto o servicio? Resáltalas.

¿Qué problema soluciona? Indícalo.

La empatía es la clave de todo copy que dispara al cerebro para conquistar el corazón.  

Ahí va un ejemplo de copy, sencillo, directo y además, con un patrón Z incompleto. 

Danone

Este es un claro ejemplo de un Z pattern incompleto, con una variación de tres elementos. Muy minimalista y centrado en la llamada a la acción.  

Algunos ejemplos de landing que convierten gracias al Z pattern

---

Veamos algunos ejemplos de páginas de aterrizaje con un diseño con Z pattern. Como vas a comprobar hasta los más grandes lo usan para convertir.

Página principal de Facebook

El usuario ve el logo, luego la opción de entrar con sus datos, luego un mapa que ayuda a comprender qué es Facebook y, por último, el formulario de registro. 

Evernote

La conocida app de productividad online utiliza un diseño muy similar al de Facebook. En este caso sustituye la imagen por un copy que resalta los puntos fuertes de Evernote.

PrestaShop 

En la web de PrestaShop también se emplea el Z pattern. 

» Lo primero que se muestra es el logo.

» Luego se dirige al usuario hacia un CTA en el menú de “crear mi tienda”.

» Posteriormente se le explica qué puede conseguir con PrestaShop.

» Acabamos con un cuarto punto de refuerzo: una imagen de una diseñadora disfrutando de su tienda perfecta. 

Airbnb

En este último caso te quiero mostrar la web de Airbnb, la famosa empresa de alojamientos y experiencias. No solo lo usa en su home, sino que emplea este recurso a lo largo del recorrido del usuario.  

En la imagen de la portada primero muestra el logo (el branding y la imagen de marca es muy importante). 

Luego ofrece al usuario la opción de anunciar su vivienda para convertirse en anfitrión.

En el tercer apartado muestra un copy adaptado a la época del Covid-19 (viajes cerca de casa por seguridad) y ofrece la opción de explorar los alrededores. 

Por último, una imagen que refuerza el contenido: el entorno idílico donde disfrutar. 

Esta segunda imagen de Airbnb corresponde a la landing de “explorar alrededores”. 

Como se puede apreciar, la línea horizontal superior sigue la línea de la home. 

Los cambios llegan en el elemento 3, donde se muestran las ciudades vecinas en kilometraje. En este caso, si señalamos Huelva como ubicación, se muestra Sevilla como la más próxima. 

Por último, se muestra un mapa clicable en el que se ven todas las opciones cercanas: zona Algarve portugués, sierra de Aracena y Picos de Aroche, Sevilla, Málaga, etc.

Conclusiones

El patrón Z supone un claro empujón para sitios web que buscan mejorar su ratio de conversión, pero es especialmente atractivo para un eCommerce, dado que categorizamos la información en unos pocos puntos estructurales, siendo muy efectivo para focalizar la atención del usuario en lo importante. 

Para cualquier tienda Online este patrón es ideal para una home en la que se quiera destacar una llamada a la acción o para una landing de un producto, en la que no existan distracciones. 

Ahora ya sabes qué es el patrón Z y cómo aplicarlo a tu eCommerce. 

Tú lo pones en práctica y nosotros te facilitamos su desarrollo.