O documento discute princípios e estratégias para criar chamadas à ação (CTAs) eficazes. Ele destaca a importância de tornar a ação desejada evidente e interessante para o visitante em menos de 10 segundos, e fornece exemplos de como testes A/B podem otimizar elementos como texto, layout e informações para melhorar as taxas de conversão.

2. Call to action: porque?
• Quanto tempo leva para você
descartar uma mensagem?

3. Call to action: porque?
• O valor dos 10 segundos.
> estudo inicialmente aplicado a sites - 2011
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

4. Princípios do call to action
Objetivo:
– Conduzir o visitante à ação desejada
– Evitar que o visitante se sinta perdido e tenha que descobrir o que fazer em seguida
Isto envolve:
1. tornar a ação evidente
2. tornar a ação interessante/desejável

5. // 1. tornar a ação evidente
• O teste dos 5 segundos:
> paper sobre CTA da Resultados Digitais
http://www.slideshare.net/vanecosta/whitepaper-calltoactionresultados-digitais

6. // 1. tornar a ação evidente
• Não se define um elemento
sem seu contexto
• Porém há orientações gerais
que podem auxiliar na
criação de um CTA

7. // 1. tornar a ação evidente
• Aspectos visuais:
– acima da dobra
– cores e contraste
– tamanho
– não use muitos CTAs na mesma página;
se precisar, crie hierarquia visual

8. // 1. tornar a ação evidente
• Aspectos visuais:
– reforçando a importância do contraste

9. // 1. tornar a ação evidente
• Mensagem:
– deixe claro o que você vai
entregar
– mas não esqueça de passar
segurança para o visitante

10. // 1. tornar a ação evidente
• Mensagem:
– verbos podem ajudar com
senso de urgência
– ser imperativo pode ser o
empurrãozinho que o visitante
precisa pra tomar a ação
desejada (número mostra o
CTR do CTA)
> exemplos de otimizações de CTA
http://blog.crazyegg.com/2014/01/01/conversion-rate-optimization-case-studies-2/

11. // 2. tornar a ação interessante/desejável
Este artigo apresenta uma forma de pensar em
CTAs: a questão é que as pessoas não avaliam
de forma absoluta as vantagens apresentadas
sobre um produto/serviço, mas sempre na
perspectiva de quão interessante isso pode ser
na vida dela.
O que isso muda?
Um produto não é interessante porque está com um bom
preço, mas porque é uma boa oportunidade.
Um serviço não é interessante porque tem uma tecnologia de
ponta, mas porque pode fazer você economizar tempo em
alguma tarefa. > histórias em CTAs
http://blog.crazyegg.com/2014/02/25/psychology-behind-calls-to-action/

12. // 2. tornar a ação interessante/desejável
Outro trecho interessante, em tradução livre:
De acordo com um estudo, áreas sensoriais do cérebro são
ativadas quando vemos palavras relacionadas aos sentidos:
Quando pessoas que participavam de uma pesquisa liam
palavras como "perfume" e "café", a área de seu cérebro
relativa ao olfato era ativada; quando eles liam palavras como
"cadeira" e "chave", estas regiões permaneciam inativas...
Da mesma forma, metáforas como "o cantor tem uma voz
aveludada" e "ele tem mãos ásperas" despertaram o córtex
sensorial, enquanto frases com o mesmo significado, como "o
cantor tem uma voz agradável" e "ele tem mãos fortes" não
tiveram efeito nesta área.
> histórias em CTAs
http://blog.crazyegg.com/2014/02/25/psychology-behind-calls-to-action/

13. // 2. tornar a ação interessante/desejável
Em que isso ajuda?
Os CTAs que preparam um contexto em que a ação resolva
um problema ou desejo bem preparado na mente do
visitante, tem mais chance de obter sucesso.

14. Preocupações para o mundo mobile
Começam a aparecer alguns ajustes no design
especificamente por causa do mobile:
1. CTA maiores, para facilitar o clique com o dedão
2. Emails mais visuais (muito menos texto) para uma
leitura mais rápida – comportamento associado ao
consumo mobile
3. CTA com mais ligação visual entre o email e o site

15. Cases e exemplos
• Site Visual Optimizer
visualwebsiteoptimizer.com/case-studies.php
• ebook 101 examples of effective calls-to-action
• blog.kissmetrics.com/eye-tracking-studies

16. // Quando menos é mais

17. // Quando menos é mais
• Vários testes A/B para testar variações
• Ocultar o texto "download for free" sobre
o botão, aumentou em 10% a conversão
• Ocultar o menu de navegação gerou um
aumento de 12% nas conversões
• Ocultar os ícones de redes sociais não foi
bom, diminuiu em 34% a conversão
• Aplicar um texto "download for free"
maior apresentou uma queda de 42% nas
conversões
• Baseado nestes resultados, foi gerada
uma nova versão da home, com o menu
no rodapé e sem o texto "download for
free". Resultado: 25% de aumento nas
conversões.

18. // Quando menos é mais

19. // O texto certo
• Ajuste no texto do CTA, de
"requisitar uma cotação", para
"requisitar preço"
• Alteração feita após busca de
feedback com clientes
• Após a alteração na legenda foi
verificado um aumento de 161% nos
cliques desta ação
• Fica claro o princípio de ser o mais
direto e claro possível,
especialmente na web

20. // De informação, só o necessário
• Página inicial apresentava:
– abertura
– depoimentos
– área de FAQ
– área com screenshots

21. // De informação, só o necessário
• Teste 1
– removida a área de FAQ
• Aumento de 62% nas vendas

22. // De informação, só o necessário
• Teste 2
– removida a área de Screenshots
• Aumento de 56% nas vendas

23. // De informação, só o necessário
• Teste 3
– removida área de FAQ
– removida área de screenshots
• Queda de 3% nas vendas

24. // De informação, só o necessário
• A hipótese é que as pessoas gostam
de ter informação eficiente para
ajudá-las a conhecer o produto, mas
um pouco a mais de informação e
elas começam a ficar confusas ou
distraídas.

25. // Conduzindo a leitura da página
• Claramente bagunçado o visual, mas
com análise de heat maps podemos
perceber melhor como o olhar se
perde no layout

26. // Conduzindo a leitura da página
• Otimizando a ordem de leitura e
com um bom CTA, fica muito mais
fácil e agradável a leitura e tomada
de decisão na página

27. // Conduzindo o olhar
• O olhar conduz o olhar.

28. // Conduzindo o olhar
• O olhar conduz o olhar.

29. // uso de cores contrastantes

30. // apresentar benefício (60 segundos)

31. // textos grandes para destacar ação (look inside)

32. // uma boa área de espaço para o CTA respirar

33. // elementos para dar "senso de direção"

34. // CTA pode quebrar algumas regras, se provar que funciona

35. // sempre apresentar CTAs com ordem de prioridade

36. // CTA com segmentação de público

37. // shapes diferentes (ganham em design, perdem em atenção)

38. CTAs pedem peças com objetivos
• Não são somente peças de
comunicação.
• Não são somente peças para conduzir
os visitantes.
• Mas podem ser peças que funcionam
como impulsionadores da ação
desejada.
– Podem modelar as expectativas e
intenções das pessoas.

39. Referências
Cases de otimização
http://visualwebsiteoptimizer.com/case-studies.php
Your Brain and Effective Calls To Action: What Works Best and
Why
http://blog.crazyegg.com/2014/02/25/psychology-behind-calls-
to-action/
Tendências aparecendo em emails
http://blog.crazyegg.com/2014/02/13/future-of-email-
marketing/
Quanto tempo para o visitante decidir se fica ou não em sua
página
http://www.nngroup.com/articles/how-long-do-users-stay-on-
web-pages/
20 dicas para CTAs
http://www.slideshare.net/HubSpot/20-dos-donts-for-
clickable-callstoaction
7 Marketing Lessons from Eye-Tracking Studies
http://blog.kissmetrics.com/eye-tracking-studies/
Paper sobre CTA da Resultados Digitais
http://www.slideshare.net/vanecosta/whitepaper-
calltoactionresultados-digitais?qid=d440802b-e96a-4a4c-82b0-
2284486d52fb&v=qf1&b=&from_search=2
7 Awesome Conversion Rate Optimization Case Studies To Kick Off
The New Year!
http://blog.crazyegg.com/2014/01/01/conversion-rate-
optimization-case-studies-2/
6 Of My All-Time Favorite Conversion Rate Optimization Case
Studies
http://blog.crazyegg.com/2013/12/06/conversion-rate-
optimization-case-studies/
Is This The Future Of Your Email Marketing Campaigns?
http://blog.crazyegg.com/2014/02/13/future-of-email-marketing/
Dicas de CTA
http://www.agenciamestre.com/usabilidade/cta-saiba-tudo-sobre-
call-to-action/