Prácticas Diseño Interfaces de Usuario 2020-21 (Tema: Turismo)
Grupo: DIU1_1.PCMasterRace. Curso: 2020/21 Updated: 21/3/2021
Proyecto: Alltrip
Descripción: Propuesta de Página Web basada en la organización y planificación de viajes según los intereses del usuario, con valoraciones hacia viajes de otros usuarios.
Logotipo:
Miembros
- 👤 Antonio Ángel Granados Luque
- 👤 Samuel Burgueo Fuentes
En esta práctica estudiaremos un caso de plataforma de turismo y realizaremos una propuesta para su diseño Web.
Las aplicaciones para organizar viajes seleccionadas han sido Roadtrippers, Inspirock, Tripit, Lambus y Amovens. El propósito de estas páginas es planificar un viaje, siendo Amovens una página más enfocada a cómo realizar el viaje en vez de dónde hacerlo. La mayoría te dan carta libre para que organices el viaje a tu gusto, eligiendo un puto de partida y otro de destino, o solamente buscando un sitio en concreto en el cual quedarse. Te dan opción de guardar puntos de interés como grandes parques o museos y sitios como restaurantes, alojamientos, etc. Hemos elegido RoadTrippers porque nos parece una página bastante completa pero carece de algunas caracteristicas en nuestra opinión importantes para una página de ese estilo.
Consulta la tabla de comparación aquí.
Hemos propuesto dos personas ficticias que puedan ser los usuarios interesados en nuestra web. Clica en el nombre para acceder a su perfil.
Hemos escogido dos experiencias de usuario que puedan aportar algo distinto cada una, aunque las dos se basan en organizar un viaje.
Sara: Busca un viaje con su novio y amigos para pasárselo bien.
Nuria: Quiere hacer un viaje tranquilo con sus hijas.
En general, la experiencia es muy buena, es una página muy completa y bastante user-friendly. Uno de los aspectos negativos es que solo está en inglés, y algunas veces no es muy intuitivo el proceso de realizar reservas.
A partir de lo que se ha visto en la práctica anterior podemos hacernos a la idea de retroalimentaciones que pueden ayudar a crear una nueva propuesta de app.
>> Consulta la matriz de captura de ideas aquí
>> Consulta el mapa de empatía
Sobre la propuesta de valor >> Más en detalle aquí
La web se basa en poder organizar un viaje en función de tus gustos, podiendo añadir los puntos que encuentres en el mapa o mediante una búsqueda por nombre. La web debe visualizar información sobre los viajes que tiene cada usuario. También se puede valorar los viajes de los usuarios. Por un pago de 3€, puedes convertirte en usuario premium, y aparte de tener más opciones extra, puedes hacer viajes colaborativos, es decir, invitar gente a tu viaje para poder hacerlo entre todos. También se da la posibilidad de realizar reservas directamente desde la página.
>> Aquí puedes consultar el ScopeCanvas
Con la propuesta de valor dada, hemos pensado en qué grupos de usuarios usarían la app y las tareas que harían cada uno, junto con su prioridad.
>> Consulta la matriz de usuarios y grupos aquí P1 >> Consulta la matriz de usuarios y grupos aquí P2
El sitemap representa el flujo de la información de la aplicación, mostrando las secciones y su funcionalidad.
El Sitemap contiene las acciones que luego se usarán para etiquetar las acciones de la aplicación. Pero... ¿qué significan? ¿Es lo mismo crear un grupo que un evento? ¿Qué es eso del Login? Por ello, se ha hecho una tabla con los términos que se han usado en el Sitemap y se les asigna un significado con respecto a la funcionalidad de la propuesta de aplicación.
>> Consulta la tabla de labelling aquí
Una vez hecho lo anterior, podríamos dar una idea visual de cómo se vería la propuesta de aplicación. Eso sí, sin mucho lujo de detalles. Los wireframes están realizados usando fluidui.com
Un moodboard sirve para recoger elementos visuales que encajen con tu idea, tales como imágenes inspiradoras, paletas de colores, fuentes de escritura, etc. Hemos utilizado la herramienta Milanote para realizar dicho moodboard, que puedes consultar >> aquí
3.b Landing Page
La Landing Page es una página promocional cuyo objetivo es atraer la atención de los usuarios y que se interesen por tu app. Suelen tener elementos como un título, subtítulo, algún elemento gráfico de refuerzo como imágenes, y algunos beneficios de tu app.
>>Puedes echarle un vistazo a nuestra Landing Page aquí
En lo respecto a las guidelines, hemos usado el patrón de diseño en grid (columnas). La página se divide en columnas y nos permite manejar mejor las proporciones de los elementos.
Hemos cogido una paleta de colores que se amolda a nuestras imágenes inspiradoras de viajes, y una tipografía adecuada para el diseño web. Puedes ver más detalles >> aquí
Después de haber realizado lo anterior, procedemos a realizar el mockup para nuestra app. Hemos utilizado la herramienta Adobe XD. Puedes ver los bocetos >>aquí
Publicar my Case Study en Github.. Documente y resuma el diseño de su producto en forma de video de 90 segundos aprox
Caso asignado
Nuestro equipo va a realizar un reporte de usabilidad del equipo Kortatu
Kortatu Kortatu es un grupo que ha hecho una aplicación para hacer rutas del jamón en Granada con tours predefinidos y con opciones de valoraciones a cada ruta.
Hemos seleccionado 6 personas y hemos repartido 3 al proyecto A y 3 al proyecto B. Se han repartido de forma aleatoria pero cuidando que no siempre el mismo tipo de usuario evalúe al mismo grupo.
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | TestA/B |
|---|---|---|---|---|---|---|
| Andrea | M / 21 | Fotógrafa | Media | Introvertido | Web/Móvil | B |
| Ana | M / 23 | Estudiante | Alta | Timido | Web/Móvil | A |
| Roberto | H / 22 | Estudiante | Alta | Emocional | Web/Móvil | B |
| Antonio | H / 55 | Comercial | Baja | Racional | Web/Móvil | A |
| Luis | H / 47 | Trabajador | Media | Racional | Web/Móvil | B |
| Andrea | H / 43 | Empleada hogar | Baja | Racional | Móvil | A |
Usaremos el Cuestionario SUS para valorar la satisfacción de cada usuario con el diseño (A/B) realizado. Para ello usamos la hoja de cálculo para calcular resultados sigiendo las pautas para usar la escala SUS e interpretar los resultados http://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/) Para más información, consultar aquí sobre la metodología SUS
Este es el reporte de usabilidad para el equipo Kortatu-->
Con el desarrollo de estas prácticas noos hemos enriquecido valorando al usuario al que va dirigido la apliacación teniendo en cuenta distintos tipos de roles y necesidades, cuidando el diseño en todos sus aspectos tanto colores concentración de información y muchas más cosas a tener en cuenta. Al diseñar antes de implementar podemos tener en cuenta al usuario desde mucho antes y en los tipos que puedan utilizar la apliación a desarrollar.
También hemos aprendido técnicas de diseño tanto para apps como para páginas web y a cómo se realizan los mockups. Todo el proceso de realización de los flujos de información que quiere tener nuestra app así como el labelling que tendrá.
Hemos obtenido una experiencia positiva con este modelo de prácticas porque hemos fortalecido aptitudes como el trabajo en equipo, comunicación y coordinación que son muy importantes.