{"id":23457,"date":"2021-02-11T11:36:40","date_gmt":"2021-02-11T11:36:40","guid":{"rendered":"https:\/\/www.4addictic.com\/?p=23457"},"modified":"2021-02-11T11:36:40","modified_gmt":"2021-02-11T11:36:40","slug":"el-diseno-z-para-tu-ecommerce","status":"publish","type":"post","link":"https:\/\/pre8.4addictic.com\/4addictic\/el-diseno-z-para-tu-ecommerce\/","title":{"rendered":"El dise\u00f1o Z para tu eCommerce"},"content":{"rendered":"

El dise\u00f1o Z, \u00bfde qu\u00e9 estamos hablando?<\/span><\/p>\n

Como en todo sector, detr\u00e1s de cada movimiento siempre hay estudios que se realizan para ver c\u00f3mo los usuarios reaccionan delante de ciertos est\u00edmulos y en el caso del comercio online no es diferente. Se realizan estudios de SEO, de <\/span>branding, redes sociales y de dise\u00f1o.\u00a0<\/span><\/p>\n

 <\/p>\n

Y es en este \u00faltimo, los estudios de dise\u00f1o donde muestran que<\/span> cuando un usuario entra en una web, una gran mayor\u00eda escanean la pantalla de una manera muy similar y predecible.\u00a0<\/b><\/p>\n

 <\/p>\n

Siguen un patr\u00f3n de comportamiento que, si lo conoces y aplicas en el dise\u00f1o de tu propia web, te permitir\u00e1 lograr una<\/span> interfaz intuitiva y enfocada al cumplimiento de objetivos<\/b>, ya sea tanto para <\/span>aumentar la captaci\u00f3n de leads como las ventas<\/span>.\u00a0<\/span><\/p>\n

\u00bfDe qu\u00e9 patr\u00f3n estamos hablando y c\u00f3mo lo podemos aplicar a nuestros dise\u00f1os? \u00a1Vamos a verlo!\u00a0<\/span><\/p>\n

<\/h2>\n

\u00bfQu\u00e9 es el dise\u00f1o Z?<\/b><\/h2>\n

Toda p\u00e1gina web debe obedecer a una jerarqu\u00eda visual<\/b>, para conseguir dirigir al usuario a la informaci\u00f3n importante de tu web, mejorando la experiencia<\/span> de usuario<\/span>.<\/span><\/p>\n

<\/h3>\n

El patr\u00f3n Z se adapta a c\u00f3mo leemos la informaci\u00f3n<\/b><\/h3>\n

El dise\u00f1o en Z es una representaci\u00f3n de <\/span>la ruta que recorre el ojo<\/b> cuando lee.<\/span><\/p>\n

    \n
  1. Primero nuestro ojo se desplaza por la p<\/span>arte superior de izquierda a derecha<\/b> en l\u00ednea <\/span>horizontal<\/b>.\u00a0<\/span><\/li>\n
  2. Luego <\/span>bajamos hacia la izquierda<\/b>, trazando una <\/span>diagonal<\/b>.\u00a0<\/span><\/li>\n
  3. Por \u00faltimo, <\/span>volvemos a la derecha<\/b> en otra l\u00ednea <\/span>horizontal<\/b>.\u00a0<\/span><\/li>\n<\/ol>\n

     <\/p>\n

    Los ojos de los usuarios (y tambi\u00e9n los nuestros) leen la informaci\u00f3n, dibujando una <\/span>\u201cZ\u201d imaginaria<\/b>. De ah\u00ed el nombre que recibe este tipo de dise\u00f1o.\u00a0\u00a0<\/span><\/p>\n

     <\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    Variaciones del dise\u00f1o en Z\u00a0\u00a0<\/b><\/h3>\n

    Pero el dise\u00f1o no tiene porqu\u00e9 ser siempre una perfecta Z. Podemos encontrar algunas variaciones<\/span> y los \u00e1ngulos pueden variar<\/b> en funci\u00f3n de los elementos que presentes en tu <\/span>eCommerce<\/span> . Por ejemplo, la cabecera no es necesario que tenga una forma tan marcada, como se ve en el siguiente ejemplo:<\/span><\/p>\n

     <\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    De igual manera, <\/span>este patr\u00f3n puede repetirse hasta el infinito formando un zigzag<\/b> a lo largo de la web.\u00a0<\/span><\/p>\n

    <\/h2>\n

    \u00bfC\u00f3mo aplicar el Z pattern a tu eCommerce?<\/b><\/h2>\n

    El dise\u00f1o de patr\u00f3n Z es ideal para p\u00e1ginas de venta minimalistas, donde el contenido se ve muy centrado y limpio, con lo que conseguimos dirigir la atenci\u00f3n a 4 puntos importantes.<\/span><\/p>\n

     <\/p>\n

    Componentes principales que incluir en el dise\u00f1o Z:<\/span><\/p>\n

     <\/p>\n

    1# En la primera l\u00ednea horizontal:\u00a0<\/strong><\/p>\n