≡En resumen
- Un user flow describe cómo se completa una tarea concreta dentro de una web o app, paso a paso y con sus decisiones.
- Task flow, user flow, wireflow y journey map no son sinónimos: cambian el alcance y el nivel de detalle.
- El user flow se diseña antes de las pantallas y se valida después con datos reales y pruebas con usuarios.
- Su gran utilidad es detectar pasos sobrantes, callejones sin salida y ramas que nadie había previsto.
- Un buen flujo parte de un objetivo del usuario y de un punto de entrada real, no del organigrama de la web.
01 ¿Qué es un user flow?
Nielsen Norman Group lo define como el conjunto de interacciones que describen los pasos típicos o ideales para completar una tarea habitual con un producto. La clave está en la palabra tarea: un user flow no cuenta toda la relación de un cliente con una marca, sino un recorrido acotado que se completa en minutos. Es una pieza básica del trabajo de experiencia de usuario, a medio camino entre la investigación y el diseño de pantallas.
La forma de dibujarlo viene de los diagramas de flujo de la ingeniería industrial: Frank y Lillian Gilbreth presentaron su flow process chart a la Sociedad Americana de Ingenieros Mecánicos (ASME) en 1921, y de ahí salen las cajas, rombos y flechas que se siguen usando hoy.
- ✓Un objetivo del usuario, formulado como verbo: comprar, darse de alta, pedir cita, cancelar.
- ✓Uno o varios puntos de entrada reales: anuncio, buscador, email, notificación, home.
- ✓Los pasos o pantallas por los que pasa, en orden.
- ✓Las decisiones y condiciones que abren ramas: ¿tiene cuenta?, ¿hay stock?, ¿falla el pago?
- ✓Uno o varios finales: éxito, error recuperable o abandono.
02 Task flow, user flow, wireflow y journey map: tipos y diferencias
Bajo el nombre genérico de «user flow» se mezclan cuatro entregables distintos. Confundirlos es la causa más habitual de diagramas que no sirven para nada: demasiado detallados para una reunión con dirección o demasiado vagos para que desarrollo los construya.
| Formato | Qué muestra | Nivel de detalle | Cuándo usarlo |
|---|---|---|---|
| Task flow (flujo de tarea) | Un único camino lineal para una tarea, sin ramas | Bajo | Al principio, para acordar los pasos mínimos de una tarea |
| User flow (flujo de usuario) | El camino de un tipo de usuario con sus decisiones, errores y alternativas | Medio | Para diseñar la lógica de una funcionalidad antes de las pantallas |
| Wireflow | Pantallas en boceto (wireframes) unidas por flechas de interacción | Alto | En apps y webs dinámicas, cuando la pantalla cambia sin cambiar de página |
| User journey map | La experiencia completa a lo largo de canales y tiempo, con emociones y puntos de contacto | Estratégico | Para entender la relación global del cliente con la marca |
03 User flow vs user journey y customer journey
La confusión más frecuente es con el customer journey. Nielsen Norman Group lo resume así: el user journey es una secuencia basada en un escenario, normalmente a través de varios canales y durante un periodo largo, que recoge también lo que la persona piensa y siente; el user flow se limita a las interacciones con un producto para completar una tarea en minutos u horas.
| User flow | User journey / customer journey | |
|---|---|---|
| Alcance | Una tarea dentro de un producto | Un objetivo amplio con la marca |
| Canales | Uno (la web o la app) | Varios: anuncios, tienda física, email, soporte, redes |
| Duración | Minutos u horas | Días, semanas o meses |
| Incluye emociones | No, se centra en pasos y lógica | Sí, pensamientos, emociones y puntos de dolor |
| Quién lo usa más | Diseño de producto y desarrollo | Marketing, experiencia de cliente y dirección |
El journey de alguien que cambia de seguro de coche dura tres semanas: ve un anuncio, compara precios, llama, recibe un email y firma. Dentro de ese journey hay varios user flows: «calcular precio en la web», «subir el carné de conducir» o «firmar la póliza». El journey dice dónde duele la experiencia; el user flow dice cómo arreglar una pantalla concreta.
04 ¿Para qué sirve un user flow?
Diseñar antes de dibujar pantallas
Obliga a pensar la lógica completa, incluidos errores y casos raros, antes de invertir horas en diseño visual.
Quitar pasos que sobran
Al ver la tarea entera se ven campos repetidos, confirmaciones inútiles y desvíos que alargan el camino.
Alinear al equipo
Diseño, desarrollo, negocio y atención al cliente discuten sobre el mismo mapa en lugar de sobre suposiciones.
Preparar pruebas y medición
Cada paso del flujo se convierte en una tarea de test o en un paso de embudo que medir en analítica.
En un proyecto de diseño UX/UI, los flujos suelen ir justo después de la investigación con usuarios y de la arquitectura de la información, y justo antes de los wireframes. Así cada pantalla que se diseña tiene un porqué: existe porque un paso del flujo la necesita.
05 Del diseño a los datos: cómo se trabaja un user flow
El user flow no es un dibujo que se hace una vez. Tiene un ciclo de vida: se diseña, se prueba, se mide en producción y se mejora. Cada fase tiene su técnica y en este diccionario la explicamos por separado.
-
1
Notación
Se eligen los símbolos: óvalo para inicio y fin, rectángulo para pantallas o acciones, rombo para decisiones y flechas para el orden.
-
2
Diagrama
Se dibuja el flujo de una tarea concreta, con su camino feliz y sus ramas de error.
-
3
Prueba
Con un prototipo, usuarios reales intentan completar la tarea y se observa dónde se atascan.
-
4
Análisis
Ya publicado, la analítica muestra por dónde pasa de verdad la gente y en qué paso abandona.
-
5
Optimización
Se eliminan pasos y fricciones, se lanza el cambio y se vuelve a medir.
06 Ejemplo de user flow: recuperar la contraseña
Entrada: pantalla de inicio de sesión. Paso 1: clic en «¿Has olvidado tu contraseña?». Paso 2: escribe su email. Decisión: ¿existe una cuenta con ese email? Si no, mensaje que lo explica sin revelar datos y ofrece registrarse o comprar como invitado. Si existe, se envía un enlace. Paso 3: abre el email; decisión: ¿el enlace ha caducado? Si ha caducado, vuelve al paso 2 con un aviso claro. Paso 4: crea la nueva contraseña. Final: sesión iniciada y vuelta al carrito que tenía, no a la home.
Fíjate en el último detalle: devolver a la persona a donde estaba es una decisión de flujo, no de diseño visual. Es el tipo de mejora que solo aparece cuando alguien dibuja el recorrido completo y se pregunta qué quería hacer el usuario antes de olvidar la contraseña. En una tienda, ese detalle repercute directamente en la optimización de la conversión.
07 Errores habituales al crear un user flow
- ✓Dibujar solo el camino feliz y olvidar errores, pagos rechazados o sesiones caducadas.
- ✓Empezar siempre en la home, cuando la mayoría entra por una ficha de producto, un anuncio o un email.
- ✓Mezclar varios tipos de usuario en el mismo flujo: el cliente nuevo y el recurrente no hacen lo mismo.
- ✓Convertir el flujo en un mapa del sitio, con todas las páginas, en lugar de una tarea concreta.
- ✓Hacerlo una vez y no volver a compararlo con lo que la analítica muestra que ocurre de verdad.
Preguntas frecuentes sobre User flow
Es la representación de los pasos, pantallas y decisiones que sigue un usuario en una web o app para completar una tarea concreta, desde el punto de entrada hasta el resultado final.
Flujo de usuario. Cuando se representa un único camino lineal sin ramas se habla de flujo de tarea o task flow.
El task flow muestra un solo camino lineal para una tarea; el user flow añade decisiones, errores y alternativas según el tipo de usuario y lo que ocurre en cada paso.
El user flow cubre una tarea dentro de un producto y dura minutos; el customer journey recorre toda la relación con la marca, en varios canales y durante días o meses, e incluye emociones.
Es un user flow en el que cada paso se dibuja como una pantalla en boceto unida por flechas. Nielsen Norman Group lo describió en 2016 para documentar apps y webs dinámicas.
Después de la investigación y la arquitectura de la información y antes de los wireframes, y se revisa de nuevo cuando la analítica muestra cómo se usa el producto publicado.
Pizarras colaborativas como FigJam, Miro o Whimsical, o simplemente papel. La herramienta importa menos que tener claro el objetivo, el punto de entrada y las decisiones.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.