Rediseño de la app de las tarjetas de transporte de Madrid — INTRODUCCIÓN

El punto de partida

La tecnología se ha ido haciendo un hueco en todas las facetas de nuestra vida. La forma en que nos movemos es una de ellas: si echamos la vista atrás, hace unos años la mayor parte de la gente hubiera respondido que en su coche o en transporte público (bus, tren o metro). A día de hoy, a esta oferta se le suman el carsharing, el motosharing, el bikesharing (y ya muy pronto el scootersharing de patinetes), las empresas que operan con licencia VTC (como Cabify y Uber) y toda el boom de los pequeños vehículos eléctricos. Casi todas estas opciones nuevas de movilidad nacen de la mano de la transformación digital y el auge de los smartphones.

El transporte público también ha jugado sus bazas y ha intentado modernizarse ofreciendo apps de información y gestión para sus usuarios. En la comunidad de Madrid (CAM), el consorcio regional de transportes (CRTM) centra su oferta en dos tarjetas, llamadas Tarjetas de Transporte Público Personal (TTP) y Multi. Aquí se puede encontrar toda la información detallada sobre las características de ambas tarjetas. A su vez, el CRTM ofrece dos aplicaciones para smartphones que permiten separadamente obtener información en tiempo real y consultar la información de sus tarjetas. En relación con esta última app, y debido a las numerosas críticas de funcionamiento y diseño, decidimos analizarla para embarcamos en un rediseño que mejore la actual propuesta.

Este es el primero de tres artículos que tienen como propósito investigar, idear y prototipar el rediseño de la actual app para móviles que permite consultar información sobre las dos tarjetas de transporte principales de la Comunidad de Madrid.

Con la aparición hacia finales de 2017 de la Tarjeta de Transporte Público Multi, que sustituía a los tradicionales billetes en “papel”, fueron muchas las voces que denunciaron las carencia del servicio y la necesidad de mejora (desde iniciativas en charge.org hasta perfiles y muchos post en twitter). No entraré en detalles sobre los muchos problemas y comentarios que dicha tarjeta ha generado porque ya los resumió fantásticamente Marina Rico hace solo unos meses mediante un acertadísimo artículo donde proponía algunas ideas que podrían aliviarlos. Como ella apuntaba, algunos de esos problemas podrían solventarse mediante una app o web.

Por otro lado, los usuarios de transporte público de la CAM sufrimos de una oferta fragmentada de aplicaciones para consultar la información sobre los diferentes medios de transporte (bus, metro, cercanías, buses interurbanos y metro ligero). Si bien suponemos que hay diversos motivos por los que se hace complicado aglutinar estas apps en una (y a pesar de ello muchas regiones de España si lo hacen), si creemos que debemos exigir a nuestras instituciones que al menos cada una de ellas cumpla correctamente con su cometido.

Pero ¿Dónde Está El Problema?

En la actualidad, la app para acceder a la información de las dos tarjetas posee varios problemas técnicos y una funcionalidad muy reducida que son motivo de queja por muchos usuarios. En particular las puntuaciones que podemos encontrar en Google Play y la App Store de Apple son de 2,4 y 1,3, respectivamente, y en los dos casos la moda es 1. Estas puntuaciones son el resultado de 3.269 opiniones en Google Play y de 361 en el caso de la App Store de Apple. Esta diferencia en el número de opiniones seguramente esta relacionada con el hecho de no poder leer el saldo mediante NFC en la versión de IOS (más adelante explicaremos las implicaciones).

Entre los principales problemas que los usuarios declaran tener se encuentran:

• Imposibilidad de poder recargar la tarjeta.
• Problemas en la lectura del saldo mediante tecnología inalámbrica (NFC) o mediante el código alfanumérico de la tarjeta (en el caso de la tarjeta TP).
• Imposibilidad de lectura de saldo mediante código alfanumérico en la tarjeta Multi.
• Problemas de actualización del estado de la tarjeta (saldo y validez) después de la primera recarga.
• Anuncios innecesarios.
• Falta de información sobre el periodo de validez del abono vigente (en TP).
• Problemas con la funcionalidad de idiomas.
• Incertidumbre en la seguridad relativa a la información de las tarjetas.
• Ausencia de alertas que avisen de la caducidad.
• Diversos problemas de diseño.

Open-MIc

Y… la UX entra en escena

Algunos de los problemas destacados más arriba van mucho más allá del diseño e implican cuestiones de desarrollo y de la propia infraestructura técnica del CRTM. Pero para tener una idea más clara del estado de la cuestión, lo mejor será que dejemos hablar por si sola a la propia app (en el texto se citan algunos puntos que se ilustran visualmente más abajo):

