Challenge 3: Usability Evaluation and Site Redesign
Este ejercicio nos propone el reto de escoger un destino entre las 8 maravillas del mundo, a fin de organizar un futuro viaje según un modelo de usuario o user persona (con sus objetivos, características y requerimientos particulares) que tendrá que realizar una o varias tareas en un site determinado -dedicado a la búsqueda de vuelos, alojamientos, etc-.
En primer lugar, se ha realizado un estudio de accesibilidad, propuesta de valor, y funciones de los siguientes portales: Kayak, Skyscanner, Trip Advisor o Hopper.
Las tres primeras funcionan tanto en desktop como en mobile, mientras que a Hopper solo puede accederse desde una tablet o smartphone, y además está en inglés, por lo que este ultimo site queda descartado.
Los Principios de Nielsen han sido aplicados al estudio de Kayak, Skyscanner y TripAdvisor, mediante una tabla en la que se han puntuado éstos con los siguientes baremos de puntos: 10 (totalmente afirmativo), 5 (respuesta regular o media) y 0 (nulamente aplicado).
¿Por qué Skyscanner?
Según la anterior tabla, Skyscanner sería el site elegido para su estudio práctico y posterior rediseño, por ser más funcional y accesible, además de ofrecer una propuesta de valor mayor que sus competidores.
Objetivos
Los objetivos definidos para la evaluación y rediseño de Skyscanner son:
- Análisis de la aplicación
- Realización de pruebas de usabilidad con un modelo de user persona (desarrollado en el siguiente apartado) para localizar los puntos débiles
- Tener presente este mantra: “yo no soy el usuario del producto que estoy creando y evaluando”
- Realizar prototipo(s) que solucionaría(n) los problemas previamente localizados y definidos.
User Persona
Pareja madura, de entre 60–80 años, jubilada, y que ha decidido visitar por fin el Taj Mahal, un sueño de su juventud, ahora que consideran que tienen tiempo y mayor flexibilidad. Para ellos es importante encontrar un proveedor o servicio que les permita delegar y no lidiar con demasiados procesos y toma de decisiones.
Dado el destino, he realizado un estudio previo de las especificaciones a tener en cuenta.
- El aeropuerto más cercano es Agra, pero operan vuelos internos, así que si quieren volar desde Madrid tendrán que ir primero a Delhi. Desde allí, podrán coger un vuelo doméstico o el tren Gatiman Express 2h a Agra.
- La moneda es la Rupia India y el cambio de divisa actual es: 1€ = 86,27R.
- Necesitan eVisa India. Este visado se puede tramitar online y permite estar en el país máx. 30 días (permite entrar 2 veces dentro del período).
- La pareja tendrá que vacunarse obligatoriamente de fiebre amarilla, aunque es recomendable que también tengan puesta la del tétanos-difteria-tos ferina, tiple vírica, hepatitis A, y tifus.
- La pareja no tiene claro cuándo viajará, dadas las circunstancias actuales, ya que actualmente los turistas no pueden entrar a la India. De todas maneras, tendrán en cuenta las tres estaciones de temperatura: fría (de octubre a febrero), calurosa (de marzo a junio) y de lluvias (de junio a septiembre). Sólo las zonas montañosas tienen temperaturas realmente frías. Es época de monzones entre junio y octubre. Es conveniente llevar prendas que tapen piernas y hombros, especialmente para las mujeres.
- Para visitar el Taj Mahal no se necesitan más que unas horas, pero dada la lejanía al país y la complejidad logística y de comunicaciones, necesitarían 3 días al menos para visitarlo yendo desde Madrid: 1º viaje a Delhi, 2º Delhi-Agra + Taj Majal, 3º Agra-Delhi-Madrid. Aún así, es recomendable ir mínimo 10 días y aprovechar para ver Agra, Delhi y Jaipur, teniendo en cuenta que en el viaje de ida y de vuelta desde España ya se pierden unos 2–3 días. Como la pareja está jubilada, van a aprovechar para hacer el viaje sin prisas, entre 10 y 15 días (no más, ya que tienen compromisos en España).
Pruebas de Usabilidad
Vamos a entrevistar a 5 usuarios y a indicarles 2 tareas a realizar en la app. Primeramente, el resultado de la prueba de los 5 segundos mirando a la home, determina que todos ellos han registrado bien la información importante (iconos de vuelo, hotel y alquiler de coche). Aparentemente, la home realiza su función. Por otro lado, la información sobre el COVID-19 (ubicada en la parte de abajo) no impacta al usuario en los primeros segundos de navegación, lo cual resulta positivo.
Sin embargo, al preguntarles qué servicio creen que ofrece la app, coinciden en la siguiente afirmación: “Es una aplicación para reservar viajes”. Esto es un arma de doble filo, puesto que podrían estar equivocando la app y entendiéndola como una especie de agente virtual que reserva y organiza viajes completos, y no identificándola como una app de búsqueda y comparación, que puede terminar o no en reserva. La afirmación adecuada sería: “Es una app para buscar -y puede que reservar- vuelos, hoteles y coches”.
Solo se les pidió una tarea a los usuarios:
a) Buscar una hotel en Agra para 2 noches y 2 personas, cercano al Taj Mahal.
Lo primero que vemos al iniciar la app es una pantalla de tratamiento de datos, podría ser confusa pero como tiene un gran botón “Aceptar” de color verde, no presenta dificultad alguna.
Sin embargo, algunos se quedan algo bloqueados en la segunda pantalla, donde se pide iniciar sesión como usuario de google, Apple, o Facebook, de registro o vinculación de cuenta. Existe la opción de ingresar más tarde, pero es pequeña y se pierde entre el contenido. Invierten tiempo en leer y entender qué tienen que pulsar, y lo hacen de manera insegura, pero como cualquier opción les permite continuar, llegan a la Home.
Una vez están la pantalla principal, pulsan el botón correcto “Hoteles”, y la pantalla siguiente, en donde se les pide introducir el destino, y aceptar la búsqueda, la superan también sin problema.
Es en la siguiente pantalla -dónde aparecen los numerosos hoteles- en la habría que ingresar la información de número de huéspedes y noches, pero los campos son muy pequeños y poco visibles (está en una zona que se da por hecho ya no tenemos que tocar, al lado del destino que ya hemos metido en la pantalla anterior), así que no lo ven y continúan ya eligiendo un alojamiento en el scroll. Cuando ven el que les gusta, pulsan y la página les redirige directamente a Booking. Tampoco han visto el mapa, así que no saben si el hotel está cerca o no del Taj Mahal (se fijan en el nombre y la imagen principal de los hoteles, por si pone Taj Mahal o si se ve por la ventana de la habitación).
Algunos se dan cuenta de que no han introducido el número de personas ni de noches. Unos vuelven atrás y otros siguen el flujo, confiando en que esta información se registrará en pasos posteriores. Los que volvieron atrás, encontraron la opción de huéspedes, antes que la de las fechas, pero al modificar el parámetro a 2pax, no eran capaces de aceptar ni salir de la ventana (los botones “cancelar” y “aplicar” están arriba y no parecen botones, si no información).
La tarea no se ha realizado con éxito puesto que la aplicación no ofrece un buen flujo de usuario para gente mayor que no está tan familiarizada con estos portales de búsqueda ni con una gran cantidad de interfaces.
Pain points y resultados
Después de realizar las pruebas de usuario, he navegado personalmente por la app para localizar mis propios pain points, además de los que he registrado gracias al testing con los usuarios.
Skyscanner ofrece un mapamundi actualizado con los países clasificados según estén abiertos al turismo, parcialmente abiertos, o cerrados. Considero que en la situación actual, en general, es importante y positivo visualizar esto previamente a hacer la búsqueda; en particular, a nosotros nos limita en la nuestra, dado que India está cerrado al turismo a día de hoy, por lo que nuestro viaje tendrá que ser programado a largo plazo.
Una vez dentro, al buscar un vuelo, se muestra un calendario con puntos de colores bajo los números de día. En ningún momento hay una leyenda que explique a qué corresponde cada color. Si esto refiere a los precios, tal y como pensamos, sería conveniente poner la cantidad bajo el número, o simplemente resolverlo con una pequeña leyenda.
Al meter los criterios de búsqueda de un vuelo, inmediatamente después aparece la opción de filtrar solo las aerolíneas con billetes flexibles -lo cual es un must ya que nuestro user persona busca seguridad y tiene flexibilidad de fechas-. Los resultados se actualizan abajo y en scroll podemos ver todos los billetes.
Respecto a la búsqueda de “Hoteles”, y como punto débil, diría que la opción “Filtrar” (y “Ordenar”) se pierde entre las imágenes y opciones, tal y como hemos experimentado también durante el Usability Testing.
Entre la exploración que he realizado de la app y la experiencia de los usuarios, podemos localizar 6 puntos de fricción absolutos:
- Pantalla inicial con registro o vinculación de cuenta.
- Falta de información (precios o leyenda de los símbolos) en el calendario de búsqueda de Vuelos.
- En Hoteles, Los datos de fechas y número de huéspedes están en una pantalla posterior a la que deberían, según una navegación óptima.
- El mapa debería ser más grande, aunque manteniéndose en la pantalla de resultados de Hoteles.
- Al modificar los parámetros Huéspedes y Fechas, los botones “cancelar” y “aplicar” no se ven porque no parecen botones estructuralmente hablando, además de por estar colocados en la parte superior del desplegable -en lugar de la inferior, donde estamos acostumbrados a encontrarlos en la mayoría de interfaces-.
- Las opciones “Filtrar” y “Ordenar” fallan respecto a su ubicación dentro la pantalla de resultados de Hoteles.
Rediseños y prototipos
Mi propuesta para mejorar la usabilidad de Skyscanner parte de los puntos de fricción encontrados en la aproximación personal y en la tarea del Usability Testing, que han sido detallados en el apartado anterior.
- Eliminar la pantalla inicial de vinculación de cuentas sustituyéndola por una ventana emergente en la home que aparece a los pocos segundo de ingresar ✅
2. Incorporar una leyenda bajo el calendario de búsqueda de vuelos donde se explica la simbología de los colores usados para discriminar entre días. Además, he añadido el botón “Hecho” en el desplegable de calendario, para facilitar el paso a la pantalla siguiente ✅
3. Incluir los parámetros de búsqueda “fechas” y “número de huéspedes” en la pantalla de búsqueda primera -la anterior a la que se encontraba hasta ahora-, justo al lado del campo “destino”. Añadir icono localización en “destino”para unificar el estilo de los campos de datos. También se ha modificado el botón “cancelar” y se ha añadido “buscar”, para facilitar el avance en la navegación. Ambos botones se han reubicado en la parte inferior del desplegable ✅
4. Ampliar el tamaño dado al módulo “mapa” en la pantalla de resultados de hoteles, mejorando así su visibilidad. Incluir iconos de localización en el mapa, que corresponden a los hoteles dispuestos en la lista de resultados que hay en la parte inferior de la pantalla, para reconocer directamente de un vistazo la ubicación de cada uno de ellos ✅
Subir los botones “Filtrar” y “Ordenar” a la parte superior, justo debajo del destino, la fecha y los huéspedes seleccionados ✅
5 . Convertir “cancelar” y “aplicar” en botones reconocibles visualmente y bajarlos a la parte inferior del desplegable ✅
Prototipado
Tras el ejercicio de rediseño mediante wireframes mid-fi, he prototipado el resultado nuevamente en Figma, para poder revisar el flujo de navegación y compartir el link dónde podéis observar el desafío realizado, fruto de muchas horas de trabajo.
Notas y aprendizaje
Realizando las entrevistas y las pruebas de usabilidad con los usuarios, me di cuenta que cada individuo aportaba un valor único e irrepetible con su experiencia y su navegación. Quedarse con uno o dos usuarios habría sido un completo error, visible además en los procesos siguientes de prototipo y wireframing.
Por otro lado, a lo largo del proceso de wireframing, me he ido encontrado con que algunos elementos no eran estructuralmente correcto, como algunos botones. Por otro lado, una vez tenía hecho mi esquema de pantallas a reproducir en mid-fi, me encontraba con que necesitaría reproducir otras, que estaban correctas inicialmente, para conseguir demostrar la navegación rediseñada en el prototipo. Esto ha añadido aún más tiempo a mi Challenge#3, pero sin duda ha enriquecido el aprendizaje.
_
¡Espero vuestros comentarios y feedback!
Gracias por leerme.
