Ironhack’s Prework: Usability and redesign_Challenge3
La usabilidad de un sitio web es un aspecto cada vez más importante dentro de la experiencia de usuario, realizándose gran cantidad de estudios y pruebas destinados a la mejora de ésta. Por ello, es común encontrarnos cada cierto tiempo con el rediseño de alguno de los aspectos de un sitio web, con el fin de mejorarlo y mantenerlo actualizado.
Caso de estudio de la usabilidad de la app Kayak.
Objetivos
- Analizar la app siguiendo las 10 reglas heurísticas de Nielsen.
- Realizar pruebas de usabilidad con usuarios para encontrar puntos débiles (y fuertes).
- Rediseñar un prototipo que mejore la app.
Background
Usuario tipo. Mochilero
18-38 años. Viaja solo. Siempre ha soñado con este viaje, no tiene mucho tiempo para planear, pero tampoco lo necesita. Viajará en 6 meses y está abierto a casi cualquier posibilidad, pero tiene un presupuesto limitado. Precavido con los precios, prefiere las experiencias en las que tiene la oportunidad de conocer gente para disfrutar juntos. No es exigente y se acomoda a la experiencia más asequible, aventurera y genuina.
Investigación
Nuestro usuario va a visitar Machu Picchu (Perú), un antiguo poblado inca situado en las alturas de los Andes, considerado una de las 7 maravillas del mundo moderno.
- Aeropuerto más cercano. Aeropuerto Cuzco (CUZ), a 76.1 km de distancia.
- Moneda. Sol peruano. 1€ = 4,23 soles.
- Necesidades médicas: no hay vacunas obligatorias.
- Visado: todos los ciudadanos de países de habla hispana pueden visitar Perú sin necesidad de visados excepto los cubanos.
- Recomendaciones de vestuario: mochila mediana, zapatillas de trekking, sombrero o gorro, chubasquero, ropa ligera, de algodón, ropa de abrigo (ya que por las noches baja la temperatura). No es recomendable usar shorts o faldas debido a los mosquitos que hay en el lugar.
- Días necesarios para visitar la atracción: para la ruta económica, que es la que elegiría nuestro usuario, se necesitan 2–3 días.
Benchmarking
A continuación se han analizado y comparado 3 apps de gestión de viajes siguiendo las 10 reglas heurísticas de Nielsen.
Finalmente se ha escogido Kayak para realizar el estudio. Hopper fue eliminada directamente por no ofrecer alojamientos en hostales o albergues, imprescindible para nuestro usuario tipo. Entre Skyscanner y Kayak, cuyo funcionamiento es similar, se ha elegido Kayak por la sencillez y estética de su interfaz. Además, Skyscanner es una app muy popular entre los entrevistados, por lo que me pareció más interesante realizar el estudio con una app que no hubiesen manejado anteriormente.
Testing
Test 5 segundos.
Con la ayuda de la app UsabilityHub se ha llevado a cabo una prueba en la que se ha mostrado la pantalla de inicio de Kayak durante 5 segundos. Posteriormente se ha preguntado al usuario sobre lo que ha visto, la finalidad y la funcionalidad de la app.
Todos ellos han identificado correctamente la función de la misma y se han percatado de los elementos de mayor importancia. Pero cuando se les ha preguntado dónde clickarían para buscar un vuelo, 3/5 han respondido que en el icono del avión. Sin embargo, este icono no se trata de un botón, es meramente informativo y únicamente se accede al buscador mediante la barra gris.
Tareas concretas
Para la prueba de usabilidad se ha pedido al usuario realizar una serie de tareas:
- Busca el viaje “solo ida” más barato. (Te vas dentro de 6 meses pero tus fechas son flexibles).
- Busca un alojamiento barato y compartido con más personas (habitación compartida en albergue, hostal…).
- Guarda tu viaje en favoritos y consulta tus viajes guardados.
Insight
A continuación se detallan los principales problemas que han encontrado los usuarios:
- Confusión de los iconos de la pantalla de inicio con botones.
- Problemas a la hora de encontrar el día con el vuelo más barato porque no se muestran los precios.
- Volver hacia atrás para seleccionar “sólo ida”.
- Vuelo detallado muy confuso, no queda clara la separación entre vuelo de ida y vuelta, escalas…
- Problemas para encontrar la ubicación de los viajes guardados.
- No aparece detallado el tipo de habitación que contratas: privada, compartida…
Wireframes
A continuación se han diseñado una serie de mid-fi wireframes para mostrar el rediseño de la app. También se han añadido detalles de color necesarios para explicar algunos de los cambios.
Tarea 1. Búsqueda de vuelo
En la primera pantalla se ha eliminado la barra de búsqueda y los iconos de los distintos elementos pasan a ser botones para un acceso más intuitivo. También se han aumentado de tamaño para tomar mayor importancia y se ha añadido una pequeña descripción para que quede claro qué es cada cosa. Otro de los grandes cambios es el menú, que pasa de estar oculto en el menú hamburguesa a situarse en la parte inferior.
En la siguiente pantalla no hay mucho cambio, únicamente se resaltarían más las opciones “ida y vuelta”, “solo ida”… para llamar la atención del usuario, ya que durante la prueba de usabilidad se comprobó que la mayoría no se percataban de la opción. También se ha cambiado el icono de la escala para estar en concordancia con la simbología que aparece posteriormente en otras pantallas.
Otro de los cambios más importantes es el del calendario. Se utilizan los colores verde, amarillo y rojo para indicar el nivel del precio de cada vuelo. En caso de no existir vuelo ese día, aparecería en blanco. También se añade en pequeño el precio de cada vuelo; de esta forma, un usuario con fechas flexibles podrá elegir el día que más económico le salga con un simple vistazo general. También se añade la opción de seleccionar “solo ida” para no tener que volver hacia atrás.
En la siguiente pantalla se aumenta el tamaño del botón filtros, ya que algunos usuarios tardaron un poco en encontrarlo. Se elimina el apartado tasas, que incluiríamos dentro de filtros. También se añade una pequeña descripción en el icono de alertas, ya que algunos usuarios lo confundieron con “notificaciones”.
Ante esta pantalla el usuario se encuentra con gran cantidad de información con una jerarquización y orden pobre. No se identifica correctamente cada elemento y ocupa mucho espacio innecesario. Como resultado se ha comprimido y generado “tarjetas” para representar cada vuelo.
Pulsa aquí para probar el prototipo.
Tarea 2. Buscar alojamiento
El espacio de las imágenes es demasiado estrecho y el usuario tiene problemas a la hora de deslizar para ver las siguientes fotos.
No aparece detallado el tipo de habitación que se está contratando. A su vez, las ofertas aparecen tanto en la pantalla “detalles” como en “ofertas”, por lo que se simplifica y se deja únicamente en la pestaña ofertas. Se mantiene un espacio fijo en el apartado detalles con el precio más bajo que al clickar te lleva a ofertas.
Tarea 3. Viajes favoritos
Rediseño de ambas páginas de forma que aparezca cada vuelo con las principales características, y al hacer click se muestre el vuelo con todo detalle. Se incluye un botón que nos lleve directamente a la página de ofertas donde podamos acceder a la compra del vuelo.
El icono de la pestaña viajes se cambia por un corazón, ya que de esta forma el usuario identifica mejor que ahí están sus viajes guardados como favoritos.
