¿Alguna vez, frente a una puerta, has dudado entre tirar del tirador y empujarlo? Un tirador bien diseñado le muestra a la mano el recorrido que debe seguir, como si dijera sin palabras «agárralo así». En diseño, esta propiedad por la que un objeto sugiere al usuario qué acciones son posibles se denomina «affordance» (Affordance).
En pocas palabras, la affordance es la relación por la cual las características físicas y perceptivas de un objeto permiten al usuario realizar una acción o lo invitan a hacerlo. Es esa sensación que hace que el dedo se acerque de forma natural a un botón que sobresale un poco, aunque no lleve escrito «pulsa aquí».
Desde la perspectiva del diseño, este artículo explica de forma accesible cómo surgió la affordance y qué es la affordance percibida, cómo se relacionan con los significantes (Signifier) y las restricciones, qué ejemplos encontramos en la vida cotidiana y en entornos digitales, y qué aspectos conviene revisar al diseñar.
Concepto de affordance y su aplicación al diseño
¿Qué es la affordance?
El psicólogo ecológico James J. Gibson propuso el término affordance en la década de 1970. Para él, una affordance era la propia posibilidad de acción que el entorno ofrece a un organismo. Una superficie plana permite caminar o sentarse, y un saliente del tamaño de un tirador permite agarrarlo. Esta relación ya existe en el mundo físico con independencia de cualquier mensaje publicitario.
Donald A. Norman popularizó el término en el ámbito del diseño. En La psicología de los objetos cotidianos, recalcó que un diseñador puede intervenir tanto en las posibilidades reales como en la forma en que el usuario se da cuenta de ellas. Más adelante, Norman distinguió entre «affordance percibida» (Perceived Affordance) y «significante» (Signifier) para reducir los malentendidos.
- Affordance real (Real Affordance). Es la acción que el objeto permite físicamente. Un botón en pantalla no se puede «presionar» en sentido físico. Solo se puede tocar o hacer clic en él.
- Affordance percibida (Perceived Affordance). Es la acción que el usuario, por lo que ve y percibe, cree poder realizar. Las sombras, el efecto de relieve y los cambios del cursor generan esa percepción.
Un buen diseño hace coincidir las posibilidades reales con las percibidas. Si en una puerta que se abre empujando solo se instala un tirador que invita a tirar, la posibilidad real y la percibida dejan de coincidir y el resultado se convierte en un caso célebre de mal diseño, como la «puerta de Norman».
Significantes y restricciones, dos ejes que hacen visible la affordance
La affordance por sí sola no hace visibles todas las acciones. Norman llamó «significante» (Signifier) a la pista que ayuda al usuario a encontrar la acción correcta y definió la «restricción» (Constraint) como el mecanismo que impide o limita las acciones incorrectas.
(1) Significante (Signifier)
Es una señal que indica «aquí y de esta manera», como un texto azul subrayado, una flecha de «Siguiente» o la curva de la hendidura de un tirador. El significante refuerza la affordance percibida y es distinto de la affordance en sí.
(2) Restricción física (Physical Constraint)
Limita físicamente lo que se puede hacer con el cuerpo o con una herramienta, como ocurre con la forma de un conector USB-A que solo encaja de un lado. El diseño impide que el conector entre si está orientado en la dirección incorrecta.
(3) Restricciones lógicas y culturales
Aquí entran convenciones ligadas al sentido de lectura, como que la izquierda indica «Anterior» y la derecha «Siguiente», y convenciones culturales, como que el rojo indica peligro o alto. Si se pasa por alto la cultura, el significante produce el efecto contrario.
(4) Función forzosa (Forcing Function)
Es una restricción fuerte que impide saltarse una acción obligatoria, como la secuencia de un cajero automático que exige retirar la tarjeta antes de recibir el efectivo. Se utiliza con frecuencia para mejorar la seguridad y prevenir errores.
La affordance, el significante y la restricción cumplen funciones distintas y no se sustituyen entre sí. La affordance establece «qué se puede hacer», el significante señala «dónde y cómo» y la restricción bloquea «las vías que no se deben seguir». Entenderlos como una estructura de tres partes facilita la revisión del diseño.
Ejemplos sencillos para entender la affordance
Un concepto abstracto se vuelve claro en cuanto podemos tocarlo con las manos. Los casos habituales de la vida cotidiana y de las pantallas se agrupan en tres categorías.
[Caso 1] Puertas y tiradores
Una puerta que solo tiene una placa metálica plana sugiere con claridad que hay que empujarla, mientras que un tirador en forma de anilla sugiere que hay que tirar. El problema surge cuando se instala un tirador de anilla en una puerta que hay que empujar. Si la affordance percibida entra en conflicto con la acción real, el usuario vacila cada vez.
[Caso 2] Tapas de botellas e interruptores
Una tapa con la rosca visible indica que hay que girarla, y la palanca saliente de un interruptor grande indica que hay que bascularla. En cambio, aunque un interruptor de luz que solo tiene un panel táctil liso puede accionarse con un toque, su affordance es débil para los usuarios principiantes, que acaban dependiendo de una etiqueta adhesiva como significante.
[Caso 3] Botones de aplicaciones e interfaces de tarjetas
Una sombra que da la impresión de que un elemento está ligeramente elevado, una animación al pulsarlo y el contraste de color entre los estados activo e inactivo son ejemplos de affordance percibida en una pantalla digital. Si una lista de tarjetas se ve ligeramente recortada a los lados, sugiere que se puede deslizar. Si termina justo en el borde, cuesta percibir que se puede desplazar.
En todos estos casos, son la forma y la respuesta del sistema las que enseñan cómo actuar, en lugar de un manual. La affordance cumple su función cuando el usuario puede deducir cuál es la siguiente acción sin recurrir al ensayo y error.
Cómo evaluar la affordance en la práctica
Reducir la affordance a «botones bonitos con relieve» empobrece el diseño. Al crear interfaces de usuario para productos, servicios o contenidos, conviene incorporar las siguientes comprobaciones a la rutina de trabajo.
(1) Haz la prueba de los primeros 5 segundos
Muestra la pantalla o el prototipo sin dar explicaciones y pregunta únicamente «¿Qué crees que puedes hacer ahora?». Si la respuesta difiere de la acción esperada, la affordance percibida o el significante son insuficientes.
(2) Anota en paralelo lo real y lo percibido
Escribe en dos columnas las «acciones posibles» y las «acciones que el usuario cree posibles» y compáralas. Si detectas vacíos o contradicciones, refuerza los significantes mediante la forma, el movimiento o el texto.
(3) Evita depender solo de los significantes
Una interfaz que se sostiene únicamente con mensajes como «Haz clic aquí» revela un exceso de significantes y una falta de affordance. Haz visible la acción mediante la forma, la ubicación y la respuesta del sistema, y deja el texto como apoyo.
(4) Ten en cuenta también la accesibilidad
Los botones que solo se distinguen por el color y los controles que únicamente admiten gestos amplios de la mano hacen que ciertas acciones dejen de estar al alcance de algunos usuarios. Una affordance inclusiva permite realizar la misma acción cuidando el tamaño y el contraste y ofreciendo también formas de realizarla mediante el teclado y el lector de pantalla.
El relieve exagerado y el exceso de animaciones pueden generar ruido visual y ocultar las acciones realmente importantes. La affordance siguió presente tras la llegada del diseño plano y pasó a expresarse mediante señales más discretas, como las sombras, los espacios en blanco, el movimiento y los cambios de estado. El criterio que prima sobre el estilo de moda es si el usuario puede deducir cuál es la siguiente acción.
Un diseño que la mano entiende de inmediato, sin necesidad de palabras. El primer paso para diseñar con la affordance en mente es hacer visibles las acciones posibles mediante la forma y la respuesta del sistema, y reducir así las interpretaciones equivocadas.
