¿Qué es un User Flow para UX?

Un user flow o flujo de usuario consiste en la secuencia de pasos que realiza un usuario en una web o app para realizar una determinada tarea.

La creación de un flujo de usuario, es vital a la hora de conocer las rutas de interacción que seguirán los usuarios al interactuar con un producto. Definir previamente la ruta que seguirá el usuario nos permitirá obtener una mejor experiencia de usuario en la interacción con nuestro producto.

¿Cuándo realizar el User Flow en UX?

Lo ideal es crear los flujos de usuarios lo más pronto posible, justo después de definir la arquitectura la información y preferiblemente antes de comenzar con el diseño y desarrollo de la interfaz.

Comenzar a diseñar la interfaz visual sin determinar los elementos con los que interactuará un usuario al navegar podría generarnos muchos problemas y futuras revisiones.

¿Qué contiene un flujo de usuario?

En un User Flow se plasman todos los pasos desde el acceso al entorno digital del usuario (Ej: pantalla de login de una app de banco), hasta la realización y de una tarea determinada (Ej: pantalla de confirmación de transferencia bancaria).

Para llegar a crear este flujo, debemos definir y comprender algunas necesidades del usuario dentro de nuestra web o app, para poder comprender mejor que necesitará podemos realizarnos diversas preguntas del estilo:

  • ¿Qué ve el usuario al entrar?
  • ¿Cuál es el objetivo que quiere realizar el usuario?
  • ¿Qué acción va a realizar a continuación?
  • ¿Por qué está en este punto/pantalla?

Crea un User Flow en 3 pasos

Paso 1

Definir la tarea que llevará a cabo el usuario.

Paso 2

Listar los pasos a hacer por el usuario para completar un objetivo o tarea determinada.

Paso 3

Buscar alternativas y caminos diferentes para completar la misma tarea.

Extra

Simplifica la cantidad de pasos para completar una tarea.

Representación de un User Flow

La manera más normalizada para representar los flujos de usuario son mediante diagramas de flujo, en los cuales representamos de manera separada cada paso que lleva a cabo el usuario. La manera más correcta de crearlos es de izquierda a derecha, o de arriba a bajo, y es importante mantener los elementos con espacio para no dificultar la comprensión del flujo.

Herramientas para crear flujos de usuario

Existen infinidad de maneras y herramientas para definir y crear un user flow. Tanto si eres de «la vieja escuela» como si eres nativo-digital, puedes empezar a realizar un flujo de usuario en lapiz y papel, y después digitalizarlo con herramientas digitales.

Si vas a crear un flujo de manera esquemática te recomendaría utilizar FigJam o Miro. En el caso de que optases por crear user flows avanzados y contemplar parte de la UI, te recomendaría crearlos directamente con la herramientas de diseño y prototipado en la que más comoda te encuentres.(Figma, Skecth, Invision, penpot…)

Selección de las mejores herramientas para hacer User Flows.

Whimsical

Miro

FigJam

Ejemplos visuales de User flows UI

Con la abundancia de onboardings y user flows generados han aparecido webs que aglutinan y visualizan los flujos de pantallas de la UI de multitud de aplicaciones. En los siguientes enlaces te dejo unas cuantas webs que te pueden ser de ayuda a la hora de analizar y recrear la UI de un user flow.

Conclusión

Los user flows son un elemento más del diseño y preparación del proyecto de un entorno digital, ya que nos permite identificar situaciones futuras y necesidades por parte del usuario dentro de nuestra web o aplicación.


Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qué es el No Code

    El No Code, también conocido como desarrollo Sin Código, se refiere a un movimiento y un conjunto de herramientas y…