Todos notamos algo raro cuando nos encontramos con un diseño deficiente. Sea una interfaz de usuario, un flujo de trabajo o algo tan aparentemente simple como un interruptor. Un diseño deficiente nos produce frustración, nos enfada, nos limita. Queremos hacer algo y no podemos. Además sentimos que la culpa es nuestra. Cómo puedo ser tan idiota y no saber hacer funcionar esto. Pues no! La culpa no es tuya sino de un mal diseño en el que no se han empleado los principios fundamentales de interacción.

Algunos ejemplos que seguro que has sufrido en carnes propias:

• Ese USB que has intentado conectar 2 veces y hasta la tercera no ha entrado bien. Por suerte solventado con el maravilloso invento del USB C.
• Esa llave con la que intentas abrir la puerta y que no entra de ninguna forma. ¡Ah! resulta que era la otra llave…
• Ese interruptor que enciende siempre la luz que no quieres encender.
• Ese botón que has pulsado ya cinco veces y sigue sin mandar el formulario…

Diseño centrado en la experiencia

Los mejores diseños no están marcados por las mejores funcionalidad o la mayor rapidez (que también) sino por proporcionar al usuario final una experiencia de uso agradable. Sí, es algo muy subjetivo, pero es que cada persona utilizará nuestro diseño de manera diferente. Esto se debe, como veremos más adelante, debido a que cada uno tiene un modelo mental propio de nuestro producto.

Tendremos que tener en cuenta diferentes factores que hagan que nuestro diseño cumpla con una serie principios fundamentales para poder proporcionar esa experiencia que espera tener el usuario de nuestro producto o servicio. Eso quiere decir que nuestro diseño tiene que permitir al usuario:

• descubrir las funcionalidades de nuestro sistema, bien por sí solo a través de sus afordancias o bien a través de los significadores que añadamos durante el diseño.
• sentirse como un experto, que sabe y entiende que es lo que se está haciendo en todo momento, para ello nuestro producto debe presentar un mapeo correcto de las funcionalidades, presentar una clara retroalimentación de sus acciones y permitirle elaborar  un modelo conceptual correcto de como funciona nuestro sistema.
• y por supuesto, una lectura clara para lo cual debemos cuidar de presentar todo de manera limpia, agradable a la vista y accesible para todos. (futuro enlace articulo sobre accesibilidad en el diseño).

Afordancias, significadores, mapeos… vayamos por partes…

Afordancias

El término afordancia (¿o proporcionamiento? si lo traducimos literalmente del inglés) se refiere a la relación entre las propiedades de un objeto (por ejemplo un interfaz) y las capacidades que tiene el usuario de determinar las formas en las que este objeto puede ser usado. Son las diferentes cualidades de un objeto que permiten definir las funciones que este tiene a partir de su apariencia. Las afordancias existentes dependen tanto del diseño del objeto como de los conocimientos que tenga el usuario.

En el caso de que las afordancias no puedan ser percibidas de manera directa es necesario señalizarlas. Para ello tendremos que hacer uso de los significadores. Por otro lado es posible que aparezcan afordancias de las que los diseñadores no son conscientes, y es el usuario final quien da un uso inesperado a nuestro producto.

Significadores

Como dieñadores siempre tenemos el problema práctico de cómo diseñar herramientas que sean fáciles de entender. Por suerte, y para facilitarnos las cosas podemos (y debemos) hacer uso de los significadores.

Mientras que las afordancias determinan que acciones son posibles sobre un determinado interfaz (por ejemplo pulsar sobre la pantalla del móvil), los significadores comunican al usuario dónde la acción se ha de desarrollar (por ejemplo el dibujo de un botón).

Los significadores, por tanto son cualquier marca, sonido u otro indicador perceptible por el usuario que le comunica cuál debe ser su comportamiento en un momento determinado. Desde un simple texto de «pulse aquí», el subrayado de los enlaces, el icono de un carrito, hasta más sofisticadas animaciones que explican los primeros pasos en una aplicación.

Por el contrario, un uso excesivo de estos elementos y su aplicación para definir funciones simples es un indicador de que nuestro diseño es deficiente. Además debemos tener cuidado con el uso de significadores falsos o erróneos que puedan indicar al usuario una funcionalidad que no existe (como por ejemplo textos subrayados que no son enlaces).

Mapeos

En matemáticas, los mapeos son las relaciones que existe entre los elementos de dos conjuntos. En referencia al diseño, representan la relación entre diferentes elementos de control (por ejemplo los interruptores del salón), los elementos que acciona (luces del salón) y la forma en la que lo hace (encendido, apagado o ajstando la intensidad de la luz).

