AVANZA (APP AUTOBUSES URBANOS) – ANÁLISIS HEURÍSTICO

Avaluació de la usabilitat - Aula 2 | Evaluación de la Usabilidad - Aula 2

Pública

La interfaz a analizar en este post es la aplicación para dispositivos iOS Avanza 4.0. Es la aplicación oficial de autobuses urbanos de la ciudad de Zaragoza. Ofrece información en tiempo real del tiempo de espera de los autobuses que se encuentran circulando, información sobre paradas cercanas, trayectos, cómo llegar una ubicación en concreto e incluso facilita la gestión de recarga online de las tarjetas de transporte de la ciudad. La aplicación se lanzo en 2016 ha lanzado varias versiones actualizando su interfaz. Sin duda, es una de las aplicaciones mas utilizada por gran parte de la población zaragozana. Ocupa la posición 160 en AppStore dentro de la categoría viajes.

METODOLOGÍA

Se ha realizado un estudio de la usabilidad de la plataforma Avanza partiendo de los 10 principios heurísticos propuestos por Jakob Nielsen en 1994. Para ello se ha realizado un uso explorativo de la APP identificando casos de buen y mal ejemplo de cada uno de los principios expuestos por Nielsen. En los casos analizados como mal ejemplo, se ha valorado cuantitativamente la gravedad de cada uno de ellos utilizando 2 criterios:

FRECUENCIA: el número de veces que este ejemplo se repite en la plataforma. (0=muy poco frecuente / 4=bastante frecuente)
TRANSCENDENCIA: cómo de importante y determinante es para el usuario este fallo durante su interacción y su toma de decisiones. (0:poco trascendente / 4=muy transcendente)

Por último, se han sumado las dos valoraciones dadas a cada uno de los casos, con el objetivo de identificar los ejemplos más determinantes en la interacción y por tanto que más pueden inferir en el uso de las personas usuarias.

1. VISIBILIDAD DEL ESTADO DEL SISTEMA

✅ BUEN EJEMPLO – GIF «CARGANDO…»

Previsualización:

Imagen: GIF + TEXTO EXPLICATIVO «Cargando…»

Análisis: Cuando la persona usuaria quiere acceder al apartado «Paradas Cercanas» de la APP, y por tanto tiene que cargar un contenido en tiempo real, el sistema muestra al usuario un GIF junto con el texto «Cargando…» que hace que el usuario entienda que el sistema esta trabajando para mostrar el contenido deseado. Es un buen ejemplo de Visibilidad del estado del sistema porque le da información a la persona usuaria de lo que está ocurriendo, comunicándole la consecuencia de su acción anterior

❌ MAL EJEMPLO – BOTONES SIN ESTADO «FOCUS»

Previsualización:

Imagen: Aspecto botones al hacer clic (no focus)

Análisis: Al presionar cualquier botón de la pantalla principal de la APP, el botón no muestra un cambio de aspecto. No existe un diseño alternativo para su estado «focus». En este caso, el sistema no está informando al usuario de lo que está sucediendo. Este aspecto, toma mayor importancia cuando el tiempo de carga de la app aumenta, puesto que la persona usuaria carecerá de información de si ha presionado correctamente el botón y es es cuestión de unos segundos que se cargue la siguiente pantalla, o si por el contrario, el usuario no ha pulsado correctamente el botón. No tiene información sobre la consecuencia que ha tenido su acción.

Gravedad del hallazgo: 5/8 ptos.

FRECUENCIA: 4
TRANSCENDENCIA: 1

Propuesta de mejora: Incluir diseño de los botones en estado «focus»

2. ADECUACIÓN ENTRE EL SISTEMA Y EL MUNDO REAL

✅ BUEN EJEMPLO – PARADAS CERCANAS

Previsualización:

Imagen: Listado de paradas cercanas

Análisis: En el apartado de paradas cercanas, se muestra un listado ordenado de mayor proximidad a mayor lejanía, de arriba a abajo mostrando primero las más cercanas. El modo de mostrar esta información corresponde al modelo mental de las personas usuarias, ya que es común mostrar la información de arriba a abajo, entendiendo que el contenido superior es el mas reciente, siendo el mismo criterio que se emplea en los letreros físicos de las paradas de autobus. Los comentarios en los foros, los Tweets o las publicaciones de Instagram, se muestran con ese criterio. Utilizan un criterio de muestra de resultados coherente con la terminología familiar de los usuarios haciendo que la información aparezca en un orden natural, lógico y esperado. Otro aspecto positivo en relación a este principio, es el uso de siluetas rojas que hace referencia a los postes físicos que se encuentran en la ciudad para identificar las paradas de bus. El icono lo utilizan par diferenciar verticalmente cada una de las paradas. Es un acierto utilizar un lenguaje similar al del mundo real para garantizar la correcta comprensión de las personas usuarias.

❌ MAL EJEMPLO – BOTÓN «BILLETES Y BONOS»

Previsualización:

Imagen: Botones del Menú Principal

Análisis: El texto que acompaña al icono del botón «Billetes y bonos», no hace referencia directa a la acción que puedes realizar en esa pantalla. La APP permite comprar y recargar la tarjeta de transporte directamente, sin embargo el texto de este botón puede dar a entender que a lo que puedes acceder es a obtener información sobre los billetes. Además, es una funcionalidad que no siempre ha tenido la APP. Desde hace poco tiempo que se puede realizar compra de billetes desde la APP, por tanto, puede resultar todavía más confuso, y desapercibido para los usuarios habituales. No utiliza el lenguaje habitual de los usuarios. Por lo general, cuando existe la opción de comprar en una APP, se especifica con esa palabra. Sería más acertado utilizar «Compra de billetes y bonos», utilizando una terminología familiar y conocida para el usuario.

Gravedad del hallazgo: 4/8 ptos.

FRECUENCIA: 1
TRANSCENDENCIA: 3

Propuesta de mejora: Cambiar texto por «Compra de billetes y bonos»

3. LIBERTAD Y CONTROL POR PARTE DEL USUARIO

✅ BUEN EJEMPLO – OPCIÓN DE VOLVER FUERA DE LA APP

Previsualización:

Imagen: Pantalla fuera de la APP con opción de volver en esquina superior izquierda

Análisis: En el apartado de recarga de tarjeta, la APP saca al usuario de la APP y abre una pestaña en el navegador para realizar la compra/recarga de la tarjeta de transporte. Esto puede generar desconcierto y sensación de no control al usuario, sin embargo la aplicación utiliza el diseño propio y marcado por apple para sus aplicaciones, y muestra en la esquina superior izquierda, debajo del reloj, un botón que te permite volver directamente a la aplicación Avanza en la que el usuario estaba navegando, ofreciendo una salida de emergencia clara para abandonar la acción de «compra», por si la persona usuaria ha entrado en ese botón de forma accidental, no quiere seguir con la compra y quiere deshacer la acción. De este modo el usuario tiene sensación de control y evitamos su frustración durante la interacción.

❌ MAL EJEMPLO – BOTÓN VOLVER CON INTERACCIÓN POCO CLARA

Previsualización:

Imagen: Pantalla con botón «volver» en la esquina superior izquierda

Análisis: Al navegar en las distintas pantallas del menú principal, la APP muestra siempre una opción clara de volver con un botón en forma de flecha en la esquina superior izquierda. Es una buen ejemplo de diseño puesto que ofrece sensación de control a la persona usuaria. Sin embargo, creo que se debería reforzar el diseño mostrando de un mejor modo al usuario su interaccionalidad. El botón está posicionado correctamente en la esquina superior izquierda, pero puede parecer un elemento plano que no ofrece acción al usuario. Por tanto, si el usuario no percibe la funcionalidad que este botón le ofrece, puede tener sensación de descontrol y pérdida en la navegación de la app.

Gravedad del hallazgo: 6/8 ptos.

FRECUENCIA: 4
TRANSCENDENCIA: 2

Propuesta de mejora: Mejora del botón «volver»

4. CONSISTENCIA Y ESTÁNDARES

✅ BUEN EJEMPLO – ICONO FAVORITO E ICONO LÍNEA BUS

Previsualización:

