UX y Material Design - Fic-Spinoff/family-care GitHub Wiki

Consideraciones UX

Tenemos dos grupos de usuarios: los vigilantes (Guard) y los vigilados (VIP). Si bien el primer grupo puede tener todo tipo de usuarios, tanto experimentados en interfaces Android como no, en el segundo grupo se espera un buen porcentaje de personas mayores. Se tuvo especial consideración a la hora de diseñar la interfaz y las actividades de la aplicación, en particular con leyendas permanentes bajo la navegación de VIP. Buscamos conseguir un diseño fácil de leer, acciones lo más sencillas posibles. Si bien en algunas cosas requerirán algunos de ellos la ayuda de otros para configurarla, se intentó la mayor pulcritud y usabilidad para la experiencia de usuario.

Navegación Guard Navegación Guard

Navegación VIP Navegación VIP


A la hora de instalar y arrancar por primera vez la aplicación, se ha dividido el proceso en tres subtareas: login, elección del rol y aceptación de Términos y Condiciones. En el caso del login, optamos por una opción externa (cuenta Google) no sólo para aprovecharlo para los servicios Firebase, sino también para mejorar la UX y para tener contexto del usuario.

En cuanto a idiomas y globalización, la aplicación cuenta con dos recursos (strings.xml) para sus textos. Uno es el internacional en inglés, y el otro es español. Por falta de tiempo no se ha incluído una versión en gallego, pero se ha planteado por el equipo para una versión más pulida.

En el caso de pantallas grandes, se han optimizado un par de actividades para tablets en las que se no se veían bien:

Elección de rol

Para esta actividad tenemos dos vistas del tipo CardView. En los móviles el diseño es vertical, pero en tablets se optimizó con otro layout para la orientación horizontal (land). Se rearreglaron las vistas una al lado de la otra en lugar de arriba y abajo, y se centró el contenido. Por tanto, tenemos dos versiones del fichero activity_role.xml para cada situación.

activity_role.xml


Izquierda: versión default. Derecha: versión land

Lista de miembros

El layout del usuario VIP, aparte del fragmento de contenido, tiene otro fragmento que sólo se activa en modo landscape que muestra la lista de familiares que lo vigilan. Cuando este layout es visible (fragment_member_list.xml bajo land), ambos fragmentos aparecen uno al lado del otro y el fragmento de contenido carga el perfil del primer familiar de la lista. En caso del layout horizontal, el contenido cargado en el único fragmento será la lista, y los perfiles serán nuevas actividades que se cargarán en su lugar al seleccionarlos.

fragment_member_list.xml en vista previa


Layout fragment_member_list.xml en vista previa (izquierda: default, derecha: land)

Material Design

Todo el diseño de la aplicación ha seguido los principios y elementos de Material Design. Por nombrar algunos:

  • Animación e ilustraciones en la primera actividad (splash) al arrancar la aplicación por primera vez
  • Barra de acción superior
  • Uso de íconos minimalistas en la navegación
  • Varios recursos de diferentes resoluciones para las imágenes e íconos de tipo png
  • Uso de vectores para los íconos de navegación, tarjetas de rol y logotipo de la aplicación
  • Paleta de colores de material design (se ha dejado el color azul defecto por el aura de calma y responsabilidad)

Barra de acciones Barra superior de acciones


Ícono ic_launcher.png Recursos de este ícono Ejemplo de recurso y sus versiones