19 junio 2017

Como ya sabréis los lectores habituales de este blog, a la hora de crear contenidos para un producto digital los usuarios no leen, sino que escanean el contenido de la página. Para solucionar ese problema lo mejor es usar textos cortos y descriptivos que permitan a los usuarios escanear el contenido y saber si a lo que han accedido es lo que están buscando.


Imagen de Nick Babich

Para ayudar a mejorar la lectura de un producto digital también se pueden usar patrones de diseño adaptados a los esquemas mentales de los usuarios. Hoy os traemos un ejemplo de la mano de Nick Babich en un artículo donde explica que un patrón de diseño en forma de Z ayuda a mejorar la lectura y la comprensión en un producto digital.

¿Cómo funciona el patrón de diseño en forma de Z?

El patrón de diseño en forma de Z viene de la forma en que la mayoría de los usuarios escanean las pantallas de un producto digital:

  1. Recorren la parte superior de izquierda a derecha
  2. Escanean en diagonal la parte central (aquí se pueden parar a observar si algo les llama la atención)
  3. Recorren la parte inferior de izquierda a derecha

Babich nos pone como ejemplo la página de entrada a Facebook:

  1. El usuario ve el logo de Facebook, recorre hacia la derecha donde puede hacer log, metiendo usuario y contraseña, y el botón situado en la parte derecha
  2. El usuario escanea el contenido de la parte central donde se le invita a registrarse
  3. El usuario escanea la parte inferior donde a la derecha está el CTA

Babich nos explica que el patrón en forma de Z, necesita crear un flujo en la diagonal entre los elementos de la parte superior y los de la parte inferior.

Babich nos recomienda usar este patrón de la siguiente imagen:


Patrón de diseño en forma de Z. Imagen de Nick Babich

  1. La parte superior izquierda es donde primero mira el usuario por lo que es el sitio ideal para colocar el logo
  2. La parte superior derecha es el sitio ideal para colocar el CTA secundario. Babich recomienda colocar aquí el botón de login, pero habría que meditar si es el mejor CTA secundario en cada caso.
  3. En la parte inferior izquierda, Babich recomienda poner un texto de ayuda,
  4. En la parte inferior derecha el CTA principal que queramos para la página

En el punto 2 y el 3, Babich recomienda colocar una imagen que destaque. Como ejemplo, pone 2 imágenes de Evernote y de Basecamp que usan este patrón de diseño.

Babich nos dice que también se pueden repetir varios momentos en forma de Z, de forma que formemos un flujo continuo por el que el usuario navegue a lo largo de la página.

Lo ideal en un producto digital es probar lo que funciona mejor para los usuarios antes de lanzarlo. Un patrón en forma de Z es lo que mejor se adapta a la conducta y a los esquemas mentales de los usuarios, pero que funcione bien en general y sea un buen patrón de diseño no significa que tenga que funcionar bien en nuestro sitio.

Desde el Estudio os recomendamos que probéis con los CTAs primario y secundario y éstos que estén alineados con los objetivos de vuestro negocio. Además, es recomendable que probéis con el contenido intermedio que se presenta a los usuarios, es decir, que probéis que el flujo funciona para los usuarios y les da información relevante que les anime a ejecutar la acción del CTA primario que es el objetivo del patrón en forma de Z.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

¿Quieres aprender sobre experiencia de usuario, usabilidad, arquitectura de la información o diseño de producto?

Conoce toda nuestra oferta de Cursos UX Online, en los que aprenderás todos los fundamentos que necesitas saber para tus proyectos de experiencia de usuario.


En Torresburriel Estudio podemos ayudarte en el proceso de investigación con usuarios, aplicando técnicas como las entrevistas personalizadas o la investigación etnográfica.