Imagen: Linea Bus con opción para marcar como favorito

Análisis: En el apartado Paradas Favoritas, el modo que la APP utiliza para que la persona usuario seleccione una parada como favorita, es utilizando un botón que tiene un icono de estrella. Esta iconografía es muy habitual en los productos digitales, y es bastante fácil que los usuarios puedan asociar esta funcionalidad a este icono. De este modo, la APP reduce la carga cognitiva a la que el usuario debe enfrentarse, puesto que es una funcionalidad conocida y adquirida en sus experiencias previas. Es un ejemplo de coherencia externa ya que utiliza el «lenguaje» común del medio digital para ofrecer una funcionalidad habitual en el medio.

Imagen: Pantallas distintas con iconografía creada para identificar las líneas de bus

Análisis: APP utiliza siempre el mismo diseño para señalar las líneas de bus de la ciudad. Utiliza un cuadrado con fondo rojo, lo cual le facilita al usuario la percepción y comprensión de las distintas pantallas, reduciendo la carga cognitiva. Mantiene una coherencia interna gráfica en todas las pantallas de la APP mejorando la experiencia de las personas usuarias en los distintos contenidos y funcionalidades que presenta.

❌ MAL EJEMPLO – BOTÓN SALIDAS

Previsualización:

Imagen: Pantalla salidas líneas de autobus

Análisis: En la pantalla en la que se muestran los horarios de salidas de las líneas de autobús, la APP utiliza un icono compuesto por una puerta y una flecha hacía fuera, para marcar las salidas de la primera parada de cada línea de bus. Es una iconografía habitualmente utilizada para indicar el modo de salir de la aplicación en la que el usuario está navegando. Es un ejemplo de incoherencia externa de la app. Es difícil que las personas usuarias comprendan el mensaje que la APP quiere transmitir puesto que puede resultar confuso.

Gravedad del hallazgo: 4/8 ptos.

FRECUENCIA: 1
TRANSCENDENCIA: 3

Propuesta de mejora: Iconografía nueva botón «salidas»

5. PREVENCIÓN DE ERRORES

✅ BUEN EJEMPLO – CONFIRMACIÓN DE COMPRA

Previsualización:

Imagen: GIF confirmación de compra

Análisis: A la hora de realizar una compra de un billete, la APP te muestra un mensaje para confirmar la acción antes de comprar y llevar al usuario a la pasarela de pago. La compra de billetes es una acción importante a realizar en la APP, por lo que mostrar un mensaje que confirme el deseo voluntario de la persona usuaria, evita cuidadosamente que ocurra un problema por haber pulsado ese botón de manera errónea.

❌ MAL EJEMPLO – NO INFORMAR DEL USO DE OTRA APP

Previsualización:

Imagen: GIF de como la APP envía al usuario a Google Maps sin aviso.

Análisis: En el apartado de Cómo llegar, la aplicación hace uso de Google Maps para mostrar el mejor trayecto. Si la APP envía al usuario a otra APP distinta a la que está utilizando, debería realizar una pregunta para confirmar que la acción solicitada es la deseada y no ha sido accidentada. Debería advertir al usuario de lo que va a ocurrir, para evitar que se ejecute una acción no deseada y por tanto un error de uso.

Gravedad del hallazgo: 3/8 ptos.

FRECUENCIA: 2
TRANSCENDENCIA: 1

Propuesta de mejora: Añadir un POP-UP que obligue al usuario a confirmar la acción.

6. RECONOCIMIENTO ANTES QUE RECUERDO

✅ BUEN EJEMPLO – INFORMACIÓN SOBRE PAGO RÁPIDO

Previsualización:

Imagen: Información sobre Pago rápido

Análisis: En perfil del usuario, hay una opción que las personas usuarias pueden activar o desactivar: Pago rápido. Por si el usuario no conoce a qué hace referencia esa opción, la APP muestra al lado un icono con un interrogante. Al pulsarlo, se despliega en la parte superior un mensaje estático informativo sobre lo que es el «Pago rápido». Es un buen ejemplo porque la APP ofrece ayuda en contexto en lugar de utilizar un largo tutorial inicial. Ofrece una breve información concisa en el momento en el que el usuario puede activar esa opción. Favoreciendo que el usuario recuerde, que el interrogante le va a facilitar es opción antes que tener que recordar lo que quiere decir «Pago rápido».