Aterrizando en la App

• En primer lugar, la app ha recibido un soporte limitado y las versiones disponibles en la dos stores son la 1.3 (Google Play) y la 1.0.1 (Apple Store) que fueron publicadas en julio y junio de 2014, respectivamente.
• El nombre escogido para indexar la app en las dos App Stores es poco acertado (“Tarjeta TP”): no hace referencia ni a la CAM, ni al transporte ni a alguna de sus funcionalidades.
• Si uno hace una búsqueda por “tarjeta transporte publico madrid” en Google Play aparecen las dos Apps que tiene el CRTM. Para dar con la correcta, hay bien que acceder a la descripción o bien suponer que se trata de dos aplicaciones diferentes ( y no versiones de la misma) y acceder por la lógica del nombre a la denominada “CRTM — Tarjeta TP”.
• De acuerdo con la descripción en la Google Play, la app “CRTM — Tarjeta TP” tiene como objetivo gestionar la Tarjeta Transporte Público del CRTM: lectura de saldo, lectura de saldo por NFC, búsqueda y localización de puntos de recarga y oficinas de gestión y gestionar mis tarjetas. Aunque se dice “gestionar”, la aplicación en realidad no permite gestionar ningún aspecto de la tarjeta, solo consultar información. Por otro, cuando se habla de lectura de saldo no se menciona como se realiza (hay que entrar en la app para averiguarlo). Es más, ni en la app ni en la descripción se explica el significado de las siglas NFC, algo que probablemente un número importante de personas desconoce.
• En la descripción que aparece en las dos App Stores tampoco se hace mención a la tarjeta Multi y la propia aplicación tampoco la menciona. Es necesario haber navegado por la web del CRTM para averiguar que a través de esta app sí se puede consultar el saldo de dicha tarjeta (mediante NFC). Esto viene a destapar uno de los grandes problemas con esta tarjeta: la app fue publicada en el año 2014 y no ha tenido actualizaciones con el lanzamiento en 2017 de la tarjeta Multi. Por tanto, no hay soporte específico ni documentación para esta tarjeta. El hecho de que el saldo pueda leerse mediante NFC es seguramente un efecto colateral fruto de utilizar la misma tecnología que su hermana mayor (la tarjeta TP).

Los usuarios con Iphone y tarjeta Multi no tienen modo de consultar su saldo mediante una aplicación.

• Por tanto, si no se accede a dicha web es muy probable que los usuarios tengan que realizar varios intentos prueba-error para darse cuenta que solo es posible conocer el saldo de la Multi mediante conexión inalámbrica NFC y no mediante la otra opción que existe, esto es, la numeración que figura en la propia tarjeta. Sin embargo, y esto es un punto muy importante, esta opción está deshabilitada en la app para IOS (al menos en el Iphone 6 utilizado en el testeo). Esto implica que la única función habilitada para la tarjeta Multi queda mutilada en IOS y la app en cuestión muy probablemente deja de tener utilidad para sus usuarios.
• Al entrar en la app aparece una splash screen a modo de publicidad de la otra app del CRTM. Una podría pensar que es esa es “la buena”. Más si cabe porque pasada esta pantalla accedemos a la home de la app y nos encontramos con más publicidad de esa otra app. Añadir que en el caso de IOS, antes de esta splash screen aparece durante un instante casi imperceptible otra splash screen con el logo del CRTM.

Qué pinta tiene…

• A pesar de estar compuesto de muy pocas pantalla (he contado 15), el diseño visual de la app no resulta coherente y es difícil encontrar dos pantalla iguales. Como se detalla a continuación (y se puede ver en las imágenes que acompañan a este texto), esto afecta a tipografías, colores, iconos, botones y copy. En otras palabras, no se sigue ninguna guía de estilo, ni propia ni la recomendada por Android o IOS.
• Existen graves problemas de jerarquía visual y tipográfica. Respecto al aspecto visual, tanto el color como la alineación (alineados abajo, alineados arriba y centrados en altura) se implementan de forma errática y generan incoherencia en el diseño (Puntos 1A, 1B y 1C).

El diseño de la web no es coherente a nivel visual, tipográfico y de copy, por citar algunos

Resumen visual de la heurística con los puntos señalados en el texto

