CTA? – Tudo que você Precisa Saber sobre “Calls 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 na “checklist de usabilidade”?

O que é CTA?

placa-de-trânsitoCTA é 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.

Devo 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: “Mas 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, é interressante 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.

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.

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 que você Precisa Saber sobre “Calls 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>