CTA: Tudo o Que Você Precisa Saber Sobre Call to Action

Olá leitores da Agência Mestre!

Sempre que pensamos em melhorar a usabilidade do site, pensamos em breadcrumb navigation, melhorar a home, melhorar a estrutura de links e uma série de alterações muito importantes para fazer com que a experiência do usuário no site seja excelente. Entretanto, será que não está faltando nada no “checklist de usabilidade”?

No artigo de hoje, vamos falar sobre CTA (call to action) e como esse recurso pode ser bem aplicado em seu site, a fim de alavancar seus resultados. Dê o play no vídeo abaixo e entenda mais sobre esse importante assunto:

O que é CTA?

CTA é um acrônimo para call to action, o que significa a “chamada à uma ação“. Ou seja, são links ou funções de uma página que levam os usuários a realizar ações. Os tipos de CTAs variam de página para página e podem ser links de navegação, links para compras, links para formulários de inscrição, e podem ser classificados da seguinte maneira:

Primários: É aquele que apela para a funcionalidade da página. Por exemplo, vamos supor que desejamos comprar uma geladeira X em um site de e-commerce. A página referente à geladeira que escolhermos tem a funcionalidade de vendê-la. Um claro exemplo de CTA primário nessa página é o botão de comprar/adicionar ao carrinho.

Secundários: Ainda utilizando o exemplo da geladeira, uma boa opção de CTA secundário é oferecer produtos relacionados em um ponto estratégico da página. A foco principal da página da geladeira é vendê-la, entretanto, ela também poderá vender os produtos complementares – o foco secundário.

Porque os CTAs são Importantes?

Usabilidade é a palavra de lei para os CTAs, pois eles facilitam a navegação do usuário, tornando-a mais clara e fácil. Além do mais, eles podem te ajudar no processo de convencer seu usuário a fazer o que você deseja (obviamente, se essa for a vontade do seu usuário).

Apesar de ter utilizado constantemente o exemplo dos sites de e-commerce, os CTAs são muito interessantes para blogs e sites informativos – enquetes, inscrições em feeds, usar um selo, indicar um aplicativo, votar em postagens – que atire a primeira pedra o blogueiro que nunca quis que seus leitores realizassem essas ações.

Devemos ressaltar que os CTAs devem ser claros, objetivos e ter uma forte relação com sua proposta. Ninguém gosta de clicar em um botão para realizar uma determinada ação e se deparar com algo completamente diferente daquilo que foi proposto inicialmente.

Como Montar um CTA

Agora que já sabemos como um CTA é importante, fica uma dúvida na cabeça: “Como montar um CTA excelente?”. Para tanto, basta prestar atenção nos seguintes itens:

O que os usuários desejam?

Considere o tipo de visitantes de uma página. Como é que essas pessoas chegaram lá? O que elas procuram?
Ao responder a essas perguntas você consegue identificar qual seria o próximo passo lógico de seus usuários e, dessa maneira, poder oferecer o que seus visitantes desejam através do CTA certo.

Conteúdo Específico

Esqueça dos textos âncora genéricos. “Clique aqui” é apenas um exemplo de âncoras que você não vai utilizar. Além de facilitar a vida de seu usuário, utilizar textos âncoras personalizados vai te auxiliar até mesmo no link building de seu site. Cada tipo de página deverá ter seu próprio tipo de botão. Mas atenção, escreva textos curtos, auto-explicativos e precisos para seus botões. Aliás, uma boa maneira de montar esse tipo de link é através de botões gráficos personalizados.

Cor Utilizada

Por incrível que pareça, a cor a ser utilizada também é muito importante. Assim como temos cuidado na hora de escolher as cores utilizadas no design, é interessante prestar uma certa atenção na hora de escolher a cor dos nossos CTAs, pois para cada tipo existirá uma cor que melhor se adaptará a finalidade do mesmo.

Cores no Call to Action

Vermelho: A cor vermelha tem um efeito marcante na percepção visual dos seres humanos, tanto pelo seu aspecto físico (são as ondas mais largas do espectro de cores visíveis pelo homem) tanto na sua simbologia. E é justamente pelo destaque que proporciona, deve ser utilizado com moderação. Geralmente é utilizado para avisos e erros, mas também pode ser a cor perfeita para um botão de “compre agora”.

Curiosidades sobre a cor vermelha: é a primeira cor que o olho enxerga pela manhã e a primeira que a criança consegue reconhecer.

Amarelo: É a primeira cor que o olho humano consegue visualizar, e é justamente por isso que são amplamente utilizadas em placas de trânsito. Amarelo também é uma boa cor a ser utilizada em CTAs. Da mesma maneira que o vermelho, devem ser utilizadas com cautela.

