9 dicas importantes de design de CTA para botões que fazem as pessoas clicarem

Seu call to action (CTA) é o clímax da sua estratégia de marketing. Se você está solicitando uma compra, inscrição ou download. Tudo até este ponto foi para atrair clientes em potencial para sua página de destino. E às vezes, você só tem algumas palavras para selar o acordo.

É por isso que o botão CTA é o elemento de design mais importante do seu site. Porque pode transformar visitantes passivos em usuários ativos.

Os botões de call-to-action parecem simples. Mas eles são fáceis de estragar. Ou ser completamente perdido. Essas 9 dicas de design de CTA garantirão essa conversão. Além disso, muitos exemplos úteis:

1. Faça seu botão parecer clicável
2. Seja descritivo com sua cópia
3. Tamanho e espaço corretamente
4. Conecte-se usando a primeira pessoa
5. Crie urgência e use verbos fortes
6. Tente um subtítulo
7. Variações do teste A/B
8. Preste atenção à versão móvel

Faça seu botão de CTA parecer clicável

Fazer um botão parecer 'clicável' parece bobo. Mas você não acreditaria na frequência com que os sites erram. E tem a ver principalmente com o contorno e a cor do botão.

As tendências da taxa de conversão vêm e vão. Como o “botão fantasma” transparente com uma borda fina e texto que desaparece na cor de fundo. Embora possam parecer legais, eles tendem a chamar menos atenção. O oposto do que um CTA eficaz deve fazer.

A única vez que esse design geralmente funciona é como um botão secundário:

Fonte: UX Movement

Aqui está outro exemplo de botões de CTA que não são obviamente clicáveis. Claro, a página de destino desta agência de design parece legal. Mas você seria perdoado por passar por este estudo de caso:

Então, como você faz as pessoas clicarem? Para taxas de conversão mais altas, seu botão deve ser grande, em negrito e funcionar com o esquema de cores escolhido.

A Netflix usa sua assinatura vermelha para chamar sua atenção. Quase como um sinal de pare:

Também pode funcionar para ter uma cor contrastante, para que se destaque. Como o que a plataforma de comércio eletrônico BigCommerce fez aqui:

Isso se aplica ao texto na caixa também. Certifique-se de que contrasta para que você possa lê-lo corretamente.

Os gradientes também podem funcionar dentro do mesmo esquema de cores da marca. Eles dão às coisas uma sensação moderna e mais jovem:

Fonte: segunda-feira

Meu conselho aqui seria tentar manter o design do seu CTA óbvio. Fazer algo fora da caixa pode parecer uma boa ideia, mas os humanos são criaturas de hábitos. E você ficaria surpreso com quantos vão perder o ponto.

Seja descritivo com sua cópia

Uma das táticas mais simples de otimização da taxa de conversão (CRO) é um ótimo copywriting. Mas não apenas com grandes pedaços de texto. A microcópia é igualmente importante e cobre os detalhes menores.

Você costuma vê-lo em formulários de contato e barras de atualização de status de mídia social. Como o famoso “O que está em sua mente?” do Facebook? ou "Iniciar um post" do LinkedIn.

A microcópia pode ajudar:

• Diga aos usuários o que fazer
• Dar sugestões
• Aborde as preocupações
• Fornecer contexto

Sua cópia do botão CTA é outro exemplo. E deve dizer às pessoas exatamente o que eles vão conseguir/o que vai acontecer quando clicarem nele.

Este costumava ser o botão CTA do IMPACT. "Download grátis". Não é muito imaginativo, hein?

Fonte: IMPACTO

Mas, ao torná-lo mais descritivo, eles aumentaram as conversões em 78,5%. “Mostre-me como atrair mais clientes” claramente atraiu mais:

É tentador apenas escrever “Clique aqui”. Mas existem tantas alternativas que envolverão os usuários e, com sorte, inspirarão a ação desejada.

Então, o que você deve escrever? Primeiro, você precisa identificar a intenção de conversão. Você deseja alinhar com onde os usuários estão no funil e de onde eles vieram (fonte de tráfego).

Fonte: KlientBoost

Então você precisa enfatizar o valor do que você está fornecendo. E lidar com quaisquer objeções.

Fonte: Exemplos de marketing

É um processo tão único. E vai depender do seu nicho e da voz da sua marca. Mas seja qual for o texto que você escolher, não se esqueça de manter o texto do botão curto e direto ao ponto.

Dimensione corretamente e use espaço em branco

O design do botão CTA é muito mais do que a cor também. O tamanho do botão é outro pequeno detalhe que pode realmente afetar a taxa de cliques. E o espaço em branco é tão importante quanto o próprio texto.

Muito disso vai depender do seu web design. O espaço negativo (branco) chama a atenção para certos elementos em uma página. Você não quer uma página inicial desordenada. É preciso haver um caminho óbvio para o visitante seguir.

