DÍA 22 / 2015

Yo de Affordance no sé nada, o ¿sí?

Te ha pasado alguna vez… ¡confiesa! te has hecho el tonto con las manos en los bolsillos y has disimulado mirando hacia otro lado. Luego has pensado: “¿ de qué está hablando este hombre?” Affor… ¿qué? Pero en realidad te dedicas a diseñar “pantallitas”, te encanta el mundo digital y nunca te olvidas de tus usuarios. Si es así ya sabes de lo que estoy hablando o quizás cuando lo leas digas: “esto lo hago yo todos los días”.


Chiste-botones

Un Yo dirigido a cada uno de los que vais a leer este artículo. ¿Os habéis preguntado qué es eso del affordance? Porque la palabra no es nueva, el concepto tampoco, pero como nos gusta poner palabritas a todo…

En plan cultureta os diré que el término que JJ Gibson acuñó en la década de 1970 decía: “Es la relación entre un entorno y un actor”.

Ya, yo también me quedo igual pero… affordance va más allá de la psicología del comportamiento o cognitiva y nos sirve a nosotros para enfrentarnos a resolver mejor nuestros diseños. Cambiad ese nosotros por diseñadores y si os he picado un poco quizás haya conseguido que paséis unos minutos más conmigo.

Entonces... ¿Qué es en realidad el affordance?

Podríamos decir que todos los objetos que nos rodean desprenden características que de forma intuitiva nos transmiten funcionalidades y usos. Es decir, que todo tiene affordances, algunos más evidentes que otros. Una puerta por ejemplo, puede ser tocada. Podemos llamar a la misma. La posibilidad de llamar a esa puerta es su potencialidad.

Pensemos ahora en una interfaz de usuario y más en concreto en un enlace. La posibilidad de pulsar sobre ese enlace le da su potencialidad a este elemento.

Al final, lo que tenemos delante de nosotros es una evolución tecnológica de las interfaces digitales, que suena así como muy pedante, pero que viene a detectar todas las posibles acciones que como usuarios podemos hacer con los distintos elementos gráficos que vamos descubriendo al navegar cualquier interfaz.

Si lo comparamos un poco con nuestro día a día y nos centramos en el mundo físico, las propias características de los objetos como el tamaño, la forma o el peso ya nos proporcionan pistas sobre lo que podríamos hacer con ellos. Me voy al típico plato plano. Es amplio y nada profundo. Sólo por su forma nos indica qué tipo de alimentos podemos poner sobre él. Su potencialidad está en poner alimentos que por norma general no suelen ser líquidos como una sopa sino más bien, todo tipo de aquéllos que llamamos segundos platos. Otro ejemplo, una toalla de baño. Dependiendo de su forma nos va a decir dónde utilizarla, en lavabo, en ducha…, pero es su composición, su tela, la que al final nos da la potencialidad del objeto. Y así podríamos ir uno por uno.

Llegados aquí, quizás podríamos ver tres tipos de affordance:

  • Perceptible: cuando las características de un objeto implican una acción, es decir, el básico.
  • Oculto: cuando un objeto tiene affordances que no son tan obvios; por ejemplo, un simple mechero en principio no tiene como uso principal abrir una botella de chapa pero llegado el momento de no tener abridor, nos puede dar el servicio.
  • Falso: cuando sabes o percibes que puedes hacer algo con un objeto pero al intentarlo no sucede nada. Vas a teclear algo en tu teclado y por algún motivo (pilas, desconexión) no ves el resultado en pantalla. El affordance del objeto existe, puedes liarte a escribir como un loco, machacar el teclado y pegarle a cada tecla como si fuera un tambor pero no pasa nada, no hay función.

Vayamos ahora al mundo digital. En un ordenador hay muchas cosas que podríamos hacer con cualquier aplicación, sitio web o programa; pero con una limitación: no tienes pistas físicas, no te dan esa información. En su lugar, todo depende de pistas visuales o affordances. Por supuesto que cambia el contexto y el lenguaje con un código propio que hay que saber manejar para poder crear diseños intuitivos y fáciles de usar. Todos hemos utilizado aplicaciones para distintas acciones como hacer reservas, rellenar formularios o consultar datos. Aquí es cuando empezamos a hablar de Experiencia de Usuario.

Para ver cómo el affordance afecta al diseño, podríamos hacer una pequeña categorización por tipos. Sin querer extenderme mucho podríamos ver los siguientes:

1. Explícito

Es el perceptible, el que se ve en los objetos, tanto por su forma como por el texto que lleven. Un botón que te dice “Cerrar” con pinta de botón, apariencia elevada de cualquier tipo que al final te está diciendo: “voy a pulsar sobre él y voy a cerrar”. Es obvio. “Habas contadas” que decía mi profesor.

El lenguaje es fundamental y guía a los usuarios a través de las pantallas. Inputs que digan en un formulario a través de sus etiquetas lo que tiene que introducir en cada uno el usuario: Nombre, Apellidos, Teléfono, Código Postal, ya le dicen al usuario qué textos va a ir introduciendo en cada uno. Aunque no es lo único porque todos recordamos formularios que ponían esto mismo pero metían toda la información en un cuarto de pantalla. Es necesario un poquito de espacio y un diseño adecuado para esos textos.