Curiosidade sobre a cor amarela: Estimula a memória.

Laranja: Tem um efeito menos marcante que o vermelho ou o amarelo, mas não é menos interessante. Também é ótimo para CTAs.

Ao considerar a cor para os seus botões, leve em consideração que apesar da cor ter que proporcionar um destaque aos botões em relação às cores utilizadas em seu site, ela não deverá atrapalhar o seu design original. Aliás, se você quer mais algumas dicas nesse assunto, no Monkey C Media você vai encontrar um artigo muito interessante sobre as cores e os CTAs.

Montar CTAs atrativos e eficientes pode ajudar e muito na melhora da conversão de sites e blogs. E, assim como algumas das principais técnicas de SEO, não demanda grandes esforços ou técnicas complicadas, bastando apenas se apoiar na experiência do usuário e como ela pode ser melhorada.

Conversões x Posicionamento

Uma das principais metas ao iniciar uma campanha de SEO, com certeza, é a melhora de posicionamento nas pesquisas. Entretanto devemos ter em mente que as conversões também são muito importantes – de que adianta ter ótimos posicionamentos e número de visitas se os usuários não realizam as ações desejadas dentro do seu site? Ou se, no caso de blogs, os usuários apenas dão uma olhada na landing page e não permanecem no site?

Conversão e Posicionamento

Conteúdo de qualidade e usabilidade são dois fatores essenciais para a conversão de um site. No quesito usabilidade, ter um carinho especial com os CTAs de seu site com certeza é algo de grande valia. Mas, se você já tomou providências em relação à seus CTAs e mesmo assim não obteve bons resultados, está na hora de se perguntar: “Meus usuários estão vendo os CTAs?”.

Por Que os Usuários não Vêem os CTAs?

Cores de Tons Muito Próximos

Os CTAs são elementos que precisam de um certo destaque na página. Entretanto, muitos designers – afim de não interferir nas cores do template – preferem utilizar cores muito próximas daquelas já utilizadas no site. Dessa maneira os CTAs ficam “apagados” na página.

Uma boa maneira de contornar essa situação, sem fazer um carnaval de cores na página, é escolher uma cor que dê um destaque moderado. Se o site está em tons de azul ou verde, por exemplo, abóbora ou vermelho são ótimas opções – nem que sejam utilizadas em tons pastéis.

Páginas “Poluídas”

Abarrotar vários elementos em uma página a torna difícil de decifrar e muito pouco convidativa para o usuário. Isso geralmente ocorre em sites onde se exagera na quantidade de anúncios de publicidade, AdSenses, botões, imagens, flashs e outros elementos. Nesse tipo de página é difícil identificar corretamente a funcionalidade de cada elemento, ou seja, elas se tornam muito pouco convidativas para o usuário.

Nesse caso, tome cuidado com a quantidade de elementos que você tem em cada página. Nenhum usuário vai querer perder tempo procurando por um botãozinho perdido em uma página repleta de coisas. Outra maneira de evitar essa situação é ter bem definidas as funções de cada página.

Páginas Muito Pesadas

Esse tipo de página pode ou não ser conseqüência do tipo de página anterior. Nem todas as pessoas utilizam internet de alta velocidade – nem todas as pessoas têm tempo de esperar as páginas serem carregadas e, se tiverem, isso não garante que essas pessoas vão esperar.

Uma boa maneira de evitar esse tipo de problema é escolher modelos simples de templates e, mais uma vez, tomar cuidado com a quantidade de elementos inseridos nessa página – o tamanho da página é essencial.

Títulos não Atrativos / Incoerentes

Os títulos utilizados tem a funcionalidade de convencer o usuário a clicar nos botões. Portanto, eles tem de combinar textos atrativos, mas que ao mesmo tempo sejam explicativos. Textos não atrativos não vão convencer o usuário a clicar nesses botões, textos que não têm nada a ver com a finalidade do botão farão com que seus usuários se sintam enganados. E, conseqüentemente, seu site perde credibilidade.

São pequenos detalhes, mas prestar atenção  neles e trabalhar suas páginas de forma a evitar esses erros pode ser a diferença entre páginas que convertem bem e outras que não. Melhorar a usabilidade é uma estratégia de SEO simples, mas muito eficaz – páginas intuitivas e fáceis de utilizar com certeza ajudam o seu site a dizer um “volte sempre” a seus usuários, ao contrário de espantá-los para sempre.

Fique Atento ao Mobile

Verifique sempre se o seu site está preparado para os acessos via dispositivos móveis. Muitas vezes, seus calls to action funcionam bem e ficam bem nítidos e visíveis apenas na versão desktop. Por isso, é fundamental fazer o teste e simular a navegação em tablets e celulares de diferentes tamanhos de tela. Deixando tudo ajustado para qualquer forma de navegação, certamente sua taxa de conversão será muito maior.

