El diseño Z, ¿de qué estamos hablando?

Como en todo sector, detrás de cada movimiento siempre hay estudios que se realizan para ver cómo los usuarios reaccionan delante de ciertos estímulos y en el caso del comercio online no es diferente. Se realizan estudios de SEO, de branding, redes sociales y de diseño. 

 

Y es en este último, los estudios de diseño donde muestran que cuando un usuario entra en una web, una gran mayoría escanean la pantalla de una manera muy similar y predecible. 

 

Siguen un patrón de comportamiento que, si lo conoces y aplicas en el diseño de tu propia web, 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

¿De qué patrón estamos hablando y cómo lo podemos aplicar a nuestros diseños? ¡Vamos a verlo! 

¿Qué es el diseño Z?

Toda página web debe obedecer a una jerarquía visual, para conseguir dirigir al usuario a la información importante de tu web, mejorando la experiencia de usuario.

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

El diseño en Z es una representación de la ruta que recorre el ojo cuando lee.

  1. Primero nuestro ojo se desplaza por la parte superior de izquierda a derecha en línea horizontal
  2. Luego bajamos hacia la izquierda, trazando una diagonal
  3. 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, dibujando una “Z” imaginaria. De ahí el nombre que recibe este tipo de diseño.  

 

 

Variaciones del diseño en Z  

Pero el diseño no tiene porqué ser siempre una perfecta Z. Podemos encontrar algunas variaciones y los ángulos pueden variar en función de los elementos que presentes en tu eCommerce . Por ejemplo, la cabecera no es necesario que tenga una forma tan marcada, como se ve en el siguiente ejemplo:

 

 

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 páginas de venta minimalistas, donde el contenido se ve muy centrado y limpio, con lo que conseguimos dirigir la atención a 4 puntos importantes.

 

Componentes principales que incluir en el diseño Z:

 

1# En la primera línea horizontal: 

  • El logo (con lo que refuerzas tu imagen de marca) 
  • Un CTA dentro del menú (por ejemplo, información de inicio de sesión).
  • Al final de la primera línea diagonal colocamos un breve texto y un botón de llamada a la acción.

2# A continuación, nuestros ojos bajan hacia la izquierda, trazando una diagonal.

  • Lugar perfecto para una imagen o vídeo que sirva como complemento al tercer punto.

 

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

 

Otros consejos para aplicar a este tipo de diseño: 

  1. Tamaño: la diferencia de tamaños es muy útil para guiar al usuario por nuestra web. Aumenta el tamaño de los elementos más importantes
  2. Color: Usa colores que resalten para atraer las miradas. Usa tonos distintos al de los elementos secundarios, generando contraste. Es interesante que tengas tu propia paleta de colores con la que trabajar siempre teniendo en cuenta tu branding. . 
  3. Alineación: Utiliza columnas y bloques. De esta forma, los elementos quedarán ordenados de la manera que desees. 
  4. Distancia entre elementos: Separa los elementos importantes para focalizar la atención del lector. No incluyas objetos innecesarios que generen distracción.

Lo ideal para cumplir con estos 4 consejos: Apostar por un fondo neutro.

 

Conclusiones

El patrón Z puede ayudar a tu Tienda Online de diferentes maneras: 

  • Mejora el ratio de conversión,
  • Diseño atractivo mejora la usabilidad de la web
  • Categorizamos la información en unos pocos puntos estructurales, siendo muy efectivo para focalizar la atención del usuario en lo importante.
  • Ideal usar este diseño para la «home » ya que destaca la llamada a la acción. O bien para una landing page 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. ¿Quieres que diseñemos uno para ti? Ponte en contacto con nosotros AQUÍ y desarrollaremos el mejor diseño para tu Web! 

 

 

Info e imágenes: prestashop