Prácticas Diseño Interfaces de Usuario 2020-21 (Tema: Turismo)
Grupo: DIU1_TeamAlpacas. Curso: 2020/21 Updated: 14/5/2021
Proyecto:
Descripción:
Appestruz es una aplicación disponible en varios idiomas que te permite tanto planificar viajes como gestionar aquellos que ya tengas de forma muy visual. Además, no requiere registro previo para buscar información, y te mantiene al día con las últimas noticias relevantes, y con posts de la comunidad.
Miembros
- 👤 Jesús López Rodríguez @susolr
- 👤 María Esmeralda Jiménez Martínez @esmeraldajm
Para empezar, hemos analizado algunas aplicaciones parecidas a la que vamos a desarrollar, de forma que podamos tomar inspiración de ellas, y prestar más atención en aquellos aspectos de los que carecen. En concreto, hemos analizado las siguientes: Inspirock, Roadtrippers, Tripit y Lambus.
A pesar de que todas ellas cuentan con una amplia variedad de recursos y puntos de interés, creemos que necesitan prestar más atención a las diferencias que se generan al cambiar entre países (idioma, moneda, etc.), y así ampliar su público objetivo.
Por la versatilidad que posee, vamos a analizar Inspirock.
Queríamos cubrir los segmentos de mercado más interesantes: un joven estudiante con recursos limitados y una mujer de mediana edad en busca de experiencias emocionantes.
Mateo Kroos:
Nuria Vargas:
Procedemos entonces a simular como reaccionarían, tanto Mateo como Nuria, al enfrentarse a escenarios predefinidos:
Mateo Kroos:
Nuria Vargas:
Tras hacer la revisión de usabilidad (usability review) de la página Inspirock, hemos extraído las siguientes conclusiones.
-Enlace al documento: usability_review
-Por los detalles descritos en ese documento, le hemos dado una puntuación a la página de 86/100.
-En general, esta página es bastante completa e intuitiva, pero, aun así, hay varios campos en los que podría mejorar (ej: idiomas y distribución de componentes en la interfaz).
Vamos a continuar con el análisis de esta página usando las siguientes herramientas.
Primeramente, hemos realizado un Feedback Capture Grid, recogiendo ideas que tendrían nuestras personas ficticias al entrar en Inspirock. En concreto, recogen estos cuatro aspectos:
| Interesante | Críticas |
|---|---|
| Preguntas | Nuevas ideas |
Para seguir sintetizando las experiencias de Mateo y Nuria tras usar Inspirock, hemos realizado un mapa de empatía, escribiendo las ideas de Mateo en azul, y las de Nuria en magenta:
Por último, hemos descrito los puntos de vista de ambas personas ficticias, y de una tercera persona más, para completar aún más la recopilación de experiencias:
Nuestra propuesta parte de toda la información que hemos recogido de los apartados anteriores, desarrollando aquellos aspectos esenciales que una aplicación de viajes debe realizar (planificar y gestionar viajes), pero ofreciendo más funcionalidades que pueden hacerla destacar del resto (una amplia sección de noticias y comunidad, además de un apartado de configuración que te permite adaptar la aplicación en función de tu idioma y el país en el que residas).
Para comenzar con nuestra idea, realizamos un ScopeCanvas, concretando en un mismo lugar las necesidades, propósitos, objetivos, acciones y métricas que se desean alcanzar. Así conseguimos centrarnos para empezar con el proceso de desarrollo.
Mediante el uso de un Task Flow, delimitamos las funcionalidades de nuestra aplicación, y la importancia que dichas tienen en función del público que estemos analizando. Además, determinamos cuáles de ellas son las más importantes.
En cuanto al mapa de nuestra aplicación, comenzamos desde la pantalla de Home, y, a través de ella, podemos acceder a las páginas principales, que a su vez nos darán acceso al resto de páginas, tal y como se puede observar en el siguiente esquema:
Una vez tenemos diseñado el Sitemap, describimos la funcionalidad de cada una de las opciones que se encontrarán en nuestra aplicación:
Para terminar con el bocetaje, diseñamos a grandes rasgos algunas de las páginas principales que tendrá nuestra aplicación:
Pasamos ahora a la concreción de nuestro proyecto:
Empezamos plasmando todas las ideas y recursos principales necesarios para el desarrollo en un solo tablón, como el logotipo que tendrá nuestra apliacación en varias versiones, la paleta de colores que se usará las fuentes y los iconos que se utilizarán, y, por último, imagenes de otras aplicaciones que nos vayan a servir de inspiración más tarde.
En cuanto al logotipo, hemos diseñado con Photoshop un avestruz sin patas, pero con un ala de avión. Esta imagen se podría usar, por ejemplo, como cabecera de Twitter, siempre que se inserte encima de un fondo de color sólido que contraste con el avestruz y con el color de las letras empleado.
Nada más entrar, aterrizamos en la Landing Page, que con colores vivos y una imagen llamativa, te invita a comenzar a planificar tu viaje, explicándote por qué deberías de usar nuestra aplicación.
Para decidir qué Patrones IU y Guidelines queríamos usar en nuestra aplicación, hemos tomado inspiración de las siguientes páginas:
Diseños para utilizar con Adobe XD: https://www.adobe.com/es/products/xd/features/ui-kits.html#panel-3
Diseño para Apple: https://developer.apple.com/design/human-interface-guidelines/
Tras analizar ambas páginas, hemos decidido seguir los Patrones IU y Guidelines que ofrece Adobe XD en su kit de Google.
Llegamos por fin al último paso del diseño de nuestra aplicación, el layout Mockup, realizando bocetos Hi-Fi de las distintas páginas de nuestra aplicación.
Publicar my Case Study en Github.. Documente y resuma el diseño de su producto en forma de video de 90 segundos aprox
Esta aplicación nos ofrece información sobre las ofertas turísticas que se encuentran en la ciudad de Granada, ofreciendo la posibilidad de buscar aquello que más se ajuste a los deseos del usuario, para posteriormente darle la opción de reservarlo desde la propia página.
Breve descripción del caso asignado con enlace a su repositorio Github
Hemos usado un número de personas (tanto reales como ficticias) para realizar todo lo referido a la práctica.
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
Adjuntar captura de imagen con los resultados + Valoración personal
SUSAppestruz:
SUSTourGraná:
En general ambas propuestas cuentan con un nivel más que aceptable, además de haber recibido puntuaciones bastante similares. Si que difieren en los sectores más críticos, aunque obviando estas puntuaciones más bajas la calificación que obtienen es bastante similar.
Añadir report de usabilidad para práctica B (la de los compañeros) Usability-report
Valoración personal
Durante el análisis de la propuesta de nuestros compañeros hemos visto que han conseguido elaborar una app muy intuitiva y fácil de usar, a la par que agradable. Sin embargo, si tuvieramos que poner una objeción, serían los serios problemas de contraste entre las letras y el fondo de la app, lo que la hace un poco difícil de ver en algunas situaciones. Obviando este último punto, el trabajo realizado por los compañeros es bastante bueno, ya que han conseguido desarrollar un producto muy bueno.
Indica qué pretendes evaluar (de accesibilidad) sobre qué APP y qué resultados has obtenido
5.a) Evaluación de la Accesibilidad (con simuladores o verificación de WACG) 5.b) Uso de simuladores de accesibilidad
(uso de tabla de datos, indicar herramientas usadas)
5.c Breve resumen del estudio de accesibilidad (de práctica 1) y puntos fuertes y de mejora de los criterios de accesibilidad de tu diseño propuesto en Práctica 4.
(90-150 palabras) Opinión del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos