Como criar um botão de CTA que converte

Qual deve ser a aparência de um botão de CTA? Onde deve ser colocado? Como evitar CTAs irritantes? Essas são apenas algumas das perguntas que incomodam a todos, desde redatores e profissionais de marketing a designers da web e UX. Hoje, vamos resolvê-los.

O que é um CTA?

A abreviatura “CTA” significa Call to Action. Uma frase de chamariz é qualquer peça de design (geralmente um botão) que solicita que o visitante execute uma ação. Isso pode ser qualquer coisa – desde explorar o site até preencher um formulário de contato ou adicionar um produto ao carrinho.

Quando bem projetado, CTAs desempenham uma função dupla – ajudam o usuário a navegar em um site e representam um elemento crucial em seu fluxo de conversão. Em última análise, o papel deles é fazer com que os visitantes façam o que você deseja que eles façam. Como um guia turístico discreto, conduzindo um usuário suavemente através de seu ambiente digital.

Tecnicamente falando, qualquer botão pode ser um botão CTA, desde que contenha uma cópia que transforme o visitante de um observador passivo em um usuário ativo de um site. Mas uma das principais coisas que separam os CTAs do resto dos botões em um site é que, além da cópia mencionada, eles precisam ter certas características (cor, forma, posição) que atraem a atenção dos usuários e influenciá-los a realizar uma ação.

É claro que os CTAs são de enorme importância para uma boa experiência do usuário e para os resultados financeiros da sua empresa, portanto, neste artigo, vamos compartilhar algumas coisas para manter em mente ao criar seus CTAs.

Vamos começar com o texto do botão.

Como escrever uma cópia do CTA

Como a eficácia dos CTAs depende muito da qualidade e estrutura de sua cópia, é claro que este texto deve ser bem pensado. A cópia do CTA precisa realizar duas funções: envolver o visitante e deixar claro qual ação o visitante deve realizar.

Para alcançar o valor envolvente, o texto deve ser direto, claro e agradável, se não for totalmente charmoso. Como pode conter apenas algumas palavras, a mensagem da cópia do CTA deve permitir que o usuário entenda intuitivamente o curso de ação necessário.

Em muitos casos, a cópia de CTA ideal simplesmente indicará a meta de conversão do site. Se o seu objetivo é fazer com que as pessoas leiam o seu blog, o botão deve simplesmente dizer Leia agora ou consulte Mais informação. Se você quiser que eles interajam com o site, um botão com o texto Entre em Contato Agora ou mesmo simplesmente Envie-nos uma mensagem fará o truque muito bem.

Ainda assim, não é suficiente ser curto, claro e (se possível) divertido. Há um pouco de psicologia a ser levado em consideração aqui. Na verdade, muita pesquisa e testes foram realizados para determinar o tipo de cópia que os usuários consideram mais atraente e qual texto de CTA converte melhor.

A maioria dos especialistas concorda que criando um senso de urgência é uma condição necessária para uma cópia bem-sucedida do CTA. Felizmente, isso pode ser feito com bastante facilidade, simplesmente inserindo uma ou duas palavras, como “Agora” ou “Hoje”, talvez combinadas com “Apenas”.

Botões dizendo Obtenha sua cópia grátis agora ou Cadastre-se e ganhe 50% de desconto somente hoje! são altamente convertíveis, pois os usuários não querem perder uma oportunidade especial de ganhar algo que, amanhã, não estará mais disponível.

Outra coisa a se prestar atenção aqui é como você se dirige aos visitantes. Alguns especialistas consideram o uso de pronomes de primeira pessoa (Criar minha conta, obter minha cópia) o mais eficaz, enquanto outros optam pelo uso de pronomes de segunda pessoa (Obtenha sua cópia, solicite sua avaliação gratuita) Para complicar ainda mais as coisas, as duas técnicas parecem ter um número igual de apoiadores e argumentos a seu favor.

De qualquer forma, é claro que algum grau de personalização na abordagem aos visitantes é obrigatório na cópia do CTA, pois faz com que os usuários se sintam mais pessoalmente envolvidos com o produto ou serviço. E a conexão pessoal é essencial para as conversões.

Como projetar seus botões de CTA

O aspecto estritamente visual dos botões do CTA é tão importante (senão ainda mais) quanto a própria cópia. As regras parecem simples – os botões precisam chamar a atenção e convidar os usuários a clicar. Mas isso nem sempre é fácil de conseguir. Para se destacarem na página, a forma, o tamanho, a cor e o posicionamento dos botões CTA devem ser em claro contraste com o resto do ambiente.

A forma dos botões CTA

Você provavelmente notou que a maioria dos CTAs (e a maioria dos botões na web, nesse caso) são retangulares. Claro, existem alguns ótimos exemplos de CTAs que são circulares, quadrados ou alguma outra forma ainda menos comum, mas a maioria deles são retangulares. Por que é isso?

Retângulos e quadrados são as formas com que mais nos deparamos, seja na web ou no dia a dia. Os retângulos, em particular, nos fazem sentir confortáveis, pois transmitem uma sensação de estabilidade e segurança.

Por outro lado, está provado que os humanos uma afinidade por curvas. As formas redondas são simplesmente mais agradáveis ​​aos olhos do que as agudas e nervosas. Sem falar que o círculo é uma forma que exala uma sensação de paz, plenitude e harmonia.

Considerando esses dois fatos, é lógico que a forma mais eficiente para os botões de CTA acabou sendo um retângulo com cantos arredondados. Essa forma se tornou muito popular entre os profissionais de marketing e pode ser encontrada em um grande número de sites e aplicativos.

Claro, essas são apenas diretrizes gerais derivadas da experiência e algumas práticas recomendadas bem pesquisadas em UX. Existem botões CTA que vêm em todos os tipos de formas não ortodoxas, mas geralmente fazem parte de um ambiente de design marcado por experimentação, estética altamente específica e assim por diante. Em outras palavras – eles não representam a norma.

A importância da cor para botões CTA

O papel das cores na formação de nossa percepção e experiência de todo o conteúdo visual foi pesquisado por décadas. Os psicólogos de hoje concordam que tendemos a interpretar e sentir emocionalmente as cores de acordo com certos padrões, e isso é algo que os profissionais de marketing vêm explorando há muito tempo.

Cores específicas podem ser associadas a mensagens específicas, transmitindo-os automaticamente, em um nível subconsciente. Pense nos semáforos – as próprias cores comunicam a mensagem desejada. Verde – vá, vermelho – pare.

Mas quando se trata dessas duas cores e de seu uso em CTAs, a situação não é tão clara quanto parece. Você pensaria que a cor vermelha, como uma cor de alarme, cuidado e aviso, afastaria as pessoas e resultaria em menos cliques. Mas em vários testes a / b independentes, o vermelho foi um vencedor claro sobre o verde. Portanto, quando se trata de comunicação por meio de cores, é melhor seguir todos os conselhos com cautela e fazer seus próprios testes para obter insights viáveis.

Porém, tenha em mente que mesmo depois de encontrar a paleta de alta conversão para suas mensagens visuais, seu trabalho está longe de terminar. A cor do botão será mais eficaz apenas quando estiver em sinergia com seu ambiente visual. A relação entre o botão e o resto do layout deve ser harmoniosa e equilibrada, mas também contrastante o suficiente para chamar a atenção dos usuários. Também vale a pena considerar as combinações de cores complementares – elas são agradáveis ​​à vista e fornecem o contraste necessário.

A importância das cores na criação de botões de CTA torna-se ainda mais clara em situações que justificam por dois botões, um deles é um CTA clássico e outro que leva a informações adicionais sobre o assunto.

Nesse caso, o botão estritamente do tipo CTA deve ser destacado e acentuado, para que os usuários se concentrem nele primeiro. Isso pode ser alcançado com uma cor de sinalização forte, como vermelho, laranja ou qualquer variação das mesmas.

No exemplo acima, você notará que o outro botão, aquele que convida os visitantes a aprenderem mais sobre o serviço em questão, é muito mais discreto (neste caso, apenas delineado), garantindo que o CTA receba toda a atenção.

Animação e detalhes nos botões CTA

O terceiro aspecto do design de CTA é a animação do botão. Junto com ícones, ilustrações discretas e outros elementos gráficos, a animação pode trazer outra camada de valor visual e comunicativo. Quando usada corretamente, a animação funcional como uma ferramenta UX pode tornar os botões mais intuitivos e diretos e, portanto, aumentar sua eficácia.

Ao projetar CTAs, animação é usada principalmente para efeitos de foco. Essas animações não devem ser muito interativas ou barulhentas, pois não queremos que elas tirem o foco da mensagem. Muita animação pode confundir o usuário e criar um efeito emocional negativo.

No entanto, botões sutilmente animados são sempre uma grande contribuição para o design do CTA, enriquecendo-o e garantindo que o foco esteja claro.

Além dos efeitos animados de foco, os designers às vezes optam por elementos e ícones adicionais, especialmente para botões que convidam usuários a Adicionar ao carrinho, Baixar, Carregar, Excluir e assim por diante. Nesse caso, é essencial verificar se há espaço vazio suficiente entre o texto do botão e esses elementos adicionais, bem como entre os elementos e as bordas do botão. O botão, acima de tudo, precisa ser fácil de ler e não deve parecer confuso.

O Posicionamento dos Botões CTA

O aspecto final que determina o sucesso de um botão de CTA é seu tempo ou, mais precisamente, seu posicionamento. Embora não haja uma “regra de ouro” sobre onde colocar o botão, uma coisa é certa – ele deve ser servido ao visitante no momento certo.

Isso significa que você precisa pensar com muito cuidado em qual ponto durante a permanência do visitante na página em que ele deve ver o botão. Quando o visitante está bem preparado para a ação por meio de conteúdo e informações visuais e textuais, a chance de realizar a ação desejada torna-se real.

Toda a página – seu design e seu conteúdo – deve, portanto, ser estruturada e concebida de forma que leve o visitante ao objetivo final (ação), seja uma assinatura, uma compra ou outra coisa.

Colocando um CTA acima da dobra (a parte da página que é primeiro visível ao carregar) costumava ser um padrão, mas como a rolagem é uma ação que agora realizamos de forma natural e automática, o “conteúdo acima da dobra” perdeu um pouco de seu “prestígio”. Na verdade, colocar um CTA bem no topo, antes mesmo que o usuário tenha a chance de se estabelecer e explorar o conteúdo, muitas vezes pode ser contraproducente.

Se você colocar o botão abaixo da dobra, significa que o visitante deve percorrer um caminho para alcançá-lo. Se você planejou a estrutura da página corretamente, esse caminho estará cheio de dicas visuais e textuais que empurram suavemente o visitante para baixo, deixando-o pronto para a ação.

Depois de encontrar o local perfeito para o botão, você tem que ter certeza de que permanece em foco. Para fazer isso, você deve garantir que haja espaço negativo suficiente ao seu redor. Isso permite que o visitante “descanse seus olhos” e permite que o botão seja claramente visível e sua mensagem compreendida.

Pensamentos finais

Limpo, direto, focado e envolvente – essas são as principais qualidades de um bom botão de CTA de conversão. Vimos que muitas dessas qualidades vêm do design. Embora as diretrizes gerais e sugestões para projetar o botão CTA perfeito sejam claras, uma abordagem individual é sempre recomendada. Claro, a cor vermelha pode funcionar muito bem, mas se ela não combinar com o tom e a paleta do seu site, você não deve usá-la. O mesmo vale para as orientações sobre a forma, o tamanho e a posição do botão. Depois de criar um botão que se ajuste à sua marca visual e encontrar um ótimo lugar para ele, certifique-se de testá-lo com algumas versões ligeiramente diferentes. E não se esqueça de apoiar seus CTAs com algum conteúdo forte voltado para o valor e excelente texto.