Jerarquía visual en UX: cómo dirigir la atención del usuario.

Primero vemos la imagen, y solo entonces leemos el texto (gracias, tapa), por lo que la solución visual del sitio se vuelve decisiva para llevar al usuario a la meta: puede simplificar y obstruir este camino. Averigüemos cómo llevar a un visitante del sitio a la decisión correcta organizando el espacio del sitio, tanto en equipos de escritorio como en dispositivos móviles.

El ganador del Premio Nobel Daniel Kahneman en su libro "Piensa lentamente, decide rápidamente" describe dos sistemas de pensamiento, en el marco de los cuales nuestro cerebro toma decisiones. El condicional "Sistema 1" funciona en imágenes, es responsable de la toma rápida de decisiones y responde bien a la información visual. El "Sistema 2" (en adelante, ambos nombres sin comillas) se dedica a actividades más serias y es responsable de comprender el significado en el texto o de calcular en la mente.

La mayoría de las veces, el Sistema 2 funciona en el modo de "consumo reducido de energía" y no toma decisiones por sí mismo de forma muy activa. La mayoría de las veces, las conclusiones ya hechas para ello son tomadas por el Sistema 1, que es codicioso para el "visualismo".

La tarea del diseñador de UX es empujar el Sistema 1 a la solución correcta.

Organización visual de la página web

No tiene mucho tiempo para interesar al contenido del usuario del sitio. Cuando un usuario visita cualquier página web, busca inconscientemente una respuesta a tres preguntas:

  • ¿Qué está pasando aquí?
  • ¿Cómo es esto útil para mí?
  • ¿Por qué lo necesito?

Leer el texto (especialmente cuando hay mucho de él) es un proceso que requiere mucho tiempo para el cerebro y requiere la inclusión del Sistema 2. La mayoría de los usuarios serán demasiado perezosos para activarlo, el trabajo lo realizará el Sistema 1. Para obtener su atención, debemos mostrar lo antes posible lo que es importante en la página Además, es deseable hacer esto en los lugares más predecibles. Cuando se encuentre el centro de atención, el Sistema 2 se conectará y comenzará a examinar el contenido de la página con más detalle.

Una buena organización visual resuelve estos problemas:

  • Informando. La estructura visual de la mano invisible dirige la atención del usuario de una acción a otra, sin causar dificultades en el camino.
  • Impacto emocional. La imagen visual se almacena en la memoria mucho más fuerte que el contenido del texto. En igualdad de condiciones, el usuario elegirá entre varias opciones, una que parece estéticamente agradable.
  • Presentación de relaciones en contenido.. Si agrupa correctamente elementos y categorías importantes en el sitio, es decir, si simplifica la vida útil del Sistema 1, el usuario encontrará la subsección que necesita con mayor facilidad.

Patrones de escaneo: qué y dónde el usuario espera inconscientemente

En los primeros segundos en el sitio, el usuario buscará contenido útil en el sitio, "escaneando" el área visible de la página en busca de la información necesaria. Comienza desde la esquina superior izquierda (si está acostumbrado a leer de izquierda a derecha), se mueve a la derecha, esperando recibir información adicional allí. Luego mira al sector inferior izquierdo y rápidamente salta a la esquina inferior derecha.

Este script, o patrón, tiene un nombre: The Gutenberg Chart. La mayoría de las veces se encuentra en las páginas de destino y de registro, y es de acuerdo con esto que las páginas iniciales están construidas.

Además de esto, hay varios otros patrones comunes en la UX.

Patrones de escaneo de escritorio

F-patrón. Sin darte cuenta, te encuentras con el patrón F diario. Tan pronto como lo conozca más cerca, no podrá dejar de notarlo en cada segundo portal de noticias. Ver por ti mismo:

Z-patrón. Al escanear una página en busca de un aspecto, no hay nada en qué confiar, el patrón Z está activado: un aspecto zigzaguea a través de la página en zigzag ancho, captando los focos:

Patrones de escaneo móvil

La pantalla de un dispositivo móvil puede mostrar mucho menos contenido que la pantalla de una computadora portátil o un monitor, y la mayoría de las veces, los usuarios lo mantienen en posición vertical. Debido a esto, escaneamos contenido en teléfonos móviles de lo contrario.

El contenido en los dispositivos móviles se suele ubicar de dos maneras: la cuadrícula y la lista (Vista de cuadrícula y Vista de lista, respectivamente).

Cuadrícula (ver imagen) se diferencia de la lista por el hecho de que se colocan simultáneamente más unidades de contenido en la pantalla, pero tendrá que llamar la atención del usuario solo con imágenes en contraste.

Lista - estos son bloques de contenido dispuestos verticalmente uno tras otro, mientras que un solo bloque ocupa todo el ancho de la pantalla. El escaneo de la lista es similar al patrón F, la concentración de atención (y la decisión sobre la importancia del bloque) se produce en los encabezados de bloque, y las imágenes, si están presentes, están en forma de miniaturas de la vista previa.

La atención del usuario se distribuye uniformemente en todas las imágenes, y el escaneo tiene forma de S (a menos que no haya imágenes prominentes entre las imágenes):

Colocación de acentos: contraste, color, profundidad.

La distribución de contenido en el espacio es una etapa importante en la elaboración de la jerarquía visual, pero no la última. Después de colocar todos los elementos en sus lugares dentro de algunos bloques, habrá elementos duplicados, y casi siempre uno de ellos será más importante que los otros. Para indicar con éxito al usuario, donde vale la pena prestar atención, debe consultar el principio de funcionamiento del Sistema 1.