❌ MAL EJEMPLO – PANTALLA BUSCAR PARADA

Previsualización:

Imagen: Pantalla búsqueda de parada

Análisis: En esta pantalla, para poder buscar una parada en concreto, la persona usuaria puede introducir el número de poste, escanear el QR del poste, o buscarla en un listado ordenado alfabeticamente. Por tanto, obligamos al usuario a que recuerde una información aumentando su carga cognitiva, siendo que aunque haga uso habitual de esa parada, puede no recordar su número. Poner un listado por proximidad para que el usuario «reconozca» su parada en lugar de recordar, sería una buena solución de diseño.

Gravedad del hallazgo: 6/8 ptos.

FRECUENCIA: 4
TRANSCENDENCIA: 2

Propuesta de mejora: Mostrar un listado por proximidad de paradas cercanas para que el usuario reconozca su parada y no recuerde.

7. FLEXIBILIDAD Y EFICIENCIA EN EL USO

✅ BUEN EJEMPLO – PARADAS FAVORITAS

Previsualización:

Imagen: GIF Crear parada Favorita

Análisis: La APP ofrece una opción para usuarios avanzados, que permite marcar paradas como Favoritas, modificando incluso el nombre. De este modo, la persona usuaria tendrá acceso a esa parada desde la pantalla principal, sin necesidad de buscarla cada vez que quiera seleccionarla. Es un buen ejemplo porque la plataforma permite a los usuarios expertos crear un «atajo o acelerador de la interacción«, personalizando acciones frecuentes y además, no ralentiza el uso a personas usuarias no expertas.

❌ MAL EJEMPLO – PANTALLA DE CÓMO LLEGAR SIN «LUGARES FAVORITOS»

Previsualización:

Imagen: GIF Pantalla Cómo Llegar

Análisis: En esta pantalla, la aplicación no permite guardar un Lugar como favorito. Crear aquí un listado de lugares favoritos o frecuentes, podría agilizar la interacción para usuarios expertos. Esta acción puede ser una acción repetida para los usuarios, que pueden ver ralentizada su interacción por el hecho de no recordar las localizaciones más habituales.

Gravedad del hallazgo: 3/8 ptos.

FRECUENCIA: 1
TRANSCENDENCIA: 2

Propuesta de mejora: Mostrar un listado lugares favoritos, destacados o habituales para agilizar la interacción.

8. DISEÑO ESTÉTICO Y MINIMALISTA

✅ BUEN EJEMPLO – MENÚ PRINCIPAL

Previsualización:

Imagen: Menú Principal

Análisis: La página principal de la APP muestra un diseño claro, conciso y sin ruido que pueda distraer al usuario, o qué pueda aumentar la concentración necesaria para comprender las funcionalidades principales que el menú quiere mostrar. La visibilidad relativa de las 6 opciones principales es acertada gracias a que el menú principal refleja la carga gráfica y visual precisa y necesaria. Cada botón está compuesto por un icono descriptivo, un texto de no más de 4 palabras y una pastilla de color de fondo que resalta y diferencia a la percepción las 6 opciones principales.

❌ MAL EJEMPLO – PANTALLA POLÍTICA DE PRIVACIDAD

Previsualización:

Imagen: GIF Pantalla Política de privacidad

Análisis: La pantalla en la que la APP muestra el contenido referente a la política de privacidad, presenta un texto plano en formato PDF y de 6 páginas. Es cierto que hace referencia a un texto legal que en ocasiones se muestra de forma solemne sin formato alguno. En cualquier caso, es cierto que esta pantalla dificilmente será leída por los usuarios debido a la carga cognitiva que contiene. La misma información podría plantearse con un diseño capaz de resaltar los aspectos importantes del texto, para garantizar y facilitar la lectura por parte de los usuarios. No hay una priorización de la información relevante,

Gravedad del hallazgo: 2/8 ptos.

FRECUENCIA: 1
TRANSCENDENCIA: 1