Mejores prácticas de diseño de interfaz de usuario para una mejor capacidad de escaneo

Los diseñadores de productos a menudo comunican mucha información en un corto período de tiempo. Aquellos que entienden el término "escaneabilidad", los patrones comunes de seguimiento ocular y los principios de diseño moderno están mejor equipados para crear contenido fácilmente consumible e "IU pegajosas".

Todos los días, Internet se expande con nuevas aplicaciones, sitios web, artículos y más. Cada vez es más difícil mantener la atención de los usuarios sobrecargados de información a quienes les resulta difícil filtrar la información relevante del contenido irrelevante. El experto en marketing David Zheng descubrió que en más del 60% de los casos, los visitantes se dan por vencidos y abandonan un sitio web en menos de 15 segundos .

La investigación indica que los usuarios en realidad no leen todo lo que ven palabra por palabra: escanean y luego determinan si el material vale la pena. Al hacer que el contenido apropiado se pueda escanear instantáneamente, un diseñador de productos puede convertir a un visitante a corto plazo en un usuario duradero. A continuación se muestra una selección de las mejores prácticas de diseño de interfaz de usuario para ayudar a amplificar el factor importante del diseño de usabilidad que a menudo se pasa por alto: la capacidad de escaneo .

¿Qué es la escaneabilidad?

Los expertos en UX de Nielsen Norman Group realizaron una investigación para responder a la pregunta: ¿Cómo lee la gente en la web? Sus hallazgos fueron simples. ellos no

El grupo encontró que solo el 16% de los visitantes que visitan un sitio web por primera vez probablemente lo lean palabra por palabra. El otro 84% buscará rápidamente elementos de gancho, como titulares, oraciones, imágenes o animaciones antes de decidir profundizar en el material. Este comportamiento no se limita a las interfaces digitales. Por ejemplo, la gente rara vez lee cada palabra en un periódico. En cambio, escanean los mismos elementos (títulos, imágenes, etc.) para determinar qué es digno de su tiempo.

La escaneabilidad es, por lo tanto, el enfoque de diseñar el contenido para que sea fácil de escanear. A menudo, solo hay un corto período de tiempo para impresionar a un visitante con contenido valioso en la pantalla, por lo que es fundamental optimizar completamente una interfaz para la forma en que los usuarios leen en la web. Ya sea que el producto digital sea un sitio web, una aplicación u otro tipo de interfaz de usuario, la escaneabilidad es uno de los factores más importantes del diseño fácil de usar.

Los beneficios de una interfaz escaneable

La manera ideal de determinar la escaneabilidad de un producto digital es observarlo desde la perspectiva del usuario y responder estas preguntas clave:

1. ¿El contenido de la página corresponde a las expectativas de la audiencia?
2. ¿El mensaje principal de la página es fácil de entender en un corto período de tiempo?

Aunque las interfaces escaneables requieren un esfuerzo para producirlas, vale la pena a largo plazo al crear un diseño de interfaz de usuario pegajoso. El estudio de Nielsen Norman Group muestra que las páginas optimizadas para escanear se vuelven mucho más efectivas de las siguientes maneras:

• Los usuarios tienen tiempos de finalización de tareas más rápidos
• Los usuarios pueden definir fácilmente si el contenido es adecuado para ellos
• Los usuarios cometen menos errores al recordar
• Los usuarios obtienen una mejor idea de la estructura de una página.
• Un sitio recibe calificaciones subjetivas más favorables para la credibilidad y la calidad del contenido.
• Se reducen las tasas de rebote
• La probabilidad de visitas de regreso se incrementa
• Se mejora la optimización de motores de búsqueda (SEO)

El poder de los hábitos del usuario en los patrones de escaneo

Todos consumen contenido de manera diferente. Sin embargo, a través de la investigación, han surgido patrones de seguimiento ocular bien definidos. Saber cómo interactúan los usuarios con las interfaces en los primeros segundos puede ayudar a los diseñadores a priorizar el contenido, colocar información importante en las zonas visibles primarias y establecer una jerarquía visual sólida.

Según Nielsen Norman Group, existen siete patrones comunes en los que los usuarios escanean una interfaz:

• El famoso patrón F: doce años después de su descubrimiento, este patrón sigue siendo el patrón de escaneo más común, incluso cuando se escanean interfaces móviles. El ojo se mueve horizontalmente, como es típico al leer, luego salta al contenido a continuación. Esto se puede hacer lenta y sistemáticamente o rápidamente con un mapa de calor más puntual.
• Patrón Z: El modelo en zig-zag es típico en páginas web con una presentación uniforme de la información y una débil jerarquía visual.
• Patrón de pastel de capas: los usuarios siguen este patrón cuando escanean títulos y subtítulos para determinar rápidamente dónde (y si) se puede encontrar la información que buscan en la página.
• Patrón manchado: las creatividades suelen seguir este modelo de escaneo, donde omiten grandes fragmentos de texto y escanean componentes visuales como anomalías de color, formas y proporciones para encontrar una pieza específica de información.
• Patrón de marcado: como un bailarín que se fija en un objeto para mantener el equilibrio mientras gira, los usuarios mantienen la vista enfocada en un lugar mientras se desplazan, un patrón muy común para la experiencia de usuario móvil.
• Patrón de omisión: los usuarios omiten deliberadamente las primeras palabras de una línea cuando varias líneas de texto en una lista comienzan con las mismas palabras.
• Patrón de compromiso: este es un patrón raro y solo ocurre cuando un usuario está muy interesado en el contenido y motivado para consumirlo todo.

