Estrutura de Botão: Por que sua CTA se mistura e como construir um sistema que tem cliques

Você lançou sua landing page. O hero fica ótimo. Visitantes rolam, hesitam na CTA, e saem. O botão está lá, e de alguma forma não clicaram.

Botões são o último passo entre intenção e ação. Se o seu se mistura, parece um banner ou compete com três outras ações "principais" na mesma tela, você está perdendo conversões antes de visitantes até entenderem a oferta. Este guia quebra como construir botões que têm cliques.

O que um botão realmente faz

Um botão é um contrato visual. Promete: "clique em mim e esta coisa específica acontece." Tudo em design de botão bom aponta para aquele contrato: a cor, o tamanho, o copy, a forma como reage quando você passa o mouse.

"Cada botão deve ter um propósito claro. Se usuários têm que pensar o que faz, já falhou." , Steve Krug

Dois padrões importam mais. Lei de Fitts diz que alvos mais fáceis de atingir são atingidos mais, botões maiores, em lugares esperados, vencem. Affordance diz botões devem parecer pressáveis. Caixas planas que não leem como interativas são ignoradas, mesmo quando estilizadas em sua cor de marca.

Por que estrutura de botão importa para conversão

Gastar tempo em um pequenininho retângulo compensa porque aquele retângulo é aonde o dinheiro está.

1. Menos adivinhos. Quando botões seguem regras previsíveis, visitantes não param para descobrir o que é clicável.
2. Hierarquia visual. Estilos primário, secundário e terciário dizem aos visitantes qual ação você realmente quer que tomem.
3. Acessibilidade. Grandes alvos de toque e contraste alto significam mais visitantes, inclusive aqueles com restrições motoras ou visuais, podem completar a ação.
4. Confiança. Botões inconsistentes parecem amadores. Páginas inconsistentes não recebem crédito.

Como construir um sistema de botão que funciona

Você não precisa de 12 estilos de botão. Você precisa de uma hierarquia limpa e estados previsíveis.

1. Defina a hierarquia

Nem toda ação merece o mesmo peso. Escolha um topo claro da cadeia alimentar.

Botões primários

Sua ação principal, "Comece trial grátis," "Receba o relatório," "Inscreva-se." Um por tela, idealmente. Contraste alto, preenchimento sólido, óbvio.

Botões secundários

Ações alternativas que não são o objetivo, "Saiba mais," "Cancele," "Veja preço." Contraste mais baixo, frequentemente estilo outline.

Botões de ícone

Ações pequenas e repetitivas aonde o símbolo é universal, mais, lixo, pesquisa. Tudo o mais precisa de uma label.

Botões de ação flutuante

Padrão mobile. A tarefa mais comum na tela, ancorada aonde o polegar naturalmente repousa.

Botões outline e texto

O nível mais baixo. Use para ações terciárias ou navegação inline, nunca para a CTA principal em uma landing page.

2. Desenhe os estados

Um botão é uma pequena conversa. Estados são a linguagem corporal.

Padrão

Parece pressável. Uma sombra sutil ou preenchimento é o bastante, o botão deve parecer um objeto, não um bloco de texto.

Hover

Reage na entrada do cursor. Mudança de cor, elevação leve ou ambas. Confirma "sim, isto é interativo."

Pressionado

Feedback visual rápido quando clicado, um escala-down, cor escurece ou ambas. Torna o clique parecer real.

Carregamento / ativado

Quando algo está processando, mostre. Um spinner dentro do botão bate uma página congelada toda vez.

Desabilitado

Quando a ação não está disponível ainda, apague o botão, não esconda. Visitantes precisam ver o que é possível uma vez que preenchem o formulário.

Para mais sobre o que realmente faz um botão converter, veja Botões que Funcionam.

Formas comuns de construtores quebrarem isto

Ghost-button-as-primary

• O erro: Usando um botão outline-only como a CTA principal porque "parece limpo".
• A correção: Preenchimento sólido para seu primário. Guarde outlines para ações secundárias.

Alvos de tap minúsculos

• O erro: Um botão 28px em mobile. Polegares não alcançam.
• A correção: 44x44px mínimo (Apple) ou 48x48px (Google). Espaçamento importa também, não aglomere botões perto um do outro.

Labels vagas

• O erro: "Enviar," "Clique aqui," "Próximo." Visitantes não sabem o que está prestes a acontecer.
• A correção: Use verbos de ação e resultados. "Receba meu relatório grátis" bate "Enviar" toda vez.

Como produtos reais fazem isto

Duolingo

Os botões do Duolingo têm "profundidade" visível, uma borda de fundo grossa que desaparece no press. O resultado parece físico. Suas ações primárias são verde alto; suas ações secundárias são cinza. Você sempre sabe no que tocar.

Instagram

Instagram se apoia em ícones e pequenas animações de estado. Toque o coração e ele pop, preenche vermelho e confirma o gosto, sem toast, sem mensagem. A mudança de estado é o feedback.

Princípios relacionados

Botões vivem dentro de um sistema. Estes tópicos moldam como os seus chegam:

Botões que Funcionam

Os ajustes de copy e colocação que transformam uma CTA plana em uma que visitantes realmente clicam.

Psicologia de Cor

Por que a cor do seu botão está fazendo mais trabalho de conversão que seu headline.

Recursos e leitura complementar

Material Design: Botões

Guia abrangente do Google sobre tipos de botão, colocação e comportamento.

Diretrizes de Interface Humana Apple: Botões

Boas práticas para desenhando botões dentro dos ecossistemas iOS e macOS.

Perguntas frequentes