¿Qué es un "Affordance"?

affordance Donald Normal James J. Gibson web design

El término "affordance" es uno que oirás a menudo en el mundo del diseño web. Aparece regularmente en tutoriales, por lo que este artículo servirá como una definición sólo para aclarar cualquier duda ;)

Definiciones Generales

El término affordance puede ser un poco confuso, por lo que vamos a ver tres términos relativos importantes:

Affordance

Definida originalmente por James J. Gibson allá por la década de 1970, affordances son las posibles acciones entre un objeto y un individuo. La manija de la puerta es uno de los ejemplos utilizados clásicamente; que permite un movimiento de torsión. Sea o no el individuo reconoce la posibilidad de que la acción es irrelevante – el affordance todavía está presente.

Affordance Percibida

El término que a menudo utilizamos hoy en día se hizo la corriente principal de Donald Norman en su libro The Design of Everyday Things (publicado originalmente bajo en nombre de "The Psychology of Everyday Things") y entra en conflicto con un poco con Gibson. Norman tomó la idea conceptual de affordance y se añade a ello la "interpretación humana", que nos da lo que él se refiere como "affordance percibida".

Volviendo a nuestra manija de la puerta, es un objeto cuya forma comunica cómo el usuario debe interactuar con ella. Si se diseña de manera efectiva el usuario va a saber instintivamente si debe empujar, tirar, girar y así sucesivamente.

Norman disfruta de la idea de que affordance debe ser una combinación de acciones que realmente son posibles y que simplemente se perciben como sea posible.

La Affordance percibida es particularmente relevante en el diseño de interfaz, que veremos en un momento.

Significantes

Los Significantes juegan un papel en la definición de Norman. En varias formas, las características de un objeto sugieren para el individuo qué acciones son posibles de realizar con ellos. Los Significantes son las "partes perceptibles de una affordance". Una vez más con el ejemplo la manija de la puerta, su redondez, significa que éste ofrece torsión.

Diseño de Interacción

Como diseñadores web damos forma a la manera que las interfaces aparecen y se comportan, que influyen en la forma en que los usuarios interactúan con ellas, a menudo a través de elementos comunes de la interfaz de usuario, como los botones, los controles de entrada, los componentes de navegación y así sucesivamente.

Utilizamos detalles visuales como significantes que ayudan a los usuarios a cómo perciben y cómo deben interactuar con los elementos de la interfaz.

Todo eso de "Flat"

Qué pantalla de monitor es flat; una colección de píxeles, nada más. Pero por lo que sugiere gráficamente profundidad y dimensión podemos traer affordances percibidas mezcladas para ayudar a los usuarios. Los botones, por ejemplo. ¿Cuál de estos se perciben como "proporcionando" una acción de presión más efectiva?

![]({{ site.baseurl }}/assets/buttons.svg 'La profundidad en el botón inferior "significa" que se puede presionar') La profundidad en el botón inferior "significa" que se puede presionar {:.center}

Este es tal vez el mayor argumento contra el movimiento de diseño flat; la eliminación de detalles en un esfuerzo para ser minimalista a veces puede dificultar las affordances percibidas. Por ejemplo, ¿alguna vez has encontrado un formulario de esta manera?

![]({{ site.baseurl }}/assets/form-input.svg '¿Cuál es el botón?') ¿Cuál es el botón? {:.center}

Al ir al súper minimalismo, han sido despojados cualquier diferencia entre el botón de enviar y las entradas. Significantes (como sombras internas en las entradas y las esquinas redondeadas en el botón) habrían ayudado visualmente a comunicar que las entradas son contenedores y el botón es para "pulsar".

“A good designer makes sure that appropriate actions are perceptible and inappropriate ones invisible.” – Donald Norman

"Un buen diseñador se asegura de que las acciones apropiadas son perceptibles y las inadecuadas invisibles."

Tener en cuenta

  • No todos los usuarios son iguales! Los Affordances no pueden ser percibidos e interpretados de la misma por todos.
  • Las etiquetas y las instrucciones son útiles en el diseño de la interfaz, pero también podemos usar otras señales visuales.
  • En el diseño "Flat" se pueden comunicar affordances igual de efectivas con solo skeuomorphism, haciendo que las acciones estén perceptibles en el diseño.

Otras Lecturas (inglés)


Artículo original en inglés Web Design Glossary: What is “Affordance”? en Tuts+


Gracias por leer. Déjame un mensaje por si las dudas 😉