O Segredo de um Botão Call-to-Action: Como Criar um Botão CTA Irresistível para Clicar

Como se faz para chamar a atenção de um cliente com algumas palavras e induzi-lo para a ação? Como se cria um botão CTA irresistível para clicar? É impossível encontrar modelos de design da Web, em que os botões CTA cumprem as exigências? Nesta publicação do blog, abordaremos a anatomia dos botões CTA e revelaremos o Segredo de um botão CTA Adequado. Mas para saber como usar bem esses botões, precisamos olhar o processo ao contrário: o botão CTA é obrigatório?

Afinal, um Botão CTA É Obrigatório?

Não é obrigatório, mas fortemente recomendado. Teoricamente, haveria três casos em que você não precisaria desse botão. Os marqueteiros raramente se arriscam com suas conversões de páginas da Internet e geralmente incorporam o botão no design.

  1. Sua marca é tão reconhecida que não é você que procura o visitante, mas o visitante que procura você. Isso é relativamente raro.
  2. Os produtos que você oferece são retratados tão claramente em uma página da Internet que você nem precisa explicar exatamente o que você está oferecendo (isso funciona para páginas da Internet modernas com design minimalista. Isso acontece com um pouco mais de frequência.
  3. Seu design é minimalista e fica tão melhor sem um botão CTA que você está pronto para arriscar (isso geralmente acontece como no segundo exemplo. Além disso, se não estiver pronto para colocá-los, este problema pode ser resolvido empregando botões fantasma ou call-to-action sem nenhuma moldura).

Fica claro, no primeiro exemplo, que é desnecessário ter um botão CTA, mas e no segundo e terceiro exemplos? Como já mencionado, os marqueteiros raramente utilizam uma Política de Nenhum Botão CTA. Pense em todas as páginas da Internet que viu ultimamente e não conseguirá se lembrar de nenhuma página sem botão CTA. No entanto, elas existem. Segue um exemplo.

Esta página da Internet possui um produto claramente retratado em seu design [vide item 2] e um design minimalista [vide item 3].

Nesta página da Internet, você não se distrai com uma grande quantidade de elementos. Assim, você poderá optar por não utilizar um botão CTA se tiver uma loja online pequena. Além disso, a hierarquia dos blocos de conteúdo é ajustada de modo que cada bloco seja quase um Call-to-Action separado. Notou? Uma imagem grande em um espaço negativo atraindo a atenção do visitante.

Um fato interessante:

A percepção humana, ao ver um botão CTA, retorna a seus instintos tribais e, para sobreviver, precisa de um líder. Por instinto, obedecer significa sobreviver em arredores inóspitos. Nós nos desenvolvemos o suficiente para pensar antes de obedecer (e decidir se devemos sequer atender à ordem), mas não o suficiente para eliminar isso completamente de nossa natureza.

É Necessária Moldura no Botão CTA?

Ele fica muito mais visível na tela quando tem moldura. Esta é a melhor solução quando se precisa incitar uma ação desejada.

Os Botões CTA Podem Ficar Sem Contorno? Sim.

Neste exemplo, não se vê contornos, apenas Call-to-actions. 'Start Film' [começar filme], 'Share' [compartilhar], 'Shop' [comprar] - estas palavras possuem incríveis efeitos ao pairar o mouse sobre elas, que parecem hipnotizar você. Se estiver procurando um design diferente, você pode conferir a página da Internet de temas de galeria de arte, é comum elas oferecem coisas notáveis.

Este design é um dos mais etéreos que vi ultimamente. Preste atenção ao Call-to-Action, ele está em um banner semitransparente. Por um lado, ele tem alguns contornos, e, por outro lado, não possui contornos exatamente tradicionais e eles não são notados pelo visitante.

Mesmo sem visitar a página da Internet, você vê um texto escuro distinto 'Scroll to Discover' [Role para Descobrir] antes de ler as letras grandes “ALL HAPPY BY DESIGN” [Todos felizes com o design]. O Call-to-Action é eficaz? Provamos que é ao ler o 'Scroll to Discover'.

Esta página da Internet é incrivelmente rica em movimentos, parece estar se mexendo constantemente, mesmo que não mexa seu cursor. Esse é um caso interessante porque aqui o Call-to-Action só tem uma linha embaixo dele e o 'botão' não é, de longe, a primeira coisa que você nota no design. Este sublinhado é como se fosse parte do botão, que, entretanto, atrai a atenção depois da moça sorridente (1) e das letras grandes “FW'16” (2).

Onde Se Pode Colocá-lo e Quantos Podem Ser Usados no Design?

Em minha experiência, a maioria das páginas de Internet e os modelos de páginas da Internet de Web design possuem até 5 botões CTA (ou call-to-actions sem botão) no design de uma página da Internet. Você não quer desviar a atenção de seu visitante, mas precisa que ele faça várias coisas. É aí que vários call-to-actions entram em ação.

Não esqueça que janelas pop-ups precisam ter um Call-to-Action claro e organizado.

Por sua natureza, uma janela pop-up é um detalhe extra de design que desvia a atenção e é crucial acrescentar um Call-to-Action adequado aqui. Aposto que a maioria de nós, mesmo após todos esses anos na Web, ainda é pego desprevenido quando aparece uma janela pop-up na tela. Isso é bom para web designers, que nunca usam o mesmo intervalo de tempo para uma janela pop-up. Eu, pessoalmente, às vezes, fico tão surpreso que até assino o boletim eletrônico.

E Quais as Principais Exigências Que Ajudam Você a Criar um Botão CTA Perfeito?

  1. Ele deve complementar o design.
  2. Ele deve parecer natural. Ele depende de muitos fatores, como formato, cor, paleta geral de cores, tamanho, disposição etc.

Há uma guerra velada dos botões CTA vermelho e verde, mas, como mostram os casos de testes AB, cada um deles pode ter um desempenho melhor em circunstâncias específicas. Os botões poderão ter design plano, variação de cores, efeitos ao pairar ou não, mas a única coisa que você deve manter é a integridade do estilo. O botão deve se destacar, mas ainda deve manter um estilo específico.

Seguem alguns exemplos de botões que possuem design natural.

Um botão fantasma dourado com o texto “Start Experience” parece natural e incrivelmente elegante neste design.

Ice Funky

Este é outro ótimo exemplo de como o design de botões CTA pode ser feito. Nenhum contorno visível, embora o botão pareça bem definido.

Hunting

Use cores contrastantes no fundo. O botão chamará atenção por si só.

 

Glassonic

Se não conseguir decidir de que cor precisa ao escolher entre as cores verde e vermelho, considere a ideia de um botão de duas cores. Efeitos ao pairar o mouse fazem a mágica.

O Texto Dentro do Botão

Não esqueça de que, em um 'botão CTA', o que chama a atenção é a frase principal. É por isso que precisa prestar atenção ao texto que é colocado nele. Ele pode estar relacionado ao quê? Botões sugerem que compartilhe em mídias sociais, confira o produto, se inscreva para uma aula, veja as últimas fotos etc.

Sempre vá a fundo - o botão CTA incorpora a essência do que precisa de alguém. Segundo as estatísticas, verbos em um texto funcionam melhor, o que quer dizer que, se escrever “Ver Mais Produtos” em vez de “Mais Produtos”, a conversão (ou o número de cliques em um botão CTA) será maior.

As regras principais são:

  • Inicie o Call-to-Action com um verbo
  • Coloque a mensagem do que precisa que façam com o mínimo possível de palavras
  • Não seja genérico, escreva um texto específico voltado a uma ação (curtir, compartilhar, convidar, assinar etc.)

Sua Mente Criativa Pode Ir Bem Longe ao Compor um Texto para um Botão CTA?

Não tão longe, então não divague muito. Se for o dono de uma empresa e não um designer que está tentando superar seu concorrente com um design diferente, é melhor se ater a algo mais comum.

O formato do botão influencia a conversão

Ergonomia. Por natureza, as pessoas tendem a gostar de ângulos suaves. Claro que ângulos acentuados convertem bem também, mas esse é um assunto para outra publicação do blog. Se quiser saber mais a respeito agora, você pode ler mais detalhes sobre ângulos suaves neste documento e nesta brilhante publicação do blog.

E botões piscantes?

Bem… Isso provavelmente depende do estilo do seu projeto. Com certeza esses botões podem ter alguma aparência psicodélica e, se forem o que precisar, você poderá fazer uso desse recurso.

Vantagens de um Botão CTA Adequado (ou CTA)

Para você:

  • Você mostra claramente o que o visitante deve prestar atenção ao ver o módulo de conteúdo
  • Você mostra claramente o que é necessário ao visitante
  • Você planta a primeira semente no processo de tomada de decisão dele
  • Você tem mais chances de que o visitante se converta

Para seu visitante:

  • Ele não precisa perder tempo tentando descobrir o que você oferece
  • Ele tem uma experiência impecável seguindo as dicas da página da Internet
  • Ele poderá encontrar antes o fornecedor do negócio ou serviço perfeito (que é o seu negócio).

Somos todos clientes de várias empresas e, a maioria de nós, senão todos, apreciamos um bom Web design. Com uma experiência de cliente impecável, podemos encontrar nosso produto perfeito e nosso prestador de serviço encontrará seu cliente. Esta é uma situação de ganhos mútuos, certo? Além disso, raramente visitantes passam mais do que vários segundos em uma página da Internet que não seja clara e que explique vagamente o que oferece. Poderia ser um golpe ou uma empresa mal estabelecida - e nenhum desses nos inspira confiança.

Conclusão

Não há receita para um botão CTA perfeito, mas, conhecendo as características em que deve prestar atenção, não serão problema criar um botão CTA perfeito.