Diseño

Cómo diseñar interfaces web escaneables

Cada vez disponemos de más información disponible, tanto en las redes como fuera de ellas, por lo que debemos valernos de motores de búsqueda para encontrar lo que necesitamos en el momento que lo necesitamos.

Como consumidores acostumbrados a grandes cantidades de información, más que “leer” los sitios, los escaneamos, es decir, pasamos por sobre las palabras. Es por eso que debemos facilitar esta conducta con los sitios que desarrollemos.

¿Cómo se escanea un sitio?

Según UX Planet, al visitar por primera vez un sitio, el usuario da una mirada amplia buscando lo que necesita, y es por eso que debemos asegurarnos de que estén presentes diversos “anzuelos” para el ojo, los que pueden ser imágenes fijas, móviles, palabras, oraciones o símbolos que servirán para que el usuario se quede en nuestro sitio.

Esto no es nada nuevo, pues las revistas, folletos y los libros ya lo han hecho durante años a través de textos destacados, índices e imágenes de portada, eso sí, la única diferencia entre los soportes electrónicos y los tangibles, es que las pantallas cansan la vista, por lo que los textos deben ser mucho más breves.

Patrones de escaneo

Lo primero que hay que entender es cómo la gente escanea los sitios, con lo que se podrán priorizar los elementos que pondremos donde será visible para el público.

Hay varios modelos, pero el que usa el Nielsen Norman Group es uno de los más usados por especialistas en usabilidad y diseñadores.

A través del seguimiento de la mirada, o “eye tracking”, se han detectado diferentes patrones de lectura:

Patrón en Z: Es el más común y tradicional, donde los ojos recorren la pantalla de izquierda a derecha, tras lo que se baja en diagonal hasta la última línea y comienza de nuevo el ciclo.

Es el patrón que deben usar los lectores de una página con mala jeraquización de los contenidos, por lo que se tiende a leerlo “en diagonal” para hacerlo más rápido.

Patrón en Zigzag: Muy parecido al anterior, pero este patrón se usa cuando los párrafos están más separados. Tiene la ventaja de ser más dinámico que el anterior.

Patrón en F: Este ocurre cuando los lectores leen de izquierda a derecha la parte superior, donde están los elementos más importantes, como el título, la bajada y el primer párrafo, pero luego bajan rápidamente por la izquierda del texto hasta que encuentran algún párrafo que les llame la atención, formando una F.

¿Cómo jerarquizar los contenidos para mejorar su escaneo?

Priorizar los contenidos por jerarquía visual

Esto se hace a través de organizar los contenidos de manera que su importancia se entienda de forma natural, por lo que el contenido más importante debe ir al principio.

Es importante que el título sea claro y que esté acompañado por una bajada que hable de qué trata el texto, con el objetivo de que, si es de interés para el público, lo lea y si no, que siga buscando en el mismo sitio.

Esta jerarquía no debe ser sólo en cuanto al contenido, sino que también debe apoyarse en elementos gráficos como el tamaño, el color, el contraste, la proximidad, el “aire” entre los párrafos y la repetición.

Así, juntando estos elementos, los diseñadores podrán crear un sistema armónico de despliegue escaneable en los sitios.

Poner el menú de navegación arriba

Ya que los escaneos visuales de los sitios siempre comienzan por la parte superior, debemos asegurarnos que ésta sea la principal área de interacción del sitio.

Por supuesto, no se debe sobrecargar esta área, pues será contraproducente. Se recomienda que las metas del sitio estén alineadas con el público deseado, para aumentar el impacto del sitio y las conversiones.

Dejar aire

Debemos dejar aire sirve para que el contenido y sus objetos sean percibidos de buena forma por el público. Este espacio no es solo el que se deja entre los elementos, sino que también dentro de los párrafos y entre ellos, y es clave para una buena visualización.

No descuidar las llamadas a la acción

Muchos sitios tienen este tipo de llamados, los que deben ser muy visibles para que sean efectivos. Una de las formas de probar su efectividad es que, al probar las páginas en blanco y negro o en modo borroso, se siga viendo la llamada a la acción.

Probar la legibilidad de los textos

Muchas veces nos quedamos en el contenido en sí, pero descuidamos la relación que tiene con el resto del sitio en cuanto a contraste, tamaño o incluso el tipo de fuente. Todos estos parámetros deben ser revisados por los diseñadores que apliquen todas las reglas tipográficas de sus manuales para evitar problemas de legibilidad.

Usar números en vez de palabras

Estudios de eyetracking indican que los números tienen la capacidad de detener la búsqueda en un texto y lograr la atención del lector más que los números escritos con letras.

Al asociar números con datos duros, nuestro cerebro inconscientemente le otorga más importancia, porque esa información numérica puede ser útil. Además, tienen la ventaja de usar menos caracteres, por lo que son más rápidos de escanear.

Una idea por párrafo

Si se quiere lograr un texto más escaneable, se deben evitar los textos largos. Así se logra no aburrir al lector, además de hacerle más fácil la tarea de saltarse párrafos que no le interesen de momento, por lo que mantener la regla de una idea por párrafo es una excelente forma de presentar la información.

Usar números y listas

Un buen truco para hacer el texto más escaneable es separarlo con números y listas, pues ayudan a organizar claramente la información. Además, permite que la información clave no se pierda dentro del texto.

Destacar la información clave

Usar negritas, cursivas o destacar con otro color son recetas conocidas, pero siguen funcionando bien para destacar ideas clave en cada párrafo. Incluso los links sirven para esto, por lo que se recomienda que deben estar particularmente visibles en el texto.

Usar imágenes e ilustraciones

En el diseño web, las imágenes ayudan a proponer un sentimiento o a transmitir un mensaje, por lo que sirven tanto en el plano emocional como en el informativo.

Ilustraciones originales, banners prominentes y las fotos llaman fácilmente la atención y ayudan a mantener un estilo. También ayudan a construir jerarquía y hacer que los textos publicitarios sean más digeribles cuando están junto a ellas. Las imágenes llaman la atención en sí, por lo que son claves en una estrategia de escaneabilidad.

Con todo, la escaneabilidad de un sitio sirve para demostrar la preocupación que tenemos con el producto que le ofrecemos a nuestro público, pues un sitio bien construido le ahorrará tiempo y esfuerzo y le permitirá volver las veces que lo necesite.