UX · Flujos de usuario
Recorridos mínimos para entender cómo entra, qué hace y dónde termina la persona usuaria. Pensados para registro, compra, contacto, onboarding y captación de leads.
Es el camino que sigue la persona para resolver una tarea en tu producto: desde el primer impacto hasta la confirmación final.
Aquí no buscamos diagramas gigantes, sino recorridos claros que respondan a: “¿De dónde viene?”, “¿qué pasos tiene que completar?” y “¿cómo sabe que ha terminado?”.
Los flujos de este kit están pensados para:
Cuatro ideas para revisar cualquier flujo antes de pasarlo a pantalla.
Cada diagrama debería responder a una intención concreta: registrarse, comprar, pedir cita, enviar un formulario… Si mezcla demasiadas tareas, se vuelve confuso.
El objetivo no es que haya pocas pantallas, sino que cada paso tenga un sentido. Elimina pantallas que solo están “de relleno” o que dividen artificialmente una acción.
Indica desde dónde entra la persona (anuncio, home, email…) y cómo sabe que ha terminado: mensaje de confirmación, email, pantalla de éxito, descarga…
No basta con el camino “ideal”: contempla qué pasa si la persona cancela, vuelve atrás, se equivoca con los datos o abandona a mitad de proceso.
Esquemas en texto que puedes usar como base para dibujar, adaptar a un cliente o trabajar en clase.
Flujo mínimo para crear una cuenta sin sobredramatizar el proceso.
1. Landing / Home → clic en “Crear cuenta”
2. Pantalla de registro (nombre + email + contraseña)
3. Aceptar términos y política
4. Enviar formulario
5. Mensaje de “Revisa tu correo para confirmar”
6. Usuario hace clic en enlace de confirmación
7. Pantalla de bienvenida / onboarding inicial
Flujo reducido a lo esencial, sin fases innecesarias.
1. Listado de productos / Landing específica
2. Ficha de producto → Añadir al carrito
3. Ver carrito → Revisar productos
4. Clic en “Finalizar compra”
5. Datos de envío + datos de facturación
6. Seleccionar método de pago
7. Confirmar pedido
8. Pantalla de éxito + email de confirmación
Flujo típico de “quiero que me dejen sus datos” intentando no pedir más de la cuenta.
1. Anuncio / post / newsletter → clic en “Más información”
2. Landing con propuesta clara + beneficios
3. Formulario sencillo (nombre + email + mensaje opcional)
4. Consentimiento de comunicaciones
5. Enviar formulario
6. Pantalla de gracias + siguiente paso (“Te contactaremos en 24–48h”)
7. Email de bienvenida / confirmación
Flujo de bienvenida para explicar tres cosas clave sin abrumar.
1. Usuario entra por primera vez tras registrarse
2. Pantalla 1: mensaje de bienvenida + CTA “Empezar”
3. Pantalla 2: explicación rápida de la función principal
4. Pantalla 3: pedir un dato inicial (ej. objetivo, preferencia…)
5. Clic en “Ir al panel”
6. Usuario llega a la pantalla principal con un estado inicial configurado
Textos que puedes pegar en un documento o pizarra digital para trabajar los pasos con el equipo o el alumnado.
Rellena las casillas con pantallas o estados; ajusta pasos según el proyecto.
1. Origen del tráfico → [Página A / Estado 1]
2. [Página B / Estado 2]
3. [Acción clave / Formulario / Selección]
4. [Revisión / Confirmación]
5. [Pantalla de éxito / Resultado]
6. [Siguiente paso opcional / Upsell / Recomendación]
Úsala antes de firmar un recorrido con el cliente o antes de pasar a UI.
Añade ramas solo cuando sean relevantes: no hace falta dibujar todos los microcasos.
• Si usuario cancela → [Pantalla de confirmación de salida]
• Si error en formulario → [Mensaje claro + mantener datos]
• Si abandona → [Plan de recuperación: email / notificación]
• Si ya está registrado → [Omitir pasos de registro y salto a login]
Uso docente y práctico
Este módulo de flujos está pensado para poder dibujar recorridos en vivo con el grupo, ya sea en pizarra física, Miro, FigJam o papel, usando los ejemplos como base.
Algunas formas de usarlo:
Como en el resto de KIT UX UI: entra, copia, adapta al contexto del proyecto y, si te ayuda en docencia o en el día a día profesional, siempre puedes citarnos cuando tenga sentido.