• what is unbounce
  • CATEGORIAS

    Qual o melhor design para o CTA da sua landing page?

    Esse é um artigo recheado de estudos de caso e exemplos reais, o qual fornecerá ideias interessantes sobre como fazer o design de botões de chamada para ação (CTA) a fim de aumentarem a conversão da sua landing page.

    O que você precisa entender sobre o CTA

    Em suas landing pages, a chamada para ação representa a ponta do iceberg entre a rejeição e a conversão.

    Quando você pede para alguém fazer algo online, eles precisam passar pela sua chamada para ação, seja quando você pede para fazerem o download de um PDF, ou para preencher um formulário (geração de lead), ou mesmo executar um clique para poder entrar em outra página (click-through).

    design-botao-chamada-para-acao

    O CTA é composto por 2 elementos: O DESIGN e O TEXTO.

    Ambos os elementos tem um impacto direto sobre as conversões,no entanto, possuem papéis diferentes no processo de conversão.

    O design do botão é um indicador visual que ajuda a atrair a atenção do visitante para a chamada para ação. Em outras palavras, o design do botão responde a pergunta: “Onde devo clicar?”

    O texto do botão, por outro lado, ajuda o visitante no momento mais crítico da sua decisão responder à pergunta: “Por que devo clicar nesse botão?”

    Vamos ao exemplo real

    Esse exemplo é sobre um e-commerce europeu que vende porcelana pintada à mão.

    Neste caso, o aumento não foi somente da taxa de click through (CTR) conseguimos ainda aumentar vendas através da página do produto. Ao mudar a cor e o design do botão da chamada para ação a taxa de conversão aumentou em 35,81%.

    design-botao-chamada-para-acao-2

    Este estudo de caso ilustra perfeitamente o impacto que o design do CTA podem ter sobre sua taxa de conversão. Se você cria o design do seu CTA apenas para ficar bonito no design geral, você provavelmente está perdendo dinheiro. Pense em quão “clicáveis” eles são e não se eles combinam com o fundo.

    Lição 1: Não há um “botão padrão” que sempre funciona

    Os CTAs podem ter todas as formas, tamanhos e cores, não é uma solução genérica que dá certo toda vez.

    As pessoas gostam de dizer coisas como “nunca use botão vermelho porque é a cor de placas de pare” ou “botões verdes são melhores”.

    Ainda que essas generalizações sejam convenientes, elas raramente refletem a realidade. O que realmente funciona dependendo do contexto e do design da sua landing page.

    No teste que mostrei antes, o verde funcionou melhor que o azul. Mas isso não significa que a cor verde é sempre a melhor. Vi diversos testes nos quais botões azuis e vermelhos funcionaram muito melhor que botões verdes.

    O que importa é se destacar

    O fundamento principal da otimização é que o botão se destaque do resto da página, de maneira que seja fácil para os visitantes encontrarem o botão quando decidirem dar o próximo passo. Se sua landing page é em grande parte verde, o botão verde provavelmente não funcionará bem, pois será muito difícil separar o CTA do resto da página.

    A melhor maneira de descobrir o que funciona para sua landing page é testar versões diferentes com seus clientes em potencial no mundo real.

    Um milhão de cores para se escolher, por onde começo?

    O melhor conselho que posso oferecer é: utilize o bom senso e cores contrastantes quando fizer o design dos botões de sua landing page. A boa e velha técnica de olhar apertando o olhos é sempre útil. Crie sua página de destino, de alguns passos para trás, aperte os olhos e veja qual botão se destaca mais.

    botões CTA fantásticos
    Botões criados com www.ButtonOptimizer.com

    Aqui está um mais exemplo real

    Neste caso fomos capazes de duplicar o CTR em um site de imóveis ao refazer radicalmente o design do botão CTA principal alterando um obscuro botão marrom para um botão mais chamativo e amigável laranja.

    design-botao-chamada-para-acao-3b

    Se você fizer o teste de apertar os olhos nessas duas variações de botão, ficará claro qual se destaca mais.

    Eu, normalmente, começo experimentando com um botão laranja ou verde, simplesmente porque eles costumam se sair bem em testes. Não acho que exista uma razão psicológica mais profunda, parece apenas que eles destacam na maioria das landing pages, devido ao design comum. Novamente, tudo depende do contexto, já vi testes nos quais um botão roxo teve melhores resultados do que um verde ou laranja.

    Efeitos visuais

    Efeitos visuais podem ter um impacto na quantidade de cliques em seu botão, mas tenha cuidado! Mesmo pequenos efeitos podem ter grandes impactos, o que não necessariamente podem ser positivos.

    Vamos observar outros exemplos verídicos

    No exemplo anterior o botão laranja com uma seta verde teve um desempenho melhor do que o “enfadonho” botão marrom. Bom, o designer não gostou do novo botão, apesar do impacto positivo que ele teve nas conversões.

    Por fim, sua principal objeção era a seta verde, a qual ele achou feia. No entanto, minha hipótese era a de que a seta verde tornava o botão mais perceptível e, portanto, mais “clicável”.

    Nós poderíamos ter discutido nosso gosto pessoal por horas, mas, ao invés disso, eu decidi investigar se a seta tinha ou não um impacto positivo. Portanto, organizei um teste A/B simples com o parâmetro botão/seta verde como controle e uma variação com um botão laranja sem seta.

    O resultado foi que o tratamento sem a seta verde teve um desempenho 12,29% pior do que o controle com a seta verde.

    design-botao-chamada-para-acao-4

    Este foi um exemplo de um teste que fiz na homepage de um portal dinamarquês, no qual você pode comprar e vender telefones celulares.

    Aqui eu estabeleci a hipótese que eu poderia fazer com que o botão se destacasse mais e aumentar o CTR mudando a cor da fonte do botão verde de preto para amarelo. O tiro saiu pela culatra! Mudar a cor da fonte, na verdade, diminuiu o click through em 18,01%.

    design-botao-chamada-para-acao-5-560

    Portanto, neste caso a mudança visual teve um impacto negativo direto nas conversões e, por fim, a variante menos colorida teve um desempenho muito melhor.

    É muito difícil prever esses resultados sem testá-los na vida real. Mas, os aconselho a manter o mais razoável e simples possível. É fácil extrapolar em soluções criativas, mas na maioria das vezes observo que variantes simples (que são fáceis de reconhecer como botões), com um texto relevante, são melhores que variações artísticas.

    Aqui está um exemplo do verídico no qual um botão verde simples com texto relevante teve um desempenho 10,94% melhor que uma variante extra criativa.

    design-botao-chamada-para-acao-6

    Tamanho importa – mas, nem sempre maior é melhor

    Eu vejo muitos designers cometerem o erro de criarem botões que são perfeitos esteticamente, mas pequenos demais do ponto de vista da conversão. É importante que seu botão seja grande o bastante para se destacar claramente como um elemento clicável da landing page. Porém isso não significa que quanto maior for, melhor será.

    Aqui está um exemplo no qual tornar o botão muito maior teve um efeito negativo nas conversões em uma página de pagamento.

    design-botao-chamada-para-acao-7

    Minha hipótese é que o botão maior simplesmente se tornou grande mais, atraiu atenção demais e, por fim, fez com que os visitantes se sentissem pressionados com o objetivo de conversão.

    Portanto, novamente, meu conselho é faça botões grandes, mas não exagere – novamente, testar é a melhor maneira de se certificar que escolheu o tamanho correto.

    Respeite o texto do CTA!

    Eu já ouvi designers dizerem “Ninguém lê o texto no botão” – bem, isso não é verdade. Eu tenho um catálogo de pelo menos 30 testes que provam o contrário; o texto do botão tem um grande impacto sobre a conversão e as pessoas os leem!

    De fato, além de seu título, seu texto do CTA é um dos poucos textos que você pode ter 99% de certeza que seus visitantes lerão.

    Veja nesse exemplo do mundo real

    O Oli Gardner e eu fizemos um teste A/B em uma landing page da campanha PCC na unbounce.com, cujo objetivo era aumentar o número de prospectos que se inscreviam para um teste gratuito de 30 dias.

    A única coisa que fizemos foi alterar uma palavra no texto – nós mudamos o pronome possessivo de “seu” (your) para “meu” (my). Depois de rodar o teste por três semanas, o tratamento do texto do botão “Iniciar meu teste gratuito de 30 dias” gerou um aumento de 90% no CTR.

    design-botao-chamada-para-acao-8-560

    Em muitos casos, o melhor texto pode parecer muito longo ou fora de proporção em relação ao design. Mas, na minha opinião, isso realmente não importa contanto que essa versão gere mais conversões. Assim sendo, é crucial que você mantenha sua mente aberta para variações de texto mais longas quando fizer o design de seus botões.

    O que você deve fazer agora

    Vá até sua landing page e analise seus botões de chamada para ação. Eles se destacam da página? São facilmente reconhecíveis como botões clicáveis? Eles estão meramente lá como parte do design?

    Faça o teste de apertar os olhos e considere se você pode mudar a cor ou adicionar um efeito visual para dar mais destaque ao botão.

    Utilize suas observações para gerar conceitos de novos botões, use também a  ferramenta gratuita buttonoptimizer.com para desenvolver detalhes diversos que podem ser testados em sua landing page.

    Se você usa a Unbounce para criação das suas landing pages, criar páginas testes com diferentes botões é muito fácil. E se você quiser testar a Unbounce por 30 dias grátis escolha um dos planos neste link e crie landing pages e faça teste A/B sozinho.

    Ficou interessado em teste A/B? Crie hipóteses para seus testes e entenda porque elas são essenciais.

    — por Michael Aagaard , adaptação de Andréa Amaral

    Otimize suas landing pages. Melhore o ROI de suas campanhas de marketing.

    Baixe esse manual com dicas e estratégias para melhorar suas landing pages.
    Ao baixar esse manual, você receberá conteúdo sobre marketing de conversão em seu email por parte da Unbounce.

    Sobre Michael Aagaard
    Michael Aagaard, analista senior de CRO (otimizador de conversões) da Unbounce é amplamente conhecido no mercado de CRO. Quando ele não está a analisando e otimizando as conversões na Unbounce, você irá encontrá-lo num palco em algum lugar do planeta evangelizando CRO. Ele foi nomeado o quinto especialista de CRO mais influente em 2015 pela Hanapin e se esforça para trazer conhecimento inspiradores à empresas difundindo a prática de pesquisas e testes no marketing online.
    » Mais publicações por Michael Aagaard
    • Gilson Batista

      muito interessante o conteúdo. Parabéns!

    • Excelente os Conteudos..Fantasticos!