Atención visual: efecto Von Restorff, saliencia y jerarquía en el diseño

En una revisión de una tienda online de cerámica nos encontramos con una página de producto que tenía, a la vez, una etiqueta de «novedad» en rojo, un banner de envío gratis en amarillo, un contador de visitas en naranja, una cinta diagonal de «más vendido» y un botón de compra en verde. Le pedimos a una clienta que mirara la página cinco segundos y nos dijera qué recordaba. Respondió: «Que había muchas cosas». No recordaba el nombre del producto ni el precio. El botón, que era lo único que de verdad importaba, se había perdido entre tanto reclamo.

Es una escena muy común, y tiene una explicación psicológica precisa. La atención visual funciona por contraste: vemos y recordamos lo que es diferente de lo que lo rodea. Cuando todo intenta destacar, nada lo consigue. A esto se le llama efecto Von Restorff, y entenderlo bien es una de las herramientas más útiles para diseñar páginas que se entienden de un vistazo.

En esta guía explicamos qué es el efecto Von Restorff, cómo funciona la atención visual según la investigación, qué atributos captan la mirada antes de que pensemos y cómo administrar ese poder con medida.

01El efecto Von Restorff: lo distinto se recuerda

En 1933, la psicóloga alemana Hedwig von Restorff, que trabajaba en Berlín en el entorno de la psicología de la Gestalt, publicó un experimento sobre memoria. Presentaba a los participantes listas de elementos parecidos (por ejemplo, números) con un elemento distinto (una sílaba o un color diferente). El elemento aislado se recordaba mucho mejor que los demás.

El hallazgo, conocido como efecto de aislamiento o efecto Von Restorff, se ha replicado muchas veces y tiene dos lecturas para el diseño:

• →Atención. Lo que se diferencia de su entorno atrae la mirada antes.
• →Memoria. Lo que se diferencia se recuerda mejor después.

Las dos son valiosas. Un botón que se distingue del resto se encuentra antes; un plan destacado en una tabla de precios se recuerda al cerrar la pestaña; una marca que se diferencia en su categoría se queda en la memoria. El efecto aparece en la ley de UX que lleva su nombre, y que recogemos junto a otras en la guía de leyes de UX.

Clave: destacar es una cuestión de contraste con el entorno, no de intensidad absoluta: un elemento sobrio entre elementos ruidosos puede destacar tanto como uno vistoso entre elementos tranquilos.

02Cómo funciona la atención visual

Lo preatentivo: lo que vemos antes de mirar

En 1980, Anne Treisman y Garry Gelade propusieron la teoría de integración de rasgos. Según ella, algunas propiedades visuales se procesan de forma automática y en paralelo en todo el campo visual, sin necesidad de prestar atención: el color, la orientación, el tamaño, el movimiento. Si un elemento se diferencia en una de esas propiedades, «salta» a la vista al instante, da igual cuántos elementos haya alrededor.

En cambio, cuando un elemento solo se distingue por una combinación de rasgos (por ejemplo, un círculo rojo entre círculos verdes y cuadrados rojos), hay que buscarlo uno por uno, y el tiempo de búsqueda crece con el número de elementos. Para el diseño, la conclusión es directa: lo que debe encontrarse al momento tiene que diferenciarse en un rasgo claro, no en una sutileza combinada.

Los atributos preatentivos más útiles

La saliencia: un mapa de lo que destaca

Laurent Itti, Christof Koch y Ernst Niebur publicaron en 1998 un modelo computacional de saliencia visual que combina estos atributos para predecir qué zonas de una imagen atraerán primero la mirada. Hoy existen herramientas que, a partir de ese tipo de modelos, generan mapas de atención predicha sobre una captura de pantalla. Son útiles como primera aproximación, aunque no sustituyen a la prueba con personas, porque la atención también depende de lo que cada uno busca.

Lo que no vemos aunque esté delante

En 1999, Daniel Simons y Christopher Chabris pidieron a los participantes que contaran los pases de un equipo en un vídeo de baloncesto. Alrededor de la mitad no vio a una persona disfrazada de gorila que cruzaba la escena. Es la ceguera por falta de atención: cuando estamos concentrados en una tarea, lo que no tiene que ver con ella puede pasar desapercibido aunque sea muy visible. En una web, quien busca un precio puede no ver un banner precioso que no esperaba. Por eso lo importante tiene que estar en el camino de lo que la persona busca, no solo ser llamativo.

03El presupuesto de atención de una pantalla

En el estudio usamos una imagen sencilla: cada pantalla tiene un presupuesto de atención limitado. Cada elemento destacado consume parte de ese presupuesto. Si lo gastamos en cinco cosas, a cada una le toca poco.

1. 01Un protagonista por pantalla. Normalmente, la acción principal o el mensaje clave.
2. 02Uno o dos secundarios. Con menos fuerza: un botón secundario en estilo contorno, una cifra destacada en tamaño pero no en color.
3. 03Todo lo demás, en calma. Textos, navegación e información de apoyo con un tratamiento uniforme, para que el contraste funcione.

Este reparto conecta con la jerarquía visual, que explicamos en detalle en la guía de jerarquía visual en diseño web. Allí verás cómo combinar tamaño, peso, espacio y posición; aquí nos interesa la idea de que destacar algo implica decidir qué no destaca.

04Aplicaciones concretas en una web

El botón principal

El caso más claro. El botón de la acción principal debería ser el único con color de relleno intenso en su zona, con contraste de al menos 3:1 con el fondo según WCAG 2.2 (criterio 1.4.11) y texto con contraste de 4,5:1. Los botones secundarios, en contorno o como enlace. Lo desarrollamos en la guía de botones en UI.

La tabla de precios

Destacar el plan recomendado con un fondo diferente, una etiqueta y algo más de tamaño es una aplicación directa del efecto Von Restorff. Funciona cuando se destaca uno solo y cuando la recomendación es honesta.

Los mensajes de estado

Un error de formulario tiene que destacar sin asustar: color, icono y texto, para que no dependa solo del color. Un aviso de éxito puede ser más discreto. El color no puede ser el único medio para transmitir la información (criterio 1.4.1 de WCAG).

La marca en su categoría

El efecto Von Restorff también funciona a escala de marca. En un lineal de supermercado lleno de envases blancos, uno negro destaca; entre webs de clínicas azules, una en verde salvia se recuerda. Diferenciarse de la categoría es la versión estratégica del mismo principio.

05Movimiento con medida

El movimiento es el atributo más potente para captar la atención, porque nuestro sistema visual está hecho para detectar cambios en la periferia. Por eso conviene reservarlo para lo que de verdad lo merece: una transición que explica lo que ha pasado, un indicador de carga, un aviso puntual.

Las pautas WCAG 2.2 piden que cualquier contenido que se mueva automáticamente durante más de cinco segundos se pueda pausar, detener u ocultar (criterio 2.2.2). Además, algunas personas configuran su sistema para reducir el movimiento, por mareos o por sensibilidad vestibular. Respetarlo es sencillo:

/* Animación sutil para el aviso, solo si la persona no ha pedido reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
  .aviso-nuevo {
    animation: aparecer 400ms ease-out both;
  }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

06Más allá de la pantalla: diseñar lo que se recuerda

La segunda mitad del efecto Von Restorff, la memoria, suele quedar en segundo plano frente a la atención, y es una lástima, porque abre posibilidades muy bonitas. Si lo distinto se recuerda mejor, cada experiencia de marca puede tener un elemento pensado para quedarse en la memoria.

Algunos ejemplos de cómo lo trabajamos en proyectos reales:

• →En una presentación o un dosier. Entre páginas de estructura parecida, una doble página con una sola cifra enorme o una única fotografía a sangre se convierte en el momento que se comenta después.
• →En una web larga. Una sección con un tratamiento visual distinto, por ejemplo un fondo oscuro en una web clara o una cita a gran tamaño, marca un hito en el recorrido y ayuda a recordar el mensaje que contiene.
• →En un espacio comercial o un stand. Un único elemento singular, como una pieza de iluminación, un material inesperado o un color que solo aparece en un punto, da a la gente algo concreto que recordar y fotografiar.
• →En el servicio. Un detalle inesperado en la entrega, en el correo de bienvenida o en el empaquetado funciona como el elemento aislado de la lista de Von Restorff.

La clave es la misma que en la pantalla: el elemento memorable funciona porque lo rodea una base tranquila y coherente. Si todo intenta ser memorable, la experiencia se vuelve ruidosa y no se recuerda nada en particular. Un sistema de marca sereno, con un momento singular bien elegido, deja una huella mucho más clara que una sucesión de golpes de efecto.

07Cómo revisar la atención en tu web: cinco pruebas

1. 01Prueba del desenfoque. Haz una captura y aplícale un desenfoque fuerte, o entrecierra los ojos. Lo que se sigue distinguiendo es lo que destaca. ¿Coincide con lo importante?
2. 02Prueba de los cinco segundos. Enseña la página a alguien durante cinco segundos y pregúntale qué recuerda y qué haría después.
3. 03Cuenta los protagonistas. Marca en una captura todo lo que tenga color intenso, tamaño grande o movimiento. Si hay más de tres por pantalla, toca calmar.
4. 04Escala de grises. Pasa la página a blanco y negro. Si el botón principal deja de destacar, depende demasiado del tono.
5. 05Mapa de calor real. Si tienes tráfico suficiente, una herramienta de mapas de calor muestra dónde se hace clic y hasta dónde se baja. Contrasta lo que ves con los patrones de lectura que explicamos en la guía de eye tracking.

08Destacar es elegir

El efecto Von Restorff tiene algo de lección de vida para quien diseña: para que algo brille, otras cosas tienen que dar un paso atrás. Una página que se entiende de un vistazo no es la que menos tiene, sino la que ha decidido con claridad qué importa más en cada momento.

En SIMA aplicamos estos principios de atención en cada proyecto de diseño web y experiencia digital, y también en marcas y espacios donde destacar en la categoría es la primera tarea. Si quieres revisar qué destaca de verdad en tu web y qué se está perdiendo por el camino, escríbenos y lo vemos juntos.