Aprenda Mais

Call to action é apenas uma das coisas que você precisa saber para desenvolver um bom trabalho de Inbound Marketing. Por isso, convidamos você a baixar nosso e-book gratuito para aprender tudo sobre o assunto!

Receba Novidades

Insira seu email para receber novidades e dicas exclusivas da Agência Mestre!
Divulgue este artigo

22 Comentários para “CTA: Tudo o Que Você Precisa Saber Sobre Call to Action”

  1. Frank Marcel

    Muito bom o post, Fabiane! Parabéns.

    Acredito que muitos botões de comprar surgiram muito mais por “ser bonito” do que por usabilidade, mas é crucial o fator call for action dele.

    E achei interessante a informação sobre a cor amarela: acho que vou colocar meu monitor amarelo pra memorizar tudo que leio! xD

    Parabéns denovo!

    Responder
    • Fabiane Lima

      @Frank Marcel
      Realmente muitos sites utilizam botões muito parecidos com o próprio template, sem dar destaque algum para eles. =)
      Obrigada!

      Responder
  2. Web Designer | Raphael Figa

    Interessante o Artigo,

    Já havia me deparado em sites de e-commerce que tive que procurar como comprar? Fala Sério…

    Mas o que mais me chamou atenção foi o tal da cor Amarela, talvez por isso os Postits sejam amarelos?

    É pode ser…

    Responder
  3. Maurivan Luiz

    [quote]
    Ninguém gosta de clicar em um botão para realizar uma determinada ação e se deparar com algo completamente diferente daquilo que foi proposto inicialmente.
    [/quote]

    “Não confunda facilidade com funcionalidade”
    Não coloque funcionalidades que não sejam fáceis de utilizar.

    []’s
    M!

    Responder
  4. Fabio Lima | 29 anos | Paulínia | SP

    Ótimo artigo Fabiane.
    Sem falar que quem já não passou pela situação de estar em um site e ter de ficar procurando o “maldito” botão que seria óbvio estar “ali ou lá” mas não estavam…
    As vezes faz parte da criatividade e inovação do design mas principalmente se o site já tem um bom tempo na rede e sofre uma reformulação do layout o CTA se torna indispensável!

    Responder
  5. Fabio Lima | 29 anos | Paulínia | SP

    É, o vermelho indica “Perigo”.
    As vezes a pessoa nem lê o botão só pelo fato de estar em vermelho! Quem nunca viu aqueles banners bem no meio de um artigo dizendo “Parabéns! Você é o visitante nº 999.999 e ganhou um prêmio!” daí logo abaixo, o bendito botão vermelho…
    Eu fujo deles e muita gente também…

    Responder
  6. Flávio Leonardo

    Muito bom seu post, em questões como usabilidade e acessibilidade devemos sempre ser
    empaticos durante o desenvolvimento, para entender melhor o que os usuarios necessitam,
    as vezes colocamos um link de chamada para estimular ações e nao sabemos
    o quão importante é esse link.

    Existem visitantes que ficam retratidos
    quando acham links que os digam o que fazer;
    Clique aqui,saiba mais, continuar leitura,leia mais.
    Sentem medo de ser um link indicado para algum conteudo viral.

    Grande parte das pessoas colocam o cursor em cima do link para ver o
    endereço do caminho na “Barra de Status” se acham aquelas URLs assutadoras, com
    certeza nao acionam o link
    Passar confiança nas estruturas das URLs também é de extrema importancia nessa questão.
    Eu não conhecia o termo CTA,
    adicionou mais ao meus conhecimentos. Sucesso para Você! Bjs…

    Responder
  7. Rochester Oliveira

    Fabiane falando de usabilidade! Que coisa boa (:

    Tenho minhas ressalvas quanto às cores, já dizia o tio Nielsen com seus eyetracking, quanto mais você tenta chamar atenção, menos você tem. [Vide cegueira de banner ]

    Como o resto do pessoal disse, cuidado com o vermelho. Acho que algo mais neutro pro compre agora é mais efetivo (azul claro, verde..).

    Ícones também ajudam nisso (dá-lhe semiótica antes de tudo hehe).

    []’s

    Responder
  8. Fabio

    Excelente artigo.

    Em exemplo de utilização de cores em botões está no site da Nextel, inclusive utiliza botões assimétricos.

    Responder
  9. Luciano

    Em nossa loja usamos muito este conceito, e dá muitos resultados.
    Parabéns pelo post!

    Responder

Deixar um comentário

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>