Um formulário dividido em telas pode parecer mais organizado e ainda deixar a pessoa sem saber quanto falta, o que já foi salvo ou como corrigir uma resposta anterior. O indicador de etapas tenta oferecer essa orientação. Para funcionar, precisa representar o processo real, com nomes compreensíveis e estados coerentes. Uma sequência de círculos numerados não resolve uma jornada mal estruturada. O trabalho de design começa na divisão da tarefa e continua nas regras de avanço, retorno e conclusão.

Considere uma solicitação hipotética de projeto para uma agência. O cliente informa contexto, descreve a necessidade, envia referências e revisa os dados antes de concluir. A equipe quer distribuir esse trabalho em etapas sem criar um caminho desnecessariamente longo. O exemplo serve como exercício de planejamento, sem afirmar uma validação já realizada. A questão é tornar a jornada previsível, permitindo que a pessoa reconheça sua posição e entenda as consequências de seguir ou voltar.

Divida a tarefa por sentido

Agrupe informações que respondem à mesma parte do trabalho. Contexto da empresa, escopo desejado e arquivos de referência podem formar blocos reconhecíveis, dependendo do serviço. Evite criar etapas apenas porque a tela ficou cheia. Talvez o formulário tenha campos dispensáveis ou instruções repetidas. Reduzir a carga antes de fragmentar o fluxo ajuda a construir uma experiência mais direta. Cada nova etapa acrescenta uma transição que precisa ser entendida e mantida pela pessoa que preenche.

Escreva uma frase sobre a finalidade de cada grupo. Se duas etapas exigem a mesma explicação, talvez a divisão esteja artificial. Se uma etapa reúne assuntos sem relação, reorganize-a. No pedido de projeto, dados da empresa e referências visuais podem pedir ritmos diferentes, mas precisam contribuir para a mesma solicitação. O indicador deve acompanhar uma estrutura editorial do formulário, em vez de se tornar uma decoração aplicada depois que as perguntas já foram distribuídas sem critério.

Diga o que a pessoa fará em cada etapa

Use rótulos curtos, concretos e distintos. Contexto, necessidade, referências e revisão oferecem pistas melhores do que etapa um, etapa dois e etapa três sem explicação. Os números podem comunicar ordem, enquanto os nomes explicam a tarefa. Confira como esses rótulos aparecem em telas pequenas e em uma leitura linear da página. Uma abreviação que cabe no componente pode perder o significado e obrigar a pessoa a abrir a etapa para descobrir seu conteúdo.

O componente Step do Design System do Governo Federal apresenta indicadores para orientar etapas e progresso em uma jornada. A referência também diferencia esse uso de uma navegação entre áreas sem relação de conclusão. Leve essa distinção para o projeto. Se a pessoa apenas alterna entre seções independentes de uma conta, talvez um menu ou outro padrão seja mais coerente do que uma sequência que sugere um trabalho a terminar.

Represente estados que correspondam ao processo

Defina o significado de atual, concluída, pendente e indisponível quando esses estados existirem. Concluída pode significar que os campos passaram por uma validação, que os dados foram salvos ou apenas que a tela foi visitada. Essas interpretações não são equivalentes. Escolha a regra com a equipe e faça o visual corresponder a ela. Um símbolo de confirmação não deve prometer que o pedido foi recebido se ainda falta revisar e enviar a solicitação.

No exemplo da agência, a etapa referências pode ser opcional. A pessoa precisa conseguir reconhecer essa condição sem presumir um erro por não anexar um arquivo. Decida como ela aparecerá depois que for pulada e como poderá ser preenchida em uma revisão. Estados claros ajudam a diferenciar ausência de informação, ação incompleta e caminho que não se aplica. Não use a mesma aparência para todas essas condições apenas para manter o componente visualmente simples.

Mostre progresso sem inventar precisão

Uma jornada com quatro etapas não significa necessariamente que cada uma exige o mesmo esforço. A revisão pode ser rápida, enquanto reunir referências exige sair do site e localizar arquivos. Avalie se um percentual acrescenta uma informação útil ou cria uma expectativa inadequada. Etapa dois de quatro pode comunicar posição sem sugerir que metade do tempo já passou. O indicador deve ser honesto sobre o que conhece: estrutura, estado e próximo passo, conforme as regras do serviço.

Se as respostas alteram o caminho, descreva a variação desde o planejamento. Um cliente que pede apenas identidade pode receber perguntas diferentes de quem precisa de um site com catálogo. Evite manter etapas vazias só para preservar uma contagem inicial. Ao mesmo tempo, não faça o total mudar de forma inexplicável. Escolha uma apresentação compatível com a jornada variável e acrescente uma orientação quando a mudança for relevante. A previsibilidade depende de compreender o motivo do percurso, não apenas de acompanhar uma barra.

