Contexto
Uma tela pode oferecer mais de uma ação: salvar e cancelar, continuar e voltar, publicar e salvar rascunho. A aparência dos botões precisa comunicar a prioridade relativa sem esconder alternativas nem decidir pela pessoa.
Defina qual ação representa o objetivo principal da pessoa naquele contexto e dê a ela a maior ênfase visual. Use o botão secundário para alternativas relacionadas, mas menos prioritárias, como cancelar, voltar ou salvar rascunho. A hierarquia deve ser avaliada por área da interface: uma página pode ter mais de uma área com ações principais, mas cada grupo precisa ter uma prioridade compreensível.
Use rótulos que descrevam a ação e mantenha as alternativas visíveis e reconhecíveis. Não use apenas cor para comunicar a diferença; combine ênfase, posição, espaçamento e texto. Siga a convenção do produto para ordenar os botões e teste o conjunto no contexto real, inclusive em telas menores.
Porque isso importa?
Quando todos os botões têm o mesmo destaque, a pessoa precisa comparar opções antes de agir. Quando vários botões parecem primários, a interface perde um sinal importante de prioridade e pode aumentar a hesitação ou a escolha acidental.
Uma hierarquia clara reduz a disputa visual entre ações, facilita a varredura da tela e preserva o acesso às alternativas. Ela também beneficia pessoas que usam teclado, zoom ou tecnologias assistivas quando a diferença não depende apenas de cor e a ordem de foco acompanha a ordem lógica das ações.
Quando usar?
- Quando uma ação atende diretamente ao objetivo principal da tela ou etapa.
- Quando um grupo reúne uma ação principal e alternativas relacionadas.
- Quando “salvar”, “continuar” ou “concluir” precisa se destacar de “cancelar”, “voltar” ou “salvar rascunho”.
- Quando a interface precisa orientar a atenção sem remover escolhas secundárias.
- Quando o produto possui uma convenção consistente para níveis de ênfase.
Quando evitar?
- Quando as ações tiverem a mesma prioridade e nenhuma merecer destaque.
- Quando a diferença entre primário e secundário existir apenas pela cor.
- Quando o botão secundário esconder uma ação importante ou difícil de encontrar.
- Quando o destaque for usado para pressionar a pessoa a escolher uma opção que não é claramente melhor.
- Quando a hierarquia não funcionar em telas pequenas, alto contraste ou navegação por teclado.
Recomendações
Faça
- Defina a ação principal.
- Limite o destaque primário.
- Diferencie as alternativas.
- Use rótulos claros.
- Mantenha as opções visíveis.
- Teste a hierarquia no contexto.
Evite
- Não destaque tudo.
- Não dependa só de cor.
- Não esconda a alternativa.
- Não trate o secundário como irrelevante.
- Não copie posições sem testar.
- Não use rótulos ambíguos.
