Diseño emocional: los tres niveles de Don Norman aplicados a webs y marcas

En el estudio tenemos una pregunta que hacemos casi al final de cada sesión de pruebas, cuando la persona ya ha terminado las tareas: «¿Cómo te has sentido usando la web?». Las respuestas son de las más reveladoras de todo el proceso. Hay quien dice «tranquila», «con ganas de ir», «un poco perdido al principio y luego bien», «como si me estuvieran atendiendo». Casi nunca hablan de botones o menús. Hablan de emociones.

Don Norman, uno de los padres de la experiencia de usuario, dedicó un libro entero a explicar por qué. En Emotional Design, publicado en 2004, propuso que vivimos cada objeto, cada espacio y cada experiencia en tres niveles a la vez. Y que el buen diseño es el que consigue que esos tres niveles trabajen en la misma dirección.

Es un modelo que lleva veinte años ayudando a diseñar mejor productos, y que aplicado a webs y marcas resulta especialmente útil. En esta guía te cuento qué es cada nivel, cómo se diseña y cómo usamos el modelo en el estudio para revisar una web o una identidad.

01De «La psicología de los objetos cotidianos» al diseño emocional

Norman se hizo famoso con The Design of Everyday Things (1988), publicado en español como La psicología de los objetos cotidianos, un libro centrado en la usabilidad: puertas que no sabes si empujar o tirar, fogones cuyos mandos no se corresponden con los fuegos. Durante años se le asoció con una visión muy funcional del diseño.

Por eso sorprendió tanto cuando, en 2004, escribió que «lo atractivo funciona mejor». Se apoyaba en investigaciones como la de Masaaki Kurosu y Kaori Kashimura, que en 1995 mostraron a participantes distintos diseños de la pantalla de un cajero automático y vieron que los más atractivos se percibían también como más fáciles de usar. Noam Tractinsky replicó el estudio poco después en Israel con resultados aún más marcados. A ese fenómeno se le conoce hoy como efecto estética-usabilidad.

La explicación de Norman es que las emociones cambian cómo pensamos. Cuando algo nos agrada, estamos más relajados, somos más creativos y más tolerantes con pequeñas dificultades. Cuando algo nos genera tensión, nuestra atención se estrecha y cualquier fallo se vive como un obstáculo. Diseñar la emoción es, por tanto, diseñar la experiencia entera.

02Los tres niveles, explicados con una web

Norman describe tres niveles de procesamiento que funcionan a la vez, cada uno a su ritmo. La forma más clara de entenderlos es pensar en lo que ocurre cuando alguien entra por primera vez en la web de un hotel.

El nivel visceral: la primera impresión

Es la reacción inmediata, anterior al razonamiento. Un estudio de Gitte Lindgaard y su equipo, publicado en 2006, mostró que las personas forman una opinión sobre el atractivo visual de una web en unos 50 milisegundos, y que esa primera opinión se mantiene bastante estable después. En esa fracción de segundo cuentan el color, el contraste, la calidad de las imágenes, el orden y el espacio en blanco.

Diseñar el nivel visceral significa cuidar esa primera pantalla como se cuida el escaparate de una tienda: fotografía propia y de calidad, una paleta coherente con la marca, una tipografía con carácter y una composición que respira. Lo desarrollamos también en la guía de señales de confianza digital, porque la primera impresión estética y la confianza van de la mano.

El nivel conductual: el placer de usar

Es la experiencia de uso: si las cosas funcionan como esperamos, si entendemos lo que pasa, si sentimos que tenemos el control. Aquí la emoción nace de la eficacia. Hay un placer muy concreto en un formulario que se rellena solo con el autocompletado, en un botón que responde al instante o en una confirmación que llega justo cuando la esperabas.

Este nivel es el territorio clásico de la usabilidad, y también el del rendimiento. Una interacción que responde en menos de 200 milisegundos (el umbral de INP que Google considera bueno) se percibe como inmediata; una que tarda un segundo, como torpe. Las microinteracciones bien diseñadas son la herramienta más fina del nivel conductual: pequeñas respuestas que dicen «te he entendido».

El nivel reflexivo: el significado

Es el nivel de la conciencia, la memoria y la identidad. Aquí nos preguntamos qué significa algo para nosotros, qué dice de quiénes somos, cómo lo contaríamos a otra persona. Norman lo ilustraba con objetos como su exprimidor Juicy Salif de Philippe Starck: un objeto poco práctico para exprimir y, sin embargo, muy querido por lo que representa.

En una marca, el nivel reflexivo se construye con la historia, los valores, el tono de voz, el cuidado en los detalles y la coherencia entre lo que se promete y lo que se vive. Es lo que hace que alguien recomiende un restaurante «porque es especial» o elija un estudio de arquitectura «porque comparte nuestra forma de ver las cosas».

Clave: el nivel visceral consigue que alguien se quede, el conductual que consiga lo que buscaba y el reflexivo que vuelva y te recomiende. Una marca fuerte diseña los tres con la misma intención.

03Cuando los niveles no van a la par

