Call to action - mais que um botão bonitinho
-
Upload
exit-comunicacao-estrategica -
Category
Design
-
view
209 -
download
0
description
Transcript of Call to action - mais que um botão bonitinho
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 - 2011http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
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 evidente2. tornar a ação interessante/desejável
// 1. tornar a ação evidente
• O teste dos 5 segundos:
> paper sobre CTA da Resultados Digitaishttp://www.slideshare.net/vanecosta/whitepaper-calltoactionresultados-digitais
// 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
// 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
// 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 o visitante
// 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 CTAhttp://blog.crazyegg.com/2014/01/01/conversion-rate-optimization-case-studies-2/
// 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/
// 2. tornar a ação interessante/desejávelOutro 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 CTAshttp://blog.crazyegg.com/2014/02/25/psychology-behind-calls-to-action/
// 2. tornar a ação interessante/desejávelEm 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.
Preocupações para o mundo mobileComeç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
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
// 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, 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.
// 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 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
// De informação, só o necessário
• Página inicial apresentava:– abertura– depoimentos– área de FAQ– área com screenshots
// 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 conhecer o produto, mas um pouco a mais de informação e elas começam a ficar confusas ou distraídas.
// 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
// 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
// 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.
• Mas podem ser peças que funcionam como impulsionadores da ação desejada.– Podem modelar as expectativas e
intenções das pessoas.
ReferênciasCases de otimizaçãohttp://visualwebsiteoptimizer.com/case-studies.php
Your Brain and Effective Calls To Action: What Works Best and Whyhttp://blog.crazyegg.com/2014/02/25/psychology-behind-calls-to-action/
Tendências aparecendo em emailshttp://blog.crazyegg.com/2014/02/13/future-of-email-marketing/
Quanto tempo para o visitante decidir se fica ou não em sua páginahttp://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
20 dicas para CTAshttp://www.slideshare.net/HubSpot/20-dos-donts-for-clickable-callstoaction
7 Marketing Lessons from Eye-Tracking Studieshttp://blog.kissmetrics.com/eye-tracking-studies/
Paper sobre CTA da Resultados Digitaishttp://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 Studieshttp://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 CTAhttp://www.agenciamestre.com/usabilidade/cta-saiba-tudo-sobre-call-to-action/