• El lay-out presenta importantes problemas de composición, algo más suaves pero igualmente notables en la versión de IOS (Punto 2). La home es un buen ejemplo: de abajo a arriba hay un banner a sangre al pie del lay-out, una imagen publicitaria sin márgenes con los elementos vecinos, un menú principal con cuatro botones y, por último, toda la mitad superior está ocupada por una sola imagen meramente ilustrativa con el logo de la CRTM (Punto 2A). El menú principal, que es el contenido de mayor relevancia de la home, está desplazado a la mitad inferior, incrementando la carga cognitiva en esta zona y desatendiendo la zona que debería tener mayor impacto visual (centro, centro-superior)(Punto 2B). En definitiva, la jerarquía visual es pobre y la composición está descompensada.
• El diseño de botones es defectuoso: existen botones redundantes (Punto 3A), innecesarios (Punto 3B), otros ofrecen un comportamiento impredecible (Punto 3C) y algunos no deberían estar activos en determinados flujos (por ejemplo, el botón de “editar” en “mis tarjetas” cuando no hay ninguna añadida en esta pestaña). Además, su diseño (color, tamaño y forma) no tiene coherencia a lo largo de la app (Punto 3D).
• En cuanto a la jerarquía tipográfica: los diferentes niveles presentan un estilo que no ayuda a establecer prioridad y choca con el tamaño de los botones, que poseen mayor tamaño y peso (Punto 4A). Por ejemplo, en la home, a la fuente del body se le suma otra más para la top bar y otras dos más para cada una de las imágenes situadas al pie de la pantalla.
• Algo similar ocurre con el microcopy; se usa el imperativo (“acerque la tarjeta”), el infinitivo (“introducir datos de la tarjeta”) y la primera persona (“mi tarjeta”) en la misma pantalla (Punto 5A).
• El copy en inglés resulta ortopédico y contiene errores gramaticales.
• Además de los problemas mencionados, las imágenes situadas al pie de toda la app presentan los siguientes problemas: i) resultan confusas y es difícil adivinar si son meramente ilustrativas (como la superior) o tienen asociado un evento de tap (como la inferior), ii) el copy de la imagen inferior podría hacer pensar que permite descargar la versión actualizada de la app “Tarjeta TP” y iii) no aportan valor añadido y generan ruido visual (Punto 6A).
• Además, la iconografía empleada en toda la aplicación es poco legible e informativa (punto 6B).

Pero, al menos funciona bien ¿no?

• Por otro lado, y aunque siempre podamos recurrir al botón de atrás en los dispositivos Android, la app no ofrece esa opción con claridad. Esto genera cierta prueba y error hasta entender que la navegación por la web se hace con el botón de home situado en la top bar o con el menú superior desde donde acceder a una de los cuatro opciones del menú principal. Este menú superior tiene una affordance débil que no genera una respuesta ágil.

La navegación resulta confusa y ortopédica, mediante un menú superior que abre una pestaña con las opciones de la app.

• Los problemas mencionados con respecto a la navegación entre pantallas y la presencia de botones activos innecesarios genera un flujo muy poco flexible y vías muertas (Punto 7). Por ejemplo, el flujo no permite añadir tarjetas en el apartado “mis tarjetas” si previamente no se ha consultado el saldo. Al hacerlo se añaden automáticamente sin validación por parte del usuario. Del mismo modo, eliminar tarjetas tampoco pide confirmación.
• Aunque el copy para la lectura de la tarjeta es “Acerque la tarjeta a su terminal”, sería recomendable incluir alguna indicación más específica sobre cómo hacerlo (cara de la tarjeta y zona del terminal). De hecho, mi propio testeo apunta a que según la zona de la tarjeta y la parte del terminal que se confronten, el número de errores de lectura varía mucho.
• En cuanto al feedback: el copy no avisa del tipo de error cuando se introduce un número incorrecto de tarjeta para consultar el saldo. Este comportamiento puede generar dudas en el usuario sobre la siguiente acción a realizar: podría tratarse de un problema de marcación, de conexión con el servidor o técnico de la propia aplicación…
• En la consulta del saldo de la tarjeta mediante NFC, la app sí avisa de errores de lectura cuando se acerca una tarjeta y no puede leerla. Sin embargo, si no se acerca ninguna tarjeta no hay respuesta por parte de la app ni un tiempo limite para que salte un aviso informativo. En el caso de que el dispositivo no tenga activado esta tecnología, aparece un toast (“debe habilitar NFC”) del propio SO cuando la app intenta acceder al NFC del dispositivo.
• Si bien es un página “pequeña”, no existe herramienta de búsqueda más que para buscar direcciones en los mapas de oficinas de gestión y puntos de recarga.
• La app sufre problemas a la hora de reconocer la tarjeta mediante NFC.

Para rematar…

• La ayuda que presta la app se limita a una serie de imágenes explicativas de la UI. Más allá de eso no hay info de las propias tarjetas ni de funcionalidades concretas.
• La app carece de cualquier tipo de info legal, de contacto, de protección de datos de carácter personal o del copyright de los contenidos.
• No hay función alguna de accesibilidad.

