≡En resumen
- Un diagrama, una tarea y un tipo de usuario: si mezclas varios, nadie podrá revisarlo.
- Se dibuja primero el camino feliz y después todas las ramas: errores, alternativas y abandonos.
- El punto de partida es donde entra de verdad el usuario, no la home.
- En un checkout, las decisiones que más pesan son cuenta o invitado, método de envío y pago rechazado.
- El diagrama termina cuando cada flecha lleva a algún sitio y el equipo lo ha revisado.
01 ¿Qué es un user flow diagram?
El concepto de user flow es la idea; el diagrama es el artefacto que produces. Nielsen Norman Group recuerda que un flujo puede representarse como diagrama de flujo, wireflow o diagrama de tareas. Esta entrada es práctica: cómo se dibuja uno de principio a fin, con un ejemplo real de checkout y las herramientas más usadas.
02 Qué necesitas antes de dibujar
- ✓El objetivo del usuario en una frase con verbo: «comprar unas zapatillas», «cambiar la dirección de envío».
- ✓El objetivo del negocio asociado: venta, lead, reducción de llamadas a soporte.
- ✓Quién hace la tarea: cliente nuevo, recurrente, móvil o escritorio. Un buyer persona bien definido ayuda a elegir.
- ✓Los puntos de entrada reales, sacados de la analítica: anuncio, buscador, email, redes.
- ✓Las restricciones: métodos de pago, zonas de envío, datos legales obligatorios.
- ✓Si el producto ya existe, el flujo actual y los pasos donde más gente abandona.
- ✓Una lista de lo que no vas a cubrir en este diagrama, para que nadie lo convierta en un mapa de toda la web.
03 Cómo hacer un user flow diagram paso a paso
-
1
Escribe el objetivo y el final
Coloca a la derecha el óvalo del resultado de éxito. Todo el diagrama tiene que llevar hasta él.
-
2
Coloca el punto de entrada
A la izquierda, el óvalo de inicio con el canal real de llegada. Si hay varios muy distintos, haz un diagrama por entrada.
-
3
Traza el camino feliz
La ruta ideal, sin errores ni dudas, con el mínimo número de pasos. Suele ser una línea recta.
-
4
Añade las decisiones
En cada paso pregúntate qué puede ir distinto: elecciones del usuario y comprobaciones del sistema. Cada una es un rombo.
-
5
Dibuja las ramas de error
Datos no válidos, pagos rechazados, falta de stock, sesión caducada. Cada rama debe volver al flujo o terminar en un final claro.
-
6
Marca los abandonos
Señala dónde puede irse la persona y qué la recupera: email, guardar carrito, chat.
-
7
Cuenta y recorta
Cuenta pasos y campos del camino feliz. Pregunta de cada uno si es imprescindible o si se puede fusionar, retrasar o eliminar.
-
8
Revisa con el equipo
Desarrollo encuentra casos del sistema; atención al cliente, las dudas reales. Ajusta y versiona.
04 Ejemplo de user flow diagram: checkout de una tienda online
Tarea: «comprar unas zapatillas que ya están en el carrito», para un cliente que entra desde el móvil. El diagrama resultante tiene estos nodos en el camino feliz y estas ramas:
| Paso | Símbolo | Contenido | Ramas |
|---|---|---|---|
| 1 | Óvalo | Inicio: pulsa «Ir a pagar» en el carrito | — |
| 2 | Rombo | ¿Tiene sesión iniciada? | Sí: salta al paso 4. No: paso 3 |
| 3 | Rombo | ¿Compra como invitado, inicia sesión o se registra? | Invitado: solo email. Login: subflujo de acceso. Registro: se ofrece al final, no aquí |
| 4 | Paralelogramo | Datos de envío (con autocompletado de dirección) | Error de validación: mensaje junto al campo |
| 5 | Rombo | ¿Envío a domicilio o recogida en punto? | Recogida: selector de punto en mapa |
| 6 | Rectángulo | Resumen con precio total, gastos de envío incluidos | — |
| 7 | Proceso predefinido | Pago en la pasarela | Rombo «¿Pago autorizado?». No: error que conserva el carrito y ofrece otro método |
| 8 | Óvalo | Confirmación del pedido + oferta de crear cuenta con un clic | — |
18 %
de quienes abandonan una compra lo hacen porque la web les obliga a crear una cuenta
Fuente: Baymard Institute, cart abandonment rate (actualizado en septiembre de 2025)
17 %
abandona porque el proceso de pago es demasiado largo o complicado
Fuente: Baymard Institute, cart abandonment rate (actualizado en septiembre de 2025)
40 %
abandona por costes extra demasiado altos (envío, impuestos, comisiones)
Fuente: Baymard Institute, cart abandonment rate (actualizado en septiembre de 2025)
Por eso el diagrama lleva la creación de cuenta al final y muestra el precio total en el paso 6, antes de pagar: son decisiones de flujo que responden a los motivos de abandono más documentados. El subflujo de la pasarela de pago se dibuja aparte, porque se reutiliza y porque sus errores dependen del proveedor. Es el mismo trabajo que hacemos en el diseño de tiendas online antes de tocar una sola pantalla.
05 Herramientas para hacer un user flow diagram
FigJam (Figma)
La pizarra de Figma. Práctica si el equipo ya diseña en Figma, porque el flujo y las pantallas viven en el mismo entorno.
Miro
Pizarra online colaborativa con plantillas de diagramas de flujo. Útil cuando participan perfiles de negocio que no usan herramientas de diseño.
Whimsical
Enfocada a diagramas de flujo, wireframes y mapas mentales con un estilo limpio y rápido de editar.
diagrams.net (draw.io)
Editor de diagramas gratuito con las formas clásicas de flujo; adecuado si necesitas notación formal y exportar a documentación técnica.
Papel, pizarra o notas adhesivas
Lo más rápido para la primera versión en un taller. Se pasa a digital cuando el flujo se estabiliza.
06 Del diagrama al prototipo y a la prueba
Con el diagrama aprobado, cada rectángulo se convierte en una pantalla de wireframe y cada rombo en un estado que hay que diseñar. El siguiente paso lógico es probar el flujo con usuarios sobre un prototipo clicable, antes de programar.
En el ejemplo anterior, la prueba con cinco usuarios mostró que dos no veían el botón de compra como invitado porque estaba debajo del formulario de login. El diagrama no cambió, pero la pantalla sí: la opción de invitado pasó a ser el primer botón. El diagrama dice qué opciones existen; la prueba dice si se ven.
07 Checklist para revisar tu diagrama
- ✓Tiene un único objetivo y un único tipo de usuario.
- ✓El inicio es un canal real de entrada.
- ✓Cada rombo es una pregunta y todas sus salidas están etiquetadas.
- ✓Ninguna flecha termina en el vacío y ningún error es un callejón sin salida.
- ✓El camino feliz tiene el menor número de pasos posible.
- ✓Tiene leyenda, fecha y versión.
- ✓Lo han revisado diseño, desarrollo y alguien que hable con clientes.
Si quieres que un equipo especializado dibuje, pruebe y convierta tus flujos en pantallas que funcionan, en nuestro servicio de diseño UI/UX empezamos siempre por aquí.
Preguntas frecuentes sobre User flow diagram
Es el dibujo del recorrido que hace un usuario para completar una tarea concreta en una web o app, con sus pantallas, decisiones y posibles resultados.
Defines el objetivo y el punto de entrada, trazas el camino ideal, añades decisiones y ramas de error, recortas los pasos innecesarios y lo revisas con el equipo.
Depende del equipo: FigJam si ya diseñáis en Figma, Miro si participa gente de negocio, Whimsical para rapidez y diagrams.net si buscas una opción gratuita y formal.
Los mínimos para completar la tarea con seguridad. No hay una cifra ideal; lo importante es poder justificar cada paso y cada campo que pides.
Sí. Pagos rechazados, datos no válidos o falta de stock son parte del flujo, y si no se dibujan tampoco se diseñan, que es donde más usuarios se pierden.
El diagrama muestra la secuencia de pasos y decisiones de una tarea con figuras abstractas; el wireframe muestra cómo se organiza el contenido de una pantalla concreta. Primero se hace el diagrama y después un wireframe por cada paso.
Los wireframes y un prototipo clicable con el que probar el flujo con usuarios reales antes de desarrollarlo.
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.