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.
Macrotendências 2014 - referências visuais (boards e aplicação)
CTAs pedem peças com objetivos
1.
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
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.
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
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/