Prácticas Diseño Interfaces de Usuario 2020-21 (Tema: Turismo)
Grupo: DIU3_LosArtistas. Curso: 2020/21 Updated: 29/5/2021
Proyecto:
GranadaÁrabe
Descripción:
La app GranadaÁrabe propone al usuario un conjunto de lugares y experiencias: gastronómicas, monumentales, actividades y paseos relacionados con la historia árabe que rodea a Granada.
El usuario podrá seleccionar el tiempo del que dispone para pasar en la ciudad y el tipo de experiencias que le gustaría vivir y disfrutar. En función de su selección, la app proporcionará una serie de rutas que al usuario podrían interesar, entre las cuales podrá elegir.
Logotipo:
Miembros
- 👤 Ramón García Verjaga
- 👤 Daniel Haro Contreras
En relación a la asignación DIU3 Experiencias y planificación de ocio, hemos elegido los siguientes cuatro competidores que compararemos atendiendo a diferentes factores; entre ellos, la experiencia de usuario en los más diversos y frecuentes micro-momentos que pueden tener los usuarios en sus aventuras por las plataformas.
- Civitatis: Está centrada exclusivamente en las experiencias y planificación de ocio. Permite consultar y reservar diferentes experiencias en los lugares más turísticos del planeta. Es muy reconocida a nivel internacional y sirve de guía para muchos turistas ofreciendo diferentes itinerarios de visita en función de las necesidades de los mismos.
- TripAdvisor: No está centrada exclusivamente en las experiencias y planificación de ocio. Permite buscar alojamientos, restaurantes, vuelos, etc. Además, destaca por la comunidad tan grande que posee, que la hace una plataforma repleta de opiniones e hilos en foros que permiten encontrar casi cualquier opinión sobre diferentes restaurantes, hoteles, actividades, etc.
- Airbnb: Está centrada principalmente en el alojamiento, razón por la que se expandió en sus comienzos. Sin embargo, ofrece tanto experiencias presenciales como experiencias online. Estas últimas surgen debido a la pandemia de COVID-19 con un aire renovador de adaptación. Se posiciona como la única plataforma en ofrecer experiencias online.
- Agenda cultural Junta de Andalucía: Está centrada exclusivamente en las experiencias y planificación de ocio. Permite conocer la mayor parte de los eventos culturales de Andalucía. Está dedicada a poner en valor el ocio regional y rural.
Tabla de análisis comparativo que refleja algunas de las que hemos considerado principales características de las diferentes plataformas elegidas:
| Civitatis | TripAdvisor | Airbnb | Agenda cultural Junta de Andalucía | |
|---|---|---|---|---|
| Permite publicar experiencias | ✔️ De forma comercial | ✔️ De forma comercial | ✔️ De forma comercial | ✔️ De forma particular e institucional |
| Ofrece experiencias gratuitas | ✔️ | ❌ | ❌ | ✔️ |
| Ofrece experiencias en diversidad de sitios, no solo en los más turísticos | ❌ | ❌ | ❌ | ✔️ |
| Ofrece experiencias online | ❌ | ❌ | ✔️ | ❌ |
| Permite buscar experiencias | ✔️ | ✔️ | ✔️ | ✔️ |
| Permite filtrar experiencias por lugar | ✔️ | ✔️ | ✔️ | ✔️ |
| Permite filtrar experiencias por fecha | ✔️ | ✔️ | ✔️ | ✔️ |
| Permite filtrar experiencias por precio | ✔️ | ✔️ | ❌ | ❌ |
| Permite filtrar experiencias por accesibilidad | ✔️ | ❌ | ❌ | ❌ |
| Permite realizar la reserva de la experiencia | ✔️ | ✔️ | ✔️ | ❌ |
| Permite gestionar la reserva sin estar registrado | ✔️ | ❌ | ❌ | ➖ No procede |
| Permite que los usuarios publiquen opiniones sobre la experiencia | ✔️ | ✔️ | ✔️ | ❌ |
| Proporciona información sobre las restricciones por coronavirus en las experiencias | ✔️ Mensaje genérico | ✔️ Mensaje adaptado a cada experiencia | ❌ | ✔️ Depende del publicador de la experiencia |
La plataforma que hemos elegido es Civitatis por los siguientes motivos: es la plataforma que más se adapta a nuestro objetivo en los aspectos que hemos considerado importantes; ocupa la mayor cuota de mercado, es decir, es la más extendida entre los clientes; y tiene capacidad de adaptarse para cubrir experiencias que, a día de hoy, no cubre como, por ejemplo, experiencias y actividades en zonas no tan populares.
Hemos seleccionado a Roberto por varios motivos:
- No está familiarizado con las nuevas tecnologías.
- Puede encontrar algunas dificultades a la hora de utilizar la plataforma.
- Está interesado en aprender y vivir nuevas experiencias.
Hemos seleccionado a Ana por varios motivos:
- Está acostumbrada a las nuevas tecnologías.
- Sus exigencias en materia de interfaz de usuario son altas. Si no es lo suficientemente intuitiva, muy probablemente tardará poco en salirse del servicio.
- En ella es muy importante la fase de “Soñar”: se le tiene que notificar debidamente de los posibles eventos de su gusto.
Por lo anterior, hemos llegado a la conclusión de que Roberto y Ana son usuarios que pueden aportarnos gran valor a la hora de realizar el análisis de la experiencia de usuario de la plataforma seleccionada.
Hemos elegido estas dos experiencias de usuario porque representan fielmente situaciones que ocurren frecuentemente a diferentes prototipos de personas. En nuestro caso los prototipos: Roberto, que no está muy familiarizado con la tecnología, encuentra ciertos problemas tanto a la hora de realizar la búsqueda de actividades como a la hora de realizar la reserva; por su parte, Ana, se frustra porque no encuentra información específica sobre accesibilidad para cada actividad.
Enlaces a las valoraciones de usabilidad (Usability Reviews):
🔗 Civitatis-Usability-Review.pdf
🔗 Civitatis-Usability-Review.xlsx
🥈 Valoración final (numérica): 79 - Good
Los pocos fallos que tiene la página no impiden que, en general, la experiencia de uso sea buena. Se incluyen las características de las páginas web actuales como diseño responsive, buena visualización y apariencia, un diseño muy sencillo sin demasiada información y tiempos de respuesta inapreciables. Los usuarios poco experimentados tendrán seguramente una buena experiencia, mientras que los más experimentados, además, notarán que la buena apariencia y simplicidad de la página les invita a quedarse más tiempo.
GranadaÁrabe ofrece a los usuarios una solución gratuita, barata y de calidad para planear sus rutas árabes en la provincia de Granada. Permite conocer la Granada de los musulmanes de forma entretenida, sin perder tiempo y de la manera más local posible, armonizando la cultura y las tradiciones con rutas para todos los gustos.
| Tareas / Grupos de usuarios | Usuario que quiere hacer una ruta | Comerciante de Granada | Institución o artista granadino |
|---|---|---|---|
| Pedir recomendación de ruta | H | L | L |
| Elegir ruta | M | L | L |
| Iniciar ruta | M | L | L |
| Rechazar ruta | L | L | L |
| Valorar lugar de interés | M | L | L |
| Valorar ruta | L | L | L |
| Publicar anuncio | L | H | H |
| Publicar actividad | L | H | H |
| Término | Significado |
|---|---|
| Sobre nosotros (About Us) | Información de la empresa y del objetivo de la aplicación |
| Contáctanos (Contact Us) | Información de contacto de la empresa |
| Gastronomía (Gastronomy) | Experiencias gastronómicas anunciadas en la aplicación |
| Monumentos (Monuments) | Experiencias de visitas de monumentos anunciadas en la aplicación |
| Paseos (Walks) | Experiencias de paseos anunciadas en la aplicación |
| Actividades (Activities) | Experiencias de actividades anunciadas en la aplicación |
| Rutas (Routes) | Itinerarios con diferentes experiencias |
| Buscar ruta (Search route) | Buscar ruta en base a las preferencias de fechas y experiencia elegidas |
| Elegir ruta (Take route) | Elegir ruta entre las propuestas |
| Información de ruta (Route information) | Información sobre la ruta propuesta o elegida |
| Comenzar ruta (Start route) | Comenzar la ruta elegida para su seguimiento desde la aplicación en tiempo real |
| Realizando ruta (In route) | Información de la ruta durante su realización |
| Opinión (Opinion) | Valorar y comentar la ruta realizada |
| Buscar (Search) | Buscar rutas y experiencias en la aplicación |
| Iniciar sesión (Login) | Acceder a la aplicación |
| Registrarse (Register) | Registrarse en la aplicación |
| Perfil de usuario (User profile) | Lugar donde se pueden ver los datos y las distintas rutas y reservas de un usuario |
| Preferencias de usuario (User preferences) | Lugar donde se pueden modificar determinados aspectos de la configuración de un perfil de usuario |
El imagotipo de GranadaÁrabe está formado por tres partes bien diferenciadas, una parte gráfica en la que se puede distinguir un skyline de la Alhambra, una parte textual en la que aparece el nombre de la propuesta junto a un eslogan y una zona de color que pretende captar la atención.
Para diseñar el imagotipo se ha utilizado una herramienta de diseño web denominada Canva. El logotipo se ha diseñado con resolución adaptativa para, de esta forma, poder adaptarlo a diferentes componentes. Se han generado algunas pruebas de cómo quedaría en diferentes lugares:
La guía de estilo utilizada es Material Design, por ser el estándar para la mayoría de apps móviles que se desarrollan para Android hoy en día. Proporciona numerosos componentes y patrones de diseño que encajan perfectamente en nuestra app.
Se ha seleccionado la siguiente paleta de colores con el objetivo de estructurar y definir de forma excepcional el valor de la marca. La paleta está conformada por un conjunto monocromático, que define el valor de la propuesta, junto a un color complementario, que se utiliza para destacar elementos claves, y dos colores básicos, que dotan de sencillez.
El amarillo:
- En un tono claro (amarillo canario) representa elegancia, originalidad y alegría.
- En un tono pálido (amarillo paja) representa el deterioro y el paso del tiempo.
- En un tono dorado (amarillo oro) representa opulencia y riqueza.
El azul xanadu aporta un punto de contraste a la variedad de colores amarillos.
El naranja persa representa la cultura árabe, sus espacios y construcciones.
Por ello, los colores elegidos se han considerado adecuados para diseñar GranadaÁrabe, una aplicación que permite una inmersión total en la cultura musulmana a través de sus tradiciones y costumbres. Esta paleta representa la historia que se quiere enseñar a través de la propuesta.
Con el objetivo de facilitar la lectura y captar la atención de los usuarios hemos seleccionado las tres siguientes tipografías en sus diferentes variantes:
- Alice: se usa para el logo. marcando el contraste ya que es una fuente con serifas. Sus curvas y diseño le aportan un aire árabe, apropiado para la temática de nuestra aplicación.
- Montserrat Light: se usa para el diseño de la web y la landing page. Proporciona una agradable lectura que ayuda a centrarse en los detalles del contenido. Sin serifa.
- Roboto: se usa para la aplicación de Android por ser la fuente estandarizada para las apps en esta plataforma. Sencillez reforzada por su simetría. Sin serifa.
- Como encabezado se ha decidido utilizar una App Bar.
- Para editar detalles en la página del usuario se utiliza un Text Field.
- Para pasar entre las 3 distintas partes de la ruta (monumentos, gastronomía y actividades) se utiliza el patrón Tabs.
- Para seleccionar la parte de la aplicación que nos interesa (ruta, lista de todos los sitios e información general) se utiliza el patrón Bottom Navigation Bar.
- Para disparar acciones en la app, tales como calcular la ruta, ver información concreta o acudir a un enlace externo, se utiliza el patrón Buttons, con el tipo Contained button.
- Para visualizar información pasajera y que se superpone sobre la app se utiliza el patrón Dialogs, con el tipo Alert Dialog.
- Para la lista de elementos en la ruta se utiliza el patrón Lists, con el tipo Single-line List ya que en la lista solo se visualiza el nombre del elemento, y si se quiere más información hay que pulsar sobre él.
| Inicio | Ruta completa | Ruta monumentos | Monumento |
|---|---|---|---|
 |
 |
 |
 |
