Esto es el estudio de una caso de estudio para el desarrollo de una aplicación móvil que ayuda a encontrar viajes y compañeros de viaje alrededor de todo el mundo, utilizando el análisis de la Web Trip Giraffe.
- 👤 Guillermo Sandoval Schmidt - Estudiante de Ingeniería Informática en la UGR
Entre las aplicaciones propuestas, las que nos han llamado más la atención han sido: Nomadizers, Trip Giraffe y Miss Travel, pero finalmente nos hemos decantado por Trip Giraffe ya que nos ha resultado la más llamativa de las tres.
Hemos seleccionado un hombre y una mujer, cuyos perfiles contienen personalidades, experiencias y metas en la vida variadas para abarcar un público más diverso.
- Antonio García (policía nacional, 32 años)
- Marian Henderson (estudiante de BBAA, 21 años)
Hemos escogido estos casos porque tienen una gran variedad de inconvenientes muy comunes que pueden surgir de cara a organizar un viaje, especialmente si es con gente desconocida. Entendemos que son experiencias de usuario relativamente comunes.
- Antonio García (viaje con animal de compañía)
- Marian Henderson (viaje de estudiantes)
En primer lugar hemos realizado una tabla donde capturar los puntos fuertes de la web analizada, encontrar fallos de diseños y dudas que surgen al usarla y finalmente, encontrar nuevas ideas para el desarrollo de nuestra app.
Se plantea desarrollar una app móvil que apoye a la página web, mejorando la usabilidad, integrando otras funcionalidades como integración de otras RRSS o enlaces a web para contratar viajes.
Se ha escogido el método de User/Task matrix ya que permite con un vistazo rápido distinguir los puntos críticos del sistema, pudiendo centrarse en el desarrollo de los mismos. Además, ayuda a diferenciar facilmente la importancia de las tareas en función del tipo de usuario.
Finalmente, se ha realizado un primer boceto de la aplicación final, siendo una versión "a papel".
Para el diseño del Imagotipo se ha usado una herramienta de edición online llamada Photopea disponible en: https://www.photopea.com/
Por una parte tenemos el Isotipo, compuesto por un avión girando alrededor de una figura que recuerda a la Tierra. Utiliza el color verde especificado en la guía de estilo, pero al ser plano, permite variaciones de otros colores, blanco y negro o blanco con el fondo oscuro. De nuevo, al ser un logotipo plano, facilita que sea reconocible, ya que no pierde detalle alguno al cambiarlo de color, con una silueta reconocible.
Por otra parte tenemos el Logotipo, siendo las palabras "Tabi Travel", nombre de la app. Utiliza utiliza el color gris definido en la guía de estilo "Lustra Book" como tipografía, una tipografía no libre y de pago. Cuenta con las mismas ventajas que el Isotipo en cuanto a la facilidad para reconocer las letras independientemente del color que se use.
Finalmente, el Imagotipo es la composición de los dos elementos anteriores.
Podemos ver algunos ejemplos de aplicación del Imagotipo a continuación:
Por una parte, se ha escogido la tipografía "Open Sans" en tres de sus variantes, "Regular", "Semibold" y "Bold". Esta tipografía es completamente libre y gratuita que se encuentra bajo la licencia Apache License, Version 2.0. Es una tipografía amigable, especialmente legible y optimizada tanto como para impresión como para utilizarla en dispositivos móviles o en formato web.
Por otra parte, se han usado cuatro colores, siendo el verde con código #007C3F el color principal, como color secundario el rojo con código #7C3634, y auxiliares un tono gris con código #342F28 y el color blanco #FFFFFF.
Investigando sobre patrones de diseño, he podido encontrar Material Design, un sistema de diseño open-source, que nos introduce una manera sencilla de entrar en el mundo del diseño de aplicaciones.
Nos aporta una serie de herramientas como:
- Pautas de diseño, que incluyen desde detalles de estilo hasta buenas práctica.
- Guía de componentes, que nos permite crear una interfaz de usuario sencilla y bonita, tanto para dispositivos móviles como para formato Web.
- Acceso a multitud de iconos.
- Pautas para hacer accesible nuestra aplicación, ayudándonos a crear una aplicación en la que a los usuarios les sea sencillo navegar, entender y usar nuestra interfaz.
Se ha desarrollado un vídeo sencillo explicando el proceso y las técnicas utilizadas para el desarrollo de este proyecto. Se encuentra disponible aquí.
De cara al futuro el trabajo del equipo deberá centrarse en:
- Seguir investigando patrones de diseño, en este caso, seguiría la línea marcada por Material Design.
- Desarrollo de una versión beta de la interfaz, que pueda ser sometida a pruebas con usuarios reales.
- Estudiar la integración adecuada de RRSS en la aplicación.