2. Repetitivo

Quizás este sea el que más me gusta porque siento que cada vez hay más gente hablando el mismo idioma en el que trabajo. Los podríamos llamar patrones. El logo de nuestra web en la cabecera redirige siempre a la home, los enlaces podrán ir sin subrayar pero si veo uno subrayado es un enlace sí o sí, o puedo utilizar el icono que yo quiera para ir a la home pero si utilizo la casita, será blanco y en botella.

Son convenciones a las que hemos llegado a base de tiempo y miles de usuarios han ido adaptándolas a su lenguaje. Muy potentes si se sabe que los usuarios las conocen porque nos permite no ser tan explícitos. Al mismo tiempo tenemos que asegurarnos de que los usuarios (que siempre nos sorprenden) las conocen como nosotros. El menú de hamburguesa tan extendido hoy en día puede que llegado el momento no sea transparente para algunos usuarios y tengamos que recurrir a ponerle texto hasta que los usuarios se familiaricen con él.

Por cierto, aquí me gustaría hablar de un tipo de affordance metafórico que sobre todo ocurre con los iconos y además lo decidimos entre todos. A la pregunta: ¿Menú hamburguesa? Pero si no se parece en nada. Pues quizás veamos el pan y la carne en el icono o quizás no pero si al final la metáfora nos sirve para entender que al pulsar ese icono tendremos un menú detrás, habremos dado con la potencialidad deseada.

3. Elementos Ocultos

En realidad es muy parecido al de objetos físicos. El tema aquí es que hasta que no hacemos alguna acción sobre el elemento no vamos a poder ver qué tiene oculto. Por ejemplo, los estados hover sobre los botones para saber que pasas por encima de ellos y te sirven de guía o el propio botón activo del que no lo está. Lo mismo pasa con menús desplegables, combos, pestañas que cambian vistas, etc. Hasta que no pulsamos sobre ellos no vemos lo que tienen en un segundo nivel.

Los affordances ocultos tienen como misión principal simplificar la navegación. No poner todo a primer nivel con tantas llamadas de atención que bloqueamos al usuario en su toma de decisión. El problema es que el usuario tiene que descubrirlos y dependemos de la experiencia adquirida durante la navegación, la curva de aprendizaje y el nivel digital que tenga el individuo.

Un pequeño apunte sobre simplificación. En este artículo no me he parado en valorar el Flat Design Vs Affordance pero a veces se nos va de las manos seguir una tendencia y caer de repente en una interfaz que, de sencilla, la diseñamos con unos elementos que no invitan a la acción. Es necesario siempre valorar los riesgos de simplificar en exceso tanto elementos como interfaz.

4. Falso

Mejor no tener muchos de estos. Un enlace que no va a ningún sitio, un tiempo de espera con una pantalla en blanco sin ningún tipo de información, ni precarga, un botón que me lleva a un sitio inesperado, un mensaje de error o de caída utilizando un color que en nuestro contexto signifique todo lo contrario a que algo va mal, como por ejemplo el verde, etc.

Si tenemos pasión por el detalle, y es obligatorio tenerla, podemos evitar la gran mayoría de estos falsos affordances y no confundir a los usuarios.

También podríamos hablar de affordances negativos. Imaginaros un elemento inactivo o simplemente que parece que está inactivo. No se trata de decirle al usuario que tiene que hacer algo ya que el elemento que tenemos en ese momento no se puede utilizar.

Otras veces, el elemento no aparece inactivo. Por ejemplo cuando estoy rellenando un formulario de varios pasos pero necesito que el usuario complete toda la pantalla antes de terminar. Si el botón que guarda los datos en esa primera pantalla no está inactivo, el usuario podría pulsarlo automáticamente y salvando mensajes de error, pasar a la siguiente pantalla sin completar correctamente la primera. Hemos hecho un mal diseño al no poner el campo deshabilitado adecuado hasta que todos los anteriores estuvieran rellenos.

Por último, que un botón parezca inactivo y pueda pulsarse sin problemas es un fallo que sin duda tenemos que mirar. Parece obvio pero una mala integración nos puede dar muchos dolores de cabeza.

En definitiva, una serie de términos y conceptos bajo un “palabro” que sirven para tener un mejor conocimiento del diseño, que probablemente sea la causa de unos mejores diseños y den como fruto un mejor diseñador. A esto, definitivamente sí ¿No?

Fuentes

Si has llegado hasta aquí, quizás te guste lo siguiente:

Hassan Montero, Yusef. (2015) Experiencia de Usuario: principios y métodos (Versión Kindle)

Guardar

Guardar

Guardar

Guardar

Miguel Albaladejo

Apasionado del Diseño y la Experiencia de Usuario, emprendedor, naranja y adicto al café. Dame diez minutos y te cuento una batallita de baloncesto.
Si me hablas de zapas pierdo el control.