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

9. AYUDA A LOS USUARIOS A RECONOCER, DIAGNOSTICAR Y RECUPERAR LOS ERRORES

✅ BUEN EJEMPLO – GIF «CARGANDO…»

Previsualización:

Imagen: Captura de pantalla «Aviso»

Análisis:  En la pantalla de «Cómo llegar», el usuario debe introducir una dirección de origen y otra de destino. Si el usuario olvida no introducir alguna de las dos, y pulsa el botón buscar, la APP muestra un aviso claro y conciso en el que le recuerda al usuario que debe introducir las dos direcciones. La aplicación utiliza la palabra «Aviso» en modo de título y en negrita, seguida de una frase con indicaciones claras sobre las acciones que debe realizar para poder continuar. Es un buen ejemplo ya que utiliza la estructura propia y tradicional del dispositivo para mostrar cualquier tipo de aviso importante para el usuario. Además, el botón OK que muestra en el aviso, le permite al usuario volver a la pantalla para introducir correctamente los datos solicitados, es decir, el aviso ofrece una solución al usuario.

❌ MAL EJEMPLO – BUSCAR PARADA

Previsualización:

Imagen: GIF proceso de introducción de texto para buscar parada

Análisis:  En las pantallas en las que el usuario debe buscar una parada, la app ofrece una propuesta de resultados filtrado por el texto que el usuario introduce de forma instánea. Sin embargo, si el usuario introduce una serie de caracteres no coincidente con ninguna de ellas, no muestra ningún tipo de mensaje que le haga entender que el texto introducido «no existe» como nombre o número de parada. Sería interesante que la app indicara que es lo que ha ocurrido y cómo solucionarlo.

Gravedad del hallazgo:   5/8 ptos.

• FRECUENCIA: 1
• TRANSCENDENCIA: 4

Propuesta de mejora:  Incluir mensaje de 0 resultados

10. AYUDA Y DOCUMENTACIÓN

✅ BUEN EJEMPLO – AYUDA COMPRA BILLETES

Previsualización:

Imagen: GIF Pantalla de ayuda en compra de billetes

Análisis:  En la pantalla de la APP preparada para la realización de compra de billetes sencillos digitales, se muestra en la parte superior derecha, un icono de información (i). Al pulsarlo se muestra una guía de ayuda para la compra y comprensión de lo que es un billete digital y cómo adquirirlo en la APP. Es una guía de ayuda sencilla, acompañada de ilustraciones que facilitan la comprensión y hacen que el proceso de «aprendizaje» sea ameno y sencillo para las personas usuarias. Además, muestra una sucesión de puntos en la parte inferior, para que los usuarios sean conscientes todo el tiempo de cuántas pantallas con contenido de ayuda hay, dándole la mayor sensación de control mientras navega. Durante todo el proceso de consulta, el usuario tiene la posibilidad de salir y de continuar sin necesidad de terminar de leer todas las pantallas. Otro aspecto a resaltar por lo que es un buen ejemplo, es porque la APP muestra la información de ayuda en contexto. Es decir, el usuario puede acceder a esta ayuda sólo desde la pantalla en la que va a realizar la compra del billete sencillo digital.

❌ MAL EJEMPLO – NO HAY BOTÓN DE AYUDA

Previsualización:

Imagen: Captura pantalla menú principal + menú

Análisis:  Es verdad que las funcionalidades de la APP no son muchas y están bastante bien planteadas. Pero es cierto, que quizá un usuario nuevo o inexperto, pudiera llegar a necesitar algún tipo de ayuda que explicara que funcionalidades puede encontrar en la APP, y dónde hacerlo. La APP sólo muestra ayuda insitu en la funcionalidad de compra de billetes.

Gravedad del hallazgo:   4/8 ptos.

• FRECUENCIA: 2
• TRANSCENDENCIA: 2

Propuesta de mejora:  Incluir propuestas de ayuda insitu en los botones principales de la APP, o una opción de «AYUDA» general en la pantalla principal, que explicara cómo puede el usuario realizar las funciones básicas de la plataforma.

RANKING

A continuación, se muestra un ranking de los malos ejemplos identificados en relación a los 10 principios herísticos de Nelson. Las propuestas de mejora de cada uno de los casos, se han mostrado gráficamente en el apartado anterior de forma detallada.

• 6 puntos – PANTALLA BUSCAR PARADA // Propuesta de mejora:  Mostrar un listado por proximidad de paradas cercanas para que el usuario reconozca su parada y no recuerde.  PRINCIPIO Nº6: RECONOCIMIENTO ANTES QUE RECUERDO
• 6 puntos – BOTÓN VOLVER CON INTERACCIÓN POCO CLARA // Propuesta de mejora:  Mejora del botón «volver». PRINCIPIO Nº3: LIBERTAD Y CONTROL POR PARTE DEL USUARIO
• 5 puntos – BOTONES SIN ESTADO «FOCUS» // Propuesta de mejora:  Incluir diseño de los botones en estado «focus». PRINCIPIO Nº1: VISIBILIDAD DEL ESTADO DEL SISTEMA
• 5 puntos – BUSCAR PARADA // Propuesta de mejora:  Incluir mensaje de 0 resultados. PRINCIPIO Nº9: AYUDA A LOS USUARIOS A RECONOCER, DIAGNOSTICAR Y RECUPERAR LOS ERRORES
• 4 puntos – BOTÓN «BILLETES Y BONOS» //Propuesta de mejora:  Cambiar texto por «Compra de billetes y bonos». PRINCIPIO Nº 2: ADECUACIÓN ENTRE EL SISTEMA Y EL MUNDO REAL
• 4 puntos – NO HAY BOTÓN DE AYUDA // Propuesta de mejora:  Incluir propuestas de ayuda in situ en los botones principales de la APP, o una opción de «AYUDA» general en la pantalla principal, que explicara como puede el usuario realizar las funciones básicas de la plataforma. PRINCIPIO Nº10: AYUDA Y DOCUMENTACIÓN – NO HAY BOTÓN DE AYUDA
• 4 puntos – BOTÓN SALIDAS // Propuesta de mejora:  Iconografía nueva botón «salidas». PRINCIPIO Nº4: CONSISTENCIA Y ESTÁNDARES
• 3 puntos – NO INFORMAR DEL USO DE OTRA APP //PRINCIPIO Nº5: PREVENCIÓN DE ERRORES
• 3 puntos – PANTALLA DE CÓMO LLEGAR SIN «LUGARES FAVORITOS» //Propuesta de mejora:  Mostrar un listado lugares favoritos, destacados o habituales para agilizar la interacción. PRINCIPIO Nº7: FLEXIBILIDAD Y EFICIENCIA EN EL USO
• 2 puntos – PANTALLA POLÍTICA DE PRIVACIDAD // PRINCIPIO Nº8: DISEÑO ESTÉTICO Y MINIMALISTA