Cómo elaborar un producto digital escaneable

Experiencia de usuario
25/2/2019
|
Samuel Gimeno Artigas

Hoy vamos a hablar de la escaneabilidad de la mano de un post de Tubik Studio al respecto en Medium.

2019 02 25 blog
Patrón en zig zag. Imagen de Tubik Studio


La escaneabilidad es la facilidad para encontrar de un vistazo elementos de un todo, en nuestro caso una pantalla. Es decir, que los elementos de la interfaz puedan ser diferenciados e identificados fácilmente.

Tubik nos recomienda hacernos dos preguntas para saber si la escaneabilidad es correcta:

  • ¿Lo que ves en los dos primeros minutos corresponde al target de audiencia al que va dirigido?
  • ¿Puedes entender qué tipo de información está en la pantalla en el primer minuto o dos?

Si no estás seguro de responder afirmativamente a las dos, es que es hora de que te plantees la escaneabilidad de tu producto digital nos dicen desde Tubik.

Un producto digital escaneable es más eficiente en los siguientes aspectos:

  • los usuarios completan sus tareas y logran sus objetivos más rápido
  • los usuarios cometen menos fallos al buscar la información y el contenido que quieren
  • los usuarios entienden la estructura y la navegación más rápido
  • el ratio de rebote se reduce
  • se retienen un mayor número de usuarios
  • el producto digital parece y es más creíble
  • los ratios de SEO son afectados positivamente

Hay varios patrones que pueden seguir los usuarios: el patrón Z, en zig zag y el patrón F.

En el primero de los patrones los ojos de los usuarios en la pantalla siguen una Z. En zig zag sería varias veces en forma de Z como lo tenéis en la ilustración de arriba y el patrón F os lo expliqué en el enlace anterior con detalle, pero resumiendo los ojos siguen una trayectoria en forma de F. Es decir empiezan arriba a la izquierda van en horizontal hacia la derecha y vuelven al punto de partida original, de ahí bajan y subiendo hacen un pequeño escaneo hacia la derecha.

Pautas para mejorar la escaneabilidad  

Tubik Studio nos da unas pautas para que mejoremos la escaneabilidad de los productos digitales:

  • Priorizar el contenido mediante la jerarquía visual: la jerarquía visual es la manera de colocar mejor y de la manera más natural los contenidos. Su objetivo principal es situar cada contenido en el lugar que le corresponde según su importancia. Por lo que si se cumple, el contenido clave estará al principio. La jerarquía visual se puede diferenciar mediante muchos elementos: el tamaño, el color, el contraste, la proximidad, el espacio en blanco y la repetición. Todos estos elementos ayudan a diferenciar los elementos en la pantalla y convertirlos en algo escaneable fácilmente para el ser humano.   
  • Situar la navegación principal en la cabecera: en cualquiera de los tres patrones de cómo escanean los usuarios la página en todos comienzan por la cabecera. Por lo que es allí donde debemos poner los elementos principales, como es la navegación. Pero tampoco hay que sobrecargar la cabecera, de manera que sea imposible enfocarse en ella. Se deben conocer los objetivos del producto digital y adecuar la cabecera a esos objetivos. En un e-commerce la búsqueda ha de ser predominante para que los usuarios puedan encontrar lo que buscan, por ejemplo.
  • Mantener el balance del espacio en blanco: El espacio en blanco crea los diferentes elementos de la interfaz y crea jerarquía visual entre ellos, observa los principios Gestalt y construye una presentación visual efectiva. El espacio en blanco tiene una gran influencia en la mejora de la navegabilidad en un producto digital.
  • Comprobar que los CTAs se ven a la primera: los CTAs se deben ver fácilmente y su copy debe ser fácilmente entendible para que sean efectivos, para ello hay que usar el contraste y el espacio en blanco entre los CTAs y el resto de elementos. Si hay un CTA principal, éste tiene que destacar sobre el resto.
  • Testear la escaneabilidad del contenido: el contenido de un producto digital debe ser fácilmente legible, es decir, que se pueda leer fácilmente y se entienda lo que quiere decir, para ello debemos testear las tipografías que usemos en la interfaz que se vean bien y se lean bien para todo tipo de usuarios, especialmente en personas mayores si es un producto generalista. Hacer un test con usuarios del contenido y su presentación os ayudará a conocer si es escaneable o no el contenido.
  • Usar números, no palabras: según un estudio de Nielsen Norman los usuarios fijan su atención sobre los números en lugar de las palabras, ya que los números suelen ser datos importantes como el precio, fechas… Los usuarios se fijan en los números, un mismo texto con los números en letra y otro con los números en cifra, los usuarios ignoran las letras y fijan sus miradas en las cifras. Además los números son más concisos y mejores para escanear.
  • Sitúar cada idea en un párrafo: presentar en cada párrafo una idea, ayuda a los lectores a escanear si les interesa o no, por lo que te recomendamos que uses la regla: “un párrafo, una idea”, en lugar de largos trozos de texto que empeoran la escaneabilidad del producto digital.
  • Utilizar listas numeradas y con viñetas: las listas, ya sean numeradas o con viñetas captan la atención del usuario y hacen que no se le pasen por alto los datos que les presentas a través de ellas. Además, hace que los datos no se pierdan en la inmensidad de un texto.
  • Remarcar la información clave del texto: las negritas, las cursivas y los resaltados de color son formas viejas pero eficaces de remarcar la importancia en un texto. Con ellas puedes atraer la atención a una determinada idea o texto. Además los enlaces tienen que estar marcados de manera que se diferencien del resto del texto. Normalmente en color azul y subrayados.
  • Utilizar imágenes e ilustraciones: las imágenes e ilustraciones crean una jerarquía visual clara y ayudan a escanear el interfaz. Además sirve para transmitir sensaciones que no se puede efectuar con cientos de palabras.

La escaneabilidad de un producto digital es un elemento de vital importancia, ya que cada vez más personas mayores usan productos digitales y por ello la legibilidad debe ser una prioridad.

Cuando mejoras las escaneabilidad de un producto, mejoras su experiencia de usuario y por lo tanto lo mejoras frente a su competencia. De una buena escaneabilidad dependen por ejemplo los CTAs y su eficacia, lo cual redunda en que los usuarios puedan conseguir los objetivos.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.