Os botões são os CTA(Call-to-action) mais importante da sua pagina de vendas.

Separei 7 melhorias para botões, que após aplicadas seus resultados vão mudar.

Botões tem que chamar atenção e contrastar

Neste exemplo abaixo houve aumento de 35.81% nas conversões trocando apenas cor e formato do botão.

Design-Call-to-Action-Buttons-2

OS Botões devem parecer clicáveis

Efeitos de cor 3d(como no exemplo abaixo) e trocar de cor quando o mouse passar sobre o botão é essencial.

call-to-action-example-1

Tamanho importa

Elementos de destaque devem ser maior que a maioria dos outros elementos, mas testar é essencial pois nem sempre grande demais significa melhor resultados:

Design-Call-to-Action-Buttons-7

Sinais de direção

Sinais de direção aumentam a conversão pois trazem sentido de próximo passo e chamam atenção, neste caso abaixo após remover a seta a conversão caiu:

Design-Call-to-Action-Buttons-4

Observe como a GoDaddy utiliza esse conceito:

goddady-example

As setas ou sinais de direção não precisam estar dentro do botão, mais abaixo tem um botão de exemplo onde a seta é fora do botão.

Texto do botão

No geral, deve descrever exatamente o que vai acontecer após clicar no botão. Exemplos do que usar: “Ir para o carrinho”, “Quero começar”, “Adicionar ao carrinho”.

Em hipótese nenhuma use: “Clique aqui”, “Submit” ou qualquer coisa que não descreva o que vai acontecer ao clicar no botão.

Neste caso você pode observar que o texto “Get Your Free Converter”(Obter seu conversor gratuito) é muito mais claro que “Download”(baixar), com isto obteve um aumento de 10.94%.

Design-Call-to-Action-Buttons-6

Utilize também palavras que criem senso de urgência como: “Hoje” e “Agora”, por exemplo:

call-to-action-example-2

fácil de encontrar

Seu botão deve ser tão fácil de encontrar que qualquer criança, jovem, adulto ou velho seja capaz de ver e clicar. Para deixa-lo mais fácil de encontrar sempre deixe seu botão em espaços vazios, onde nada sufoque ele.

Imagens do Produto

Use imagens do produto acima do botão para dar sentido no que ele está adquirindo ao clicar no botão. No case abaixo, após ser incluída a imagem do produto acima do botão “Add to cart”(Adicionar ao carrinho), as vendas aumentaram 28%.

add-to-cart-image

Abaixo do Botão

Link em texto abaixo do botão pode ajudar a converter mais, olhe o exemplo abaixo:

whitespace-and-link-extra

Observe que este botão acima aplica a maioria dos conceitos:

  • Chama atenção e contrasta
  • É clicável
  • Tem setas
  • Texto do botão descreve o que vai acontecer ao clicar
  • É fácil de ver pois ele está em um espaço vazio onde nada o sufoca.

Me conte seus resultados após aplicar o que aprendeu nos comentários ou por e-mail. E compartilhe este conteúdo com seus amigos e parceiros.

– Um Grande Abraço. Até a próxima!

Referencias: