Como fazer um CTA eficiente

Renata Braga
Dec 27, 2019 · 7 min read

Uma interação eficiente de um produto ou site, consiste em uma junção de pequenos elementos que entre si criam um conjunto de tarefas e funções formando um sistema eficiente. Logo, para isso é vital prestar atenção aos detalhes. Ter atenção das pessoas não é uma tarefa fácil, ainda mais hoje em dia em que somos bombardeados de diversos tipos de informação. Segundo a Digital Information World a média de atenção humana dura apenas 8.25 segundos, ou seja, os layouts e textos tem menos de 10 segundos para chamar a atenção do usuário.

Não é a toa que um design mais minimalista se tornou mais comum, porque dessa forma tem-se menos itens no layout, organizando melhor as informações para que o leitor consiga ter uma melhor experiência e claro, para que o usuário seja atraído rapidamente para o produto em questão. Os elementos de distração são reduzidos e resta apenas o necessário. Botões em geral são elementos chave nas interfaces, eles tem um papel significativo na UX de sites e aplicações, há diversos tipos de botões, mas o botão que iremos tratar aqui neste artigo é o Call to Action (CTA), esse botão específico tem uma função de chamar o usuário para uma ação. CTAs são usados em sites, emails e anúncios. Esse botão é um link, com uma cor diferente dos elementos geralmente uma cor de destaque na qual chame o usuário para clicar ali.

O Botão mais importante para conversão

É o botão mais importante para a conversão, conhecer como o usuário irá navegar pelo site ou aplicação e escolher o CTA de forma estratégica resulta em eficiência e melhores taxas de conversão. Se pensarmos no nosso dia-a-dia somos sempre impactados por mensagens de destaque a nossa volta.

  • "Pare"
  • "Aberto" — "Fechado"
  • "Sorria, você está sendo filmado"
  • "Empurre” — “Puxe"

Tais indicações sugerem o que devemos fazer, não é incomum que esses dizeres estão sempre bem destacados usando uma cor de destaque e uma tipografia bem legível, afinal o objetivo delas é que nós tomemos essas ações.

No meio online não é diferente.

No digital há várias ações a serem realizadas. Fazer cadastro, preencher formulários, enviar informações, fazer downloads, acessar links dentre outras. Lembrando que o objetivo do CTA é a conversão, ele é uma ponte para uma ação, indicam o próximo passo que deseja que o usuário tome.

Processo de conversão do CTA

Para entender o processo de conversão vamos entender o conceito de AIDA, que é um conceito bem usado no marketing e publicidade em geral.

O AIDA funciona da seguinte forma, temos a etapa de Atenção é quando o usuário se interessa por algo, a partir daí ele passa para a etapa Interesse que é quando ele decide manter-se na aplicação ou site e quer mais informações, em seguida ele vai para etapa Desejo onde ele analisa a oferta em questão e decide se aquilo atende suas necessidades para finalmente concretizar na etapa Ação que é quando ele está com a decisão tomada e realiza a conversão.

O CTA tem função principal nas etapas de Atenção e Interesse, que como já vimos podem durar 8.25 segundos.

Destaque do CTA do Airbnb

Teste dos 5 segundos

Existe um teste para saber se o CTA está funcionando bem, chamado teste dos 5 segundos, consiste em chamar alguém que não acessa seu site ou aplicação e pedir para que ela olhe durante 5 segundos, após terminado o tempo a pessoa se distancia do local e diz o que havia na página e o que era possível fazer lá. Se a resposta for confusa ou ela não souber dizer isso indica que o CTA não está funcionando como deveria.

Um CTA eficiente

Algumas pessoas acham que para que o CTA funcione bem é preciso apenas dar uma cor de destaque e aumentar seu tamanho, mas não é bem assim, para que ele funcione existe uma série de aspectos.

  • O tamanho em relação aos outros elementos da página;
  • Sua posição;
  • A composição de cores da página e a cor do CTA;
  • Imagens que são utilizadas;
  • O texto do CTA;
  • Outros elementos que conversam com a ação do CTA.

Seja Conciso

O conceito de Menos é Mais é importante porém não é a única questão. Existe um equilíbrio entre texto e tudo que está em volta dele. Ser conciso é saber que tudo tem um propósito.

Seja Claro

Saiba que você de entre 2 a 4 palavras a serem trabalhadas dentro do CTA, mais que isso é impossível obter um resultado positivo, as palavras escolhidas irão afetar como o usuário irá agir. Usar as palavras erradas irá comunicar o usuário de forma errada.

Tenha foco

Tenha um objetivo focado, usar vários CTAs ou botões para diferentes ações vai confundir o usuário. Quanto menos escolhas o usuário tiver que fazer mais fácil ele irá tomar a decisão.

Contraste

A escolha da cor que você irá usar nos botões depende de diversos fatores: fundo, cor do logo e intenção da ação. É importante que a cor do botão tenha contraste com o fundo. Se o fundo for amarelo por exemplo, talvez não seja uma boa opção usar um botão laranja.

Quanto maior o contraste do botão em relação ao fundo maior será o destaque dele em relação a outros elementos.

UI Credit Card Checkout Mobile

Posição Estratégica

A posição do CTA é tão importante quanto a cor, para isso existem duas opções ou escolher a posição a partir do modelo mental de leitura ou usar a jornada do usuário.


Agora que já sabemos o objetivo e a composição para se ter um CTA efetivo vamos reunir alguma dicas para criar um Call to Action matador.

1. Menos é mais

O CTA indica o que o usuário deve fazer, e para que isso funcione, deve ser objetivo, logo a quantidade de palavras deve ser mínima e direta. Algumas palavras funcionam melhor que uma frase bem grande e elaborada. Para isso use verbos no imperativo ("Faça sua inscrição") ou no infinitivo ("Fazer inscrição"), crie urgência nos textos de apoio ("Apenas hoje!" — "Não perca").

2. Torne o botão clicável

Tudo na página ou na aplicação em questão deve interagir de forma que se cumpra o objetivo e coincida com a ação que o CTA deverá indicar para o usuário fazer. Para tornar o botão clicável primeiramente a apresentação visual deve ser excelente, indicações onde o CTA possuem sombras ou gradientes leves tem melhor desempenho, assim como cantos arredondados.

Exemplo de CTA das Lojas Americanas

3. Tamanho certo

Quando estamos produzindo uma UI o arranjo dos componentes é feito através do tamanho e sabemos que o que tem maior tamanho é notado mais rápido. Botões maiores tem mais chances de serem notados e clicados, mas claro que deve se ter limites quanto a isso. A Apple sugere que os CTAs tenham pelo menos 44x44 pixels enquanto a Microsoft recomenda 34x26 pixels.

4. Cores Contrastantes

Mais acima reservei tópico só para falar das cores e contraste, mas aqui retomamos a importância desse aspecto. A escolha das cores dependem de vários aspectos e não pode ser colocada aleatoriamente, mas para ajudar segue aqui algumas informações sobre cores:

  • Vermelho: Poder, juventude e confiança;
  • Laranja: Amigável, quente e energético;
  • Amarelo: Felicidade, otimismo e calor;
  • Verde: Paz, esperança, saúde e crescimento;
  • Azul: Confiança, Segurança e estabilidade;
  • Preto: Confiável, sofisticado e Experiente;
  • Branco: Simples, Calmo e Limpo.

5. Jornada do Usuário

Tamanhos maiores e cores são importantes aspectos para garantir a atenção do usuário, porém ter o posicionamento adequado do botão é ainda mais. Não adianta ter um CTA com a cor perfeita e o texto perfeito mal colocado na página. Por isso entender a jornada do usuário na aplicação é de suma importância. Ter essa informação da UX e encaixar o CTA em um posicionamento estratégico é essencial.

6. Informações Extras

As informações contidas no CTA devem ser objetivas e curtas logo ter informações extras é essencial. Ou seja colocar informações extras para saber quais serão os próximos passos pode ajudar o usuário a tomar a decisão.

Testar como se não houvesse amanhã

Se você quer que algo funcione bem você precisa testar, por mais que exista uma pesquisa por trás e toda a jornada do usuário em suas mãos o resultado ainda pode ser diferente do que o esperado. Usar o teste dos 5 segundos é válido mas além dele o Teste A/B é muito usado. Este teste consiste em comparar dois versões de visual de produto, e no final sabe-se qual das duas funcionou melhor. Pode ter várias variações, de cor de fundo, textos e imagens. As vezes a diferença do A pro B pode ser total ou as vezes pode ser poucos elementos. No caso dos CTAs são testadas diferentes cores, posições e até texto. Geralmente o sucesso ou não do CTA é visto pelo CTR (Click-through Rate, a taxa de clique), que é basicamente a taxa de pessoas que visualizaram e clicaram. Por isso que ao usar o Teste A/B é sempre bom analisar o CTR para ver qual que teve o melhor desempenho.


Os CTAs são ferramentas indispensáveis de vendas on-line e um fator crucial para a conversão de páginas e aplicações. Logo o seu design deve carregar todas as informações que estão aqui, cada detalhe pode impactar positivamente ou não na performance em questão.

Mais sobre o Assunto

Call for Attention. UI Design Tips on CTA Buttons.

UX Practices: 8 Handy Tips on CTA Button Design

Renata Braga

Written by

Designer — Information Systems — Writer — Researcher https://linktr.ee/re_hehe

More From Medium

Also tagged Call To Action

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade