Botões (buttons)

O componente que dispara uma ação: enviar, navegar, confirmar. Simples, mas central pra como a pessoa usa o produto.

Hard

O que é

Botão é um dos componentes mais básicos da interface e, ao mesmo tempo, um dos que mais influenciam o comportamento de quem usa. Ele é a porta pra uma ação, seja enviar um formulário, ir pra outra página ou confirmar uma compra.

Posição, estilo e rótulo afetam direto a usabilidade, porque um botão mal colocado confunde, enquanto um botão claro guia a pessoa quase sem ela pensar. Pequenas mudanças de cor, tamanho ou texto mexem em conversão, e é justamente por isso que os times testam isso o tempo todo.

Botões também têm hierarquia, e ela importa. O primário destaca a ação mais importante da tela, o secundário oferece apoio, e o terciário (ou link) carrega a ação menos crítica. Usar a hierarquia errada faz a pessoa perder a ação principal no meio do resto. E acessibilidade aqui é regra: alvo grande o bastante pra tocar, rótulo claro pro leitor de tela e contraste visível.

Em uma frase

Vamos deixar so um botão primário aqui, dois cheios juntos achatam a hierarquia.

A pergunta que ele responde

Como deixo claro qual é a ação principal da tela sem confundir a pessoa?

Quando usar

Em qualquer ação que a pessoa precisa disparar, com hierarquia clara entre o que é principal e o que é apoio.

Como não usar

O erro é encher a tela de botões com o mesmo peso, ou usar rótulo vago como "OK" e "Enviar", que não dizem o que vai acontecer quando a pessoa clicar.

Na prática

Pense numa tela com três botões de mesmo destaque. O time deixa so o primário cheio e os outros mais discretos, e com isso a ação principal volta a saltar aos olhos, porque a hierarquia ficou clara.

Não confunda com

Vale lembrar que o botão primário não é o único da tela. Ele é a ação principal, sim, mas usar vários primários juntos achata a hierarquia e a pessoa fica sem saber o que clicar. O segredo é ter um destaque claro, justamente pra que o que importa salte aos olhos.

D

Em inglês

Buttons

Pronúncia

bâ-tons

Também chamado de

botão, button, CTA (quando é de ação)

Origem

n/a

Fonte

Saiba mais

Material Design, guidelines de buttons