Affordances en el diseño de objetos e interfaces

¿Te gusta este artículo? Compártelo


¿Qué es un affordance?

El concepto de affordance se ha convertido hoy día en fundamental dentro del diseño en general, y del diseño de interacción en particular, pero realmente proviene del ámbito de la psicología cognitiva, en concreto de la Teoría ecológica de la percepción visual propuesta por J. Gibson a finales de los años 70 [3]. Según esta teoría, los affordances son las posibilidades de acción que ofrece el entorno que pueden ser percibidas y aprovechadas por los humanos (también por otros animales). 

Gibson cree que no es necesario una representación mental que medie la percepción, es decir, no es necesario que la persona haya aprendido el significado de los objetos que encontramos en la naturaleza, sino que la percepción es directa porque el objeto “resuena” de alguna forma con nuestra anatomía o nuestro comportamiento. Por ejemplo, hay piedras que invitan a cogerlas, lanzarlas, usarlas o apilarlas porque tienen un tamaño y forma que se ajusta al de nuestra mano, mientras que otras son más grandes o más pequeñas y no permiten esa función. 

Piedras de diferente tamaño y forma, que ejemplifican el concepto evolutivo de affordance.
Algunas piedras transmite la posibilidad de cogerse, apilarse o lanzarse, otras no

Otro aspecto importante del concepto es que el affordance no es solo una característica del entorno, sino de la interacción de este con la persona. Por ejemplo, no tiene sentido decir que una piedra tiene affordance para ser lanzada. La misma piedra puede ofrecer esa posibilidad para un adulto pero no para un niño porque su mano sea más pequeña, o su fuerza menor.

Estas ideas iniciales de Gibson mostraron tener algunas carencias para explicar cómo percibimos el mundo, de forma que otros autores que desarrollaron la teoría ecológica posteriormente reconocen la necesidad de un aprendizaje: no todo se percibe directamente, sino que algunos affordances necesitan ser descubiertos por las personas. Dicho de otra forma, los affordances de un objeto son importantes, pero también la capacidad de que estos puedan ser explorados y aprendidos por las personas.

Los affordances en el ámbito del diseño 

Los affordances para Donald Norman

El principal culpable de introducir los affordances en el mundo del diseño es Donald Norman, quién a partir de los años 80 lo ha utilizado para hacer referencia a aquellas propiedades de un objeto o un interfaz que nos transmiten su función de manera intuitiva. El concepto resultó ser convincente y atractivo para los diseñadores, por lo que se adoptó rápidamente en la profesión, aunque en realidad no se ajusta a la idea original de Gibson (los affordances reales), sino más bien sólo a aquellas situaciones en las esos affordances existen y además son percibidos.  

Como Norman mismo reconoce más tarde [4], su idea original era hablar sólo de los affordances percibidos, ya que a los diseñadores lo que interesa es saber cómo transmitir a los usuarios que una acción es posible. En realidad la posibilidad de acción no siempre tiene porqué ser visible, conocida o deseada por nadie, y de hecho, la existencia o no de affordances y su percepción da lugar a 4 tipos de situaciones [1]:

  1. Affordance perceptible: La posibilidad de acción existe, y además se percibe por el usuario. Son características de los objetos que nos facilitan su uso, porque intuitivamente podemos saber qué se puede hacer, cómo y para qué. El diseñador debería trata de hacer perceptibles todas las posibilidades relevantes para los objetivos del usuario.
  2. Affordance oculta: La posibilidad de acción existe, pero esta no se muestra al usuario.  Es también útil en el diseño, porque puede haber posibilidades que no queremos que el usuario conozca, o al menos no en un primer momento. En ese caso la persona tendrá que descubrir su utilidad mediante exploración, y la función del diseñador será facilitar ese descubrimiento.
  3. Affordance falsa: La posibilidad de acción no existe, pero el usuario percibe erróneamente que sí la hay. En el ámbito del diseño, este tipo de affordances hay que evitarlos, ya que puede provocar errores e ineficiencias en el uso.
  4. Rechazo correcto: Ni hay posibilidad de acción ni los usuarios perciben que la haya. 

Norman introdujo posteriormente el concepto de significantes (signifiers) para hacer referencia a los elementos de diseño que permiten a los usuarios descubrir un affordance. Estos se confunden frecuentemente, pero no son lo mismo, y Norman pide que nos centramos en los significantes más que en los affordances. Lo explica con ejemplos en el siguiente video: 

Un ejemplo de affordance en el diseño de objetos

Todo lo anterior quizá pueda entenderse mejor con el siguiente ejemplo. Analicemos por un momento los siguientes objetos:

Los affordances son un elemento importante en el diseño de objetos o interfaces, como pueden ser los instrumentos de cocina.
Dos objetos que pueden ser desconocidos, pero que nos transmiten su función

Si viésemos por primera vez estos objetos, nos preguntaríamos, ¿qué son? ¿para qué sirven? ¿qué puedo hacer con ellos? Puede que intuitivamente pensáramos que son algún tipo de instrumento de cocina, ya que tienen una parte afilada y dentada que podría usarse para pelar o cortar alimentos. En el objeto de la izquierda, hay un elemento de color amarillo que quizá pueda extraerse y usarse como un tenedor. Los colores de estos objetos recuerdan a los del aguacate (marrón oscuro por fuera, amarillo-verde por dentro). Las formas redondeadas del objeto de la derecha también recuerdan al aguacate. Pero, ¿cómo se usan exáctamente?

Efectivamente, ambos objetos son instrumentos de cocina para pelar y preparar aguacates (el de la izquierda, de la marca Lacor, y el de la derecha de la marca OXO), pero son diferentes en cuanto a su affordance. Centrémonos en una de sus funcionalidades, la posibilidad de extraer el hueso de aguacate de manera limpia y rápida: 

Los instrumentos de Lacor y OXO permiten sacar el hueso de diferente forma, tienen diferentes affordances.
El funcionamiento de ambos instrumentos

En el objeto de la izquierda (Lacor) hay un affordance oculto. Aunque es posible usarlo para extraer el hueso de aguacate, el usuario tendrá que explorar las posibilidades o leer el manual de uso para saber que deslizando la pieza amarilla podrá sujetar el hueso y extraerlo. Por otra parte, este instrumento también ofrece un affordance falso: el usuario en un primer momento pensará que la pieza verde es un tenedor y tratará de extraerla del conjunto (lo cual no es posible).

En el objeto de la derecha (OXO), la funcionalidad de extraer el hueso es más intuitiva. El agujero redondo del centro tiene el mismo tamaño y forma que el hueso, y las cuchillas interiores informan que al acoplar el instrumento el hueso quedará clavado para luego extraerlo. Diremos entonces que existe un affordance perceptible. En comparación con el modelo de Lacor, este también habilita para el rechazo correcto de la función de usarlo como tenedor (no transmite esta posibilidad) además de otras muchas para las que no está diseñado.

Los affordances en el diseño de interacción

El concepto de affordance que aplicamos al diseño de la interacción es mucho más cercano a los affordances percibidos y los significantes de Norman que al de la psicología gibsoniana. Esto es así porque el interés de un diseñador de interacción no es tanto conocer las funcionalidades reales que ofrece un programa informático, una app o un sistema web, sino usarlos para mejorar su usabilidad y experiencia de usuario. Para ello deberá a) definir la jerarquía de affordances que permitirán al usuario conseguir su meta, y b) ayudar a los usuarios a percibir mejor esos affordances

Definiendo la jerarquía de affordances

Un primer paso para este objetivo es definir qué es posible hacer en la interfaz y definir la jerarquía de affordances. Definir la jerarquía implica también pensar en la secuencia adecuada en la que estos deben ser perceptibles. Volviendo al ejemplo anterior del pelador de aguacate, el affordance de sacar el hueso solo es perceptible una vez que se usado la parte afilada para abrir el aguacate, y el laminador solo tiene sentido una vez que hemos extraído el hueso. 

Desde la Teoría de la actividad se entiende que las actividades que hacemos las personas se componen de acciones, que a su vez se componen de operaciones. Por ejemplo, imaginemos la situación en la que una persona quiere concertar una cita con otra persona enviándole un mensaje a través de Whatsapp (esta sería la actividad):

Mensaje de Whatsapp ¿Quedamos esta noche para cenar? y emoticonos de Hamburguesa y Vino
Ejemplo de mensaje de Whatsapp

Para conseguirlo, antes deberá seguir unos pasos: 1) elegir el contacto de la persona adecuada, 2) escribir el texto del mensaje, 3) insertar el emoticono apropiado, y 4) enviar el mensaje. Todo esto serían algunas acciones de las que se compone la actividad de concertar una cita mediante Whatsapp. 

Una primera pantalla muestra la escritura del mensaje, la siguiente la selección de emoticonos.
Acciones necesarias para escribir el mensaje de Whatsapp

Además, para cada una de esas acciones sería necesario realizar una serie de operaciones manuales. Por ejemplo, para la acción «insertar el emoticono» hay que pulsar el icono de cara gris junto a la caja de texto, pulsar el icono la categoría “Comida y bebida” (la taza),  deslizar el scroll, pulsar el icono de la hamburguesa y luego el de la copa de vino. 

El affordance se muestra en el tamaño y aspecto de los iconos al realizar operaciones.
Operaciones necesarias para seleccionar emoticonos y enviar mensaje de Whatsapp

Ayudando a los usuarios a percibir los affordances

Una vez se han definido una jerarquía de affordances, es posible diseñar una serie de aspectos que ayuden a los usuarios a percibir estos. Hartson [2] diferencia entre cuatro tipos de affordances que pueden aplicarse a los diferentes niveles de la jerarquía:

  • Affordance funcional: Características de diseño que ayudan al usuario a desempeñar una actividad con propósito. Se trata de pensar no solo si una posibilidad de acción existe y se percibe, sino también si esta es útil para conseguir su objetivo final.
  • Affordance físico: Características de diseño que ayudan a los usuarios en sus operaciones, como manipular un objeto o interactuar con un elemento del interfaz. 
  • Affordance cognitivo: Características de diseño que ayudan a los usuarios en sus acciones cognitivas, como pensar o conocer algo sobre un objeto y las consecuencias de su activación. 
  • Affordance sensorial: Características de diseño que ayudan a los usuarios en sus acciones sensoriales (p.ej. ver u oír), les permite recibir información por medio de los sentidos para dar soporte al affordance físico y cognitivo. 

Un diseñador de interacción que está definiendo una interfaz debería realizarse estas preguntas para considerar los affordances en su trabajo (no necesariamente en este orden):

  1. ¿La funcionalidad a la que esta interacción da acceso es útil para lograr los objetivos del usuario (affordance funcional)?
  2. ¿El elemento es fácil de acceder, activar o manipular para los usuarios (affordance físico)?
  3. ¿El diseño incluye señales claras y comprensibles sobre cómo usarlo y el resultado esperado (affordance cognitivo)?
  4. ¿Pueden los usuarios detectar fácilmente los aspectos visuales (u otros) del elemento, y ayudan estos a los affordances físicos y cognitivos (affordance sensorial)?

Respondamos estas preguntas con el ejemplo anterior de Whatsapp, centrándonos en el botón “Enviar mensaje”:

Cuando la barra de escritura está vacía, se muestra el icono "Grabar", y cuando escribimos un texto el icono "Enviar mensaje"
Dos instancia diferentes de la barra de escritura y envío de mensajes de Whatsapp
  1. Affordance funcional. ¿Es útil el botón enviar el mensaje? Depende del momento en que el usuario esté dentro de la jerarquía de acciones: la operación de pulsar el botón “Enviar mensaje” no es útil cuando la caja de texto aún está vacía (por ello el botón no se muestra) y se vuelve significativa para el objetivo final del usuario una vez que se han escrito el texto y los emoticonos (y es entonces cuando se muestra). 
  2. Affordance físico. El tamaño del botón “Enviar” se ajusta al de la yema del dedo, y puede activarse sin cambiar la posición de la mano mientras se escribe. Si estuviese situado en la parte superior de la pantalla o fuera muy pequeño, no sería fácil interactuar con él.
  3. Affordance cognitivo. Whatsapp usa símbolos, metáforas visuales y convenciones que se usan habitualmente en el diseño de apps (p.ej. un icono de un clip sugiere que activándolo se pueden adjuntar elementos, una caja vacía con un cursor indica que se puede introducir texto en ella, etc.). Son aspectos que los usuarios han aprendido a lo largo de años de uso de interfaces. En el caso del botón “Enviar”, el triángulo blanco recuerda la acción “Play”, pero al mismo tiempo es una metáfora de un avión de papel que nos sugiere que lo escrito se puede enviar a un destinatario. 
  4. Affordance sensorial. El color verde usado para destacar el botón “Enviar” o el contraste del color blanco del icono que ayudan a percibirlo y distinguirlo de otros elementos. El color también refuerza el affordances cognitivo, ya que el color blanco del icono que representa “Enviar mensaje” ayuda a percibir la metáfora del avión de papel. 

Referencias

[1] Gaver, W. W. (1991). Technology affordances. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 79-84).

[2] Hartson, R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & information technology, 22(5), 315-338. 

[3] Kaptelinin, V. (2014). Affordances and design. En IDF, The Encyclopedia of Human-Computer Interaction, 2nd Ed. 

[4] Norman. D. (1999) Affordances, conventions and design Interactions, 6 (3), 38-43.

Saber más

Mor, E. (Coord.) (2018). Design toolkit: Affordances. Barcelona:UOC. 

Pucillo, F., & Cascini, G. (2014). A framework for user experience, needs and affordances. Design Studies, 35(2), 160-179. https://doi.org/10.1016/j.destud.2013.10.001

Créditos imagen: Rock photo created by freepik – www.freepik.com


¿Te gusta este artículo? Compártelo