O Airbnb é um dos melhores exemplos de espaço negativo bem feito. E uma cor contrastante para torná-lo ainda mais óbvio:

O Buffer tem um pouco mais em sua página inicial, mas ainda mantém o botão CTA próximo à cópia principal. Além disso, um exemplo de uso eficaz de botões fantasmas. Isso deixa muito claro o que fazer a seguir:

Quanto maior o seu botão, mais perceptível ele é. E precisa se destacar para chamar a atenção. Mas não tanto que tome conta da página e estrague o UX.

Se você é propenso a enxaquecas, desvie o olhar agora. Aqui está um exemplo de como não fazer isso:

Fonte: Justin Mind

Tantos elementos aqui parecem um botão. Eu nem tenho certeza se este site sabe o que quer que os visitantes cliquem.

Por outro lado, qual é a primeira coisa que você vê na página de destino do Spotify?

O enorme botão “Go Premium”, certo? É assim que se projeta um caminho de usuário claro.

Por fim, há mais alguma coisa que você notou sobre os designs de CTA para os bons exemplos? Se você der outra olhada, verá algo que praticamente todos eles têm em comum.

Os cientistas descobriram que os humanos gostam de “formas com curvas suaves em oposição a pontas afiadas”. Eles são mais agradáveis ​​aos olhos e nos fazem sentir mais tranquilos. Por isso, os botões de call-to-action mais eficazes são retângulos com cantos arredondados.

Fonte: Clever Tap

É o formato mais popular por um motivo. Mas tente opções diferentes. Seu público pode preferir outra coisa.

Conecte-se usando a primeira pessoa

Um design de CTA melhor pode ser feito a um toque de distância. Às vezes, uma única palavra.

Em copywriting, somos ensinados a usar a palavra “você”. Porque faz o leitor sentir que está sendo falado diretamente. Então você acha que isso se aplicaria à sua cópia do botão também, certo? Estranhamente, nem tanto.

A Unbounce descobriu que alterar a cópia em sua página de destino de “Iniciar sua avaliação gratuita de 30 dias” para “Iniciar minha avaliação gratuita de 30 dias” aumentou as taxas de cliques em 90%.

Então, por que isso? Bem, quando alguém se sente conectado a um produto, é mais provável que ele converta. Dá aquele toque pessoal sem precisar saber nada sobre eles.

A psicologia de marketing mostra que as decisões de compra são principalmente baseadas na emoção. Então, você quer que o visitante do seu site sinta que é a escolha dele.

Escrever “meu” ajuda o usuário a visualizar a ação que está prestes a realizar. Isso lhes dá controle e (espero) os empurra para a tomada de decisões.

Além disso, pode mostrar que eles obterão valor imediato. Curta a página inicial do Crazy Egg:

Fonte: Crazy Egg

A 1-800 Contacts é a maior loja de lentes de contato do mundo. Mas eles fazem o mesmo. Eles garantem que seus botões de CTA sejam direcionados apenas a uma pessoa:

Fonte: 1-800 Contatos

Não são muitas as empresas que utilizam esta técnica. O que significa que se destaca quando você o vê. Então, por que não tentar?

Crie um senso de urgência e use verbos fortes

Sua cópia precisa criar um senso de urgência e chamar a atenção dos usuários. Isso funciona especialmente bem para empresas de comércio eletrônico. Usar palavras como “agora” e “hoje” pode ajudar a estimular a ação. Porque eles sugerem que a oferta não vai durar para sempre.

“Compre agora” é um clássico. Mas podemos fazer melhor do que isso com nosso design de CTA.

Fonte: GoSquared

Você pode tentar palavras como:

• “Trate-se hoje”
• “Desbloqueie o desconto agora”
• “Download gratuito único”

Você também quer tornar sua oferta atraente e despertar a curiosidade. Então, comece com um verbo forte. Não é algo que parece que vai ser um esforço. Essa é uma maneira fácil de afastar as pessoas.

Aqui estão alguns exemplos do que quero dizer:

O lado esquerdo parece que seus usuários obterão algo clicando. O lado direito parece que eles precisarão abrir mão de tempo ou dinheiro.

Você pode ser muito criativo também. Curta esta versão da página inicial do Huemor:

Fonte: FastCapital360

Ou a antiga página de destino do condado de Humboldt que lhe dá um toque místico:

Fonte: ConEmprendimiento

Faça um brainstorming de ideias com sua equipe. Não importa o quão ridículo. Você ficaria surpreso com o que você vai inventar e acabar usando. Mas seja qual for o texto que você escolher, não se esqueça de cumprir sua promessa do outro lado.

Tente um subtítulo ao lado do botão de call-to-action

Às vezes, as pessoas precisam de um empurrãozinho. E um pouco de texto sob o botão CTA pode fazer o truque. Não é um “subtítulo” regular. Mas é a maneira mais fácil de descrevê-lo.