Los patrones adoptados por el usuario estarán relacionados principalmente con la motivación para visitar la página web: ¿Qué tipo de información está buscando? ¿Cuánto tiempo están dispuestos a dedicar para encontrarlo? ¿Hay otros sitios web que podrían proporcionar esta información más rápidamente?

Brindando valor a través de la investigación de usuarios y patrones de escaneo

El Dr. Donald Norman, el investigador de ciencias cognitivas que acuñó el término " diseño centrado en el usuario ", escribió: "No es suficiente que construyamos productos que funcionen, que sean comprensibles y utilizables, también necesitamos construir productos que brinden alegría y emoción". , placer y diversión, y sí, belleza para la vida de las personas”.

La investigación de usuarios es la piedra angular del diseño centrado en el usuario y las mejores prácticas de diseño de interfaz de usuario. Posteriormente, para mejorar la escaneabilidad de una interfaz digital, un diseñador debe comprender al usuario final. Cuando los patrones de la interfaz de usuario se diseñan desde la perspectiva del usuario final, se produce una experiencia natural e intuitiva.

Las soluciones impactantes no están hechas de abstracciones. A continuación se muestra un conjunto de productos digitales que son hermosos, viables y sostenibles. Cada equipo de diseño definió la audiencia clave, usó patrones de seguimiento ocular y diseñó diseños de contenido para producir una interfaz de usuario pegajosa.

Instacart aprovecha el diseño centrado en el usuario a través de sus patrones de diseño de interfaz de usuario. Una parte importante de su audiencia está compuesta por personas mayores y usuarios con discapacidad visual, por lo que los elementos se enumeran en una cuadrícula de alto contraste con un claro énfasis en las CTA principales. El diseño permite que el modo de escaneo Spotted Pattern se adapte a los visitantes de larga duración.

Yelp sirve a los usuarios que buscan los mejores restaurantes, tiendas, vida nocturna, comida, etc. Es probable que las personas evalúen las reseñas según sus propios criterios personales y una investigación exhaustiva, lo que hace que el patrón F sea el modelo de escaneo más aplicable. Yelp, por lo tanto, presenta el contenido de una manera que se puede escanear fácilmente, con énfasis en elementos específicos como calificaciones, imágenes y direcciones.

Podría decirse que Airbnb es una de las aplicaciones más queridas que existen, y se debe en gran parte a su investigación de usuarios. Como saben que sus usuarios a menudo usan dispositivos móviles, diseñan para adaptarse al patrón de marcado. La interfaz limpia e intuitiva está diseñada para enfatizar las imágenes de apartamentos grandes y de ancho completo. Mantuvieron intencionalmente la cantidad de imágenes de portada por pantalla limitada a dos para que el usuario pueda dedicar adecuadamente su tiempo y ver si la lista le llama la atención o no.

Un factor a tener en cuenta a la hora de mejorar la escaneabilidad de un producto digital es definir el tipo de dispositivo en el que se visualizará. La plataforma móvil de Airbnb recibe un tráfico significativo. Como se ve en el mapa de calor del uso del pulgar, Airbnb colocó estratégicamente los elementos de la interfaz de usuario más utilizados, como "Explorar" y "Búsquedas guardadas", de fácil acceso mientras se desplaza y escanea.

Mejores prácticas de diseño de interfaz de usuario para una mejor capacidad de escaneo

Crear una jerarquía visual adecuada

La jerarquía visual de una interfaz digital se refiere a la disposición y presentación de los elementos de diseño de la interfaz de usuario para comunicar niveles de importancia para que los usuarios puedan buscar rápidamente la información deseada. Hay varios factores en el diseño de un diseño con la jerarquía visual adecuada:

• Tamaño
• Color
• Contraste
• Proximidad
• Alineación
• Espacio negativo
• Repetición

Al tener en cuenta estos patrones de diseño de interfaz de usuario al crear un diseño de diseño de interfaz de usuario, un diseñador se asegurará de que el producto final tenga un diseño atractivo, armonioso e intuitivamente escaneable.

La página de resultados de búsqueda de Google utiliza todos los factores de jerarquía visual para aumentar la capacidad de escaneado. Los titulares se enfatizan mediante el uso del color, el tamaño y, posteriormente, el contraste. El espacio negativo que rodea cada título contribuye a que sea lo primero que escaneará un usuario.

