5 Técnicas de Design para Melhores Botões CTA
Quando visitamos a maioria dos sites, geralmente temos um objetivo em mente. Para chegar a esse objetivo, normalmente há uma série de etapas que precisamos seguir e o primeiro passo começa com o clique em um botão de CTA (chamada para ação). Pense na última vez que você se inscreveu em um serviço ou fez o download de um aplicativo. O processo provavelmente incluiu uma interação com um botão de frase de chamariz.
Os botões de CTA são os botões que você usa em seu website para orientar os usuários para a conversão de metas. O objetivo de um CTA é direcionar os visitantes do seu site para um curso de ação desejado. Alguns exemplos comuns de CTAs incluem:
- "Comece um julgamento"
- “Baixe o aplicativo / livro / guia”
- “Inscreva-se para receber atualizações”
- “Consiga uma consulta”
Hoje discutiremos 5 melhores práticas para criar botões de CTA junto com os melhores exemplos do mundo real para ajudar você a obter o máximo de cliques de sua página de destino.
1. Botão visualmente impressionante
Sua cor do botão é importante. Na verdade, se você vai receber apenas um único conselho deste artigo, deve ser este: “Considere a cor do seu botão de CTA”. Usando cores, você pode fazer com que certos botões se destaquem mais do que outros, dando-lhes maior destaque visual.
Use cores contrastantes
Cores contrastantes funcionam melhor para os botões CTA, usando cores contrastantes é possível criar botões impressionantes que se destacam. Você deve selecionar uma cor contrastante do esquema de cores da página da Web, enquanto ainda se adapta ao design geral. Considere o exemplo do Firefox abaixo. A cor verde do botão de CTA na página do Firefox está saltando da página e imediatamente chama a atenção do usuário.
O botão do Firefox CTA é verde brilhante e destaca-se bem em um fundo azul escuro
Outro botão de CTA atraente pode ser encontrado na homepage do Hipmunk. Um botão laranja brilhante captura a atenção do usuário e define a próxima ação possível.
Espaço negativo
Não apenas a cor é importante para um CTA, mas também a quantidade de espaço ao redor dele. Espaços em branco (ou espaço negativo) cria uma sala de descanso essencial e separa os botões de CTA de outros elementos na interface do usuário. A antiga página inicial do Dropbox foi um bom exemplo de uso de espaço negativo para fazer o CTA principal aparecer. O CTA azul “Inscreva-se gratuitamente” destaca-se contra os azuis claros do fundo.
2. Texto Orientado para Ação
Escrever texto para o seu botão de call-to-action que obrigará os visitantes a realizar a ação correta não é uma tarefa fácil. Felizmente, existem algumas coisas que podem ajudar você a fazer isso:
Comece com um verbo
Você deve evitar palavras vagas e chatas como "Entre para mais informações" para os seus botões CTA, e substituí-los por palavras mais orientadas para a ação como "Comece sua avaliação gratuita" ou "Obter desconto agora." Evernote tem um dos mais comuns, mas ainda trabalhando textos orientados a ação para o seu botão CTA.
Comece com um verbo como "Iniciar", "Obter" ou "Entrar"
Um exemplo mais interessante pode ser encontrado na página inicial da Treehouse. O CTA no site da Treehouse não diz apenas “Inicie um teste grátis”; ele diz "Reivindique seu teste gratuito". A diferença de palavras pode parecer sutil, mas "Reivindique seu teste gratuito" soa muito mais pessoal.
Use Breve e Fácil de Entender Texto para Botões
Não se esqueça de indicar exatamente o que o visitante receberá se clicar no CTA. Idealmente, você deseja manter o texto do botão entre duas e cinco palavras.
Adicionar proposta de valor
Muito provavelmente você notou que muitos botões têm as palavras “grátis” em sua cópia e isso não é uma coincidência, usar essas palavras na cópia do botão enfatiza a proposição de valor da sua oferta. Assim, ao escrever seu CTA, tente encontrar uma maneira de integrar uma (ou todas) 3 palavras persuasivas:
- Livre
- Bônus
- Imediatamente
Deixe-me dar um exemplo: um grande temor que os usuários têm antes de se comprometer com algo, é que será um saco cancelar sua assinatura se eles não gostarem do serviço. Netflix alivia esse medo usando a promessa "Cancelar a qualquer momento" ao lado do "Inscreva-se gratuitamente por um mês" CTA.
Crie um senso de urgência
Construir um senso de urgência em seus botões de CTA pode gerar algumas taxas impressionantes de cliques. Por exemplo, você pode usar o texto do botão como "Inscreva-se e ganhe 25% de desconto apenas hoje!". Limitar o tempo que alguém tem para tomar a decisão faz com que as pessoas reivindiquem sua oferta enquanto podem.
Texto útil
Às vezes, você pode querer considerar adicionar uma linha extra de informações no texto do botão. Esta prática é comum com os botões de avaliação gratuita. Por exemplo, um botão de teste gratuito pode dizer "teste de 30 dias, sem cartão de crédito" em texto menor abaixo do botão de CTA com o texto "Inicie sua avaliação gratuita". Este texto extra deve facilitar o processo de tomada de decisão.
3. Torná-lo visível sem rolagem
O posicionamento de seus botões de call to action é tão importante quanto a cor e a mensagem. Um botão de CTA deve estar localizado em um local fácil de encontrar, que segue organicamente a partir do fluxo da página da Web. Você deve tentar manter seu botão de CTA acima da dobra para que os usuários nunca o percam. Idealmente, o botão de CTA deve estar entre as primeiras coisas que um usuário vê na página quando o acessa. A informação adicional deve ficar abaixo da dobra, onde permanece acessível, mas não distrair.
4. Botão Grande Com Cantos Arredondados
Pense em como o design comunica affordance. Como os usuários entendem o elemento como um botão? Use forma e tamanho para fazer o elemento parecer um botão.
Faça com que seja grande o suficiente
O CTA deve ser grande o suficiente para enxergar à distância, mas não tão grande a ponto de desviar a atenção do conteúdo principal da página.
Botões do usuário com cantos arredondados
Forma de botão pode desempenhar um grande papel. É um fato comprovado que cantos arredondados são mais fáceis para os olhos. No teste do ContentVerve, um botão verde arredondado foi melhor que um retângulo azul.
5. Menos é mais quando se trata de escolhas
Tenha em mente que, se você quiser que seus clientes tomem providências, terá de ajudá-los, removendo todos os possíveis obstáculos do caminho. Quando os usuários recebem muitas opções, eles tendem a ficar confusos. Então, é melhor oferecer aos clientes em potencial apenas uma opção.
Se você ainda quiser incluir várias opções de botão, atribua peso a uma opção sobre as outras para ajudar a direcionar os usuários para um caminho específico. Um bom exemplo é o Evernote: assim que você alcança uma parte inferior da página inicial do Evernote, fica bem claro que uma opção preferível é “Inscreva-se gratuitamente”, enquanto o CTA para os usuários compararem planos é muito secundário.
Conclusão
Para alcançar um design de CTA eficaz, você precisa considerar mais do que apenas o próprio botão. Também é importante pensar na cor de fundo, nas imagens ao redor, no texto ao redor e em muitos outros elementos. A equipe do Basecamp compreende a importância desses elementos e criou um layout perfeito para sua landing page. Até mesmo a microcopia que eles usam sob o botão CTA (“4,714 empresas inscritas nesta semana!”) Aumenta a confiança de clientes em potencial.
Espero que as dicas mencionadas neste artigo ajudem você a criar um melhor botão de ação para o seu website. O último momento é a importância de testar. Se você decidir recriar um CTA no seu site, lembre-se de testar para ver se funciona para o seu público.