UX con Material - TeamSecurityFirst/GeoGuardianWiki GitHub Wiki

En general, desde el inicio del desarrollo nos enfocamos más hacia un diseño más independiente de las directrices de Material Design. Sin embargo hemos adoptado algunos de sus elementos ya que funcionalmente eran los que mejor se adaptaban al caso.

Hemos adaptado la mayor parte del layout con funcionalidad albergada en las parte inferior derecha, sin un AppBar superior ya que nuestro menú se controla desde desplegable inferior.

Cuando consideramos el mercado y audencia al que estaba dirigido nuestra aplicación, al tener una funcionalidad tan abierta, vimos que el usuario "target" podría ser cualquier tipo de persona que puede llegar a tener un smartphone. Por esto, hemos intentado simplificar al máximo el registro a la misma. No hemos pedido ningún tipo de dato ni información a introducir, dando la posibilidad de entrar tanto como anónimo o sincronizándote con tu cuenta de Google, en búsqueda de una seguridad constante (a pesar de ser una aplicación que te rastree, no te pediremos ningún dato comprometido).

Además, una vez hayamos hecho el registro correctamente, ya no es necesario ningún tipo de input para volver a utilizarla.

Siguiendo con esta línea, hemos decidido hacer propios de la aplicación unos colores claros y alegres. Estos logos están en sintonía con el logo de nuestra aplicación. Hemos considerado que un escudo plasmaría en gran medida lo que se intenta transmitir con lo que podemos ofrecer a nuestros usuarios.

Debido a tener un target tan amplio, hemos decidido simplificar al máximo el uso de la misma, definiendo prácticamente toda la funcionalidad en una misma pantalla, el mapa principal. El contexto del uso de la propia app también ha influído en esta decisión, muchos usuarios iniciaran las rutas cuando están en movimiento, por lo que es necesario plasmar una atención esencial a la aplicación para su creación. Las funcionalidades principales se pueden plasmar en, seguimiento de tus amigos, y creación de geofences y rutas, ambas en la misma pantalla.

Como es la pantalla en la que el usuario va a estar la mayoría de su tiempo, las opciones estarán en constante interacción con el usuario. Hemos decidido situar los botones en la parte inferior debido a su comodidad, y a que "entorpezcan" lo menos posible el mapa. Hemos buscado no desvíar la atención del usuario a través de estos botones (y la barra de búsqueda), lo suficientemente intuitivos para poder prescindir de cualquier tipo de texto.

Cuando ya se clickan este tipo de componentes, como la creación de una geofence o una ruta, se abrirán los diálogos en el medio de la pantalla, para facilitar el uso con una sola mano de la aplicación y que no tengan que cambiar su postura. Estos pop-ups ya tendrán texto (breve descripción) para facilitar un mejor entendimiento de las opciones.

Respecto a las opciones, guardamos las preferencias de los clientes en dos distintos aspectos. El primero de ellos es sobre la configuración de sus notificaciones, pudiendo configurarlas en su pantalla de opciones.

La aplicación también permite salvar que usuarios de tu lista de seguidos, quieres que aparezcan en el mapa, mediante un switch en el fragmento de seguidores/seguidos.

Por otro lado adaptamos elementos de Material, entre ellos:

• Material Design Icons. A lo largo de la aplicación hemos utilizado los iconos de este tema para decorar los diferentes elementos de la aplicación.

• Floating Action Button. Hemos utilizado estos elementos para dar funcionalidad sobre el mapa principal: entrar y salir del modo edición, mover el mapa hacia nuestra ubicación, y añadir zonas de seguridad/peligro en la aplicación. Estos iconos se han construído como vectores para favorecer su adaptación en distintas resoluciones de pantalla.

Con respecto a los botones "con estado", cambiamos su apariencia dependiendo de si están activados o no, como son el caso de las notificaciones activadas de tus followers o por ejemplo, si quieres que el following quieres que aparezca en el mapa o no (mediante un switch). Esta característica también está presenta en el apartado de notificaciones de perfil de usuario.

• Bottom Sheet. Este elemento contiene una parte importante de funcionalidad, en la que mostramos los fragments de following y followers y podemos acceder al menú de usuario. Es un elemento desplegable desde el inferior que permite acceder a las ubicaciones de los usuarios a los que seguimos y además a los métodos de notificación de nuestros seguidores.