Cuando un usuario encuentra un titular relevante, puede verificar la credibilidad del enlace, un elemento que es fácilmente reconocible debido al color y la proximidad. Luego, para evaluar mejor el resultado, profundizarán en la copia de contenido que es consistente en color, tamaño y proximidad. Además de estos factores, la repetición y la alineación hacen que los resultados de búsqueda de Google sean generalmente fáciles de escanear.

Aproveche el espacio negativo

El brillante Claude Debussy dijo una vez: “La música es el espacio entre las notas”. El mismo sentimiento se aplica a la escaneabilidad: el espacio negativo entre los elementos es lo que hace que un diseño sea exitoso. La cantidad adecuada de espacio negativo (en blanco) alrededor de los elementos de la interfaz de usuario enfoca los elementos mismos. Enfatiza el contenido y proporciona el respiro necesario para garantizar que el diseño no se sienta desordenado. Sin espacio para respirar, es menos probable que el cerebro humano escanee puntos de interés y es más probable que se confunda.

Use subtítulos para resumir el contenido

Las personas a menudo responden negativamente a grandes fragmentos de texto. Puede desencadenar la suposición de que perderán tiempo si el párrafo no coincide con sus intereses. Las mejores prácticas de diseño de interfaz de usuario ofrecen una solución a este problema. Al agregar subtítulos breves al comienzo de los artículos largos, el usuario tiene una idea definitiva del tema.

Al escribir el subtítulo, es crucial mantenerlo en el punto. Simplemente comunique el mensaje clave que ofrece el contenido a continuación.

Crear listas numeradas y con viñetas

El cerebro humano es muy sistemático: observa el contenido y luego lo agrupa en unidades significativas. Por lo tanto, es más probable que un usuario comprenda una lista numerada o con viñetas que varios puntos fusionados en un párrafo de texto.

El espacio negativo creado por las listas hace que sea más fácil para un usuario escanear, por lo que es beneficioso buscar oportunidades cuidadosamente. Si más de dos puntos dentro de un texto son paralelos entre sí y cada uno requiere no más de dos oraciones para describir, este es un fuerte candidato para una lista. Nielsen Norman Group proporciona aún más información sobre la creación de contenido digital con viñetas.

Visualiza el Contenido

Los usuarios digitales modernos son naturalmente visuales y es probable que no siempre respondan bien al contenido textual (incluso si está perfectamente estructurado y sigue todos los consejos de diseño de interfaz de usuario para una capacidad de escaneo ideal). Los ambientes externos siempre serán un factor. Por lo tanto, para compensar los diseños con mucho texto, el uso de imágenes y gráficos ofrece descansos visuales tanto informativos como emocionalmente atractivos. Como dice el refrán, ¡una imagen vale más que mil palabras!

Las imágenes originales (ilustraciones, fotos atractivas, etc.) pueden capturar fácilmente la atención del usuario y respaldar el concepto estilístico general. Además, pueden mejorar la jerarquía visual y hacer que el texto sea más fácil de digerir. Sin embargo, existe el peligro de que un gráfico pueda causar un efecto contrario si no se usa correctamente. Antes de transformar ideas clave en gráficos, es fundamental que los diseñadores comprendan completamente el contenido que están diseñando.

Establezca el énfasis apropiado en las llamadas a la acción

La mayoría de las experiencias digitales tienen como objetivo provocar una acción particular del usuario. Aunque los botones de llamada a la acción (CTA) a menudo parecen muy simples, están estratégicamente diseñados para ayudar al usuario a completar una acción, como comprar, agregar a una cesta o simplemente ir a otra página.

Las mejores prácticas de diseño de interfaz de usuario sugieren colocar el CTA cerca del contenido que describe la acción, haciéndolo intuitivo para el usuario. Una forma efectiva de probar si el CTA está bien proporcionado, coloreado y posicionado es convertir temporalmente el diseño final a escala de grises. Si la CTA permanece claramente visible y enfatizada, la interfaz de usuario fija está bien hecha.

La importancia de la escaneabilidad

Hay muchos elementos que determinan si un diseño de diseño de interfaz de usuario será bien recibido por las personas, como la relevancia del contenido, las soluciones de la competencia y la lógica comercial. Según Forbes , la escaneabilidad puede ser el factor más ignorado del marketing de contenidos. Al crear contenido escaneable, un visitante a corto plazo puede convertirse en un usuario duradero.

El contenido escaneable le demuestra al usuario final que su tiempo es valioso y brinda la oportunidad de comprender el mensaje principal simplemente mirando un diseño de diseño. La bloguera viral y profesora de periodismo Kim Keller señala a los diseñadores que “estás iniciando una conversación con alguien a quien quieres como cliente. Es una relación, y ninguna relación puede sobrevivir si no pasan tiempo juntos. Respeta su tiempo y haz que valga la pena”.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Mejores prácticas de diseño de interfaz de usuario y errores comunes
• Estados vacíos: el aspecto más pasado por alto de UX
• La simplicidad es clave: exploración del diseño web mínimo
• Principios heurísticos para interfaces móviles
• Diseño para la legibilidad: una guía para la tipografía web