Evaluación de la Usabilidad aula 2

Pública

0. Introducción

Partiendo de las leyes de percepción más relevantes analizaremos mediante ejemplos el grado de cumplimiento (incumplimiento) de las mismas:

1. Ley de Fitts
2. Ley de Hick
3. Similitud
4. Metáfora
5. Disonancia cognitiva
6. Modelo mental

1.  Ley de Fitts

1.1. Descripción de Ley de Fitts

El tiempo necesario para desplazarse hasta un elemento depende del tamaño del elemento y de la distancia hasta este.

1.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En la página de Amazon cuando se ha de introducir el País asociado a una dirección, encontramos menus «dropdown» con un gran número de elementos que, por lo general, suele requerir de un tiempo considerable del usuario para encontrar el país deseado.

1.3. Ley de Fitts: ¿cumplimiento o incumplimiento?

En este caso la Ley de Fitts se prueba cierta porque no se ha tenido en cuenta en el diseño.

2.  Ley de Hick

2.1. Descripción de Ley de Hick

El tiempo que tardamos en tomar una decisión aumenta en relación directa con el número de alternativas disponibles: a más alternativas, mayor tiempo

2.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

La página en contexto es la landing page de la web oficial del IAAP (Instituto Andaluz de la Administración Pública). En concreto pueden verse un gran número de elementos que dificultan al usuario alcanzar su objetivo, lo cual se ve empeorado por la falta de un menú navegador.

2.3. Ley de Hick: ¿cumplimiento o incumplimiento?

Incumplimiento

3.  Similitud

3.1. Descripción de Ley de Similitud

Los elementos que son similares son percibidos como relacionados, frente a los elementos que son diferentes.

3.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

El calendario de  Google, muestra todos los días del mismo mes con el mismo formato, excepto el día actual (según la foto 20 de Octubre). Además, los días de los meses diferentes aparecen con un formato diferente a los días del mes en curso.

3.3. Ley de Similitud: ¿cumplimiento o incumplimiento?

Cumplimiento

4.  Metáfora

4.1. Descripción de la Metáfora

Uso de una analogía para hacer referencia a un concepto.

4.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

El uso de metáforas está especialmente extendido en la iconografía. En este caso podemos ver en la página de eBay los iconos de una campana y del carrito de la compra, simbolizando las alertas al usuario y el listado de elementos que el usuario se dispone a comprar respectivamente.

4.3. Metáfora: ¿cumplimiento o incumplimiento?

Cumplimiento

5.  Disonancia cognitiva

5.1. Descripción de la Disonancia Cognitiva

Cuando no hay una coherencia entre los pensamientos, las creencias o las actitudes se trata de una disonancia, que resulta en una experiencia desagradable o molesta.

5.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En este ejemplo podemos ver el empaquetado de los yogures Danacol, unos yogures que aclaman reducir el colesterol. Para hacer más potente el mensaje, el envase incluye una imagen que representa una fuerza que arrasa por un conducto, quitando toda suciedad. Esto el usuario lo relaciona con la reducción de colesterol, produciendo una sensación de alivio.

5.3. Disonancia Cognitiva: ¿cumplimiento o incumplimiento?

Cumplimiento.

6.  Modelo Mental

6.1. Descripción del Modelo Mental

Modelos conceptuales que tenemos las personas sobre cómo funciona el mundo que nos rodea.

6.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción

En este ejemplo podemos ver el logotipo de una consultoría de servicios psicológicos. En este caso, a pesar de no estar perfectamente delimitado, es fácil reconocer que el icono que acompaña a este logotipo representa un cerebro.

6.3. Modelo Mental: ¿cumplimiento o incumplimiento?

Cumplimiento

Bibliografía

• https://www.nosolousabilidad.com/manual/1htm
• 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/
• https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design
• https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users
• https://www.interaction-design.org/literature/topics/hick-s-law
• https://thenextweb.com/news/how-to-create-visual-relationships-with-contrast-similarity
• https://blog.tubikstudio.com/gestalt-theory-for-efficient-ux-principle-of-similarity/
• https://www.smashingmagazine.com/2011/10/design-with-dissonance/

Evaluación de la Usabilidad aula 2

Pública

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: \Users\Gerard>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/