Se pensarmos no texto do botão como o título, o subtítulo mais popular que você verá é "Não são necessários detalhes do cartão de crédito". Mas o seu pode dizer qualquer coisa. E é divertido ser um pouco criativo com isso.

Na maioria das vezes, eles são usados ​​para dar confiança ao cliente em potencial. E eles podem abordar os principais pontos problemáticos que as pessoas podem ter:

Fonte: CoSchedule

O CoSchedule entende que os usuários podem pensar que é apenas uma avaliação gratuita. Então por que não? É grátis para sempre”, esclarece.

Você também pode usá-los para adicionar alguma prova social:

Fonte: Basecamp

Isso lhe dá credibilidade instantânea porque os usuários podem ver claramente que outros já confiam em você. Também pode inspirar o FOMO, pois as pessoas pensam que deve haver razões para tantos assinantes.

Se você tiver uma oferta especial ou valor extra que acompanha seu serviço, use seu subtítulo para destacá-lo:

Fonte: Moz

A microcópia é uma chance para a voz da sua marca brilhar. Mesmo que seja apenas uma frase. Então, não tenha medo de ser um pouco atrevido se for adequado:

Fonte: KlientBoost

Você também pode ser específico com exatamente o que acontecerá depois que as pessoas clicarem. Diga-lhes:

• O que eles vão conseguir (novas ideias de marketing)
• Quantos (17+)
• E por que eles deveriam se importar (eles são melhores do que você tem)

Use esses exemplos como modelos de inspiração. Ou fazer algo totalmente diferente. Apenas certifique-se de que ele se encaixa na identidade da sua marca e divirta-se com isso.

Não se esqueça dos testes A/B

A maioria das ferramentas de CRO visa melhorar a experiência do usuário (UX). E você já pode estar fazendo isso com as partes principais de suas páginas da web. Mas você deve fazer isso com os pequenos elementos também.

A Amazon é notoriamente exigente quanto aos designs de botões de CTA. Especialmente com o uso de terceiros. Portanto, certifique-se de não estar quebrando nenhuma regra com a sua.

Depois disso, pequenas mudanças no design do seu botão podem ter um grande impacto. Então, compare diferentes tipos de botões de CTA. Então variações do teste A/B de:

• Cor do botao
• Cópia de CTA
• Fonte
• Colocação no design da página
• Pop-ups
• Formulários de contato

Fonte: Snov

Como discuti anteriormente, às vezes, alterar apenas uma palavra pode aumentar a conversão ou a taxa de cliques. Mas antes de entrar, você precisa entender como os visitantes navegam em seu site.

Você quer descobrir coisas como:

1. Com quais elementos eles estão tentando interagir
2. De onde eles vêm
3. A jornada do usuário/funil de compra do seu site
4. A motivação das pessoas para estar lá

Fonte: GIPHY

Depois de obter essas informações, você pode experimentar coisas com base em fatos, não em suposições.

Geralmente é mais fácil comparar uma versão A e B com o design CTA. Mas você pode aumentar isso e tentar testes multivariados. Mais simples geralmente é melhor no começo. Dessa forma, você terá um vencedor claro.

Mas não há nada que o impeça de testar esse vencedor contra outra versão depois disso. Você deve estar sempre testando e comparando. Mesmo quando você encontrou algo que funciona. É isso que as marcas de sucesso fazem.

Preste atenção à versão móvel

Uma dica rápida para finalizar. Seus elementos de design terão uma aparência muito diferente em uma tela de celular. Você está trabalhando com uma tela muito menor e com menos pixels. Assim, a desorganização torna-se muito mais fácil.

Tudo o que abordamos se torna mais prevalente em sua versão móvel. As cores contrastantes precisam se destacar mais:

O espaço negativo deve ser uma prioridade:

E até mesmo seu subtítulo pode ficar em um lugar diferente. Como os usuários de dispositivos móveis podem não rolar para baixo o suficiente para vê-lo abaixo:

Grite para CleverTap por esses gráficos

É preciso pensar mais no seu UX em geral no celular. Porque o celular é responsável por mais da metade de todo o tráfego de pesquisa global. Você não pode esperar que sua versão para desktop seja traduzida. E um pouco de esforço pode resultar em uma taxa de cliques muito maior.

Conclusão

O design eficaz do CTA é composto por muitos desses pequenos detalhes. Eu já disse isso muitas vezes, mas o menor ajuste pode ser o suficiente. Mesmo algo tão insignificante quanto a cor ou a forma do contorno.

O teste A/B é a única maneira que você vai saber. E você nem precisa de uma ferramenta CRO cara para fazer isso. Basta acompanhar suas conversões. Faça uma mudança. E veja se há um aumento ou diminuição do número usual.

Basta dar ao seu botão de call-to-action a atenção que ele merece. Pode ser a diferença entre um novo cliente ou uma oportunidade perdida.

Você viu algum design original de CTA recentemente? Você fez uma pequena alteração que aumentou as conversões? Deixe-nos saber nos comentários abaixo.