Flujo de Onboarding
Reglas
- Asistente multi-paso: define los pasos como un arreglo — rastrea
currentStepen el estado, muestra una barra de progreso con el conteo de pasos. - Indicador de progreso: números de paso o barra de progreso en la parte superior — muestra los pasos completados, el actual y los próximos — nunca ocultes cuántos pasos quedan.
- Persistir progreso: guarda los pasos completados en la base de datos — el usuario puede salir y retomar donde lo dejó.
- Lista de verificación de activación: define acciones clave (por ejemplo, "Crear primer proyecto", "Invitar a un compañero", "Conectar integración") — muestra el porcentaje de completado en el panel de control.
- Secuencia de correo de bienvenida: enviar inmediatamente después del registro, luego en los días 1, 3 y 7 — el contenido coincide con los elementos de la lista que el usuario no ha completado.
- Opción de saltar: permite a los usuarios saltar pasos no críticos — márcalos como saltados, no como completados — ofrece completarlos después.
- Recopilación de datos: solo pregunta lo necesario — divide la información personal, la configuración del espacio de trabajo y las preferencias en pasos separados.
- Celebración al completar: confeti o animación de éxito en el paso final — redirige a la vista principal del producto.
Patrón de Asistente
const ONBOARDING_STEPS = [
{ id: "profile", title: "Tu Perfil", required: true },
{ id: "workspace", title: "Crear Espacio de Trabajo", required: true },
{ id: "invite", title: "Invitar Equipo", required: false },
{ id: "integrations", title: "Conectar Herramientas", required: false },
] as const;
// Rastrear en base de datos
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
Patrón de Lista de Verificación de Activación
Mostrar en el panel de control hasta que todos los elementos estén completos o el usuario la descarte:
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "Crea tu primer proyecto", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "Invita a un compañero", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "Despliega en producción", check: (user) => user.deployCount > 0 },
];
Evitar
- Preguntar demasiado al principio — máximo 3-5 pasos en el asistente, posponer el resto.
- No tener persistencia de progreso — los usuarios abandonan si pierden el progreso al recargar la página.
- Forzar todos los pasos — permite que los usuarios salten pasos opcionales.
- No realizar seguimiento de activación — necesitas medir la tasa de finalización del onboarding.