Botões que Funcionam: Por que visitantes não clicam sua CTA e como consertar rápido

Você lançou sua landing page. Tráfego está chegando. A CTA está ali, e a taxa de clique é plana.

O botão é geralmente aonde founders sangram conversões sem perceber. Se mistura no fundo, o copy é vago ou é tão pequeno em mobile que polegares não alcançam. Botões não são decoração, são o momento um visitante decide agir. Quando não funcionam, nada o mais na página importa.

O que "um botão que funciona" realmente significa

Um botão funcionando faz uma coisa bem: grita "clique em mim" antes do visitante ter que pensar. Isso é chamado affordance, a dica visual que diz ao cérebro "isto é pressável".

A gente usa cor, sombra, forma e colocação para enviar aquele sinal. Pule essas e visitantes hesitam. Hesitação é a lacuna aonde conversões morrem.

"Botões devem parecer botões." , Luke Wroblewski

Quanto mais você empurra para "minimal" ou "flat" sem aqueles sinais, mais fricção você adiciona. Visitantes param e perguntam "isto é um botão ou só uma caixa colorida?" e aquela pausa é bastante para perdê-los.

Por que qualidade de botão move seus números

Um único botão pode ser a diferença entre um checkout e uma sessão rebatida.

1. Wayfinding. Bons botões atuam como marcos. Visitantes não pogo para frente e para trás tentando descobrir o caminho.
2. Conversão. Pequenos ajustes, melhor contraste, melhor copy, rotineiramente mudam conversão por dígitos duplos.
3. Acessibilidade. Botões que atendem padrões de contraste e tamanho funcionam para visitantes com restrições visuais ou motoras. Essa é mais conversão, não só compliance.
4. Confiança. Botões polidos e consistentes fazem a página parecer segura. Quebrados ou estranhamente-estilizados fazem visitantes nervosos sobre digitar um cartão de crédito.

Como construir botões que dirigem ação

Três coisas para acertar. Acerte-as e você já está à frente da maioria das landing pages.

1. Torne impossível de perder

Se o botão não se destaca da página, ele não existe. Sua CTA precisa lutar por atenção, não se misturar.

• Faça isto: Escolha uma cor de preenchimento que contraste duro com o fundo. Se sua página é principalmente azul e branco, um botão laranja ou verde vívido se destaca.
• Não faça: Use botões ghost (outline only) para a ação primária. Estudos, e sua própria análise se você A/B testar, mostram que preenchimentos sólidos vencem.

2. Escreva copy como se você estivesse dando uma diretiva

O rótulo é o anzol. Curto, específico, ação-liderado. Três palavras ou menos quando possível. Use verbos imperativos que nomeiem o resultado.

• Faça isto: "Receba meu relatório grátis," "Comece trial grátis," "Crie minha conta."
• Não faça: "Enviar," "Clique aqui," "Próximo." Nenhum daqueles diz aos visitantes o que estão prestes a receber.

3. Torne grande o bastante para atingir

Lei de Fitts em inglês simples: quanto maior e mais perto um alvo, mais rápido é atingido. Em telefones, aonde a maioria do tráfego de landing page vive, isso significa amigo de polegar.

• Mobile: 48x48 dp mínimo. Polegares não são precisos.
• Desktop: 32 a 40px de altura é o piso.
• Espaçamento: Não aglomere botões. Sobreposição de alvo de toque mata conversão mobile.

Formas comuns de construtores quebrarem isto

Sem hierarquia visual

• O erro: Cada botão parece igual, primário, secundário, destrutivo. Visitantes não podem dizer qual é o objetivo.
• A correção: Uma primária sólida por tela. Estilos outlined ou texto para tudo o mais.

Sem feedback de estado

• O erro: O botão não reage no hover, clique ou foco. Visitantes se perguntam se a página está quebrada.
• A correção: Estados distintos de hover, ativo, foco e desabilitado. Até uma pequena mudança de cor é bastante.

Rótulos minúsculos

• O erro: Texto 10px dentro de um botão grande.
• A correção: 14 a 16px mínimo, centralizado. O botão pode ser grande sem o texto ser pequeno.

Como produtos reais fazem isto

Spotify

Spotify possui "o botão verde." Vibrante, em forma de pílula, alto contraste contra fundos escuros, ancorado aonde polegares caem em mobile. Você não pode perder o botão de play ou upgrade. Esse é o ponto.

Stripe

Stripe é obcecado com consistência. Seu azul significa "ação" em tudo, dashboard, docs, site de marketing. Uma vez que um visitante aprende, cada página nova parece familiar. Isso não é mágica, é disciplina.

Princípios relacionados

Botões não vivem sozinhos. Estes moldam como os seus chegam:

Recursos e leitura complementar

Material Design: Botões

Documentação oficial do Google sobre tipos de botão, estados e colocação.

Documentação Apple Developer: Botões

As Diretrizes de Interface Humana para criando botões dentro do ecossistema Apple.

Botões em Design UI

Um artigo mergulho profundo por Willian Matiola sobre a evolução de estilos de botão.

Perguntas frequentes