User Flows

Tags Icon Tags
Info Icon Definición Rápida
Un User Flow (Flujo de Usuario) es un diagrama que visualiza la ruta completa que sigue un usuario a través de un producto digital para completar una tarea específica. Muestra las pantallas, las acciones y las decisiones que el usuario toma de principio a fin.

¿Qué son los User Flows?

Si un wireframe es el plano de una habitación y un mapa del sitio es el plano de todo el edificio, un User Flow es la ruta de evacuación de incendios. No muestra todas las habitaciones, solo la secuencia específica de pasos para ir desde un punto A (por ejemplo, “estar en el pasillo”) a un punto B (por ejemplo, “estar a salvo fuera del edificio”).

Un User Flow se enfoca en el movimiento y la interacción. Responde a preguntas como:

  • ¿Qué pasos debe seguir un usuario para registrarse?
  • ¿Cómo llega un usuario desde la página de inicio hasta la compra de un producto?
  • ¿Qué opciones tiene el usuario si olvida su contraseña?

Generalmente se representan con formas simples (rectángulos para pantallas, diamantes para decisiones, flechas para la dirección) para mantener el enfoque en la secuencia de acciones.

¿Por qué son importantes?

  • Optimizan la experiencia: Ayudan a identificar pasos innecesarios, callejones sin salida o puntos de fricción en una tarea, permitiendo simplificar el proceso.
  • Aseguran que no haya cabos sueltos: Garantizan que se hayan considerado todos los escenarios posibles (éxito, error, casos extremos).
  • Facilitan la comunicación: Son una herramienta excelente para que todo el equipo (diseñadores, desarrolladores, PMs) entienda y discuta la lógica de una funcionalidad antes de construirla.
  • Son la base para otros artefactos: Un buen User Flow es el punto de partida para crear wireframes y prototipos.

¿Cómo se hacen?

  1. Define el objetivo: ¿Qué tarea específica quieres mapear? Sé claro y conciso. Ejemplo: “Comprar un artículo” o “Subir una foto de perfil”.
  2. Identifica el punto de entrada: ¿Dónde comienza el usuario? ¿En la página de inicio? ¿En un enlace de un correo electrónico?
  3. Mapea los pasos secuenciales: Usando una herramienta como Miro o FigJam, empieza a dibujar el flujo.
    • Usa rectángulos para representar cada pantalla o estado de la interfaz.
    • Usa flechas para conectar los pasos y mostrar la dirección.
    • Usa diamantes para representar puntos de decisión donde el usuario tiene que elegir (ej. “¿Está el usuario logueado?”). De cada diamante saldrán al menos dos flechas (Sí/No).
  4. Considera todos los caminos: No te limites al “camino feliz”. Mapea qué sucede si hay un error, si el usuario quiere volver atrás o si toma una ruta alternativa.
  5. Define el punto de salida: ¿Cuál es la pantalla final que le indica al usuario que ha completado la tarea con éxito?
  6. Revisa y simplifica: Una vez mapeado, busca oportunidades para eliminar pasos o reducir la complejidad.

Consejos de Mentor

  • Empieza con un objetivo claro: Un User Flow sin un objetivo definido se convierte en un mapa de sitio confuso. Enfócate en una tarea a la vez.
  • No te preocupes por el detalle visual: Al igual que con los wireframes, el objetivo es la lógica y el flujo, no la estética.
  • Colabora: Crea el User Flow junto con tu Product Manager y un desarrollador. Ellos aportarán perspectivas valiosas sobre las reglas de negocio y las limitaciones técnicas.
  • Usa leyendas: Si tu diagrama es complejo, incluye una leyenda que explique qué significa cada forma o color.

Recursos y Herramientas