Flux d'intégration
Règles
- Assistant multi-étapes : définir les étapes comme un tableau — suivre
currentStepdans l'état, afficher une barre de progression avec le nombre d'étapes - Indicateur de progression : numéros d'étape ou barre de progression en haut — afficher les étapes terminées, en cours et à venir — ne jamais masquer le nombre d'étapes restantes
- Persister la progression : enregistrer les étapes terminées dans la base de données — l'utilisateur peut quitter et reprendre là où il s'est arrêté
- Liste de vérification d'activation : définir des actions clés (par exemple, "Créer un premier projet", "Inviter un collègue", "Connecter une intégration") — afficher le pourcentage d'achèvement sur le tableau de bord
- Séquence d'e-mails de bienvenue : envoyer immédiatement après l'inscription, puis aux jours 1, 3, 7 — le contenu correspond aux éléments de la liste de vérification que l'utilisateur n'a pas terminés
- Option de saut : permettre aux utilisateurs de sauter les étapes non critiques — les marquer comme ignorées, pas comme terminées — proposer de les compléter plus tard
- Collecte de données : ne demander que ce qui est nécessaire — diviser les informations personnelles, la configuration de l'espace de travail et les préférences en étapes séparées
- Célébration de la fin : confettis ou animation de succès sur l'étape finale — rediriger vers la vue principale du produit
Modèle d'assistant
const ONBOARDING_STEPS = [
{ id: "profile", title: "Votre profil", required: true },
{ id: "workspace", title: "Créer un espace de travail", required: true },
{ id: "invite", title: "Inviter une équipe", required: false },
{ id: "integrations", title: "Connecter des outils", required: false },
] as const;
// Suivi dans la base de données
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
Modèle de liste de vérification d'activation
Afficher sur le tableau de bord jusqu'à ce que tous les éléments soient terminés ou que l'utilisateur ignore :
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "Créez votre premier projet", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "Invitez un collègue", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "Déployez en production", check: (user) => user.deployCount > 0 },
];
À éviter
- Demander trop de choses au début — 3 à 5 étapes maximum dans l'assistant, reporter le reste
- Absence de persistance de progression — les utilisateurs abandonnent s'ils perdent leur progression lors du rafraîchissement de la page
- Forcer toutes les étapes — laisser les utilisateurs sauter les étapes optionnelles
- Absence de suivi d'activation — vous devez mesurer le taux d'achèvement de l'intégration