Su percepción visual es intuitiva y se basa en la rápida formación de imágenes. La mente subconsciente busca comparar toda la información visual con objetos de la vida real, es decir, para darle "forma" y "peso".

Contraste

Las cosas más importantes deben ser resaltadas agregando contrastar - cuanto más alto es, más importante es el usuario considera el elemento. Si, por ejemplo, para reemplazar los búhos con botones, las personas presionarían más a menudo un botón oscuro.

Profundidad

La visión binocular nos permite determinar la distancia y concentrarnos alternativamente en objetos a diferentes distancias, pero lo más importante es lo que sucede cerca.

En una pantalla plana, para reproducir el efecto de profundidad y "sobresalir" en algo, a menudo se utiliza una sombra o un efecto de desenfoque. Sin embargo, para lograr el efecto primario de la profundidad, es suficiente (aunque suene banal) para hacer que los elementos más importantes sean más grandes y el resto más pequeños.

Colorear

Colorear Nos rodea por todas partes y lleva carga de información adicional. La experiencia acumulada de "información de color" es transferida por el usuario a las páginas del sitio web y a la ventana abierta de la aplicación. Para empujarlo a las acciones deseadas y alejarlo de los indeseables, use el hecho de que hemos estado firmemente en nuestras cabezas desde la infancia: los colores de semáforo.

Pero el color rojo, el precio "malo", ayuda a llamar la atención sobre el mejor precio:

Por cierto, no deje que el concepto de “ceguera al color” lo sorprenda: una parte muy pequeña de la población tiene una visión verdaderamente “en blanco y negro”, mientras que varios tipos de ceguera al color (cuando los ojos no distinguen ningún color de base único, afecta alrededor del 5% de la población es susceptible a la percepción de todo el rango, y si su audiencia es masculina, aún más: 8%.

Todas estas personas también utilizan Internet, y no deben olvidarse al pensar en la paleta de colores. Sin embargo, el problema de la accesibilidad (una palabra a la que aún no hay una traducción establecida en ruso, pero que se puede describir como "facilidad de percepción visual", "legibilidad") en sí mismo merece más de un artículo.

Patrones visuales: alineación y agrupación.

Desde saber cómo aislar y llamar la atención sobre los elementos del patrón, pasemos a lo que podemos hacer directamente con el patrón. Después de todo, es un potencial portador de información:

Nuestro cerebro (es decir, el Sistema 1, que básicamente entendemos por "cerebro" en este artículo) ama y puede generalizar. Tan pronto como algo a nuestro alrededor comienza a repetirse, lo notamos y con el tiempo, prestamos cada vez menos atención a los elementos que se repiten. La atención se activa solo cuando el patrón existente se rompe.

Echando un vistazo a la imagen de arriba, no vemos los cinco canguros individualmente: primero vemos el grupo de cuatro canguros. Entonces - el quinto canguro, que es el opuesto. La imaginación dibuja inmediatamente una imagen de oposición.

Pero el menú del Bucking. La agrupación, el contraste y el color nos dan un patrón de comportamiento exacto: ingrese los datos en los tres campos blancos y presione el botón azul grande. Y si sigue el comportamiento del sitio, verá que el área de búsqueda de opciones siempre tiene el mismo color. Esto es un impacto directo en el Sistema 1, que buscará colores familiares en cualquier página.

Veamos otro grupo:

Habiendo visto la foto, usted, sin darse cuenta, hizo muchas conexiones dentro del grupo de seis cisnes:

  • flotan en dos filas;
  • moverse en una dirección;
  • dos cisnes en la parte superior y dos en la parte inferior, aparentemente unidos entre sí;
  • el cisne de la extrema derecha parece nadar más rápido que sus compañeros;
  • a la izquierda, por el contrario, se queda atrás.

Todos estos pensamientos pasaron por mi cabeza alineación. Tratamos de conectar lógicamente los elementos cercanos y encontrar qué distingue los elementos de los otros a distancia.

Y cuanto más compleja sea la información que se debe simplificar, más importante será el papel de las agrupaciones. Vea qué esquemas usa Bucking en sus tarjetas de hotel:

Ver: 1 - esta es información general sobre el hotel, 2 - calificación de usuarios, 3 - datos sobre el servicio, 4 - información sobre las habitaciones y 5 - asignados para el tamaño y la ubicación (recuerde el canguro) las tarifas de las habitaciones. Al hojear una larga lista, "capturará" esta lógica inconscientemente, o más bien, su Sistema 1 lo detectará. Y buscará la información necesaria en los lugares habituales.

Ahora sabes sobre diferentes patrones. Que sigue

Entonces debes restringirte y no utilizar todos los trucos a la vez.

Agrupe los elementos que deben ser "leídos" juntos, coloque los acentos necesarios. Por ejemplo, simplemente no coloque información importante en la esquina inferior izquierda, esta solución simple puede aumentar la conversión de la página. Resalte el color, el estilo, el tamaño, solo lo que es realmente importante. No sobrecargue la página con acentos. Mire la versión móvil de su sitio en términos de patrones, y use elementos de contraste para romper la monotonía de la corriente.

Como puede ver, los patrones son adecuados no solo para organizar búhos y canguros de acuerdo con su clasificación: deben usarse donde desee empujar suavemente al usuario hacia la acción correcta. Pero es importante mantener un equilibrio. Tan pronto como el usuario se dé cuenta de que presionar el botón no es su decisión, sino el resultado de su manipulación, toda la magia de la jerarquía visual se disipará y el carro se convertirá en una calabaza.

El material fue preparado por Denis Spring,
Autor de servicio AskUsers
.

Deja Tu Comentario