Fluxo de Integração
Regras
- Assistente multi-etapas: defina etapas como um array — rastreie
currentStepno estado, mostre barra de progresso com contagem de etapas - Indicador de progresso: números de etapa ou barra de progresso no topo — mostre etapas concluídas, atuais e futuras — nunca esconda quantas etapas restam
- Persistir progresso: salve etapas concluídas no banco de dados — o usuário pode sair e retomar de onde parou
- Lista de verificação de ativação: defina ações-chave (ex.: "Criar primeiro projeto", "Convidar um colega", "Conectar integração") — mostre percentual de conclusão no painel
- Sequência de e-mail de boas-vindas: envie imediatamente após o cadastro, depois nos dias 1, 3, 7 — conteúdo corresponde aos itens da lista que não foram concluídos
- Opção de pular: deixe os usuários pularem etapas não críticas — marque como pulada, não concluída — ofereça para concluir depois
- Coleta de dados: pergunte apenas o necessário — divida informações pessoais, configuração do espaço de trabalho e preferências em etapas separadas
- Celebração de conclusão: confete ou animação de sucesso na etapa final — redirecione para a visualização principal do produto
Padrão do Assistente
const ONBOARDING_STEPS = [
{ id: "profile", title: "Seu Perfil", required: true },
{ id: "workspace", title: "Criar Espaço de Trabalho", required: true },
{ id: "invite", title: "Convidar Equipe", required: false },
{ id: "integrations", title: "Conectar Ferramentas", required: false },
] as const;
// Rastrear no banco de dados
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
Padrão da Lista de Verificação de Ativação
Exiba no painel até que todos os itens sejam concluídos ou o usuário descarte:
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "Crie seu primeiro projeto", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "Convide um colega", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "Implante em produção", check: (user) => user.deployCount > 0 },
];
Evitar
- Perguntar demais logo de início — máximo de 3 a 5 etapas no assistente, adie o restante
- Sem persistência de progresso — usuários abandonam se perdem o progresso ao atualizar a página
- Forçar todas as etapas — deixe os usuários pularem etapas opcionais
- Sem rastreamento de ativação — você precisa medir a taxa de conclusão da integração