Lo más útil del modelo de Norman es que ayuda a diagnosticar. Muchas webs funcionan bien en un nivel y flojean en otro, y saber en cuál está el desajuste orienta el trabajo.

• →Visceral alto, conductual bajo. La web enamora a primera vista y frustra al usarla: animaciones que retrasan la navegación, textos de bajo contraste, menús escondidos. La emoción inicial se convierte en decepción, que pesa más porque las expectativas eran altas.
• →Conductual alto, visceral bajo. Todo funciona, pero la web no transmite nada. Se usa y se olvida. Es frecuente en webs construidas sobre plantillas genéricas.
• →Visceral y conductual altos, reflexivo bajo. La web es atractiva y eficaz, pero podría ser de cualquier marca. No cuenta quién hay detrás ni por qué importa. Funciona en la primera compra y le cuesta más ganar la lealtad.
• →Los tres alineados. Lo que buscamos: una primera impresión que encaja con la marca, una experiencia fluida que la confirma y un significado que hace que la persona la sienta un poco suya.

El momento final de una experiencia tiene un peso especial en el nivel reflexivo, porque es lo que más se recuerda. La investigación de Daniel Kahneman sobre la regla del pico y el final lo explica muy bien, y le dedicamos una guía propia sobre la regla del pico y el final.

04Cómo diseñar cada nivel: una checklist práctica

Esta es la lista que usamos en el estudio para revisar una web o una identidad desde el diseño emocional. No pretende ser exhaustiva; es un punto de partida para la conversación.

Visceral

• →La primera pantalla transmite en un vistazo el carácter de la marca: elegante, cercana, enérgica, serena.
• →Las imágenes son propias, de calidad y coherentes en luz y estilo.
• →La paleta y la tipografía salen del sistema de identidad, no de una plantilla.
• →Hay espacio en blanco suficiente para que cada elemento respire.
• →El movimiento, si lo hay, es sutil, tiene intención y respeta a quien prefiere reducirlo.

Conductual

• →Las tareas principales se completan sin dudas: encontrar, comparar, reservar, contactar.
• →Cada acción tiene una respuesta visible e inmediata.
• →Los errores se explican con amabilidad y dicen cómo resolverlos.
• →La web carga rápido y responde al instante en móvil.
• →La persona siempre sabe dónde está y cómo volver.

Reflexivo

• →La web cuenta quién hay detrás, por qué hace lo que hace y qué la diferencia.
• →El tono de voz es reconocible en todos los textos, también en los pequeños.
• →Hay detalles que sorprenden con cariño: un mensaje de confirmación con personalidad, una página de error con gracia, una despedida cálida.
• →La experiencia termina bien: el último paso es tan cuidado como el primero.
• →Lo que la web promete coincide con lo que la persona vive después, en el local, en el producto o en el servicio.

05Un ejemplo resuelto: la web de un restaurante

Un restaurante de cocina de mercado en Marbella, con una cocina excelente y una web correcta, nos pidió ayuda porque «la web no reflejaba lo que era el sitio». Lo analizamos por niveles.

Diagnóstico.

1. 01Visceral: fotografías de banco de imágenes, una plantilla con tipografía genérica y una paleta azul que no tenía nada que ver con el local, de madera, barro y luz cálida.
2. 02Conductual: la carta estaba en un PDF de varios megas, difícil de leer en móvil, y la reserva enlazaba a una plataforma externa con otra estética.
3. 03Reflexivo: ni una palabra sobre la chef, los productores con los que trabajaban o la idea de cocina detrás del restaurante.

Lo que hicimos.

1. 01Una sesión de fotografía en el propio restaurante, a la hora de la comida, con luz natural, platos reales y el equipo trabajando.
2. 02Una paleta y una tipografía derivadas de la identidad, con los tonos tierra del local.
3. 03La carta en HTML, legible en móvil y fácil de actualizar, con los alérgenos claramente indicados.
4. 04Un widget de reserva integrado en la propia web, con la estética de la marca y una confirmación con el nombre del restaurante, la dirección y un mensaje cálido de bienvenida.
5. 05Una página con la historia de la chef y de los productores de la zona, contada en primera persona.
6. 06Un correo tras la visita, breve y personal, agradeciendo la visita sin pedir nada a cambio.

El efecto. Las personas que reservaban llegaban sabiendo qué iban a encontrar, y el equipo notó que muchas mencionaban la historia de los productores en la mesa. Las reseñas empezaron a hablar del ambiente y del trato, no solo de la comida. Los tres niveles, por fin, contaban lo mismo.

06Diseñar lo que la gente siente

Lo que más me gusta del modelo de Norman es que devuelve la emoción al centro del diseño sin quitarle rigor. Una web emocionante que no funciona frustra; una web eficaz sin alma se olvida. Lo que buscamos es que la persona sienta, use y recuerde la misma marca. Si te interesa la parte de cómo las emociones influyen en la compra, la tratamos en emociones y decisiones de compra.

En SIMA trabajamos el diseño emocional desde la identidad de marca hasta el último detalle de la web, para que cada nivel cuente la misma historia. Si sientes que tu marca o tu web no transmiten lo que de verdad eres, escríbenos y lo exploramos juntos.