Devolviendo el Foco a los Usuarios

Al margen de la heurística realizada y del estudio netnográfico, decidimos explorar las necesidades de los usuarios con este tipo de app y averiguar que problemas suelen padecer. Pretendemos evitar que nuestras conclusiones estén fuertemente sesgadas hacia las opiniones de aquellos que probaron la “Tarjeta TP” y abandonaron su uso indignados. Lanzamos un cuestionario que distribuimos entre un público general, sin advertir que estamos trabajando en el rediseño de la app “Tarjeta TP” de la CAM.

Para expandir nuestra visión, lanzamos un cuestionario que nos aporte una visión más amplia de los problemas y necesidades de los usuarios.

El cuestionario estuvo compuesto de 9 preguntas y obtuvimos una muestra de 80 respuestas. Más abajo figuran en detalle los resultados para algunas preguntas pero de forma resumida serían:

• Más de tres cuartas partes de los usuarios posee abonos o tarjetas de transporte pero solo una de cada cinco personas utiliza apps para gestionarlas.
• La puntuación media que le otorga la gente a estas aplicaciones está en un 2,6 (moda = 3).
• Entre los problemas que sufren están a partes iguales varios tipos de problemas técnicos (recarga o saldo) y de usabilidad.
• Las funcionalidades más demandadas son poder recargar la tarjeta, conocer su saldo, darla de baja y poder consultar el historial de saldo y viajes, entre algunas otras.
• En cuanto a las opciones de recarga, alrededor de un 70% y 50% preferirían hacerlo mediante tarjeta de crédito/debito y PayPal, respectivamente.
• Para comunicarse entre la app y el móvil, la mitad votó por hacerlo introduciendo el código alfanúmerico y cerca de un tercio votó o bien por un método de comunicación inalámbrico (NFC) o por un sistema de registro personal.

El cuestionario; para muestra un botón

Abreviando la Investigación

La netnografía y el cuestionario distribuido nos permiten concluir quee:

• Los usuarios sufren tanto problemas técnicos como de uso.
• Las puntuaciones de la encuesta son similares a las de Google Play. Las puntuaciones tan bajas de la App Store se deben probablemente a una ausencia de NFC para consultar el saldo de la tarjeta, opción indispensable en tarjetas Multi.
• A parte de solucionar los problemas que ahora presenta, la principal necesidad que demandan los usuarios es de disponer de funcionalidades nuevas. Entre ellas ocupa el primer lugar la posibilidad de recargar la tarjeta. Asociado con ello, la posibilidad de poder consultar el saldo y tener la tarjeta de debito/crédito como medio de pago.

Rediseño Sí — Rediseño No

Viendo el título de esta entrada, la respuesta parece clara. Siento el spoiler. Podría parece que puesto que muy poca gente la usa (algo más de un 20%) no merecería la pena meterse en harina y replantearse un rediseño. Pero también es verdad que un porcentaje tan bajo puede ser el resultado de una mala experiencia de uso, una pobre comunicación o una reticencia de los usuarios a instalarse apps potencialmente inservibles (sinceramente, la propia entrada en las dos Stores no pinta muy bien).

A pesar de ello, consideramos que esta app cumple con una función de servicio público y que los cientos de miles de usuarios potenciales deberían de disponer de una app a la altura.

Por otro lado, nuestro cuestionario ha despertado un notable interés social:

• En el momento de escribir este artículo, la publicación de la encuesta ha recibido más de 1100 visualizaciones en el feed de Linkedin donde originalmente fue colgada, ha recibido 14 recomendaciones y 4 comentarios.
• Dos de cada tres personas (66%) que entraron para completar la encuesta, la terminaron. Este porcentaje es bastante alto y nos hace pensar que la gente tiene un interés genuino por tener una aplicación que cubra sus necesidades y solvente sus actuales problemas.

En la próxima entrada…

… propondremos soluciones a los problemas encontrados y priorizaremos las funcionalidades a implantar.

… diseñaremos el mapa de sitio y el flujo de la app.

… generaremos una nueva identidad visual.

… realizaremos un prototipo de funcionamiento de la nueva app.

Agradecimientos

A todas las personas que tan amablemente completaron este cuestionario y a aquellos que dejaron su opinión en las Stores. A Raúl, por supuesto.

Si te ha gustado el artículo, me haces feliz con un puñado de aplausos (50👏 serían algo increíble) ¡Seguro que así me animo a seguir escribiendo! Cualquier comentario será recibido con los brazos abiertos para seguir mejorando.