Diagrama de flujo de usuario para una tarea de tu app o web
Traza las pantallas y acciones que recorre un usuario para completar una tarea, con comprobaciones de inicio de sesión, estados de error y caminos de vuelta, y con cada rama llegando a un final.
Un diagrama de flujo de una sola tarea de usuario, desde el punto de entrada por tus pantallas, acciones y condiciones hasta cada punto de éxito o de salida. Las pantallas y las comprobaciones del sistema se dibujan distinto. Revisa cada rama, camino de vuelta y estado de error frente a tu diseño.
Reserva de una clase de yoga con comprobación de sesión y rama de lista de espera
Punto de entrada
El usuario pulsa Reservar clase en la pantalla de inicio de la app de Yoga Aguamansa
Pantallas y acciones en orden
Pantalla - Lista de clases
Acción - pulsa una clase
Pantalla - Detalle de la clase
Acción - pulsa Reservar
Pantalla - Pago
Acción - paga con la tarjeta guardada
Pantalla - Reserva confirmada
Condiciones y adónde va cada respuesta
¿Sesión iniciada? No → pantalla de inicio de sesión y vuelta a Detalle de la clase. Sí → Reservar
¿Clase completa? Sí → pantalla de lista de espera. No → Pago
Puntos de éxito y de salida
Reserva confirmada; En lista de espera; Abandona en el pago
Notación o énfasis
Final de éxito en verde, finales de abandono y error en gris
Pago de un pedido con límite de reintentos, un camino de vuelta y nombres de pantalla largos
Punto de entrada
Un cliente habitual abre el carrito desde el correo de recordatorio en el móvil
Pantallas y acciones en orden
Pantalla - Carrito con artículos guardados y plazo de entrega estimado
Acción - pulsa Tramitar pedido
Pantalla - Dirección de entrega y selección de franja horaria
Acción - elige una franja
Pantalla - Pago con tarjetas guardadas y opción de tarjeta nueva
Acción - pulsa Pagar
Pantalla - Confirmación del pedido con enlace de seguimiento
Condiciones y adónde va cada respuesta
¿Dirección aún válida? No → pantalla Editar dirección y vuelta a Dirección de entrega. Sí → selección de franja
¿Pago aprobado? Sí → Confirmación del pedido. No → pantalla Pago fallido, reintentar (hasta dos reintentos, luego pantalla Contactar con soporte)
El usuario pulsa Atrás en Pago → vuelve a Dirección de entrega con la franja guardada
Puntos de éxito y de salida
Pedido realizado; Enviado a Contactar con soporte tras pagos fallidos; Abandona el flujo desde cualquier pantalla
Notación o énfasis
Sin rellenar
Comprueba que el bucle de reintentos se detiene tras dos intentos y sale a Contactar con soporte, que el camino de vuelta regresa a la pantalla correcta y que los nombres largos de pantalla se mantienen completos.
La misma tarea, tres enfoques
Elige un enfoque para empezar.
01
Primero el camino feliz
La ruta principal de éxito dibujada en línea recta, con cada alternativa saliendo de ella, para una revisión rápida con las partes interesadas.
02
Estados de error y casos límite
La misma tarea con cada fallo, reintento y callejón sin salida a la vista, para planificar QA o una revisión de diseño.
03
Usuarios nuevos frente a habituales
Dos rutas de entrada que se unen en una pantalla común, para tareas en las que registro e inicio de sesión se separan antes del flujo principal.
Qué mantiene la plantilla
Lo que no cambia.
01
Pantallas y acciones separadas
Las pantallas son cajas y las acciones etiquetan los movimientos entre ellas, así que el diagrama se lee como un recorrido.
02
Toda rama tiene salida
Cada camino termina en una salida de tu lista o vuelve a una pantalla anterior con una etiqueta que explica por qué.
03
Tus nombres de pantalla
Los nombres coinciden con los que usas en los archivos de diseño y en los tickets.
Cómo usarla
De tus datos al resultado.
01
Elige una tarea y su punto de entrada
Reservar una clase, restablecer una contraseña, pagar un pedido. Una tarea por diagrama lo mantiene legible.
02
Enumera pantallas y acciones en orden
Empieza cada línea con Pantalla o Acción para que el diagrama distinga los lugares de lo que hace el usuario.
03
Añade las condiciones
Escribe cada comprobación como una pregunta e indica adónde va cada respuesta, incluidos los caminos de vuelta y de reintento.
04
Nombra cada salida y revisa en Vizify
Finales de éxito, abandono y error. No se ejecuta nada hasta que envías el encargo.
05
Compara cada rama con tu diseño
Sigue cada camino hasta una salida y confirma que los nombres de pantalla coinciden con tus wireframes.
Límites del resultado
Qué revisar antes de usarlo.
El diagrama muestra el flujo, no las pantallas. No se dibujan wireframes, textos de interfaz ni maquetaciones.
Vizify no prueba tu app ni encuentra casos límite que falten. Señala ramas sin destino, no caminos que no hayas mencionado.
Una tarea por diagrama. Varias tareas en un mismo diagrama se vuelven difíciles de seguir enseguida.
La disposición es automática. Las opciones de exportación son las que ofrezca la app de Vizify para el diagrama.
Preguntas¿Qué diferencia hay entre un diagrama de flujo de usuario y un wireframe?+
Un diagrama de flujo de usuario muestra el orden de pantallas y decisiones de una tarea. Un wireframe muestra cómo es una pantalla. Usa el flujo para acordar el recorrido antes de diseñar las pantallas.
¿Cómo muestro que el usuario puede volver atrás?+
Añade una línea como «El usuario pulsa Atrás en Pago → vuelve a Dirección de entrega». Se convierte en una flecha etiquetada que apunta a la pantalla anterior.
¿Esta plantilla de user flow sirve para una web además de para una app?+
Sí. Las pantallas pueden ser páginas, ventanas modales o pasos de un formulario. Usa los nombres que ya usa tu equipo para que el diagrama coincida con tus tickets.
¿Y si no tengo claro qué pasa después de un error?+
Deja la pregunta en el encargo. Vizify pregunta adónde debe ir la rama en lugar de inventar una pantalla de error, lo que facilita plantear el hueco a tu equipo.
