Blog

Cómo captar la atención visual con el córtex visual

Teniendo en cuenta el funcionamiento de nuestro cerebro, hay cosas que puedes hacer para captar la atención visual de tu usuario. En este artículo, Susan Weinschenk explica cómo la corteza visual de nuestro cerebro desempeña un papel vital en el control de nuestro comportamiento.

(Este es un post patrocinado) Estás diseñando una página de aterrizaje. El objetivo de la página es conseguir que la gente se fije y, con suerte, haga clic en un botón de la pantalla para suscribirse a un boletín mensual. “Asegúrate de que el botón capta la atención de la gente” es el objetivo que te han marcado.

¿Y cómo se hace eso exactamente?

La investigación sobre la corteza visual del cerebro puede darte algunas ideas. La corteza visual es la parte del cerebro que procesa la información visual. Cada uno de los sentidos tiene un área del cerebro donde se suelen enviar y procesar las señales de esa percepción sensorial. La corteza visual es la mayor de las cortezas sensoriales porque somos animales muy visuales.

Lecturas recomendadas: ¿Cuál es el papel de la creatividad en el diseño UX?

Las áreas de preatención de la corteza visual

Existen áreas especiales del córtex visual que procesan la información visual muy rápidamente. Se denominan áreas de “preatención” porque procesan la información más rápido de lo que alguien puede darse cuenta de que se ha fijado en algo visualmente.

Dentro de la corteza visual hay cuatro áreas llamadas V1, V2, V3 y V4. Estas son las áreas de “preatención” de la corteza visual, y están dedicadas a elementos visuales muy pequeños y específicos.

Veamos cada una de ellas:

Orientación

Si un elemento está orientado de forma diferente a los demás, se nota enseguida:

Una imagen de quince líneas cortas con una que destaca por estar orientada de forma diferente
(Vista previa grande)

Tamaño y forma

Si un artículo tiene un tamaño o una forma diferente a los demás, se nota enseguida:

Una imagen de doce círculos con uno más grande que el resto
(Vista previa grande)

Color

Si un artículo es de un color diferente al de los otros que lo rodean, se nota enseguida:

Una imagen de trece círculos negros con uno de ellos en rojo
(Vista previa grande)

Movimiento

Si un elemento se mueve rápidamente, especialmente si se acerca a partir de un tamaño pequeño y luego se hace más grande rápidamente (piense en un tigre corriendo rápidamente hacia usted), eso llama la atención.

Pero sólo uno a la vez

El factor interesante, no inmediatamente obvio aquí, es que si se utilizan estos factores juntos al mismo tiempo, entonces nada llama la atención.

Una imagen abstracta de círculos de colores en diferentes tamaños
(Vista previa grande)

Si quieres captar la atención entonces, elige una de los métodos y utilizarlo únicamente.

Observa los dos diseños presentados a continuación. ¿Cuál de ellos le llama la atención para que se inscriba?

Una imagen minimalista que utiliza principalmente dos colores
(Vista previa grande)
Una imagen que utiliza una variedad de colores y tonos
(Vista previa grande)

Obviamente, la imagen que tiene una sola área de color llama más la atención, en lugar de la única área que es de color.

El área facial fusiforme

Las áreas de preatención de la corteza visual no son la única conexión visual/cerebral que se puede utilizar. Otra zona del cerebro que puedes aprovechar para captar la atención en una página podría ser el Área Facial Fusiforme (o AFF).

El FFA es una parte especial del cerebro que es sensible a los rostros humanos. El FFA está situado en la parte media/social del cerebro, cerca de la amígdala, que procesa las emociones. Las caras captan la atención gracias al FFA.

Captura de pantalla del sitio web de WIX con una persona sonriente en la portada
(Vista previa grande)

El FFA se identifica:

  • ¿Esto es una cara?
  • ¿Alguien que conozco?
  • ¿Alguien que conozco personalmente?
  • ¿Qué sienten?

¿Qué estimula la FFA?

  • Las caras que miran de frente estimulan el FFA.
  • Las caras que están de perfil pueden eventualmente estimular el FFA, pero no tan rápidamente. En el ejemplo abajo la cara está en el perfil y oscurecido por el pelo. Puede que no estimule el FFA en absoluto.
  • Imagen de una mujer con la cara cubierta por el pelo, de modo que no se ven bien sus rasgos faciales
    (Vista previa grande)
  • Incluso los objetos inanimados, como la imagen del coche de abajo, pueden estimular el área FFA si tienen cosas que parecen partes faciales, como ojos y una boca.
Una imagen de un coche que parece tener partes faciales como ojos y boca (frente)
(Vista previa grande)

¿Mirando hacia donde mira la cara?

Es posible que haya visto los mapas de calor que muestran que si se muestra una cara y ésta mira un objeto (por ejemplo, un botón o un producto) en la pantalla, la persona que mira la página también mirará el mismo objeto. He aquí un ejemplo:

Un anuncio de champú Sunsilk en el que la mujer de la imagen está mirando el producto comparado con una imagen de ella mirando de frente
(Vista previa grande)

Las zonas rojas muestran dónde se ha mirado más. Cuando el modelo mira el bote de champú, la gente tiende a mirar también hacia allí.

Pero ten cuidado con sacar demasiadas conclusiones de esto. Aunque la investigación muestra que la mirada de la gente sigue la mirada de la foto, eso no significa necesariamente que la gente pase a la acción. Las expresiones faciales muy emotivas llevan a la acción más que la mirada.

Lectura recomendada: La importancia del diseño de macro y micromomentos

Puntos de partida

Si quieres captar la atención visual de alguien

  • Utiliza las áreas de preatención del córtex visual: haz que todo lo que hay en la página sea sencillo excepto un elemento.

o

  • Muestra una cara grande, mirando al frente;
  • Si quieres incitar a la acción haz que la cara muestre una emoción fuerte;
  • Resiste el impulso de utilizar muchos métodos a la vez, como una cara, y el color, y el tamaño, y la forma, y la orientación.

Este artículo forma parte de la serie de diseño UX patrocinada por Adobe. La herramienta Adobe XD está hecha para un proceso de diseño UX rápido y fluidoya que te permite pasar de la idea al prototipo más rápidamente. Diseñar, prototipar y compartir, todo en una sola aplicación. Puedes ver más proyectos inspiradores creados con Adobe XD en Behancey también suscríbase al boletín de diseño de experiencias de Adobe para estar al día e informado de las últimas tendencias y conocimientos sobre el diseño UX/UI.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar
Cerrar