Contexto
Depois que a equipe decide que um formulário realmente precisa de etapas, a estrutura do fluxo passa a determinar se a pessoa entende onde está, o que falta e como corrigir o que já informou. Uma boa etapa não é apenas um pedaço visual da página: ela representa um objetivo ou grupo de decisões, mantém a relação com as demais e permite avançar, voltar, revisar e retomar sem perder dados.
Esta regra explica como estruturar um formulário multietapas. A decisão de dividir ou manter o formulário em uma página está no padrão relacionado.
Organize cada etapa em torno de um objetivo ou grupo de decisões compreensível para a pessoa, e não apenas pela quantidade de campos. Mantenha juntos os campos que dependem uns dos outros e use títulos que expliquem o resultado daquela etapa.
Quando a sequência for linear, mostre claramente a etapa atual, as etapas concluídas e o que ainda falta. Use “Etapa X de Y” somente quando o total for confiável. Em fluxos condicionais, o número de etapas pode mudar; nesse caso, não prometa uma contagem fixa que a interface não consegue manter.
Mantenha o indicador de progresso separado da navegação. O indicador orienta; os botões permitem agir. Ofereça “Voltar” e “Continuar” com posição e comportamento previsíveis, e use um rótulo específico para a ação final, como “Revisar e enviar” ou “Concluir”.
Preserve os dados ao avançar, voltar, revisar ou retomar o formulário. Permita editar etapas concluídas quando isso for seguro e mostre um resumo antes do envio quando a tarefa tiver consequências importantes.
Valide os dados no momento em que a pessoa precisa corrigi-los, associe cada erro ao campo correspondente e mantenha as respostas válidas. Uma mudança de etapa não deve apagar o trabalho já realizado nem obrigar a pessoa a descobrir novamente onde errou.
Teste o fluxo com pessoas realizando a tarefa completa. Verifique se elas entendem a ordem, reconhecem o progresso, sabem voltar, recuperam erros e conseguem retomar o preenchimento em diferentes tamanhos de tela e tecnologias assistivas.
Porque isso importa?
Etapas podem reduzir a quantidade de informação visível por vez, mas também acrescentam navegação, espera e incerteza. Por isso, um formulário multietapas não é automaticamente melhor do que um formulário em uma página.
As orientações da W3C recomendam dividir formulários longos em grupos lógicos, repetir instruções relevantes e comunicar o progresso. O USWDS recomenda o indicador para fluxos lineares com pelo menos três etapas de alto nível e separa o indicador dos controles de navegação. O Carbon Design System também orienta agrupar tarefas relacionadas, manter uma relação lógica entre campos e permitir salvar, voltar e revisar.
Essa recomendação precisa ser validada no contexto. Em um estudo com 20 profissionais de saúde, um formulário de página única teve melhor usabilidade e menor tempo médio do que versões multietapas e conversacional. O estudo avaliou uma tarefa e um contexto específicos, portanto não prova que formulários de página única sejam sempre superiores; mostra que adicionar etapas sem uma razão clara pode aumentar o esforço.
Pesquisas da Baymard sobre checkout chegam a uma conclusão semelhante para o comércio eletrônico: o esforço percebido e a quantidade de campos importam mais do que a quantidade isolada de etapas. A regra, portanto, é usar cada etapa para organizar uma parte real da tarefa, e não apenas para esconder campos.
Quando usar?
- O fluxo tem três ou mais grupos de alto nível e uma sequência compreensível.
- Cada etapa tem um objetivo próprio e um título curto.
- A pessoa se beneficia de saber o que já concluiu e o que falta.
- Existem dependências entre decisões ou dados que tornam a ordem importante.
- O produto consegue preservar, revisar e recuperar os dados preenchidos.
- Pesquisas ou testes confirmam que a estrutura ajuda a concluir a tarefa.
Quando evitar?
- O formulário é curto ou tem poucas seções relacionadas.
- A pessoa precisa comparar campos de grupos diferentes ao mesmo tempo.
- A divisão serve apenas para esconder campos desnecessários.
- A quantidade de etapas muda, mas a interface promete um total fixo.
- O produto não consegue preservar, voltar ou revisar respostas.
- O indicador de progresso é usado como único mecanismo de navegação.
- Uma decisão que deveria ser entendida em conjunto foi fragmentada sem motivo.
Recomendações
Faça
- Agrupe por objetivo.
- Dê um título claro a cada etapa.
- Mostre a posição no fluxo.
- Separe indicador e navegação.
- Preserve e permita revisar os dados.
- Teste o fluxo real.
Evite
- Dividir por quantidade de campos.
- Fragmentar uma decisão.
- Prometer um total instável.
- Apagar dados ao voltar.
- Usar o indicador como menu.
- Esconder campos desnecessários.
