Caso de estudio (UX) — Envío express de archivos adjuntos
Gmail para IOS
En el día a día realizamos cientos de acciones y procesos de forma automatizada, y la mayoría de las veces no nos paramos a pensar en alternativas a esas acciones o en los motivos que nos llevan a actuar de una u otra manera.
El mundo digital, aunque tenga sus limitaciones, es más propenso a valorar y optimizar sus productos con rapidez, incluso una vez sacados al mercado.
En relación a todos estos cambios, hace unos días me propusieron un reto:
Responder un email con un archivo adjunto en tan solo 3 clics desde la aplicación de Gmail
Tenía que hacerlo en menos de una hora, y os voy a contar cuál fue una de las posibles soluciones que se me ocurrieron.
INVESTIGACIÓN
Lo primero de todo fue llevar a cabo una breve investigación de un par de aplicaciones, y sobre todo, profundizar en el funcionamiento del propio Gmail.
Tanto Gmail como la app nativa de IOS necesitan de 5 clics para enviar un mail adjuntando un archivo. Ambos siguen este recorrido:
Mail tiene una opción de long press para responder sin entrar en el cuerpo del mensaje, pero aún así hay que seleccionar “responder” al desplegar el context menu, así que siguen siendo 5 taps.
WIREFRAMES
Para lograr reducir el número de pasos tenía que partir de la bandeja de entrada, porque es la primera pantalla que te encuentras al entrar, y cualquier otro recorrido supondría añadir un tap.
Aprovechando la funcionalidad del Long Press que ya tiene incorporado Gmail para trabajar con varios emails simultáneamente, decidí incluir una galería express al mantener la pulsación un poco más de tiempo.
De esta forma conseguía el objetivo:
1- Long Press
2- Seleccionar fotografía
3- Enviar email
Estamos hablando de una función y un contexto muy concretos, así que ciertamente hay aspectos que pulir, como añadir texto al email.
Se me ocurre, por ejemplo, que una posible solución sería utilizar una IA para mandar mensajes predeterminados personalizables cuando se realice este tipo de acciones.
De todas formas, lo importante era demostrar cómo hay cientos de maneras de conseguir un mismo resultado.
Lo habitual no es encontrar una solución única y perfecta, sino que su valor, accesibilidad y funcionalidad dependen del objetivo y de la perspectiva del análisis.
FLOWCHART
Para entender mejor el recorrido del usuario era muy útil diseñar un diagrama de flujo, de esta forma se visualizan perfectamente tanto las decisiones que llevarían al usuario a utilizar dicha funcionalidad como las 3 acciones requeridas:
UN PLUS DE ALTA FIDELIDAD
Aunque el challenge había terminado, desde hace unas semanas me apetecía probar a replicar algunas pantallas de cualquier producto que estuviera en el mercado, y esta era una oportunidad perfecta.
Primero realicé una investigación de la guía de estilo o sistema de diseño que se había podido utilizar. Es uno de esos casos especiales donde se trata de una app nativa de Google en IOS, así que al principio no tenía claro si seguía Material Design o las Human Interface Guidelines.
Una vez definidos los estilos en Figma, me puse a realizar las pantallas y este fue el resultado:
Las pantallas 2 y 3 están conectadas porque forman parte del mismo long tap gesture que explicamos al principio. Primero se muestran las opciones de emails simultáneos y después aparece la galería express con tus archivos preparados para ser enviados lo más rápido posible.
Una vez seleccionas al menos uno, se muestra el botón de “enviar” en el menú superior y… ¡listo!
Y así es como termina este pequeño reto 🙂. Si te animas, escribe en los comentarios qué otras soluciones se te habrían ocurrido a ti.
Termino con una de las lecciones que aprendí durante este proceso de diseño: “Si piensas que dos tipografías son iguales, fíjate en las comas.”
