Efecto Von Restorff: lo distinto se recuerda
El efecto Von Restorff dice que lo que difiere de un conjunto similar se recuerda mejor. Qué estudió Hedwig von Restorff, cómo usarlo y cuáles son sus límites.
¿Qué estudió Von Restorff?
La psiquiatra y pediatra alemana Hedwig von Restorff (1906–1962) publicó en 1933 un estudio, en alemán, titulado «Über die Wirkung von Bereichsbildungen im Spurenfeld», en la revista Psychologische Forschung. Su hallazgo: al memorizar una lista de elementos de una misma categoría, el elemento aislado, distinto de los demás, se recordaba mejor (Wikipedia: Von Restorff effect).
Laws of UX lo resume de forma directa: cuando hay elementos similares, el que difiere del resto es el más probable de recordarse (Laws of UX: Von Restorff effect). El artículo de Wikipedia añade que la distinción puede venir del tamaño, la forma, el color, el espaciado o el subrayado, y también del significado, por ejemplo una palabra de animal entre palabras de muebles.
¿Qué explica el efecto?
Hay varias explicaciones, y ninguna es definitiva. Una propone que el elemento aislado se repasa durante más tiempo en la memoria de trabajo que los demás. Otra habla de una categoría de recuperación propia. Y la teoría actual atribuye el efecto a la incongruencia con el contexto, que exige atención extra (Hunt, 1995, citado en Wikipedia).
Para diseño, la explicación práctica es la misma: lo que no encaja con el patrón atrae la atención. Lo que se repite, en cambio, se vuelve invisible.
¿Cómo se aplica en interfaces?
Laws of UX propone hacer visualmente distintos los datos o acciones clave, y usar la distinción con moderación para que el elemento destacado no compita con otros ni se confunda con publicidad (Laws of UX: Von Restorff effect). En la práctica, esto significa:
- Una acción principal por pantalla, con color, tamaño o posición distintos del resto de los botones.
- Un dato crítico destacado en una lista, como un precio o un estado de alerta, en lugar de todos los datos en el mismo formato.
- Un aviso que rompe el patrón cuando algo requiere atención, como un saldo negativo en una lista de cuentas positivas.
Para crear el contraste puedes variar el tamaño, la forma, el color, el espaciado o el subrayado. También funciona la diferencia de significado, como una palabra de animal entre palabras de muebles; en una interfaz, sería un elemento de otro tipo entre una lista homogénea, por ejemplo un botón de acción entre filas de texto. Elige una sola dimensión para que el contraste sea claro: si el elemento cambia a la vez de color, tamaño y animación, deja de verse como una excepción y empieza a verse como ruido.
Este efecto complementa la jerarquía visual: la jerarquía ordena lo que se ve primero, y el efecto explica por qué lo distinto se queda en la memoria.
¿Qué tan sólida es la evidencia?
El efecto está documentado desde hace casi un siglo, pero sus detalles siguen debatiéndose. Wikipedia señala que la mayoría de los estudios usan listas cortas de palabras en laboratorio, un diseño que puede subestimar el efecto; que las diferencias individuales son grandes, y que ninguna teoría explica el efecto en todas las condiciones experimentales. Además, una lista de palabras es muy distinta de una pantalla real. Para una interfaz, la lección es prudente: el efecto es una pista de diseño que conviene probar, no una garantía de que el elemento destacado será recordado.
¿Cuándo deja de funcionar?
Hay dos límites claros. El primero es la saturación: si cinco elementos están resaltados, ninguno lo está. Un diseño con tres botones de color intenso compite consigo mismo. El segundo es la accesibilidad: un destacado que depende solo del color deja fuera a personas con daltonismo o baja visión. Laws of UX lo advierte al recomendar no basarse solo en el color, y considerar la sensibilidad al movimiento si se usan animaciones.
Hay un tercer riesgo, que es una pauta de diseño más que un resultado de investigación: si el destacado se repite tanto que el usuario aprende a ignorarlo. Es lo que ocurre con los banners de publicidad, y Laws of UX advierte que lo destacado no debe confundirse con un anuncio. Por eso conviene que lo distinto sea excepcional.
Ejemplo ilustrativo
Ejemplo ilustrativo: una página de planes tiene tres tarjetas con el mismo estilo. El plan recomendado se destaca con un borde de color, una etiqueta que dice «Más elegido» y un botón de color principal. Las otras dos tarjetas usan botones grises. La persona lo ve en el primer vistazo. Pero el equipo también añadió un banner rojo, un contador de oferta y un pop-up, todo en la misma pantalla. Al probarlo, las personas dicen que «hay demasiadas cosas» y no recuerdan el plan recomendado. El equipo quita el banner y el pop-up, y deja solo la tarjeta destacada.
Si el destacado es un error o una alerta, revisa cómo escribir mensajes de error. Y para la acción principal de un flujo de compra, la jerarquía de botones muestra cómo jerarquizar las acciones sin competir.
Errores comunes
- Destacar cinco elementos en la misma pantalla y esperar que se recuerde alguno.
- Usar solo el color para hacer distinto un elemento.
- Destacar algo que no es importante, lo que enseña al usuario a ignorar los destacados.
- Confundir el efecto con llamar más la atención con más volumen de estímulos.
- Usar animaciones intensas sin ofrecer una forma de reducir el movimiento.
Qué puedes hacer mañana
- Abre tu pantalla principal y cuenta cuántos elementos están destacados. Si son más de uno, decide cuál importa más.
- Quita la distinción de color de ese elemento y verifica que siga siendo claro con un icono o un texto.
- Pide a dos personas que te digan qué recuerdan de la pantalla después de cinco segundos.