≡En resumen
- Un user flow chart es un user flow dibujado con la notación clásica de los diagramas de flujo.
- Con cinco símbolos (óvalo, rectángulo, rombo, paralelogramo y flecha) se representa casi cualquier flujo de una web.
- Cada rombo es una pregunta y cada salida del rombo lleva su etiqueta: sí/no o la condición concreta.
- La norma ISO 5807 da los símbolos; en UX se añaden convenciones propias como distinguir pantalla y acción.
- La leyenda es obligatoria si usas símbolos o colores fuera de lo estándar.
01 ¿Qué es un user flow chart?
El concepto de qué es un user flow responde a la pregunta «qué recorrido hace el usuario»; el chart responde a «cómo lo dibujamos para que no haya dudas». Por eso esta entrada se centra en la notación: qué significa cada figura, de dónde sale y cómo se adapta al diseño de producto.
La historia es más antigua que la informática. Frank y Lillian Gilbreth presentaron el flow process chart a la Sociedad Americana de Ingenieros Mecánicos en 1921 para documentar procesos industriales. Hacia 1947, Herman Goldstine y John von Neumann usaron diagramas de flujo para planificar programas de ordenador. ANSI normalizó los símbolos en los años sesenta, ISO los adoptó en 1970 y la norma vigente, la ISO 5807, se publicó en 1985 y se revisó por última vez en 2019.
02 Símbolos de un user flow chart y qué significan
| Símbolo | Nombre | Significado general | Uso en un user flow |
|---|---|---|---|
| Óvalo o rectángulo redondeado | Terminal | Inicio o fin del proceso | Punto de entrada (anuncio, email, buscador) y resultado final (éxito, abandono) |
| Rectángulo | Proceso | Una operación o actividad | Una pantalla o una acción del usuario o del sistema |
| Rombo | Decisión | Una bifurcación condicional | Una pregunta: ¿tiene cuenta?, ¿pago aceptado?, ¿elige envío o recogida? |
| Paralelogramo (romboide) | Entrada/salida de datos | Datos que entran o salen | Formularios, campos que rellena el usuario, archivos que sube |
| Rectángulo con doble borde lateral | Proceso predefinido | Un procedimiento definido en otro sitio | Un subflujo reutilizable: inicio de sesión, pago, verificación por SMS |
| Círculo pequeño / pentágono | Conector / conector fuera de página | Enlaza partes del diagrama | Continúa el flujo en otra zona u otra página del documento |
| Rectángulo con base ondulada | Documento | Un documento o archivo | Email de confirmación, factura en PDF, entrada descargable |
| Cilindro | Base de datos | Almacenamiento de datos | Dónde se guarda o consulta algo: carrito, perfil, stock |
| Línea con punta de flecha | Línea de flujo | Orden de los pasos | El paso siguiente; en las decisiones, con etiqueta |
| Corchete abierto con línea discontinua | Anotación | Comentario o nota | Reglas de negocio, textos de error, dudas pendientes |
03 Convenciones propias del diseño UX
La norma ISO se pensó para procesos y programas, no para interfaces. Por eso los equipos de producto añaden convenciones propias, siempre explicadas en una leyenda. Las más útiles separan lo que ve el usuario de lo que hace el sistema, porque ahí es donde surgen los malentendidos con desarrollo.
Pantalla vs acción
Rectángulo con cabecera o miniatura para una pantalla; rectángulo simple para una acción (pulsar, enviar, deslizar).
Decisión del usuario vs del sistema
El usuario elige (envío o recogida); el sistema comprueba (¿tarjeta válida?). Muchos equipos las diferencian por color.
Carriles (swimlanes)
Franjas horizontales para cada actor: usuario, web, pasarela de pago, email. Muestran quién hace cada paso.
Camino feliz destacado
La ruta ideal con trazo más grueso o color principal; errores y alternativas en gris o discontinuo.
Estados de error
Un color de alerta para pantallas de error y mensajes, para comprobar que ninguno es un callejón sin salida.
04 Cómo usar bien los rombos de decisión
El rombo es el símbolo más importante de un user flow chart y el que peor se suele usar. Un flujo sin rombos es una lista de pantallas; uno con rombos mal escritos genera preguntas en cada revisión.
- ✓Escribe dentro del rombo una pregunta cerrada: «¿Tiene sesión iniciada?», no «Sesión».
- ✓Etiqueta todas las salidas: «Sí» / «No» o las opciones concretas («Tarjeta», «Bizum», «PayPal»).
- ✓Comprueba que cada salida lleva a algún sitio; una flecha que termina en nada es un error del diseño, no del dibujo.
- ✓No metas dos condiciones en un rombo: «¿Tiene cuenta y dirección guardada?» son dos rombos.
- ✓Si una rama se repite en varios flujos (login, pago), conviértela en proceso predefinido y documéntala aparte.
Mal: un rombo «Pago» con una flecha «OK» hacia la confirmación. Bien: un rombo «¿Pago autorizado?» con «Sí» hacia la confirmación y «No» hacia una pantalla de error que conserva el carrito, explica el motivo y ofrece otro método de pago. La segunda versión obliga a diseñar la pantalla de error, que es donde muchas tiendas pierden la venta.
05 User flow chart vs wireflow, sitemap y diagrama de actividad
| Diagrama | Qué representa | Pregunta que responde |
|---|---|---|
| User flow chart | Pasos, decisiones y resultados de una tarea con símbolos estándar | ¿Qué camino sigue el usuario y qué pasa en cada bifurcación? |
| Wireflow | Pantallas en boceto unidas por flechas | ¿Qué ve el usuario en cada paso? |
| Sitemap o árbol del sitio | La jerarquía de páginas y secciones | ¿Dónde está cada contenido? |
| Diagrama de actividad UML | La lógica de un proceso de software, con nodos de bifurcación y paralelismo | ¿Cómo se comporta el sistema? |
El sitemap es territorio de la arquitectura de la información: organiza el contenido, no las tareas. El wireflow y el mockup se centran en lo que se ve. El user flow chart es el más abstracto de todos y por eso el más rápido de cambiar: mover un rombo cuesta segundos, rediseñar tres pantallas cuesta días. Si quieres ver cómo se construye uno completo, sigue el diagrama completo de un checkout.
06 Ejemplo de user flow chart: alta en una newsletter con doble confirmación
-
1
Óvalo: inicio
Llega a un artículo del blog desde Google.
-
2
Paralelogramo: entrada de datos
Escribe su email en el formulario de suscripción y acepta la política de privacidad.
-
3
Rombo: ¿email válido?
No: mensaje de error junto al campo y vuelta al formulario. Sí: continúa.
-
4
Documento: email de confirmación
El sistema envía un correo con el enlace para confirmar la suscripción.
-
5
Rombo: ¿confirma en 48 horas?
No: se descarta el alta y, como mucho, se envía un recordatorio. Sí: continúa.
-
6
Cilindro y óvalo final
El contacto se guarda en la lista y termina en la página de bienvenida con el recurso prometido.
07 Buenas prácticas para un user flow chart legible
- ✓Un chart, una tarea y un tipo de usuario; si crece demasiado, divídelo con conectores.
- ✓Flujo de izquierda a derecha o de arriba abajo, sin flechas que se crucen.
- ✓Textos cortos con verbos: «Elige envío», «Paga», «Confirma».
- ✓Numera los pasos para poder citarlos en reuniones y tickets.
- ✓Versiona el diagrama: fecha y cambio principal en una esquina.
- ✓Revísalo con desarrollo antes de diseñar pantallas: detectan casos del sistema que diseño no ve.
Un chart bien hecho acorta la conversación entre quien diseña y quien programa, porque cada rombo se convierte en una condición del código y cada rectángulo en una pantalla o un endpoint. En nuestros proyectos de diseño de interfaces web UI y UX los usamos como contrato entre ambas partes, y facilitan mucho el desarrollo web a medida posterior.
Preguntas frecuentes sobre User flow chart
Es un user flow dibujado con los símbolos estándar de los diagramas de flujo, como óvalos, rectángulos, rombos y flechas, para representar sin ambigüedades el recorrido de un usuario por una web o app.
Una decisión: un punto donde el flujo se bifurca según una condición. Dentro va una pregunta cerrada y cada salida lleva su etiqueta, como «Sí» y «No».
Es el símbolo terminal: marca el inicio o el final del proceso. En un user flow indica el punto de entrada del usuario y los resultados finales, como compra completada o abandono.
La ISO 5807, publicada en 1985 y revisada por última vez en 2019, que parte de las normas ANSI de los años sesenta adoptadas por ISO en 1970.
El user flow chart usa figuras abstractas para pasos y decisiones; el wireflow sustituye esas figuras por bocetos de pantalla. El primero muestra la lógica y el segundo, lo que ve el usuario.
No. La norma da una base común, pero en UX se suelen añadir convenciones propias, como distinguir pantallas y acciones. Lo obligatorio es incluir una leyenda si te sales del estándar.
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.