Combine retorno e preservação das respostas

A orientação do W3C sobre formulários com várias páginas discute divisão lógica, indicação de progresso e revisão de etapas concluídas com preservação dos dados. Use essa referência para definir o percurso de volta. A pessoa pode precisar conferir uma resposta anterior depois de ler uma pergunta nova. Se voltar apaga o que foi preenchido, o indicador deixa de oferecer orientação e passa a representar um risco de retrabalho que o usuário precisa aprender por experiência.

Especifique o que acontece com respostas dependentes. Alterar o tipo de projeto pode tornar uma pergunta posterior desnecessária ou exigir informação adicional. Combine como o sistema comunicará isso e quais dados continuarão disponíveis. Não esconda mudanças importantes em uma atualização silenciosa do indicador. Um retorno bem projetado permite corrigir o pedido com compreensão. O designer precisa mostrar os efeitos esperados para que desenvolvimento e atendimento possam avaliar se a regra corresponde ao serviço real.

Diferencie um indicador de um controle de navegação

Nem toda etapa desenhada precisa ser clicável, mas a aparência deve deixar essa regra clara. Se a pessoa pode abrir etapas concluídas, apresente o comportamento de forma consistente. Se precisa avançar por um botão, evite dar às etapas futuras a mesma aparência de um link disponível. A interface deve permitir reconhecer o que pode ser feito agora. Um componente visualmente interativo que não responde provoca tentativas repetidas e cria uma dúvida que poderia ser evitada pelo desenho.

O artigo sobre abas em interfaces ajuda a comparar padrões sem tratá-los como equivalentes. Abas organizam visões relacionadas; um indicador de etapas representa um percurso com regras de progressão. Escolha pela tarefa. Copiar o comportamento de abas para um formulário sequencial pode permitir saltos que deixam dados incompletos, enquanto bloquear uma navegação independente com etapas obrigatórias pode impor uma ordem que o conteúdo não exige.

Planeje foco, títulos e mensagens de erro

Ao avançar, a pessoa precisa perceber que entrou em outra parte da tarefa. Defina o título da etapa, a orientação inicial e o tratamento do foco com desenvolvimento. A mudança visual do círculo atual não é suficiente para todos os modos de uso. Verifique a página por teclado e com os recursos de leitura previstos na avaliação. O componente deve comunicar posição e estado dentro de uma estrutura compreensível, sem depender exclusivamente de cor ou de acompanhar uma animação.

Quando houver erro, explique o que precisa ser corrigido e onde. Se a validação acontecer em uma etapa anterior, ofereça um caminho identificável para chegar ao problema. O guia sobre textos de campos, erros e confirmações amplia essa revisão. Uma mensagem como revise seus dados pode ser insuficiente quando existem várias telas. A orientação precisa reduzir a busca e preservar as respostas válidas, ajudando a pessoa a continuar sem refazer o percurso completo.

Adapte o componente a telas pequenas

Uma sequência horizontal extensa pode comprimir os rótulos ou criar uma faixa difícil de ler. Examine alternativas que preservem a informação essencial: nome da etapa atual, posição e possibilidade de retorno conforme a regra do fluxo. O componente não precisa manter a mesma distribuição em todas as larguras. Precisa manter o sentido. Se parte da sequência ficar oculta, a pessoa ainda deve compreender onde está e como encontra as ações necessárias para completar ou revisar o trabalho.

Use textos reais na revisão responsiva. Um rótulo como referências e materiais existentes pode ter um comportamento diferente de um nome curto de demonstração. Observe também mensagens de erro, ampliação e teclado virtual. A composição deve continuar deixando a ação principal acessível sem esconder orientações importantes. Se a interface ocupa grande parte da tela apenas para mostrar o caminho, talvez o indicador esteja competindo com a própria tarefa que deveria ajudar a realizar.

Feche com revisão e confirmação distintas

Na última parte do pedido, permita conferir as informações relevantes e entender o que acontecerá ao enviar. Diferencie o estado de revisão da confirmação efetiva de recebimento. Se o envio falhar, diga qual situação permanece válida e como tentar novamente. Ao documentar o indicador, inclua rótulos, estados, regras de navegação, preservação de dados e caminhos variáveis. Um bom indicador de etapas torna o processo reconhecível; ele ajuda a seguir, corrigir e concluir sem prometer um progresso que a aplicação ainda não confirmou.