Affordances vs Signifiers: El Lenguaje Invisible del Diseño

Descubre la diferencia crucial entre Affordances (lo que un objeto puede hacer) y Signifiers (la señal que nos dice cómo hacerlo) para crear interfaces intuitivas y fáciles de usar.

info Definición Rápida
Un Affordance es la relación entre un objeto y una persona: es la propiedad del objeto que permite realizar una acción (ej. un pomo permite girar). Un Signifier es la señal visual o sonora que comunica esa capacidad (ej. la forma del pomo indica qué hay que hacer con él).

El Legado de Don Norman en UX

El concepto de Affordance fue introducido originalmente por James J. Gibson en psicología perceptual, pero fue Don Norman quien lo adaptó al diseño en su libro fundamental The Design of Everyday Things. Para Norman, un buen diseño es aquel que no necesita manuales de instrucciones: el usuario sabe qué hacer con solo mirar el objeto.

Si un usuario tira de una puerta de la que debería empujar, el error no es del usuario, sino del diseñador que puso un Signifier incorrecto (un tirador en lugar de una placa de empuje).

1. Affordance: La Capacidad Potencial

El Affordance es una relación técnica y física entre un objeto (físico o digital) y el usuario. Representa todo lo que “se puede hacer” con ese objeto.

  • En el mundo físico: Un hueco en una pared tiene el affordance de “meter la mano”. Una silla tiene el affordance de “sentarse”.
  • En el mundo digital: Un botón tiene el affordance de “ser pulsado”. Un control deslizante (slider) tiene el affordance de “moverse horizontalmente”.

2. Signifier: La Señal de Comunicación

Sin embargo, el affordance a menudo es invisible o ambiguo. Aquí es donde entra el Signifier. Es la pista visual (o sonora, o háptica) que nos grita: “¡Hey, puedes pulsarme!” o “¡Puedes deslizarme!”.

  • Ejemplo en Web: Un botón azul con una sombra suave (elevación) es un signifier potente. La sombra nos dice que el botón está “por encima” de la superficie y que se puede hundir al pulsarlo.
  • Ejemplo en App Móvil: Un punto rojo sobre un icono nos indica que hay contenido nuevo que podemos ver. El punto es el signifier de la acción de notificación.

Por Qué son Críticos para la Experiencia de Usuario

La frustración del usuario suele nacer de un desajuste entre estos dos conceptos:

A. Affordances Invisibles (El Botón que no parece botón)

Si diseñas un botón que parece simple texto plano, has eliminado el signifier. El affordance existe (se puede clicar), pero el usuario no lo sabe. Esto genera clics perdidos y falta de descubribilidad.

B. Signifiers Falsos (El Engaño Visual)

Si algo parece un enlace (clásico texto azul subrayado) pero al hacerle click no ocurre nada, tienes un signifier falso. Esto rompe la confianza del usuario en la interfaz y le genera fatiga mental al intentar descifrar qué funciona y qué no.

C. La Sombra y el Relieve (Significadores Esquemáticos)

En el diseño de interfaces moderno (como Material Design o HIG de Apple), las sombras y los gradientes no son solo estética: son signifiers de profundidad y de interactividad. Nos ayudan a entender qué elementos están en primer plano y cuáles son estáticos.

El Caso de las Pantallas Táctiles

En dispositivos móviles, donde no hay un cursor que cambie de forma al pasar por encima (hover), los signifiers visuales son aún más críticos. El usuario “toca para probar”. Un buen diseño móvil usa el color, el tamaño y la posición para indicar claramente dónde se puede interactuar sin necesidad de que el usuario tenga que adivinar.

Consejos de Mentor

  • No asumas que el usuario sabe: Siempre que añadas una funcionalidad (affordance), pregúntate: “¿Cómo sabe el usuario que esto está aquí?”. Si la respuesta no es obvia visualmente, necesitas un mejor signifier.
  • Sigue los estándares: Usa iconos y patrones que la gente ya conoce. No intentes reinventar el icono de “Menú” o de “Buscar”. La familiaridad es el signifier más rápido que existe.
  • Prueba el “Squint Test”: Entrecierra los ojos mirando tu interfaz. ¿Sigues distinguiendo qué elementos son botones y cuáles son solo texto? Un buen signifier sobrevive incluso a la falta de nitidez.
  • Consistencia: Si usas el azul para los enlaces, nunca uses el azul para texto estático. Esto evita crear signifiers falsos.

Recursos y Herramientas

gestion-de-carga-cognitiva ley-de-fitts affordances-vs-signifiers