0. Introducción

En esta entrada vamos a analizar los diferentes principios de la usabilidad de las interfaces, desde un punto de vista práctico, exponiendo para cada principio un ejemplo de cómo se ha tenido (o no se ha tenido) este en cuenta. Para ello se expondrán interacciones con productos físicos y digitales, así como con servicios u otras situaciones que cualquier persona puede experimentar en su vida diaria.

Los principios de usabilidad que tendremos en cuenta son:

1. Coherencia
2. Confirmación
3. Control
4. Errores
5. Punto de Entrada
6. Reconocer antes que recordar
7. Restricciones
8. Accesibilidad
9. Visibilidad
10. Affordance
11. Retroacción

1. Coherencia

• Descripción del principio: Los sistemas son más usables cuando las funciones similares se representan de manera similar.
• Imagen del ejemplo:

• Dispositivo e interfaz: Alargadera eléctrica
• Contexto del ejemplo y la interacción: Los enchufes de una alargadera eléctrica mantienen la coherencia con los enchufe de pared, puesto que estos sirven el mismo propósito.
• Clasificación, ¿buena o mala práctica?: Buena práctica

 

2. Confirmación

• Descripción del principio: Para ciertas tareas críticas, consiste en verificar que el usuario realmente quiere ejecutar la acción y que no es una interacción accidental.
• Imagen del ejemplo:

• Dispositivo e interfaz: Google Chrome
• Contexto del ejemplo y la interacción: Cuando estás trabajando en un archivo editable en línea desde Chrome y el sistema detecta que vas a salir de la pantalla sin guardar los cambios, el sistema te alerta de ello y pide confirmación de si quieres realmente salir del sitio sin guardar o cancelar la acción.
• Clasificación, ¿buena o mala práctica?: Buena práctica (aunque no siempre funciona correctamente)

 

3. Control

• Descripción del principio: El nivel de control de un usuario sobre el sistema es proporcional al nivel de experiencia del usuario.
• Imagen del ejemplo:

• Dispositivo e interfaz: SAP / Documentación
• Contexto del ejemplo y la interacción: SAP es generalmente utilizado por gente experta en este sistema, pero para los principiantes en esta herramienta, sus primeros usos son por lo general notablemente árduos.
• Clasificación – ¿buena o mala práctica?: Mala práctica, porque a pesar de que SAP es un sistema muy extendido y cuyas bondades son innumerables, he visto profesionales que tras años de experiencia en esta herramienta siguen sin ser capaces de utilizar el potencial de esta herramienta por la dificultad que presenta la misma, que, en el caso de multinacionales, se ve acrecentada por desarrollos ad-hoc hechos específicamente para cada empresa.

 

4. Errores