| Lista completa | Información | Usuario |
|---|---|---|
 |
 |
 |
GranadaApp (DIU2.JMM) es una plataforma que permite buscar tanto actividades como alojamiento en la ciudad de Granada. Ofrece todo lo necesario para realizar reservas. También, pone a disposición del usuario diversa información de la ciudad que podría ser de su interés. La aplicación puede ser utilizada tanto por usuarios invitados (no registrados), que no gozan de una experiencia personalizada, como por usuarios clientes (registrados), que pueden obtener recomendaciones y diversa información en relación a sus intereses.
| Nombre | Género | Edad | Ocupación | Experiencia en internet | Plataforma | Perfil cubierto | Test | Puntuación SUS |
|---|---|---|---|---|---|---|---|---|
| 👨🏫 Antonio | Masculino | 52 | Profesor | Alta | Escritorio Windows - Móvil Android | Siempre busca actividades para hacer con sus hijos. No se conforma con cualquier cosa. | A | 90 |
| 👵 Juana | Femenino | 73 | Jubilada | Baja | Móvil iPhone | Se distrae con el móvil. Aprende a navegar por internet. Le gusta mirar viajes y restaurantes. | B | 55 |
| 👨🎓 Pedro | Masculino | 18 | Estudiante | Alta | Escritorio Linux | Inquieto. Siempre busca algo que hacer. Le gusta la historia y visitar ciudades. | A | 97.5 |
| 👩🎓 Elena | Femenino | 22 | Estudiante | Alta | Móvil Android | Intranquila. Le gusta viajar, maneja el móvil de forma muy rápida. | B | 67.5 |
Estas cuatro personas se han elaborado basándose en personas cercanas de nuestro entorno que podrían, de algún modo, tener interés en utilizar el producto que se está evaluando.
-
Antonio, profesor, tiene un perfil que aporta madurez y experiencia en el uso de estos productos. Gracias a esto, se pueden identificar carencias variadas asociadas a un mal diseño del producto.
-
Juana, jubilada, tiene un perfil que aporta inexperiencia en el uso de las nuevas tecnologías. Por ello, ha sido útil que realizara la valoración, teniendo como objetivo encontrar las deficiencias de diseño que pueden afectar a personas que no se desenvuelven del todo bien en estos entornos.
-
Pedro y Elena, estudiantes, tienen un perfil parecido que es muy común en la utilización de este tipo de productos. Esto ha sido útil ya que cada uno ha participado en la evaluación de un producto diferente, teniendo como meta lograr determinar cuáles son los problemas que afectan a la mayoría de usuarios estándar que utilizan cada uno de los productos.
🔗 System-Usability-Scale-Test.pdf
🔗 System-Usability-Scale-Test.xlsx
🔗 UXCaseStudy-review-DIU2_JMM.pdf
🔗 UXCaseStudy-review-DIU2_JMM.xlsx
Se ha llevado a cabo la evaluación con la aplicación de varias técnicas:
- En primer lugar, se ha realizado un System Usability Scale Test (SUS) a través del cual se han obtenido resultados comparativos entre dos prototipos de aspectos generales de los mismos.
- Posteriormente, de forma extra, se ha realizado un User Experience Case Study Review a través del cual se han podido obtener valoraciones del proceso completo del diseño y desarrollo del prototipo.
Los problemas más graves detectados tienen que ver con la incompletitud del prototipo. Algunos de los encontrados son los siguientes:
- Al diseño actual le falta aún bastante especificidad para mostrar realmente el que será su aspecto funcional.
- No se puede interaccionar correctamente porque no se presentan determinadas funcionalidades básicas.
- No se presta demasiada atención a los detalles en el diseño. Por ejemplo, se puede apreciar en la barra de navegación de la landing page como no se ha aplicado la técnica de alineación de elementos.
- Le falta identidad, pues no se presenta ningún logotipo que integre el nombre de la aplicación ni en Github ni en el vídeo de presentación del prototipo.
- La landing page no destaca la propuesta de valor de la idea.
- No se explican las guidelines seguidas para la realización del diseño.
🔗 P4_UsabReport_GranadaApp_doneby_DIU3_LosArtistas.pdf
🔗 P4_UsabReport_GranadaApp_doneby_DIU3_LosArtistas.docx
El proyecto, que parte de una buena idea, no se ha trabajado lo suficiente para desarrollarlo a un alto nivel de completitud. No está bien estructurado, lo que hace que el análisis del mismo sea complicado. Además, no existe una imagen de marca bien definida, pues elementos como el moodboard, logotipo, landing page, etc., no están hechos, y los que están hechos no parecen estar relacionados. El vídeo de presentación está bien elaborado y la idea bien vendida, sin embargo, habría sido interesante tener un prototipo más completo, con un branding bien definido, para que se pudiera apreciar todo su potencial.
Con el objetivo de mejorar el proyecto se ofrecen las siguientes recomendaciones:
- Reestructuración del documento expositivo (README.md) con la finalidad de que la información se presente de forma clara y diferenciada.
- Elaboración de moodboard que se identifique con la marca.
- Construcción de una landing page que destaque la propuesta de valor.
- Justificación correcta de los elementos del diseño, sobretodo de las guidelines utilizadas.
- Creación de un logo adecuado a la idea y al diseño.
- Mejora del prototipo incluyendo ejemplos reales de información de la ciudad, alojamiento y actividades.
Por la naturelaza de nuestros estudios y, problamente, nuestras futuras profesiones invertimos e invertiremos gran parte de nuestro tiempo diseñando y desarrollando productos. En numerosas ocasiones, nos centramos más en la parte técnica de los mismos, dejando a un lado una parte fundamental: un adecuado diseño de interfaz centrado en el usuario y su experiencia.
Este compendio de prácticas nos ha aportado una concepción más amplia de lo que es realizar un desarrollo integral de un diseño de usuario, permitiéndonos adquirir experiencia para nuestro futuro profesional. No solo hemos desarrollado un diseño de usuario, sino que también hemos evaluado otros diseños de usuario, proceso que nos ha formado para ser autocríticos y comprender que este trabajo se tiene que hacer desde la objetividad y teniendo en cuenta a diversos grupos de usuarios que no se identifican con uno mismo.
Las diferentes tareas realizadas nos han hecho comprender lo importante que son los detalles, pudiendo marcar la diferencia entre dos productos similares.
Ahora, sabemos cuales son las tareas llevabas a cabo por un UX Designer y lo importante que es su trabajo en un equipo de diseño y desarrollo de productos.
Concluimos con una valoración muy positiva de los resultados obtenidos. Tanto el esfuerzo como la constancia aplicados en estas prácticas se han visto recompensados con un, a nuestro parecer, fantástico diseño. Además, en el resultado se refleja que hemos afianzado todos los conocimientos teórico-prácticos explicados a lo largo de la asignatura. Sin lugar a dudas, volveríamos a repetir esta experiencia.