Un adecuado uso de los mapeos hace que nuestro interfaz de usuario sea más fácil de aprender y de utilizar. Para ello se debe establecer una relación lógica entre el controlador, las acciones que realiza y el resultado esperado por el usuario. Por ejemplo, es habitual utilizar las teclas Esc para salir o Enter para enviar, etc.

En el caso de interfaces complejas normalmente se debe hacer uso de técnicas como la agrupación de elementos con funcionalidades similares (por ejemplo en menús desplegables) o la proximidad de los controladores a los elementos sobre los que accionan.

Si es posible debemos utilizar mapeos naturales, de lo contrario el usuario de nuestro producto debe tener un modelo mental correcto de su funcionamiento. Además los mapeos naturales harán que nuestra aplicación sea más fácil de usar.

Retroalimentación

Para que la retroalimentación (o feedback) de nuestros diseños sea funcional esta debe ser:

• Inmediata: ya que el más minimo retraso en una respuesta puede ser desconcertante para el usuario.
• Corta: se debe evitar hacer esperar al usuario, sobretodo en el caso de que después de realizar una determinada operación al usuario puede obtier un error.
• Informativa: en el caso de que la acción solicitada por el usuario requiere de un largo periodo para su ejecución es recomendable ofrecer información adicional sobre el estado del proceso. Además los mensajes presentados deben ser claros y fáciles de entender por el usuario. En el caso de presentar errores estos deben ofrecer la información necesaria para su resolución.
• No excesiva: abrumar al usuario con mensajes constantemente es también muy mala idea. Produce una distracción innecesaria y hace pasar a segundo plano la tarea principal de nuestra herramienta. También puede causar que el usuario acabe por ignorar todos los comunicados incluido los más importantes.
• Jerarquizada: los comunicados más importantes deben ser resaltados (normalmente en rojo) de modo que capturen la atención del usuario. Por contra información menos relevenate para el usuario debe ser presentada de forma que interfiera lo menos posible. En caso de que en nuestro sistema se puedan dar diferentes mensajes críticos a la vez tendremos que ser capaces de establecer también una priorización correcta para cada uno de ellos.

En caso de no adecuarnos a estas reglas, si el sistema de retroalimentación de nuestro producto está mal diseñado en ocasiones puede ser incluso mejor no prestar ninguna información al usuario.

Modelo conceptual

Por último, para que nuestro usuario entienda lo que está haciendo al utilizar nuestro producto, este debe contar con un modelo conceptual. No es más que la explicación que le da a nuestras funcionalidades y su idea de lo que hace nuestra aplicación. Normalmente además, este modelo será muy simplificado ya que no tiene que ser completo o preciso, siempre que esta resulte útil.

Un buen ejemplo de modelo conceptual que usamos a diario son las nociones de archivo y carpeta en nuestro ordenador que sirven para que entendamos facilmente la manera de guardar nuestros documentos en una determinada localización del disco duro.

Pueden existir diferentes modelos conceptuales para un mismo producto. No es la misma la representación que tenemos nosotros cómo diseñadores a la que puede tener un usuario. Los modelos conceptuales que encontramos en la documentación técnica de muchos productos suelen ser complejos y detallados. Los modelos que normalmente tenemos en la cabeza más simples e intuitivos. Estos son los llamados modelos mentales. Son los que empleamos a la hora de utilizar cualquier producto.

Por tanto, cada usuario tendrá un modelo mental, y salvo que este lea la documentación (suponiendo que haya documentación) este se formará a través de las claves que obtenga del diseño de nuestro interfaz de usuario. Para ello debemos emplear correctamente todos los elementos ya mencionados. Debemos marcar correctamente las afordancias, significadores, restricciones y mapeos de modo que el usuario se haga con un correcto modelo conceptual del funcionamiento de nuestra aplicación.

En el caso de que el usuario se haga un modelo mental erróneo de nuestro producto este tendrá dificultades para utilizarlo y además será más propenso a cometer errores en las tareas que deba realizar con nuestro sistema.

Conclusión

Teniendo en cuenta todos estos elementos, un buen diseño requiere planificación, atención por el detalle y sobre todo entender el modo en el que nuestros usuarios se comportan y las capacidades con las que cuentan. Deben hacerse un modelo mental correcto de todo el sistema o aplicación que a través del diseño del interfaz de usuario. Durante concepción tendremos que aplicar todos los principio fundamentales de interacción.

Para indagar con más detalle en cada uno de los elementos que conforman los principios fundamentales de interacción para el diseño de interfaces de usuario os recomiendo el libro de Don Norman, The design of everyday things. Es un clásico y un referente para el diseño de cualquier producto. También está disponible en español aunque en la edición anterior (y sin actualizar) bajo el título La psicología de los objetos cotidianos.

Por último cabe mencionar que el origen del término afordancia proviene del campo de la percepción visual. Fue acuñado por el James Gibson en su libro The Ecological Approach to Visual Perception.