• Descripción del principio: Los humanos cometemos errores con frecuencia, bien de ejecución (se hace algo que no se pretendía hacer) o bien de intención (cuando el razonamiento para realizar una acción no es adecuado.
• Imagen del ejemplo:

• Dispositivo e interfaz: Mensaje de confirmación en JIRA cuando se pretende rechazar un ticket.
• Contexto del ejemplo y la interacción: En este caso, el usuario está intentando rechazar un ticket y las opciones que tiene para cerrar el circuito son: cancelar o rechazar. Por ello, si en sí un usuario puede cometer errores, con este tipo de mensajes es aún más fácil que los cometa.
• Clasificación, ¿buena o mala práctica?: Mala práctica

 

5. Punto de Entrada

• Descripción del principio: el punto de entrada de un sistema interactivo nos proporciona una primera impresión del mismo que posteriormente influirá notablemente en cómo percibimos el sistema o producto.
• Imagen del ejemplo:

• Dispositivo e interfaz: Landing page de la app móvil de N26 (un banco 100% online).
• Contexto del ejemplo y la interacción: Tras hacer login en la app móvil de N26, accedemos a la landing page. A simple vista puede observarse una interfaz intuitiva y fácil de usar, a pesar de que es un banco 100% online que ofrece todas las posibles operaciones que puedes hacer con cualquier otro banco. Esto automáticamente se gana la confianza de aquellos usuarios más recelosos del concepto de banca 100%.
• Clasificación, ¿buena o mala práctica?: Buena práctica

 

6. Reconocer antes que recordar

• Descripción del principio: Reconocer las cosas es mucho más fácil que recordarlas
• Imagen del ejemplo:

• Dispositivo e interfaz: Esta es la línea de comandos de Windows para ejecutar una bbdd (concretamente PostgreSQL)
• Contexto del ejemplo y la interacción: Para establecer una conexión a una instancia de una bbdd de PostgreSQL (o cualquier otra) desde la línea de comandos,  es necesario recordar una serie de comandos (en este caso «C: UsersGerard>psql -d postgres -U postgres»), que sin conocerlos de antemano es muy difícil que el usuario en cuestión sea capaz de intuir qué tiene que hacer para conseguir su objetivo.
• Clasificación: ¿buena o mala práctica?: A pesar de que la línea de comandos es clave para ciertos perfiles profesionales (p.ej desarrolladores de software o administradores de sistemas informáticos), no tiene en cuenta este principio de la usabilidad.

 

7. Restricciones

• Descripción del principio: La dificultad de experimentar con una situación nueva está directamente relacionada con el número de posibilidades que se presentan.
• Imagen del ejemplo:

• Dispositivo e interfaz: Cubertería de protocolo en un banquete.
• Contexto del ejemplo y la interacción: El protocolo de colocación de cubiertos se basa en la accesibilidad y el orden de uso. Esto podría intuirse si, por ejemplo, tenemos 2 tenedores y 2 cucharas diferentes. No obstante, conforme el número de cubiertos crece, es más difícil intuir el prpósito que sirve cada elemento de la cubertería.
• Clasificación, ¿buena o mala práctica?: Mala práctica

 

8. Accesibilidad

• Descripción del principio: Concepto para describir si el diseño de un producto, dispositivo o servicio puede ser utilizado por personas de todas las capacidades y discapacidades.
• Imagen del ejemplo:

• Dispositivo e interfaz: Cierre, minimización y maximización de documentos en Mac.
• Contexto del ejemplo y la interacción: Los 3 botones que caracterizan el cierre, minimización y apertura en Mac vienen determinados por los colores rojo, amarillo y verde respectivamente, pero no hay ningún elemento/icono adicional que los distinga. Los casos más comunes de daltonismo se asocian a fallos en la detección del color rojo y verde, por lo que cabe la duda de que una persona que padezca de estas deficiencias encontraría esta interacción usable o no.
• Clasificación, ¿buena o mala práctica?: Mala práctica.

 

9. Visibilidad

• Descripción del principio: Hacer más visibles las partes relevantes del diseño
• Imagen del ejemplo:

• Dispositivo e interfaz: Botonadura de una barra de sonido – lateralmente se observa el regulador de volumen y en la parte trasera unos botones de canción anterior, pausa y canción siguiente.
• Contexto del ejemplo y la interacción: En las barras de sonido actuales, la funcionalidad principal es la regulación del sonido, ya que el resto de controles de canción suelen gestionarse directamente desde el dispositivo al que se conecte la barra de sonido (p.ej. desde spotify en el teléfono móvil). En algunas barras de sonido pueden encontrarse otra botonadura complementaria de pausa y cambio de canción, pero sin duda, ejerciendo un papel secundario. En este caso puede observarse como la botonadura más prominente es la de regulación del volumen, mientras que la botonadura de cambio de pista pasa muy desapercibida en la parte trasera del aparato.
• Clasificación, ¿buena o mala práctica?: Buena práctica

 

10. Affordance

• Descripción del principio: Capacidad de un objeto de sugerir su propia utilización
• Imagen del ejemplo:

• Dispositivo e interfaz: Empuñadura de un agarre de musculación.
• Contexto del ejemplo y la interacción: Una empuñadura, con la forma ergonómica de una mano y con protectores, sugiere para qué parte del cuerpo es y cómo has de colocar tu mano en ella para conseguir tu objetivo como usuario (ejercitar la musculación de agarre).
• Clasificación, ¿buena o mala práctica?:Buena práctica

 

11. Retroacción

• Descripción del principio: Visibilidad del efecto de nuestras acciones
• Imagen del ejemplo:

• Dispositivo e interfaz: Migas de pan en la Web de Decathlon
• Contexto del ejemplo y la interacción: En la Web de Decathlon es posible acceder a cientos de productos a través de una serie de filtros (deporte, sexo, tipo de producto,..). Para facilitar al usuario el seguimiento de sus propias acciones y saber dónde se encuentra este respecto al mapa de la web, han incluido unas migas de pan en la parte superior izquierda en color gris.
• Clasificación, ¿buena o mala práctica?: Buena práctica, aunque quizás el color gris no es fácilmente visible a primera vista.

Bibliografía:

• https://www.sap.com/spain/index.html
• https://www.atlassian.com/es/software/jira
• https://www.google.com/intl/es/chrome
• https://www.decathlon.es/es/
• https://www.bartalentlab.com/academy/tecnicas-sala-barra/manual-sobre-cuberteria
• https://n26.com/es-es
• https://www.nosolousabilidad.com/manual/1.htm
• https://www.interaction-design.org/literature/article/an-introduction-to-usability?utm_source=newsletter&utm_medium=email&utm_content=letter2019-09-24&utm_campaign=individual-members
• https://www.nngroup.com/articles/usability-101-introduction-to-usability/
• http://quadern-usabilitat.recursos.uoc.edu/es/
• https://medium.com/adalab/the-importance-of-usability-10e9871a16d8
• https://www.nngroup.com/videos/principles-human-centered-design-don-norman/
• https://blog.prototypr.io/how-spotifys-website-ux-has-changed-2006-to-2016-ff981fe3b0a3
• https://www.torresburriel.com/weblog/2018/01/25/error-humano-mal-diseno/