Blog

Como criar um CTA (Call-to-Action) que converte

Íris Marinelli

Se você quer que o usuário faça alguma coisa, precisa dizer o quê e quando. É assim como chegar a uma cidade nunca antes visitada: você pode até saber o destino, mas se não tiver placas que indiquem o caminho, ou um mapa com direcionamentos, não vai atingir o objetivo. Esse é o trabalho de CTA (Call-to-action).

Ao chegar em qualquer página do seu site, o usuário precisa saber aonde ir. O CTA deve indicar o próximo passo, a ação desejada, e deve ser fácil de entender e de enxergar, além de trazer uma proposta atrativa.

Hoje, vou falar um pouco sobre esse elemento tão importante, muitas vezes deixado de lado, ou minimizado. Vamos lá?

O que é CTA

No marketing, um CTA é uma mensagem que provoca ou encoraja uma resposta imediata. Pode indicar uma venda, um conteúdo, ou outro tipo de ação que ajude o usuário a avançar em sua jornada.

Por ser um elemento tão importante e tão reduzido em tamanho, é o alvo da maioria dos testes A/B.

A plataforma Wingify, por exemplo, diz que 30% dos testes que rodam por lá são feitos no botão call-to-action. No entanto, poucos desses testes produzem resultados com significância estatística.

Agora, se você tirar o botão de CTA, ou escondê-lo, suas taxas de conversão vão despencar. Por isso, o ideal é saber criar um call-to-action claro, simples e que ofereça o que o usuário precisa.

Mudar a cor de um botão de CTA é um teste A/B?

A verdade é que a maioria das pessoas ouve falar sobre CRO por meio de estudos de caso onde poucas mudanças em um CTA causam grandes resultados.

No entanto, essa não é a área com mais impacto que pode passar por otimização. Claro, se você não tiver CTA na sua página e incluir um, o resultado será incrível. Mas nenhum elemento vive sozinho em um site. 

Assim, um teste A/B tem, antes de tudo, muito estudo e análise por trás. Além disso, o que alteramos vai muito além da cor de um botão. É ótimo que muitas pessoas se interessem pelo CRO, mesmo que seja por um motivo um pouco errado.

Mas antes de alterar a fonte do CTA e esperar grandes resultados, aprenda mais sobre testes A/B: sugiro este post com um passo a passo claro e objetivo.

Como criar um CTA

Veja a homepage do Spotify. Você sabe exatamente onde deve clicar, certo?

spotify cta

O alto contraste das cores, o destaque do botão e sua função são todos muito atrativos. Talvez, um botão rosa convertesse mais. Ou um copy diferente. Mas a verdade é que esse formato cumpre sua funcionalidade e provavelmente deve ser mantido.

Veja algumas dicas, que não são regras, para criar um bom CTA.

Utilize palavras que se conectem com a necessidade dos usuários

Quando navegamos em um site, muitas perguntas surgem, sem percebermos. “Onde está o preço?” “Onde vejo as opções de cor?” são alguns exemplos. Então, se você criar um CTA que diga “veja o preço” ou “confira as cores disponíveis”, essa conexão é imediata.

Para entender mais sobre as perguntas que usuários fazem, que tal realizar uma pesquisa com eles?

Seja explícito

Sem perceber, acabamos escrevendo CTAs que não dizem o que está por trás do link. Um botão de “enviar”, por exemplo, não explica muito bem, para onde enviar, o que está sendo enviado. “Leia mais” e “próximo” são outros dois que não possuem conexão com o usuário e não são atrativos.

Evite também frases muito longas, como “clique aqui e descubra o assunto X”. Existem muitas palavras desnecessárias nessa sentença, que pode se tornar “Descubra X”.

Apesar de ser um texto muito pequeno, precisa de cuidado e atenção. Já falei por aqui sobre microcopy, a sua importância e como se dedicar a escrever um que ajuda a converter.

Ofereça um benefício

Além de ser atrativo, seu CTA precisa oferecer um motivo para o usuário clicar, ou seja, um benefício claro que traga algo que a pessoa precisa. O ideal é responder a duas perguntas:

  • Qual é a motivação do usuário para clicar neste botão?
  • O que o usuário vai receber quando clicar?

Veja esta página da Unbounce:

unbounce cta

Vemos, em dois pontos diferentes, a oferta para começar um trial gratuito do produto. É um benefício ótimo, que tem alto potencial de conversão – afinal, é uma oportunidade de testar a plataforma sem pagar nada.

Por falar em trial, vale ler também nosso artigo sobre como otimizar esse processo e conquistar mais clientes pagantes.

Não exija muito comprometimento

A maioria das pessoas tem medo de muito comprometimento. Quanto mais ele for exigido, menor será a motivação para clicar em um CTA. Assim, troque “compre” por “adicione ao carrinho”, por exemplo.

O usuário precisa desse tempo para pensar e ir logo para a compra pode parecer precipitado. Você também pode adicionar um copy discreto que complemente o baixo comprometimento, veja este caso:

rd station cta

Embaixo do campo de e-mail, vemos que não é necessário oferecer cartão de crédito.

Adicione benefícios

Você não precisa depositar toda a expectativa apenas no botão de CTA. Deixe claros os benefícios da oferta no título, no subtítulo, e até em outras partes do copy. Veja esta oferta de upgrade da plataforma Canva:

canva cta

O texto traz vários benefícios, além de exigir um baixo nível de comprometimento. Tudo leva o usuário a clicar no CTA.

Escolha um bom lugar para colocar o CTA

Não existe uma regra sobre localização de CTA, assim como cores, tamanhos e formatos podem variar infinitamente, sendo bons ou ruins em situações diferentes. O ideal, claro, é rodar um teste A/B para descobrir a melhor opção. 

No entanto, existem alguns padrões que podem ajudá-lo a encontrar uma posição ideal. Eles são baseados nos hábitos que temos como humanos: escaneamos páginas de formas bem típicas e as informações podem ser mais bem absorvidas se seguirem esses formatos. Os mais comuns são:

Diagrama de Gutenberg

Se aplica a páginas com textos muito densos, distribuídos de forma homogênea. Divide o layout em quatro quadrantes e indica que os olhos tendem a se mover da esquerda para a direita e quanto mais baixam, mais para direita devem ir. Assim, o ideal seria posicionar elementos importantes na faixa de “gravidade da leitura”.

diagrama de gutenberg

Padrão de layout em Z

Sugere que o usuário começa por cima, da esquerda para a direita, e vai para baixo, repetindo o movimento lateral, formando a letra Z. É mais aplicável quando há pouco conteúdo, mas ainda muito importante, e que deve ser posicionado seguindo o padrão para ser mais fácil de ler.

layout em Z

Padrão de layout em F

Mostra que o usuário deve começar por cima, indo até o final da direita, então vai descendo e acessando menos conteúdo no caminho. Esse padrão foi sugerido pelo pesquisador Jakob Nielsen, depois de realizar estudos de “eye tracking”.

O que podemos aferir é que o usuário vai ler o que estiver acima e provavelmente não vai absorver tudo, mas escanear as informações, que devem estar fáceis de entender.

layout em F

Fonte da imagem.

Nenhum CTA vale para todos

Este post tem a intenção de ser um guia para você que tem dúvidas quanto ao melhor CTA para sua página.

Mas, no CRO, não existem regras universais. O que funciona para uma empresa, pode levar a outra a perder clientes.

Por isso, não siga o que os outros estão fazendo, mas aprenda com eles e aplique esses conhecimentos ao seu caso.

Aproveite e descubra outras técnicas para aumentar a taxa de conversão.

De curioso a cliente

Um passo a passo eficiente para transformar seus visitantes em compradores

baixar e-book