Diagrama de flujo o Process flow

Crea una experiencia de usuario mediante un diagrama de flujo y evita los problemas de diseñar sin pensar en tu usuario final.

¿Qué es un Diagrama de flujo o Process flow?

Es una herramienta en el cual trazamos una ruta de etapas o tareas dentro de un proceso por las que podría pasar un usuario con un objetivo final.

Se hace mediante un diagrama en el cual dibujaremos celdas que se conectarán mediante líneas o flechas y que nos ayudarán a poder tener una visión global de la trayectoria dentro de un proceso o sistema.

Estos objetivos dependerán de las necesidades que tenga este usuario y las diferentes maneras en que se pueden resolver.

¿Para qué sirve, en este caso, cuál es el objetivo en el proceso de diseño UX?

Un diagrama de flujo nos sirve para desarrollar una comprensión del proceso que ejecuta un usuario de principio a fin con el objetivo de brindar una experiencia positiva.

Los diagramas de flujo son una herramienta para analizar un sin fin de cosas y en el ámbito del diseño UX nos sirve para poder entender mejor a los usuarios. Hay uso como el del diseño de la arquitectura de un sitio web o procesos de programación, etc. Lo que tenemos que entender es que es una herramienta que nos dará un mapa por el cual nuestro usuario se moverá cumpliendo diferentes objetivos.

Primero que nada debemos entender primero que es un flujo o flow.

El flujo en psicología es el estado operativo mental en el cual una persona está inmersa en la actividad que ejecuta wikipedia

Tener claros los objetivos

Debemos tener claro cuál es el objetivo de la empresa y cuáles son el o los objetivos del usuario. Cada una de las perspectivas es diferente. En el caso de una compañía, su necesidad es poder ofrecer una oferta diferente a la competencia y poder vender un producto que se adecue a las necesidades del usuario. En este caso, el usuario decidirá entre una o varias empresas dónde finalmente comprará su producto. Si nos fijamos una empresa o negocio, puede enfocar su estrategia en un usuario en particular, pero puede ocurrir que ese usuario no se interese en la oferta porque simplemente ha encontrado que la competencia ofrece más atractivos a la hora de la experiencia de compra.

Los objetivos del usuario debe estar alineado a los objetivos que ofrece la empresa, de esta manera podemos entender si realmente la oferta del negocio se alinea las necesidades y expectativas del usuario. Si vemos que están alineados podemos continuar con nuestro diagrama, si no debemos plantearnos volver a repasar la etapa discovery para seguir investigando sobre nuestros usuarios.

Es por esto que recomiendo plantear una metodología de UX desde el principio de cualquier proyecto de usabilidad. Puedes revisar nuestro contenido en post y repasar los siguientes artículos sobre  Análisis del competidor, Definición de audiencia, Escenario de uso  y finalmente una Encuesta de contenido. Todo esto nos sirve para valorar si nuestras ideas están alineadas a los objetivos del negocio.

Crear el flujo

Recomiendo encarecidamente el diseñar nuestros bocetos en papel y después pasar a cualquier otro programa. Esto mejorará nuestro proceso y nos ayudará a enfocarnos mejor en la ruta que sigue nuestro dentro del proceso.

Ahora describiremos un proceso en el que un usuario entra en una aplicación, valida su identidad y entra dentro de un proceso para agendar un recordatorio. Que hemos hecho con esto, primero crear un objetivo, agendar un recordatorio. Entonces definimos el objetivo principal.

Ahora describiremos la ruta a base de bocetos, dibujaremos una pantalla y trazaremos diferentes líneas. Por ejemplo, tenemos una pantalla de BIENVENIDO en la cual el usuario registra sus datos y se da de alta, pero si es un usuario que ya está dado de alta en la aplicación entrará en otro proceso, entonces se abre una rama muy diferente de quién no se ha dado de alta en la aplicación.

Así en adelante, cada parte del proceso y cada acción de usuario se verá comprometida por diferentes alternativas a seguir hasta conseguir finalmente su propósito.

Por ejemplo, en el siguiente caso el usuario al “darse de alta” recibe un mensaje de bienvenida con dos opciones, hacer el tour para explicar cómo funciona la App, en este caso onboarding, que es el nombre técnico para referirse a este proceso o saltar e ir directo al home de la aplicación.

La verdad es que se puede hacer muy detallado, explicando paso por paso para poder tener una idea general.

Te dejo aquí el link de descarga del ejemplo del diagrama de flujo en PNG.

Pero esto no termina aquí…

Ahora este diagrama precioso que hemos hecho es material de discusión, ahora entra la posibilidad de poder mejorar el flujo por el que el usuario se desenvuelva de la mejor manera. Podemos mejorar parte del proceso, podemos evitar clics por parte del usuario, cómo facilitamos su viaje dentro de este recorrido. Tenemos que pensar en nuestro usuario y sus dificultades para entender quizás un proceso complejo que tengamos en nuestro proceso.

Es así como se ven envueltos otros personajes, el usuario en sí mismo podrá evaluar si realmente entiende este proceso, por el lado de desarrollo se podría discutir si hacer el login con otra herramienta o simplemente dando el número de teléfono del usuario o con la huella dactilar se mejora el proceso.

Encontrar el desafío. ¿Qué queremos resolver con esto? Dentro de la interacción, ¿existe algún error dentro de la interfaz que hace que nuestros usuarios?, ¿se sientan confusos o perdido y no quieran continuar?.

Haciendo una lista detallada de problemas podemos ir trabajando uno a uno las interacciones y volver a corregir nuestro diagrama de flujo.

Mis recursos y de donde he sacado bastante información.

La verdad es que me gusta agradecer la cantidad de contenido bueno que hay de parte de otros diseñadores UX que les gusta compartir sus conocimientos con otras personas.

Aquí les dejo un listado de links de dónde encontré muchas cosas interesantes sobre el User Flow.

Aquí el link de descarga en XD del User flow.

https://uxdesign.cc/7-steps-to-achieving-flow-in-ux-design-7ef28adb0de2

https://medium.com/sketch-app-sources/user-journey-maps-or-user-flows-what-to-do-first-48e825e73aah

https://blog.interactius.com/metodolog%C3%ADas-de-ux-diagrama-de-flujo-791f647f3009