Contexto
A ordem dos campos orienta a conversa entre a pessoa e o serviço. Quando segue o banco de dados, a estrutura interna da empresa ou uma estética de duas colunas, a pessoa precisa decifrar o formulário em vez de responder às perguntas.
Defina a ordem a partir da tarefa e das decisões que a pessoa precisa tomar. Remova dados desnecessários, agrupe campos relacionados e coloque primeiro perguntas que determinam elegibilidade, caminho ou campos posteriores.
Dentro de cada grupo, respeite dependências: peça o tipo antes dos detalhes, o país antes do estado ou província e a data inicial antes da final. Mostre apenas campos relevantes e use etapas quando um formulário longo tiver objetivos distintos.
Faça a ordem visual, a ordem no HTML e a ordem de foco e Tab preservarem a mesma lógica. Teste o caminho mais comum e os desvios antes de fixar a sequência.
Porque isso importa?
Uma sequência lógica reduz decisões, deslocamentos e erros. Também ajuda pessoas que usam teclado, leitor de tela, zoom ou entrada por voz, porque elas recebem cada controle no contexto esperado.
Não existe uma ordem universal para todos os formulários. A melhor sequência depende da tarefa, do conhecimento que a pessoa tem, das dependências entre respostas e do que o serviço realmente precisa.
Quando usar?
- Quando dois ou mais campos tiverem relação entre si.
- Quando uma resposta definir a elegibilidade ou o caminho seguinte.
- Quando o formulário tiver campos condicionais ou etapas.
- Quando informações de diferentes assuntos precisarem ser agrupadas.
- Quando a ordem atual causar dúvidas, erros ou abandono.
- Quando o layout puder alterar a leitura ou a navegação por teclado.
Quando evitar?
- Quando a sequência copiar a estrutura do banco de dados.
- Quando campos condicionais irrelevantes aparecerem para todos.
- Quando assuntos diferentes forem misturados sem grupos claros.
- Quando CSS ou tabindex positivo criarem uma ordem diferente do HTML.
- Quando duas colunas quebrarem a sequência de leitura.
- Quando uma regra fixa for aplicada sem observar a tarefa.
Recomendações
Faça
- Comece pelo objetivo da tarefa.
- Pergunte a elegibilidade cedo.
- Agrupe campos relacionados.
- Respeite as dependências.
- Mostre só o que importa.
- Mantenha a ordem no HTML.
- Teste os caminhos comuns.
Evite
- Não copie a ordem do banco.
- Não misture assuntos.
- Não revele campos irrelevantes.
- Não force uma ordem com CSS ou tabindex positivo.
- Não use colunas sem lógica.
- Não esconda dependências.
- Não comece pelo mais difícil sem pesquisa.
