Call to action: porque?
• Quanto tempo leva para você
descartar uma mensagem?
Call to action: porque?
• O valor dos 10 segundos.
> estudo inicialmente aplicado a sites - 2011
http://www.nngroup.com/ar...
Princípios do call to action
Objetivo:
– Conduzir o visitante à ação desejada
– Evitar que o visitante se sinta perdido e ...
// 1. tornar a ação evidente
• O teste dos 5 segundos:
> paper sobre CTA da Resultados Digitais
http://www.slideshare.net/...
// 1. tornar a ação evidente
• Não se define um elemento
sem seu contexto
• Porém há orientações gerais
que podem auxiliar...
// 1. tornar a ação evidente
• Aspectos visuais:
– acima da dobra
– cores e contraste
– tamanho
– não use muitos CTAs na m...
// 1. tornar a ação evidente
• Aspectos visuais:
– reforçando a importância do contraste
// 1. tornar a ação evidente
• Mensagem:
– deixe claro o que você vai
entregar
– mas não esqueça de passar
segurança para ...
// 1. tornar a ação evidente
• Mensagem:
– verbos podem ajudar com
senso de urgência
– ser imperativo pode ser o
empurrãoz...
// 2. tornar a ação interessante/desejável
Este artigo apresenta uma forma de pensar em
CTAs: a questão é que as pessoas n...
// 2. tornar a ação interessante/desejável
Outro trecho interessante, em tradução livre:
De acordo com um estudo, áreas se...
// 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 pr...
Preocupações para o mundo mobile
Começam a aparecer alguns ajustes no design
especificamente por causa do mobile:
1. CTA m...
Cases e exemplos
• Site Visual Optimizer
visualwebsiteoptimizer.com/case-studies.php
• ebook 101 examples of effective cal...
// Quando menos é mais
// Quando menos é mais
• Vários testes A/B para testar variações
• Ocultar o texto "download for free" sobre
o botão, aume...
// Quando menos é mais
// O texto certo
• Ajuste no texto do CTA, de
"requisitar uma cotação", para
"requisitar preço"
• Alteração feita após bus...
// De informação, só o necessário
• Página inicial apresentava:
– abertura
– depoimentos
– área de FAQ
– área com screensh...
// De informação, só o necessário
• Teste 1
– removida a área de FAQ
• Aumento de 62% nas vendas
// De informação, só o necessário
• Teste 2
– removida a área de Screenshots
• Aumento de 56% nas vendas
// De informação, só o necessário
• Teste 3
– removida área de FAQ
– removida área de screenshots
• Queda de 3% nas vendas
// De informação, só o necessário
• A hipótese é que as pessoas gostam
de ter informação eficiente para
ajudá-las a conhec...
// Conduzindo a leitura da página
• Claramente bagunçado o visual, mas
com análise de heat maps podemos
perceber melhor co...
// 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 le...
// Conduzindo o olhar
• O olhar conduz o olhar.
// Conduzindo o olhar
• O olhar conduz o olhar.
// uso de cores contrastantes
// apresentar benefício (60 segundos)
// textos grandes para destacar ação (look inside)
// uma boa área de espaço para o CTA respirar
// elementos para dar "senso de direção"
// CTA pode quebrar algumas regras, se provar que funciona
// sempre apresentar CTAs com ordem de prioridade
// CTA com segmentação de público
// shapes diferentes (ganham em design, perdem em atenção)
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...
Referências
Cases de otimização
http://visualwebsiteoptimizer.com/case-studies.php
Your Brain and Effective Calls To Actio...
Call to action - mais que um botão bonitinho
Call to action - mais que um botão bonitinho
Próximos SlideShares
Carregando em…5
×

Call to action - mais que um botão bonitinho

1.014 visualizações

Publicada em

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.014
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Call to action - mais que um botão bonitinho

  1. 1. Call to action: porque? • Quanto tempo leva para você descartar uma mensagem?
  2. 2. 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/
  3. 3. 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
  4. 4. // 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
  5. 5. // 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
  6. 6. // 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
  7. 7. // 1. tornar a ação evidente • Aspectos visuais: – reforçando a importância do contraste
  8. 8. // 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
  9. 9. // 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/
  10. 10. // 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/
  11. 11. // 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/
  12. 12. // 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.
  13. 13. 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
  14. 14. 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
  15. 15. // Quando menos é mais
  16. 16. // 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.
  17. 17. // Quando menos é mais
  18. 18. // 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
  19. 19. // De informação, só o necessário • Página inicial apresentava: – abertura – depoimentos – área de FAQ – área com screenshots
  20. 20. // De informação, só o necessário • Teste 1 – removida a área de FAQ • Aumento de 62% nas vendas
  21. 21. // De informação, só o necessário • Teste 2 – removida a área de Screenshots • Aumento de 56% nas vendas
  22. 22. // De informação, só o necessário • Teste 3 – removida área de FAQ – removida área de screenshots • Queda de 3% nas vendas
  23. 23. // 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.
  24. 24. // 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
  25. 25. // 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
  26. 26. // Conduzindo o olhar • O olhar conduz o olhar.
  27. 27. // Conduzindo o olhar • O olhar conduz o olhar.
  28. 28. // uso de cores contrastantes
  29. 29. // apresentar benefício (60 segundos)
  30. 30. // textos grandes para destacar ação (look inside)
  31. 31. // uma boa área de espaço para o CTA respirar
  32. 32. // elementos para dar "senso de direção"
  33. 33. // CTA pode quebrar algumas regras, se provar que funciona
  34. 34. // sempre apresentar CTAs com ordem de prioridade
  35. 35. // CTA com segmentação de público
  36. 36. // shapes diferentes (ganham em design, perdem em atenção)
  37. 37. 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.
  38. 38. 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/

×