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/