Affordance

Una affordance es una posibilidad de acción que surge de la relación entre una persona y un objeto o sistema. En una interfaz, las señales perceptibles ayudan a reconocer qué acciones están disponibles.

La Oveja Negra /

Affordance

Una acción puede estar disponible sin resultar evidente. Una imagen puede admitir ampliación, pero quien la observa necesita descubrir esa posibilidad.

La affordance y la señal que la comunica no son lo mismo. Un icono de lupa o una etiqueta actúan como señales; no garantizan que la interacción exista ni que funcione.

Qué significa

El concepto describe posibilidades de acción, no una propiedad estética del botón. Su utilidad depende de las capacidades de la persona y del contexto de uso.

Origen del concepto

El término procede de la psicología ecológica y aparece desarrollado en The Ecological Approach to Visual Perception, publicado originalmente en 1979. Describe posibilidades de acción en relación con las capacidades del organismo. Su traslado al diseño exige distinguir la acción disponible de las señales que permiten descubrirla: una apariencia sugerente no sustituye a un comportamiento funcional.

Aplicación en UX

Haz reconocibles los controles y conserva su comportamiento. Una superficie que parece pulsable debe responder; una opción desactivada debe comunicar su estado. Comprueba también su uso con teclado.

Evalúa el control en estados normales, desactivados y de error. La misma acción debe poder identificarse sin depender exclusivamente del color o de pasar el ratón. Una etiqueta estable ayuda a formar expectativas; si el elemento cambia de función entre pantallas, la persona puede interpretar una posibilidad de acción que el sistema ya no ofrece.

Aplicación en ecommerce

Una ficha puede permitir ampliar fotografías, elegir una talla o desplegar información de entrega. Mostrar esas acciones con etiquetas claras evita que el comprador tenga que probar elementos al azar.

En navegación, el comprador necesita distinguir enlaces, filtros y acciones de compra. En checkout, un resumen desplegable debe comunicar tanto su disponibilidad como su estado. Antes de atribuir una mejora de conversión al estilo de un botón, observa si los usuarios reconocen la acción, pueden ejecutarla y comprenden qué ocurrirá después.

Ejemplo práctico

Imagina una fotografía de producto que abre una vista ampliada. Añadir «Ampliar imagen» comunica la acción; hacer accesible el control permite ejecutarla. Es una propuesta de diseño, no un resultado medido.

Errores frecuentes

Confundir affordance con decoración lleva a diseñar elementos que parecen interactivos pero no responden. Otro error es depender de iconos sin contexto o esconder acciones importantes hasta que se pasa el ratón. Evita también asumir que una señal será evidente para todas las personas: experiencia previa, dispositivo y capacidades influyen en su interpretación.

Conceptos relacionados

Profundiza en el Journal

Explora el área temática

Fuentes