User Flow, una practica del Diseño UX

User Flow, una practica del Diseño UX
Imagen de portada del post de user flow como practica de diseñador UX

Contenido

En este artículo hablaremos de lo que es el User Flow, o el recorrido del usuario, es una practica fundamental en diseño UX/UI ya que le indica al equipo como deberia el usuario interacctuar con la aplicación.

Es importante que el equipo y el usuario sepa con claridad el recorrido que se esta realizando, este permite a ambas partes saber cuando existe un error, como solucionarlo, ir un paso atras o como seguir avanzando para lograr el objetivo principal de la app o web.

Por lo cual, se realizan esta práctica llamada User Flow o recorrido del usuario, para indicar de forma representativa como debe interactuar el usuario con nuestra app o web. Y adicionalmente le sirve al equipo para observar la funcionalidad de la app o web.


El User Flow es una representación visual de las decisiones que puede tomar un usuario, y el camino que recorre dentro de nuestra app o sitio web. Esta representación visual tambien sirve de guía para el equipo de trabajo.

¿Como nos ayuda en las diferentes ramas de UX? pues… al UX Writer le ayuda para saber que mensajes debe escribir para aclarar mas las situaciones a los usuarios, al Diseñador UX le sirve de apoyo para saber que pantallas diseñar. Incluso puede ayudarnos en los momentos de prueba para identificar si los usuarios requieren mensajes emergentes, tooltips y en que etapa del proceso aplicarlos.

¿Puede ser util para otras ramas fuera de UX?… La respuesta es si, este flujo de usuario ayuda mucho al equipo de desarrollo para que puedan tener en cuenta como debe funcionar la app o web, que debe mostrar primero, donde debe realizar validaciones y más.

¿Cómo realizar un User Flow?

Antes de entrar de lleno con los diferentes elementos y como deben ser empleados, vamos a resaltar que pasos previos requerimos realizar como Diseñadores UX para llegar a la pregunta.. ¿cómo mi usuario realizara este recorrido, que debo colocar, en que orden deben realizar la serie de pasos?.

Para ello se realiza toda la investigación previa, levantamiento de informacion, encuestas, entrevistas, definimos a nuestro usuario. Cuando ya tenemos una noción de como piensa nuestro usuario y que es lo que espera lograr con nuestro servicio podemos ir ideando ese recorrido.

¿Cómo podemos definir el recorrido?

  • Primeramente te recomiendo definir el objetivo o tarea principal. Es decir, que quiere lograr el usuario con nuestra app/web, a esto lo llamamos el “Happy Path” es un recorrido lineal de la tarea principal de nuestra app.
  • Luego comienzas a pensar en base a esa tarea principal ¿que otras tareas puede realizar mi usuario?. Estos son funcionalidades secundarias que ayudan a enriquecer la app/web.
  • Una vez definida las tareas que puede realizar tu usuario, tanto la principal como las adicionales o secundarias, te recominedo seccionar toda esta información por módulos, esto te permitira tener una visión más clara sobre la app. Existe un dicho muy famoso que dice: “Divide y vencerás” y lo puedes aplicar a esta práctica.

Consideraciones para realizar el recorrido de usuario o happy path: te recomiendo tener en cuenta ¿cómo piensa nuestro usuario objetivo?, ¿qué situaciones pueden ser de dificultad para el mismo?, ¿cómo le generamos confianza para continuar?. Esto quiere decir, debemos tener en cuenta el modelo mental del usuario y guiarlo por cada etapa motivandolo a seguir.

Happy Path

El happy path, o el camino feliz, es la representación visual del objetivo principal de nuestra aplicación. Por ejemplo: si estamos diseñando una app para rescatar mascotas perdidas, podriamos colocar como happy path el recorrido que debe realizar el usuario para publicar la mascota extraviada.

Podriamos enlistar cuales serian estas acciones para publicar la mascota:

  • El usuario inicia sesón
  • Va al aparatado “publicar una mascota perdida”
  • Completa el formulario con sus datos, zona donde lo encontro, un número para que lo contacten, la foto de la mascota
  • Se muestra que la publicación fue exitosa, y se le muestra la publicación en linea.

De manera general este seria nuestro posible happy path, si consideras que requiere pasos adicionales puedes realizar el ejercicio y colocar más cosas, nunca limites tu creatividad, pero siempre ten un criterio claro.


Hagamos una pausa…

¿Tenemos suficiente informacón?

Siempre debemos tener en cuenta que estamos efectuando esto para otros, por lo cual debemos organizar la serie de pasos que deben tomar los usuarios y las desembocaduras de las mismas, ser claro y simple ayuda mucho.

¿Servira de algo si coloco tooltips o mensajes emergentes? Depende, intenta colocarte en los zapatos de tus usuarios en caso de que consideres que puede tener una ayuda adicional colocalo, pero recuerda no abrumar al usuario con tantas guias, no lo fuerces a memorizar como usar tu sistema.

Elementos del User Flow

Ahora, teniendo en cuenta todas estas premisas podemos construir el diagrama pero… ¿como se hace? Para ello emplearemos unas series de figuras que representan procesos, pantallas, decisiones, errores y continuidad.

  • Debemos indicar siempre un inicio y un fin.
  • Seccionar que informacion aparecera en pantalla por cada decision tomada y teniendo en cuenta las diferentes tareas que puede realizar el usuario en sistema.
  • Las decisiones siempre son de Si y No, el usuario avanza o regresa a una pantalla.
  • Por cada accion el sistema debe mostrar una respuesta ¿cuales seran? ¿que debo mostrar?
  • Muestra cuando algo da error, pero no lo dejes como “Error 404” indicale al usuario que debe hacer y como salir de estas situaciones.

Con las siguientes figuras podemos representar de forma visual el flujo de usuario

elementos de user flow

Ahora… ¿y cómo empleo todo esto? bueno veremos un pequeño ejemplo con el happy path indicado anteriormente. En el artículo describiamos un ejemplo de Happy Path, sobre una supuesta app para rescatar mascotas, donde indicamos que el recorrido principal podría ser la publicación de la mascota que se extravío.

happy path

More Posts

Envíanos un mensaje

Dejá un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *