Ironhack’s Prework Challenge 3: Usability Evaluation and Site Redesign
En este tercer Challenge de Ironhack, a los alumnos nos toca ponernos en los zapatos de un trotamundos, ¡qué emoción! El objetivo de este ejercicio será evaluar la usabilidad de cuatro importantes apps de viaje y ocio.
¡Vamos allá!💪
USER TYPE
Pareja joven — 20–40 años (2): Tú y tu pareja deciden ir a un lugar especial el próximo verano. Te das cuenta de que ambos han ahorrado lo suficiente para los boletos y están planeando ahorrar tanto como sea posible durante los próximos 6 meses para hacer este viaje. Quieres ser eficiente y tener todo lo que necesitas organizado para disfrutar al 100% mientras estás allí. Incluso si eres joven, quieres tener momentos especiales para celebrar el estar juntos.
De todo el listado de tipos de usuario desde donde enfocar el ejercicio encontré la pareja joven bastante interesante principalmente porque es el usuario tipo en el que podría verme menos reflejada, lo cual me ayudaría a ser más imparcial a la hora de evaluar las diferentes apps y supondría un reto extra para mí.
RESEARCH
El destino que he escogido para que viaje esta joven pareja es Roma por varias razones:
- Desde Madrid, donde vivo actualmente, es más fácil llegar que a otros destinos.
- Tiene una gran oferta cultural muy atractiva.
- Para ir en verano, Roma es el destino ideal: el clima es cálido y cuenta con varias playas donde poder refrescarse.
- Es un destino muy romántico para disfrutarlo en pareja gracias a sus pintorescos varios que hacen que cualquier paseo se convierta en un momento especial para muchas parejas.
A continuación y antes de lanzarnos a evaluar la usabilidad de las principales apps de viaje, debemos investigar un poco más sobre la ciudad de destino y el tipo de viaje que va a realizar nuestro usuario tipo.
- Aeropuerto más cercano / aeropuerto más conveniente al destino.
Roma cuenta con el aeropuerto más importante de Italia, el Aeropuerto Internacional Leonardo da Vinci, también conocido como el Aeropuerto Internacional de Fiumicino. Situado a las afueras de la ciudad, en el aeropuerto operan vuelos de distintas compañías, entre ellas Ryanair y Vueling Airlines. Al ser un aeropuerto internacional, cuenta con numerosos enlaces y, lo más importante, Madrid está entre ellos. - Moneda y cambio de su propia moneda.
Al igual que en la mayoría de instituciones de la Unión Europea, en Italia se usa el euro, por lo que no se precisa de cambio desde el país de origen (España). - Necesidades médicas: vacunación, visa, etc.
Como el destino está dentro de la Unión Europea (UE), no se precisa de ningún tipo de visado para los turistas procedentes de otros países de la UE siempre y cuando el periodo de estancia no exceda los 90 días. En cuanto a la vacunación, no se precisa de ninguna vacuna especial para viajar a Italia. - Recomendaciones de vestuario.
Como el usuario viajará en verano, es importante que lleve prendas ligeras y frescas para que el calor no paralice sus planes. El calzado deberá ser cómodo, pues la mayoría de los monumentos se visitarán a pie (Roma es el sitio ideal para pasear y disfrutar de las vistas). Además, es muy importante llevar algo de ropa que nos cubra los brazos y piernas ya que, en el caso de visitar el Vaticano, no podremos entrar a los principales sitios turísticos sin esta ropa por norma de vestuario. - Días necesarios para visitar la atracción.
En base a la experiencia de anteriores viajeros, Roma puede visitarse con tranquilidad en 5 días con un poco de prisa en las excursiones. No obstante, como el tipo de usuario escogido pretende ahorrar para disfrutar al máximo de sus vacaciones, elegiremos una estancia de una semana, para que puedan visitar la ciudad tranquilamente.
BENCHMARKING
Una vez definidos los detalles del viaje del apartado anterior, es hora de evaluar la usabilidad de cuatro apps importantes a la hora de organizar viajes (buscar vuelos, reservar hoteles, encontrar qué hacer en el lugar de destino…): Kayak, Tripadvisor, Skyscanner y Hopper.
La evaluación la llevaremos a cabo según los 10 Principios Heurísticos de Jakob Nielsen. Estos principios, desarrollados por Nielsen en 1995, son los más conocidos entre las heurísticas disponibles para evaluar la usabilidad de un sistema, por lo que realizar la evaluación según ellos nos dará la clave de qué app es más usable.
Al llevar a cabo la evaluación, hemos obtenido los siguientes resultados:
Como se puede observar en la tabla anterior, aunque más o menos casi todas las apps fallan en lo mismo, hay una que destaca por encima de las demás: TripAdvisor. Si bien es cierto que el diseño de TripAdvisor no es minimalista y a menudo sobrecarga al usuario de información que no podrá retener por mucho tiempo, es la app ideal para el usuario tipo escogido. TripAdvisor permite a los usuarios planear su viaje con todo detalle, desde los vuelos y alojamiento hasta excursiones y tours turísticos. En nuestro caso, nuestro usuario tipo ha ahorrado lo suficiente para los boletos de avión, por lo que ahora se preocupa por cómo organizar su viaje de forma que pueda ser eficiente y disfrutar todo lo que pueda llevando su itinerario ya planeado. Es por esto que TripAdvisor podría ser la app ideal para nuestro usuario en particular.
TESTING
En esta siguiente etapa del ejercicio nuestra misión es testear TripAdvisor en la versión mobile con la ayuda de tres usuarios que encajan dentro de nuestro Usuario Tipo. Para ello escogí a tres personas de mi entorno cuyas edades varían entre los 22 y los 33 años.
En primer lugar realicé el test de los 5 segundos con la ayuda de Usability Hub para ver qué eran capaces de recordar y si sabrían decirme cuál creían que era la utilidad de la app simplemente mirando su pantalla inicial durante 5 segundos. Todos los usuarios coincidieron en que la app servía para buscar ofertas de ocio y alojamiento y, generalmente, lo que recordaban era los botones iniciales que son un acceso rápido al buscador de vuelos y hoteles.
Posteriormente, confeccioné las tareas que les pediría que realizaran en la app con el fin de encontrar algún punto débil. Estas tareas fueron las siguientes:
- Busca un hotel en Roma que esté cerca del Coliseo cuyo precio por habitación ronde los 100€ como máximo durante una semana en Junio
- Encuentra una excursión que te lleve por los monumentos más famosos de Roma
- Busca un restaurante romántico para cenar en tu pareja en Roma y guárdalo
INISIGHT
Tras recopilar toda la información acerca del comportamiento del usuario cuando desarrollaba estas tareas, lo siguiente es resumir los resultados obtenidos.
En la primera tarea, buscar un hotel cerca del Coliseo, la mayoría de los usuarios tropezaron en una parte del proceso. En la página de Inicio, en el botón “¿Dónde vas?” escribieron Roma, la ubicación que se les había dado. A continuación pulsaban en el botón “Hoteles” y al aparecer el listado, 3 de los 4 usuarios pulsaron en la etiqueta de “¿quieres ahorrar?” que se muestra abajo. Hicieron clic en ella varias veces antes de descubrir que no iba a ninguna parte, es decir, no estaba enlazada a nada, por lo que siguieron con su tarea. Todos los usuarios lograron encontrar un hotel en Roma con las características requeridas, pero dos de ellos manifestó sentirse inseguro debido a los muchos cuadros de texto y etiquetas que se iban encontrando.
En la segunda tarea, todos los usuarios hicieron clic en “Cosas que hacer”, un botón que se encuentra en la pantalla de inicio. Una vez ahí, algunos usuarios encontraron varios problemas:
- En primer lugar, algunos usuarios se sintieron confusos a la hora de elegir ver el listado de excursiones en el apartado “Comprar billetes o entradas y visitas guiadas” o “Tours turísticos”, pues no sabían dónde podrían encontrar la actividad que se les había requerido.
- Otros usuarios se atascaron en este paso y tuvieron que volver atrás varias veces, pues no sabían si en el apartado de “Recorridos en bici y a pie” encontrarían lo que querían, y manifestaban la incomodidad de tener que pulsar en una categoría y luego volver atrás para confirmar que la información no se estaba perdiendo.
- Finalmente, cuando encontraban un tour de las características que se les había pedido, algunos usuarios encontraban la información sobre dónde tenían que acudir, pero no a qué hora.
Finalmente, la tercera tarea que se les encomendó pareció ser la más sencilla, porque todos los usuarios consiguieron encontrar un restaurante de las características que se les pedía y guardarlo en favoritos sin ninguna complicación.
REDISEÑO DE WIREFRAMES
Para encontrar una solución eficaz a los problemas que se encontraron cuando los usuarios realizaron las tareas que se les había pedido previamente, se ha desarrollado una serie de wireframes que ilustran el flow que corresponde a la tarea: “encontrar una excursión o actividad en la ciudad que vas a visitar”. Se ha decidido trabajar sobre este flow porque es en el que más problemas han tenido los usuarios para desempeñar la tarea principal y, gracias a sus observaciones, es en el que hemos detectado más fallos.
El primer wireframe muestra la pantalla de inicio de TripAdvisor cuando el usuario ya ha introducido el sitio de destino, donde podrá buscar posteriormente vuelos, hoteles, cosas que hacer, etc… Aquí se han modificado dos aspectos muy importantes. En primer lugar, se ha fusionado el botón de “Hoteles” con el de “Alquileres vacacionales”, engobándolos a ambos bajo un botón nuevo llamado “Alojamiento”. Esto se debe a que, actualmente, con el auge de los apartamentos de alquiler vacacional, cada vez son más los usuarios que optan por este tipo de alojamiento. Al separar en dos botones distintos estos dos tipos de alojamiento, el usuario podría confundirse y pensar qué no hay opción de compararlos para ver qué podría convenirle mejor. Creo que es mejor que todos los tipos de alojamiento se engloben en un mismo sitio y que, una vez dentro de ese apartado, se puedan clasificar haciendo uso de los filtros.
Por otro lado, la segunda gran modificación en esta pantalla es la adición de un botón llamado “Recursos para viajeros”, una categoría que actualmente se encuentra dentro de “Cosas que hacer” y que pasa por desapercibida, siendo muy importante para los usuarios que acceden a TripAdvisor con el fin de planear su viaje y son viajeros habituales. He movido este apartado a la pantalla de inicio porque podría darse el caso de que un usuario acceda a la app únicamente para conocer los recursos disponibles para viajeros en una determinada ciudad antes de viajar.
Siguiendo con el flow que estamos analizando, cuando pulsamos en “Cosas que hacer” encontramos una serie de categorías y subcategorías en las cuales los usuarios entrevistados se sintieron perdidos ya que, una misma actividad podía aparecer en más de una categoría. He rediseñado esta pantalla de categorías de forma más ordenada (algunas han sido eliminadas de esta pantalla y reubicadas en las opciones de Filtro para mayor comodidad del usuario) según las categorías existentes en la plataforma.
Actualmente, las anteriores capturas de pantalla corresponden a una única pantalla de la app: Cosas que hacer. Como se puede observar, en estas pantallas aparecen las categorías con sus subcategorías ilustradas por fotos. Esto, en la práctica, resultó ser muy confuso para los usuarios, por lo que he propuesto la siguiente reorganización de elementos.
En lugar de la maquetación de elementos actual, la propuesta muestra las categorías ilustradas por una fotografía, eliminando las previsualizaciones de subcategorías en esta pantalla. Esto ayudará al usuario a aclararse y decidir qué categoría seleccionar, sin necesidad de llamar su atención con subcategorías.
Una vez el usuario selecciona una categoría de actividades, encontrará dentro todas las subcategorías. Actualmente, al clicar en una categoría en TripAdvisor, la siguiente pantalla que se muestra es un listado de actividades. Uno de los usuarios manifestó sentir decepción, pues pulsó en la categoría Recorridas a pie y en bici y, mientras esperaba una separación entre ambas, lo que se le mostró fue un listado general de todas las actividades recorridas a pie y/o en bici. En lugar de esto, la pantalla que propongo es la que el usuario espera: una lista de todas las subcategorías dentro de una determinada categoría. Por ejemplo, si el usuario seleccionara “al aire libre”, encontraría dentro un listado de subcategorías donde se encontrarían “recorridas a pie” y “recorridas en bici”. Además, dentro la pantalla de categorías añadiría una breve descripción de las actividades que se pueden encontrar dentro. Varios usuarios entrevistados decían no saber la diferencia entre unas categorías y otras, por lo que tampoco sabían qué podrían encontrar en cada una de ellas.
Además, en esta pantalla, daría la opción de ver todas las actividades de una categoría juntas, sin usar las subcategorías, para aquellos usuarios que no tienen preferencia por una actividad y u otra más allá de la categoría que han escogido.
Al seleccionar una subcategoría, el usuario accedería al listado de actividades dentro de esa subcategoría. Esta pantalla, como he expuesto antes, actualmente no existe, sino que existe un listado general de actividades y excursiones para cualquier sitio donde se haga clic, indistintamente de la clase a la que pertenezca. En el wireframe que propongo, de un solo golpe de vista podríamos ver en el listado el nombre de la actividad, la puntuación según los viajeros (de entre un máximo de 5 puntos), la categoría o categorías a la que pertenece la actividad y, muy importante, el precio, pues este es uno de los factores que determinarán que el usuario pulse en la actividad para tener más información o directamente haga scroll. Además, se ha añadido en la parte superior del listado, un área donde aparecerán los filtros seleccionados, en el caso de que el usuario los esté utilizando.
Finalmente, al pulsar en una actividad, el usuario puede obtener la información más importante y detallada sobre esa actividad. Actualmente, este es uno de los puntos donde los usuarios encontraron más problemas, al verse inundados de información. A continuación, adjunto todas las pantallas que conforman la información de una actividad en TripAdvisor.
Como se puede observar la pantalla es extensísima, y hay numerosos puntos donde los usuarios podrían perderse. Por ejemplo, el hecho de que dentro de una actividad se sugieran otras categorías que no se pueda distinguir del resto de la información, que aparezcan anuncios o que haya un apartado de opiniones que no se puede minimizar, es agotador para el usuario. El wireframe que propongo pretende ordenar la información de forma que se pueda diferenciar y que, de un vistazo, el usuario pueda localizar todos los detalles que necesita sobre una actividad. Se han ordenado los apartados del más importante al “menos”. En el siguiente prototipo podréis encontrar los anteriores wireframes y este último de la pantalla de una determinada Actividad, formando el flow sobre el que me he ocupado en este ejercicio.
¡Espero que os guste la solución que le he dado al problema con el que nos hemos encontrado a lo largo del ejercicio!
CONCLUSION
Aunque al principio este ejercicio era el que más me intimidaba, ha sido de mis favoritos sin duda. Poder hacer una consultoría de sitio y, sobre todo, descubrirme a mí misma encontrando soluciones prácticas y útiles a problemas que se han ido presentando sobre la marcha ha sido muy enriquecedor.
He aprendido a usar herramientas nuevas (Usability Hub) y a perfeccionar el uso de otras (Figma). Además, me he familiarizado con los 10 Principios de Nielsen, algo que sin duda sé que me va a servir en futuros proyectos, por lo que, en general, estoy muy contenta no solo con el resultado del ejercicio, sino con lo aprendido a lo largo de su resolución.
¡Hasta la próxima! 😊
