≡En resumen
- Visualizar flujos convierte tablas de eventos en una imagen donde se ven las fugas de un vistazo.
- El Sankey muestra volumen y dirección; el embudo, pérdida por paso; la grabación, el porqué individual.
- Un diagrama de diseño muestra lo previsto; una visualización de datos, lo que ocurrió.
- Demasiados nodos convierten un Sankey en espaguetis: agrupa páginas y limita pasos.
- Las grabaciones de sesión exigen consentimiento y enmascarar datos personales.
01 ¿Qué es la user flow visualization?
La palabra «flujo» tiene dos vidas en UX. En diseño, un diagrama de diseño dibuja el recorrido previsto con óvalos y rombos. En analítica, una visualización dibuja el recorrido medido, con grosores, porcentajes y colores. Se parecen, pero responden a preguntas opuestas: el primero a «¿cómo debería ser?» y la segunda a «¿qué está pasando?».
| Diagrama de user flow (diseño) | Visualización de flujos (datos) | |
|---|---|---|
| Contenido | Pasos, decisiones y reglas | Volúmenes reales entre páginas o eventos |
| Elementos | Óvalos, rectángulos, rombos, flechas | Nodos, bandas de grosor variable, barras, vídeos |
| Muestra | Todas las ramas posibles, aunque nadie las use | Solo lo que ocurrió, incluidas rutas no previstas |
| Uso típico | Diseñar y documentar | Diagnosticar y comunicar problemas |
02 El diagrama de Sankey: cómo se lee un flujo de usuarios
El capitán irlandés Matthew Henry Phineas Riall Sankey creó en 1898 el diagrama que lleva su nombre para mostrar la eficiencia energética de una máquina de vapor. Su idea clave es que el grosor de cada flecha es proporcional al caudal que representa. Antes, en 1869, Charles Minard ya había usado bandas de grosor variable en su famoso mapa de la campaña de Napoleón en Rusia.
Aplicado a una web, cada columna es un paso, cada rectángulo (nodo) una página o evento y cada banda el número de usuarios que pasa de uno a otro. Las bandas que no continúan son abandonos.
Nodos
Páginas, pantallas o eventos agrupados. Su altura es el volumen total que pasa por ellos.
Bandas
Transiciones entre nodos. Una banda gruesa hacia atrás o hacia fuera del flujo es la primera señal que hay que mirar.
Columnas o pasos
Interacción 1, 2, 3… desde el punto de partida elegido. Más de 5 o 6 columnas rara vez se leen bien.
Color
Úsalo con intención: por segmento (móvil y escritorio) o para destacar el camino esperado frente al resto.
03 Tipos de visualización de flujos y qué pregunta responde cada uno
| Visualización | Qué muestra | Pregunta que responde |
|---|---|---|
| Diagrama de Sankey | Volumen de usuarios entre pasos, con bandas proporcionales | ¿Por dónde va la mayoría y dónde se escapa? |
| Árbol de rutas (GA4) | Nodos que siguen o preceden a un evento, paso a paso | ¿Qué hacen justo antes o después de este punto? |
| Embudo de barras | Usuarios en cada paso de un flujo definido y porcentaje que pasa | ¿En qué paso se pierde más gente? |
| Embudo con tendencia | Evolución de cada paso en el tiempo | ¿Mejoró el flujo tras el cambio? |
| Mapa de calor | Clics, desplazamiento o atención agregados en una página | ¿Qué miran y qué ignoran dentro de un paso? |
| Grabación de sesión | Reproducción de la visita de una persona concreta | ¿Por qué abandona esta persona en este paso? |
Los tres primeros son cuantitativos y trabajan con miles de usuarios; los dos últimos te acercan al caso individual. Un buen diagnóstico combina ambos: el embudo señala el paso, el mapa de calor muestra dónde se concentra la atención y las grabaciones enseñan el tropiezo.
04 Cómo visualizar flujos en GA4
-
1
Abre Explorar y elige la plantilla
«Exploración de rutas» para descubrir caminos; «Exploración de embudo» para medir un flujo definido.
-
2
Define el punto de partida o de llegada
En rutas eliges uno de los dos: inicio para ver qué pasa después, final para ver cómo se llega.
-
3
Elige el tipo de nodo
Nombre de evento para acciones; título o ruta de página para navegación. Mezclarlos dificulta la lectura.
-
4
Amplía con criterio
GA4 muestra 5 nodos por paso y permite llegar a 20 con «+ Más»; el resto se agrupa en «Otros».
-
5
Aplica segmentos o desgloses
Compara móvil y escritorio o tráfico de pago y orgánico en la misma visualización.
05 Grabaciones de sesión y mapas de calor: Microsoft Clarity y Hotjar
Microsoft Clarity
Herramienta gratuita de analítica de comportamiento con grabaciones, mapas de calor e informes de embudo. Microsoft indica que no tiene límites de tráfico ni muestreo.
Señales automáticas de Clarity
Rage clicks (clics repetidos en la misma zona), dead clicks (clics sin respuesta), quick backs (volver enseguida a la página anterior) y scroll excesivo.
Hotjar
Pionera en mapas de calor, grabaciones y encuestas. Hoy forma parte de Contentsquare, que ha integrado ambas plataformas y ya no acepta nuevas altas en Hotjar.
Estas herramientas convierten un abandono anónimo en un vídeo concreto: ves a alguien pulsar tres veces un botón que no responde. Si dudas entre ellas, tienes una comparativa de Hotjar y Microsoft Clarity con cómo usarlas para mejorar la conversión.
06 Ejemplo: de la tabla de eventos a una imagen que se entiende
Una consultora ve en GA4 que sus artículos reciben mucho tráfico orgánico, pero casi nadie pide presupuesto. En tabla, los datos no dicen nada. En un Sankey agrupado por tipo de página aparece la imagen: de cada 100 lectores, 70 salen desde el propio artículo, 20 van a otro artículo y solo 3 llegan a la página de servicios, de los que 1 abre el formulario. La banda hacia servicios es tan fina que dirección entiende el problema en segundos: los artículos no enlazan a lo que se vende. Las grabaciones de Clarity confirman que la mayoría no pasa del primer tercio del texto, donde no hay ninguna llamada a la acción.
07 Errores al interpretar una visualización de flujos
- ✓Leer una banda fina como un problema sin mirar su volumen absoluto.
- ✓Sacar conclusiones de tres grabaciones: son ejemplos, no estadística.
- ✓Olvidar que quien rechaza las cookies no aparece, y ese grupo puede comportarse distinto.
- ✓Confundir recorrido con intención: volver a la categoría puede ser comparar, no estar perdido.
- ✓Mostrar a dirección un Sankey con cuarenta nodos en lugar de una imagen con el mensaje principal.
La visualización comunica; el análisis de flujos con métricas por paso decide. Usadas juntas son la base de cualquier proceso de optimización web CRO y del rediseño de pantallas en un proyecto de diseño UX/UI.
Preguntas frecuentes sobre User flow visualization
Es la representación gráfica, con datos reales de analítica, de los caminos que siguen los usuarios en una web o app, mediante diagramas de Sankey, árboles de rutas, embudos o grabaciones de sesión.
Es un diagrama de flujo en el que el grosor de cada banda es proporcional al volumen que representa. Lo creó Matthew H. P. R. Sankey en 1898 y en analítica se usa para ver cuántos usuarios pasan de una página a otra.
No igual. GA4 sustituye los informes de flujo de Universal Analytics por la exploración de rutas, que muestra los pasos como un árbol de nodos, y por la exploración de embudo.
El diagram se dibuja al diseñar y muestra el recorrido previsto con todas sus ramas; la visualización se construye con datos y muestra el recorrido real y su volumen.
Sí. Microsoft lo presenta como un servicio gratuito sin límites de tráfico, con grabaciones de sesión, mapas de calor y detección automática de rage clicks y dead clicks.
Sí, con consentimiento para las cookies, informando en la política de privacidad y enmascarando los datos personales y de pago que se escriban en formularios.
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.