Design Direcionado para Atencao

DESIGN
DIRECIONADO
PARA ATENO:
23 PRINCPIOS VISUAIS
PARA A CRIAO DE
LANDING PAGES
MAIS PERSUASIVAS
OLI GARDNER
BELOS TEMPLATES DE
LANDING PAGE DIRECIONADOS
PARA CONVERSO
Os princpios de design apresentados neste ebook foram elaborados para serem testados
em sua prpria landing page. Mas, voc no precisa comear do zero.
O editor de landing page Unbounce inclui uma vasta seleo de templates de landing
page de alta converso responsivas para dispositivos mveis em uma interface clique e
arraste. Diferentemente de outras plataformas que oferecem templates fixos e rgidos, a
Unbounce permite que voc personalize tudo.
Ns temos templates bonitos e flexveis para todo tipo de campanha de marketing,

incluindo:
Gerao de Lead Sade e Bem-Estar Viagens e Turismo
eBooks e Webinars Varejo e Comrcio Eletrnico Produtos SaaS
Agncias e Consultorias Imobilirias Aplicativos Mveis
CONFIRA NOSSOS
TEMPLATES GRATUITOS

Q U A N D O A TA X A
D E AT E N O C A I , A S
C O N V E R S E S A U M E N TA M
OLI GARDNER
NDICE
PA R T E 1 . P O R FAV O R , P R E S T E AT E N O 08
PA R T E 2 . TA X A D E AT E N O 13
Estudo de caso - Landing page para download do eBook da Unbounce 17
Estudo de caso - Removendo a barra de navegao da pgina 19
Excees para uma Taxa de Ateno de 1:1 20
Efeito da Escolha de Hobson +1 22
PA R T E 3 . O S 2 3 P R I N C P I O S D O D E S I G N 26
D I R E C I O N A D O PA R A AT E N O
Direo 28
Movimento 30
Reconhecimento 31
Contraste 33
Tabulao 35
Destaque 36
Espao Negativo 38
Anomalia 37
Proximidade 38
Distrao 45
Interrupo 49
Dominncia 51
Consistncia 53
Repetio 54
Simetria 56
Sobreposio 57
Alinhamento 59
Continuao 60
Tamanho 62
Perspectiva 64
Agrupamento 65
Encapsulamento 66
Contato 68
SOBRE O AUTOR 70
Quer ir alm das Landing Pages e gerar
receita a partir dos seus Leads?
O RD Station uma plataforma completa para sua
empresa gerar mais trfego, Leads e vendas:
Crie Landing Pages e formulrios para gerao de Leads

(ou receba os Leads diretamente das Landing Pages da Unbounce!)
Identifique e qualifique os melhores contatos

automaticamente com o Lead Scoring
Faa fluxos de Automao de Marketing para enviar emails

e enviar os melhores Leads para o time de vendas
Envie campanhas de Email Marketing para nutrir seus Leads
Analise suas aes de Marketing e Vendas com o Marketing BI
Otimize suas pginas para os buscadores (SEO)
Agende publicaes nas redes sociais e acompanhe

tudo pelo calendrio de postagens
O RD Station tambm integra com diversos CRMs como Salesforce

e Pipedrive.
FAA UM TESTE GRATUITO

DO RD STATION
DESIGN DIRECIONADO PARA ATENO: 23 PRINCPIOS VISUAIS PARA A CRIAO DE LANDING PAGES MAIS PERSUASIVAS
6
PREFCIO
Q uando uma empresa pensa em investir em Marketing Digital,

comum que a primeira coisa que venha cabea seja comprar mdia
para atrair mais trfego e assim trazer mais resultados.
S que simplesmente levar mais visitantes para uma pgina no otimizada

muitas vezes como encher um balde furado: por mais que voc tente
ench-lo, sempre haver desperdcio e dificilmente os objetivos sero
alcanados.
E como fazer para reverter esse cenrio?
Uma das formas mais eficazes repensar as suas pginas para que elas
deixem claro qual a ao que voc quer que o visitante realize. Isso pode
ser desde o clique em um Call-to-Action especfico at o download de
algum contedo ou a compra de um produto.
Chamamos essas pginas de Landing Page.
Ter Landing Pages bem otimizadas para a converso muitas vezes o que
define o sucesso ou fracasso de uma estratgia de Inbound Marketing.
Dependendo de quanto custou para levar o visitante at a pgina, ter uma

taxa de converso de 10% ou de 20% significa, em uma conta simples, que
no segundo caso voc reduziu pela metade o custo dessa converso.
E como fazer para elevar essa taxa de converso? Neste eBook, Oli Gardner,
fundador da Unbounce, traz (e ns da Resultados Digitais endossamos)
quais so as tcnicas de design que mais funcionam para chamar a ateno
de um visitante ao que voc quer que ele realize em determinada
pgina do site.
Andr Siqueira
Diretor de Marketing, Resultados Digitais
7
PA R T E 1
P O R FAV O R ,
P R E S T E AT E N O
V se ferrar, Buzzfeed. Voc est detonando a vida da internet e fazendo
a vida online ser uma poa de mediocridade excessiva. Bom, na
verdade, isso mentira... Voc apenas muito bom em interromper minha
concentrao com timas chamadas.
O que o Buzzfeed e outros sites similares, como o Upworthy, fazem melhor

que todos os outros atrair a ateno das pessoas. E esta uma boa
habilidade para se ter em uma sociedade na qual ateno mais preciosa do
que 14 maneiras de fazer diamantes em uma impressora 3D.
A parte ruim deste tipo de sucesso que ele copiado e repetido por outras
empresas e marcas que no so to boas quanto o original. O resultado final
que todos continuam apostando nessa ttica repetidas vezes. Infelizmente
para os leitores, o contedo de alguns desses sites no to bom quanto as
chamadas em que clicaram.
por isso que Buzzfeed to bem-sucedido.
Suas chamadas no so apenas uma isca; h algo especial nelas. Caso fosse
apenas uma enganao, ningum voltaria ou continuaria a clicar na isca e
eles teriam um problema de reteno srio. Os melhores dentre esses sites
se preocupam em prender a ateno de seus leitores durante a experincia
de leitura. Eu os aplaudo porque sua consistncia cria lealdade.
Quando falamos de marketing, h trs aspectos da ateno nos quais

precisamos nos focar.
1. Capturando/atraindo a ateno
este o objetivo da chamada de seu anncio ou postagem.
2. Mantendo/prendendo a ateno
a chamada de sua landing page faz isso ao confirmar a promessa do anncio.
3. Focando a ateno
esta a funo do design de sua landing page e o propsito desse material.
9
ENCONTREI UM BURACO E O FECHEI.
A REAO FOI INACREDITVEL.
H uma praga assombrando a comunidade de marketing e os designers
que levam experincias de marketing aos clientes. o chamado Horror
Vacui... E, em termos de converso, ele realmente assustador.
Jurgen Verfaillie
Horror Vacui significa em latim: o medo de espaos vazios. Ele desenvolve um

desejo obsessivo de preencher cada pedao vazio com algo.
O SINAL ENFRENTOU O RUDO, E VOC

NO VAI ACREDITAR QUEM VENCEU.
Horror Vacui uma maldio que atinge as pginas de diversas maneiras.
Como seu website um local de alto trfego, cada aba, link e setor de produtos
quer um pedao, o que leva a uma experincia ruidosa que acaba minimizando
o impacto de tudo que apresentado ali.
10
E em meio ao caos de tais experincias de marketing mal organizadas,
sempre h um objetivo de campanha, subvalorizado, gritando por sua
parcela de ateno, batalhando contra a burocracia do design para poder
falar nesta mesa proverbial.
Combine isso a baixa taxa de ateno das pessoas online e ter uma
completa falta de foco.
ATENO UM RECURSO MENTAL LIMITADO
As reservas de energia mental so reduzidas cada vez que a pessoa toma

uma deciso, no importa quo pequena ela seja. Toda vez que voc coloca
um link adicional ou um anncio, voc se arrisca a esvaziar essa preciosa
reserva potencial de tomada de deciso conhecida como carga cognitiva
reduzindo, com o tempo, a capacidade de realizar decises racionais por
parte do seu visitante.
CARGA COGNITIVA E TOMADA DE DECISO
Foi mostrado atravs de experimentos que as pessoas tm uma quantidade

limitada de energia mental direcionada ao processo de tomada de deciso.
Quanto mais decises a pessoa precisa tomar em um dia, menor ser a sua
capacidade de tomar decises inteligentes mais tarde. Isso ocorre porque
a pessoa comea a sofrer de fadiga de deciso.
O presidente Obama sabe disso e desenvolveu mtodos para reduzir

a fadiga de deciso e melhorar sua capacidade de tomar as decises
importantes diante dos conflitos que lida todos os dias. Ele tem apenas
duas cores de ternos, essa sua primeira atividade no dia o que vestir
uma deciso simples. Quando uma proposta colocada em sua mesa, h
trs caixas de verificao na parte inferior: sim, no e vamos discutir.
Tambm foram observadas consequncias da fadiga de deciso em

audincias de liberdade condicional. Pesquisadores analisaram mais de
1.100 decises feitas por essas equipes no perodo de um ano e descobriram
um padro nas decises da equipe de condicional, mas o padro no estava
relacionado aos antecedentes legais, crimes ou sentenas dos condenados.
A questo era o momento.
11
Juzes aprovavam a liberdade condicional em cerca de um tero dos casos,
mas a probabilidade de obter condicional flutuava muito durante o dia. Entre
os prisioneiros que eram apresentados corte no comeo da manh, cerca
de 10% recebiam liberdade condicional, j entre os que eram apresentados
mais tarde durante o dia, menos de 10% recebiam a liberdade condicional.
A mesma coisa se aplica a sua landing page. Se a chamada de alguma

maneira vaga ou confusa, se as descries das caractersticas no so
teis ou se no possvel identificar a sua real oferta, voc forar seu
visitante a trabalhar mais para validar o propsito de sua pgina. Isso drena
as energias do cliente e pode lev-los a desistir e sair da pgina.
PARABNS!
Caso queira que a postagem da sua empresa no Facebook passe pelos
filtros e aparea no comeo no feed dos fs, incluir a palavra parabns!
pode fazer com que os algoritmos do Facebook pensem que tal postagem
est conectada a um evento vital como um nascimento, casamento ou
aniversrio, humanizando o evento e dando a ele preferncia.
Ateno obtida. Parabns!

Engraado? Com certeza. Funciona mesmo? Sim, por enquanto. Devo fazer
isso? No! uma ttica idiota de marketing baseada em uma cilada.
No esse o foco deste eBook.

Esse eBook sobre um tipo diferente de ateno. Princpios de design reais,
comprovados e fundamentais que voc pode utilizar para criar experincias
de marketing que maximizaro a quantidade de ateno que os objetivos
de converso da sua campanha recebem.
12
21
PA R T
PA R T E
T H E 4 F O U N DAT I O N A L
PRINCIPLES OF WRITING
TA X A D E AT E N O
HIGHER-CONVERTING
L A N D I N G PA G E S
A gora que entendemos os princpios bsicos da ateno, precisamos
entend-la em termos de nosso website e landing pages. Mas,
primeiramente, vamos falar um pouco sobre esquilos.
Esquilos so uns babacas. Eles so ruins para a converso. Eles so grandes

objetos brilhantes que fazem os ces correrem para a direo errada, e foi por
causa deles que eu escrevi esse pargrafo adicional sem importncia alguma,
mas que voc est lendo agora.
Entendeu? isso que est acontecendo >> Voc est experimentando um

desvio ou distrao. Minhas reclamaes diminuram sua habilidade de
entender qual meu foco e, como resultado, aumentaram as chances de voc
parar de ler e ir embora para um local que exija menos dos seus neurnios.
Aaah, pare de me fazer pensar! Todos os neurnios gritam em unssono.
Este o impacto que uma baixa Taxa de Ateno tem sobre o desempenho de
sua landing page.
O que taxa de ateno? Voc pergunta. Boa pergunta, meu amigo.

E aqui est a resposta.
Taxa de Ateno a taxa do nmero de coisas que voc pode fazer em

uma dada pgina, em relao ao nmero de coisas que voc deveria
fazer. Quando falamos de campanhas de marketing, voc deveria ter
apenas um nico objetivo (ou voc est fazendo errado), portanto a
taxa de ateno deveria ser 1:1.
Sua homepage pode ter uma taxa de ateno de 10:1, 20:1 ou 150:1. A pior que
j vi foi 183:1. Quando eu vi essa pgina, quis dar uma longa caminhada por
um cais curto.
Aqui est uma representao visual simples de uma taxa de ateno boa e m.
14
TAXA DE ATENO DA HOMEPAGE 57:1
Este esquema abaixo baseado na homepage da Virgin Mobile dos EUA e
seus 57 links. Se voc est promovendo a Promo 2 (circulada em vermelho),
nesse caso alm de ser difcil de encontr-la no meio dessa aglomerao (a
taxa de ateno 57:1), existem outros tantos elementos competindo por
ateno que seus prospectos apertaro o boto de voltar ou clicaro em
outra de suas promoes. Seja qual for a deciso do visitante j prevemos o
resultado: uma campanha fracassada.
E qual o problema de clicarem em outra promoo? Certamente, foi

uma venda. NO! Se eles no interagirem com a campanha que est
promovendo, suas estatsticas de AdWords iro demonstrar um fracasso, j
que Promo 2 no obteve converses.
15
TAXA DE ATENO DA LANDING PAGE 1:1
Agora, observe a landing page abaixo. Fica bem claro que h apenas
uma coisa a se fazer aqui, ento a Taxa de Ateno um perfeito 1:1 e o
propsito da pgina est muito mais claro.
16
ESTUDO DE CASO - LANDING PAGE PARA
DOWNLOAD DO EBOOK DA UNBOUNCE
O exemplo a seguir um teste A/B muito simples que apresenta o impacto da
taxa de ateno na taxa de converso de uma landing page.
A variante A apresenta uma srie de links para contedos relacionados e
(A)
(B)
17
alguns botes de compartilhamento via redes sociais (nos quais ningum
clicar nesse momento um local muito melhor para eles seria na pgina de
confirmao).
Sendo assim, removemos esses links da variante B.
A taxa de ateno dos testes 10:1 contra 1:1. O resultado?
A variante B resultou em 31% downloads a mais.
(B)
31%
Quando a taxa de ateno cai, as converses aumentam
T U I T E E S S A C I TA O
18
ESTUDO DE CASO - REMOVENDO A BARRA
DE NAVEGAO DA PGINA.
Em um estudo de caso da VWO blog, uma homepage com navegao foi
testada contra uma landing page sem navegao. A taxa de ateno caiu de
15:1 para 3:1 e o resultado foi de um aumento de 100% nas converses.
(A)
(B)
100%
19
EXCEES PARA UMA
TAXA DE ATENO DE 1:1
Uma pergunta comum quando se discute taxa de ateno se h excees,
casos em que h benefcios em uma taxa mais alta. A resposta sim. Existem
duas excees.
1. Mltiplos links/botes com o mesmo objetivo
Em landing pages longas, voc deve repetir em seu CTA ao longo da pgina,
para que a ao possa ser solicitada conforme os diferentes contedos so
lidos. Voc pode at mesmo utilizar um CTA diferente em cada boto para
descobrir se isso encoraja o clique. No h problemas em fazer isso, desde que
cada boto tenha exatamente o mesmo objetivo na campanha.
Abaixo, no exemplo do meu Curso de Converso em Landing Pages:
OS
UL
T
AP
LINK NOS C
20
A primeira pgina tem uma taxa de ateno de 1:1. Ao colocar link em cada
ttulo dos captulos do curso, a variante teste aumentou a taxa de ateno 12:1.
Enquanto mantendo um nico objetivo de levar as pessoas ao curso. A nova
verso desempenhou 15% melhor do que a verso original, como mostrado
nos resultados dos testes abaixo.
2. Ao utilizar links ncoras em sua navegao
Considere a landing page abaixo da Call to Action Conference:
Perceba que h uma barra de navegao no topo da pgina com seis links
(uma taxa de ateno de 7:1?) Com certeza isso deve quebrar o principio
da Taxa de Ateno, certo? No neste caso, porque cada link simplesmente
desliza a pgina para baixo para a respectiva seo da pgina. Eles no so
vazamentos que levam para outro lugar.
21
EFEITO DA ESCOLHA DE HOBSON +1
Aparentemente seres humanos, como voc e eu, gostam de fazer
escolhas sob certas circunstncias. Caso faamos uma deciso bem-
sucedida, sentimo-nos bem sobre quo inteligente somos. Ao reduzir as
opes disponveis a uma, ns removemos a oportunidade desta dose de
satisfao.
Para equilibrar este dilema, um link secundrio pode ser colocado prximo
ao seu CTA. A idia , ao colocar uma opo que as pessoas no querem
tomar, elas estaro mais inclinadas a escolher a outra opo do que se no
existisse opo de escolha.
Claro como a lama?
Observe este exemplo do blog Wheel of Persuasion de Bart Schutzs.

Eu amo a citao (no atribuda) de abertura:
Uma opo no realmente uma opo
Uma Escolha de Hobson uma escolha com uma opo que voc escolhe
ou no fazer. Portanto, se voc oferece a um cliente um produto, ele tem
uma escolha de Hobson: comprar ou no comprar.
Esta , por definio, uma situao que apresenta uma taxa de ateno de
1:1. Bart explica desta maneira:
Quando voc oferece uma escolha de Hobson, como compre o produto X,

o crebro ir utilizar sua energia mental para escolher entre as opes de a)
comprar o produto e b) no comprar o produto.
Mas quando voc oferece uma escolha de Hobson +1 como compre o produto X
- ou - tuite isso, o crebro utilizar sua escassa energia mental para a) comprar
o produto, b) tuite sobre isso, e ...c) no fazer absolutamente nada. Ao lidar com
a terceira opo, a energia cerebral estar mais escassa do que em uma escolha
de Hobson: compre ou no compre.
Portanto, aumentam as chances de que o crebro siga na direo de comprar o

produto (j que tuitar sobre ele no realmente uma opo).
22
No entanto, assim como em todo exemplo de estudo de caso conhecido
tambm como a praga do estudo de caso ou a maldio da melhor prtica
essa ttica no deve ser cegamente implementada sem ser testada para
descobrir se relevante para o seu cliente.
Eu fiquei fascinado por este conceito, ento tentei testar por mim mesmo.
Para a escolha +1, minha escolha de coisa que voc no vai querer fazer
um pedido agressivo para iniciar um perodo de teste de um software um
comprometimento muito maior do que um curso gratuito.
23
-14% das pessoas comearam o curso
Ao adicionar este link, a taxa de ateno dobrada para 2:1.
Claramente, caso eu tivesse sucumbido maldio do estudo de caso e

simplesmente implementado a ttica de Bart, eu teria causado um impacto
srio no desempenho do meu curso.
As lies aprendidas aqui so:
a) Voc deve sempre testar suas hipteses e
b) Nesse caso, aumentar a taxa de ateno teve um impacto negativo na taxa

de converso da minha landing page.
24
PARE DE ENVIAR
TRFEGO DE CAMPANHA
PARA SUA HOMEPAGE
Caso ainda esteja enviando trfego prontos

para serem convertidos para seu website
principal, voc est perdendo dinheiro.
A Unbounce permite que voc crie uma

experincia de landing page dedicada para
cada campanha de marketing, com taxa de
ateno sempre 1:1 independentemente se
seu trfego provenha das redes sociais, das
buscas ou de emails.
Com a Unbounce, voc pode...
Criar, publicar e testar landing pages sem

depender de desenvolvedores.
Otimizar suas campanhas para dispositivos

mveis utilizando templates responsivos ou
comeando do zero.
Substituir dinamicamente o texto de suas

landing pages para combinar com o dos
seus anncios.
EXPERIMENTE A UNBOUNCE
GRTIS POR 30 DIAS
PA R T
PA R T E 31
T H E 4 F O U N DAT I O N A L
P
ORSI N
23C IP
PRL IENSCO
PFI O
WSRD
I TOI NDGE S I G N
H
DIIG
RHEC
ERIO
-CNO
ANDV
OEPA
R TR
INAGAT E N O
L A N D I N G PA G E S
S e a baixa ateno o inimigo, ento o Design Direcionado para Ateno
o heri de nossa histria, batalhando contra um mar de objetos brilhantes.
Design direcionado para ateno uma aderncia disciplinada aos princpios

do design em uma tentativa de reduzir a complexidade visual e aprimorar a
facilidade de compreenso.
H muitas, muitas maneiras de se alcanar a simplicidade visual. O problema

que uma deciso de design positiva pode ser facilmente desfeita por uma que
seja m implementada.
Nesta seo discutirei com vocs nada menos do que 23 princpios visuais
de design. Minha nossa, cara! Agora *voc est* dando muitas opes para
*ns*! Faz sentido. Felizmente, *eu* mesmo fiz essa afirmao, portanto, irei
ignor-la e ficarei feliz por aprender algo incrvel (aprender novamente no meu
caso, pois eu j sabia disso seno no estaria escrevendo).
^^ T, estou me gabando. Bom, que princpio esse?
Cada um desses 23 princpios pode nos ensinar algo sobre como abordar e
comunicar nossas mensagens visualmente.
Sem uma ordem em particular...
27
1. DIREO
Assim como um diretor de filme habilmente nos guia atravs de uma experincia
de cinema, o princpio da direo pode ser usado para orientar os nossos
curiosos visitantes ao objetivo final de nossas landing pages. provavelmente
o menos sutil de todos os 23 princpios, por isso, se direcionamento sua
franqueza, no vai machucar colocar uma seta para mostrar o bvio.
Existem muitos exemplos de direo no mundo real:
28
As linhas coloridas no cho da rea de emergncia de um hospital, as
quais voc deve seguir caso esteja atordoado por uma concusso ou
sangrando muito.
A seta voc est aqui no mapa de um aeroporto. Quando voc passa

pela segurana, voc precisa saber onde est em relao ao porto que
precisa chegar. Caso consiga saber rapidamente onde est em um mapa,
voc saber onde precisa ir e pode relaxar e fazer algumas compras ou
beber algo antes do voo.
Os sinais de entrada e sada de um estacionamento.
A sinalizao esclarece por

onde cada um deve ir:
Apesar da obviedade das dicas

direcionais, ainda me espanta o
quanto isso no parece bvio na
prtica (tanto online quanto na
vida real).
29
2. MOVIMENTO
Embora possa deix-lo enjoado ou no, a percepo de movimento uma
de nossas qualidades reativas mais primitivas, criada para permitir que
evitssemos os ataques de feras terrveis.
Como uma tcnica de landing page, o movimento foi rapidamente adotado

como ttica para atrair a ateno a certos elementos conforme a pgina
carregada ou deslizada.
Infelizmente, na atualidade isso est sendo implementado por um bando

de designers egocntricos cujo maior desafio conseguir adicionar o maior
nmero possvel de modinhas em sua pgina.
O movimento tem um lugar importante em nosso arsenal de design e,

como tal, so necessrios muitos testes para determinar a melhor maneira
de uslo.
30
3. RECONHECIMENTO
Aqui est a explicao de Steve Krug sobre esse princpio em seu livro Dont
Make Me Think (No me faa pensar):
Reconhecimento (em ingls affordance) so dicas visuais no design de

um objeto que sugerem como ele pode ser usado. Por exemplo, o estilo
tridimensional de alguns botes evidencia que devem ser clicados.
E aqui est um diagrama que ilustra essa afirmao (adaptado a partir do

exemplo de Steve):
BOTO CTA BOTO CTA BOTO CTA BOTO CTA
Forte Baixo
reconhecimento reconhecimento
Como voc pode ver, o primeiro boto tem uma sombra que cria um efeito
3D. O segundo redondo e achatado, fazendo com que ainda se parea com
um boto. O terceiro exemplo se parece mais com uma caixa (o atualmente
onipresente boto fantasma) e o quarto exemplo apenas um texto que no
parece clicvel de maneira alguma.
A proximidade tem um papel importante na compreenso desse princpio.

Caso os links ou botes fantasma estejam localizados no topo da pgina, a
proximidade lhes d um reconhecimento implcito.
Uma ausncia de reconhecimento pode ser vista em formulrios em que o

design almeja a criao de um tratamento mais suave, como no exemplo a
seguir:
31
Como voc pode ver (ou no), os campos do formulrio so elementos
simplesmente sublinhados que se misturam ao fundo. A falta de um contorno
completo implica que voc pode nem mesmo notar que um formulrio,
pensar que uma simples pgina de gerao de cliques (esta foi minha
primeira reao) e descobrir que um formulrio apenas quando clicar na
chamada para ao e receber uma mensagem de erro.
32
4. CONTRASTE
O boto vermelho funcionou melhor que o verde! Incrvel! Que ideia genial.
B... << imagine o som de uma buzina bem alto.
Isso no uma ideia genial. um exemplo do fenmeno da maldio dos

estudos de caso (que j mencionei antes).
O simples fato de que a mudana de cor do boto funcionou para outra

pessoa interessante na melhor das hipteses, e na pior, muito, muito
perigoso nas mos dos que so facilmente influenciveis (vamos cham-
los de gerncia).
Esse aprendizado no apenas intransfervel, ele completamente

impreciso e fundamentalmente falho.
A razo pela qual a mudana da cor do boto foi positiva no experimento

a criao de um contraste forte entre o boto e o seu ambiente. isso.
Simples assim. No foi uma reao emocional, foi uma reao baseada
em uma porcentagem de chance do boto ser percebido em meio a uma
pgina que engolia o boto original.
Veja o diagrama abaixo. A pgina tem um tom azul dominante (porque

todo elemento azul, genial #falandocomigomesmo). Caso o crculo
laranja fosse da cor azul, ele se destacaria? No, claro que no.
33
E por isso que o boto laranja venceu a competio.
Tambm importante notar que 8% dos homens so daltnicos, motivo pelo

qual o contraste da cor em relao ao resto da pgina se torna mais importante
do que a prpria cor.
34
5. TABULAO
Este um princpio bastante conhecido pela maioria das pessoas
familiarizada com formatao de listas de tpicos em documentos. No
entanto, importante discuti-lo, especialmente caso uma longa lista de
benefcios e recursos seja apresentada em sua pgina.
Voc pode adicionar um pouco de clareza, reduzir o tempo de compreenso

e aplicar nfase atravs da interrupo e adio de hierarquias por meio de
recuos. Isso tambm aprimora o relacionamento entre diferentes pontos.
O efeito de proximidade surge aqui novamente para mostrar que esses
elementos so relacionados e subordinados a um elemento mestre.
mais fcil visualizar uma lista com recuo e parar para se aprofundar no
assunto quando necessrio.
35
6. DESTAQUE
Correspondncias de vendas. Marcaes em amarelo. Coisas bem brega,
mas feitas por um motivo. Elas funcionam. A Sharpie estaria falida caso no
funcionasse. No entanto, no servem para todos.
Destaque um exemplo de ateno seletiva, desenvolvida por

Robert Solso como um exerccio em que os leitores eram capazes de
eliminar ou ignorar o texto circundante e se focar apenas nas palavras
destacadas.
Em termos de implementao eficaz, um estudo feito por Martin Maguire

publicado no International Journal of Man-Machine Studies (1982, vol. 16(3),
p. 237-261) descobriu que o limite de uso de negrito ou do destaque para ser
empregado com eficcia, em at 10% do texto.
Voc pode considerar o negrito como

um desse tipo de nfase. O exemplo
abaixo mostra uma lista muito longa
que tenta utilizar o negrito como
nfase. Caso considere a regra dos
10%, este exemplo muito confuso.
O negrito foi empregado tantas
vezes que ultrapassou os limites de
desempenho e clareza visual.
36
Ao invs de tanto negrito, poderia ser utilizado um pouco de tabulao
(nesting) para agrupar os tpicos relacionados, a leitura se tornaria muito
mais fcil.
Se voc usou negrito em mais de

10% do seu texto na sua landing page,
voc no est enfatizando nada
37
7. ESPAO NEGATIVO
Lembram-se do Horror Vacui? Ele a anttese absoluta do conceito de espao
em branco ou espao negativo, ou caso voc queira ser mais especfico estou
falando daquele fundo amarelo de seu website.
O espao em branco permite que os elementos de sua pgina respirem.

Ele facilita a leitura de sua landing page e pode ter um efeito calmante para
os visitantes. Eu acredito que baixar a taxa de ateno para 1:1 quase
sempre cria espaos extras que so suficientes para tornar seu design
mais suave. Imagine sua homepage, agora imagine-a com apenas
um link (sem mudar mais nada).
Caso queira atrair ateno para algo, voc pode adicionar espao em branco
ao redor. A reao natural a isso : Por que h apenas aquilo naquela parte da
pgina? Deve ser importante!
O isolamento, sob a perspectiva do design, pode ser algo bom.
38
Observe a landing page da Digital
Telepathy.
Perceba que cada seo separada

por uma rea significativa de espao
negativo (neste caso, espao vazio).
O espao permite que voc isole

cada unidade de forma distinta, para
ser consumida separadamente das
outras.
Alm disso, veja como cada seo tem

sua prpria informao e hierarquia
visual. Como se fosse uma landing
page sobre si mesma com a presena
dos elementos essenciais: um
ttulo/subttulo, imagem, recursos/
benefcios e uma chamada para ao.
Muito bom.
39
8. ANOMALIA
Se voc tem um palestrante importante em sua conferncia, deve coloc-lo
no topo da lista para que tenha maior impacto? Talvez. Porm, h um mtodo
alternativo que pode ser ainda mais impactante. Considere o quadrado no
campo de crculos abaixo. A beleza est em sua diferena, ele imediatamente
cria um poder de centralizao que leva seu olhar at o meio do arranjo.
Tudo porque voc pintou o palestrante importante como um quadrado.
40
9. PROXIMIDADE
Elementos que esto prximos uns dos outros so percebidos como mais
relacionados do que elementos que esto longe um do outro. Isso faz sentido
e deixa mais clara a importncia que a proximidade tem como influenciador
positivo ou negativo de converso ao redor do CTA.
Considere o exemplo abaixo.

Caso minha foto e mensagem
estivessem em outro lugar da
pgina, se relacionariam ao
contexto e no ao CTA. No entanto,
posicion-la diretamente abaixo
do CTA aumenta a chance de que
algum faa a leitura no momento
em que est considerando clicar no
boto.
41
Quando foi testada, essa variante da pgina perdeu por 14% para uma pgina
que no apresentava este adendo ao CTA. Um exemplo real de mtrica da
vaidade. :)
Meu rosto perdeu por -14%
Eu a coloquei l como um influenciador positivo, mas ela apresentou o efeito

oposto. Meu ponto aqui que devemos considerar com ateno o impacto que
um elemento tem em seus elementos vizinhos.
Outro exemplo so os grficos com legenda. Quanto mais prxima a legenda
estiver do grfico (sobreposio uma boa escolha) mais fcil ser atribuir os
significados aos diferentes elementos apresentados no grfico. Quando no
esto prximos, o esforo adicional para direcionamento dos olhos faz com
que a interpretao exija um esforo maior de nossas reservas cognitivas.
42
POSICIONAMENTO ERRADO DO CTA
No exemplo abaixo, a chamada para ao apresentada em uma barra lateral.
Ela parece com um anncio em um banner, o que pode levar as pessoas a
ignor-la. No h CTA nessa postagem de blog, o que leva o visitante a acreditar
que ela possa no existir (um erro) ou que os links/contedos relacionados no
fim da postagem so o CTA, os quais no so.
O local mais apropriado para a barra lateral seria em uma posio mais
prxima, dentro ou no fim da postagem. Um link de teste tambm deveria
estar presente dentro do texto da postagem do blog, utilizando contraste para
destac-lo.
Perceba que existem duas formas para esta pgina. Caso j tenha acessado o
Marketo antes, voc visualizar essa verso sem barreiras (sem formulrio).
Esta a verso difcil de interpretar. Outra ttica de aprimoramento a
utilizao de contraste no CTA. Azul no azul no uma boa ideia.
43
Caso no tenha fornecido seu email para o Marketo antes, voc receber uma
verso com barreira (formulrio de gerao de lead) que um pouco melhor,
pois nela o formulrio se destaca:
44
10. DISTRAO
Esta fcil. Passe um momento observando o diagrama abaixo e mande
um email para mim em oli@unbounce.com caso descubra em qual voc
deveria focar sua ateno..
Voc sabe em qual clicaria? Achei que no. Olha a Taxa de Ateno a
gente!
Distrao anloga ao prejuzo criado por uma alta taxa de ateno. Caso
haja muita coisa acontecendo em sua pgina, as chances de seu visitante
ver o que voc quer que ele veja so diminudas em proporo direta a
quantidade de distraes.
Considere o exemplo simples abaixo, nele a remoo da barra de navegao

gerou um aumento de 105% na taxa de cliques.
45
(A)
(B)
105%
46
REMOVENDO BOTES DE
COMPARTILHAMENTO SOCIAL.
Outro exemplo. Aqui os botes de compartilhamento social oferecem
interaes adicionais e remov-los aumentou a converso em 11,9%.
(A)
(B)
11.9%
47
Agora, h duas razes pelas quais isso pode ter ocorrido.
1. As distraes fazem com que a pgina fique aglomerada.
2. A prova social negativa de poucos compartilhamentos sociais agiu como

uma interferncia.
Uma lio importante aqui que independentemente da razo do impacto,

reduzir a taxa de ateno e minimizar distraes levou a resultados incrveis.
48
11. INTERRUPO
O marketing de interrupo tem uma m reputao, como supostamente
deveria. Mas no disso que estou falando. O design de interrupo utiliza
uma quebra para fazer com que pensem.
Utilizar uma quebra visual intrusiva faz com que as pessoas parem
momentaneamente. Imagine uma lista de 15 tpicos. Talvez, todos eles
sejam importantes de certa forma. Talvez, voc esteja criando um design
direcionado para diversas modalidades de comprador. O tipo impulsivo
provavelmente quer/precisa no mximo de trs tpicos que resumam
o propsito e o benefcio de comprar um item, enquanto um comprador
metdico precisa averiguar todos os detalhes.
H trs pontos principais que so relevantes quando algum l sua lista

de tpicos.
1. O primeiro tpico o item com mais chances de ser lembrado nos

momentos subsequentes leitura.
2. O efeito de recncia: O ltimo tpico o primeiro a ser lembrado em um

curto perodo aps a leitura. No entanto, no demora muito para que o
efeito da primazia assuma o controle e recoloque o primeiro item como
dominante.
49
3. O efeito de interrupo: J que decidiu destacar um item no meio da lista,
voc est lhe dando uma dominncia ainda maior que o primeiro e o ltimo.
Considere a lista de tpicos abaixo como um exemplo:
Esta a primeira e mais importante caracterstica do produto
Lorem ipsum outro contedo para preencher a lista de tpicos
A nfase de interrupo foi aplicada a este elemento
Este o ltimo elemento na lista, tem grande valor em virtude de ser

o argumento de concluso e por ser apresentado visualmente com um
ponto final.
primeira vista, essa longa lista de tpicos tem apenas trs elementos
dominantes e, portanto, importantes.
Voc tambm pode interromper as linhas de sua interface ou design para criar
uma quebra que traga a ateno, como no exemplo a seguir da Fast Company.
Aqui a interrupo da grade torna a leitura mais tranquila, ao mesmo tempo
em que fornece o descanso necessrio j que apresenta pargrafos longos
de texto.
50
12. DOMINNCIA
H uma diferena sutil, mas importante entre os princpios de tamanho
e dominncia. Tamanho influi na dominncia, mas precisa ser combinado
com proximidade para realmente estabelecer uma relao significante com
outro elemento.
Um uso comum de Dominncia a representao visual de botes de

progresso e um processo de diversos passos.
(A) ANTERIOR PRXIMO
(B) << ANTERIOR PRXIMO >>
(C) << ANTERIOR PRXIMO >>
No primeiro exemplo, nenhum boto apresentado como mais importante.
No segundo, o mesmo caso, mas setas direcionais foram acrescentadas

para adicionar clareza ao propsito dos botes.
Finalmente, no terceiro exemplo, a interao com o << anterior

apresentada como um simples link menos importante que o boto
prximo >> de progresso. Isso cria uma hierarquia visual a partir do uso
de Dominncia.
51
O seguinte exemplo utiliza Dominncia, Contraste e Proximidade para criar
uma experincia mais eficaz, o resultado foi um aumento de 31% na taxa
de cliques.
(A)
(B)
31%
52
13. CONSISTNCIA
Consistncia pode colocar ordem ao caos. Observe o diagrama abaixo por
cinco segundos.
No leva muito tempo para que seu crebro separe os quadrados dos
crculos. Agora, imagine que no h nenhuma correlao entre os objetos
similares. Os crculos no se relacionam com outros crculos e os quadrados
no tem ideia do que os outros quadrados esto fazendo. Caos completo.
Entretanto, se cada quadrado representa a mesma coisa e todos os

crculos significam a mesma coisa, o caos se torna ordem. Esse o poder
da consistncia.
Consistncia uma parte essencial do branding.
Quando definimos e ampliamos o que familiar, ns aumentamos a

compreenso e o contexto. Toda vez que a {empresa x} faz/diz/expressa
A, h semelhanas com a ltima vez que fez/disse/expressou A.
A consistncia reduz o tempo de compreenso e o impacto do design

sobre a carga cognitiva.
53
14. REPETIO
Aliterao uma das minhas tcnicas de escrita favoritas. A repetio de
consoantes fricativas ou rimas ou batidas magntico. A maneira mais fcil
de explicar o que estou querendo dizer ouvir 10 segundos da msica Never
Getting Back Together da Taylor Swift. Sim, sim, eu sei. Taylor Swift. Na
verdade, ela bem determinada, apesar de eu gostar mais de metal.
Preste ateno conforme ela canta com o coro depois de 0:42.
A esto dois exemplos de aliterao.
A primeira a repetio das palavras never ever ever, no qual a

nfase no som de ever, mas o exemplo mais forte a prxima parte
em que a bateria e o vocal atingem repetidamente a palavra talk.
You go talk to your friends, talk to my friends, talk to me.
Oua e vai entender o que quero dizer. Ela cria um elemento focal muito forte
na msica a partir da repetio das palavras e da nfase dada a elas conforme
canta.
Voc provavelmente est pensando o que isso tem a ver com design. Faz
sentido.
A repetio pode ajudar a atrair ateno para elementos e textos

importante da landing page. Pergunte para a Taylor Swift.
54
O exemplo mais bvio de repetio em uma landing page um grupo de
tpicos. Isso fcil, e se utilizar as tcnicas de interrupo com tabulao e
agrupamento (explorados abaixo), voc as tornar eficazes.
Afastaremos um pouco e olharemos para isso num nvel macro. Pense em

uma landing page longa que apresenta trs listas de tpicos ao longo da
pgina. Repentinamente, enquanto olha para a imagem como um todo,
esses trs elementos ficam mais ntidos assim que percebe o padro
apresentado na pgina.
Se estiver fortemente conectada a sua consistncia, a repetio pode

trazer sentimentos de familiaridade para seu design e ajudar a garantir a
compreenso e coeso da marca.
55
15. SIMETRIA
Simetria fortemente correlacionada a beleza. Percebemos caractersticas
simtricas como sendo mais atrativas talvez porque permitam que
nosso olhar relaxe, tirando a necessidade de interpolar as diferenas na
construo facial.
A Apple aproveita desse princpio na pgina de produto do MacBook:
56
16. SOBREPOSIO
Extremamente relacionada ao conceito de proximidade, a sobreposio
pode ser utilizada para conectar um elemento a outro. Em termos de
marketing, este o uso mais comum de informaes relacionadas a preos
(como bales de preos em forma de exploso) e destaque grfico (dando
zoom na imagem de um produto).
Em termos de design, ele eficaz porque quebra os limites da imagem ao

qual est ligado.
No primeiro exemplo, a sobreposio permite que voc saiba que esta

uma anotao e no que faz parte do produto.
No segundo exemplo, a mytips.com permite que a lupa se sobreponha aos

limites da captura de tela fortalecendo a nfase. Sem isso, o visual ficaria
mais aglomerado e a comunicao no seria to clara.
57
O benefcio desta tcnica que ela ilustra rapidamente que existem duas
coisas que voc deve observar e que h duas quebras no plano da captura de
tela do produto.
Como exemplo final, considere um smartphone e as atualizaes visveis que

ele envia para chamar a ateno. Os aplicativos que precisam de atualizao
se destacam em relao aos outros aplicativos atravs da sobreposio de
alerta numrico, como mostrado abaixo:
58
17. ALINHAMENTO
Alinhamento pode ser visto de duas maneiras. Primeiro, como um principio
conceitual abrangente que busca tornar sua landing page mais congruente
ao conectar elementos com um nico objetivo.
Em segundo lugar, o aspecto puramente visual do alinhamento.
H razes para que interfaces grficas, tais como Photoshop (e a Unbounce)

utilizem guias. Isso ocorre porque o design precisa de uma ordem para ser
mais eficaz. Se cada elemento de sua pgina tivesse cinco pixels removidos
do seguinte (em termos de seu alinhamento superior, esquerdo ou direito),
a experincia se tornaria catica rapidamente.
Alinhamento a maneira mais simples e rpida de organizar um design

abarrotado, adicionando clareza visual e aumentando a sensao de bem-
estar. Pode parecer um pouco com papo de yoga, mas verdade. Quando
contrapus um design bagunado com um organizado, eu vi e senti uma
reao visceral em ambas as extremidades do espectro.
59
18. CONTINUAO
Uma boa narrao e uma comunicao eficaz de marketing dependem de
sequncia. Dizer as coisas certas, na ordem certa.
Esta a essncia da hierarquia de informaes, ela pode ser profundamente

auxiliada por dicas visuais.
Observando a landing page abaixo, no h dvidas sobre a ordem com a qual

seu contedo deve ser consumido. Mas, caso as dicas direcionais fossem
removidas em algum momento, a ordem ficaria aberta a interpretao, por
isso a continuao to importante. Ela persistente.
Suas landing pages dizem as coisas certas na ordem certa?

Dicas visuais podem ajudar na hierarquia das informaes.
60
61
19. TAMANHO
Afirmao simples: quanto maior for algo, mais facilmente ser percebido.
Tamanho relacionado a dominncia, mas a diferena que o tamanho

relativo a tudo que est presente na pgina ou seo, como oposto aos
elementos mais prximos. Desta maneira, a maior coisa na pgina pode ser
percebida como a mais importante.
Neste template de landing page que criamos com nossos amigos na Wistia,
a ateno est claramente sendo direcionada para o vdeo de demonstrao
do produto, que domina a pgina:
62
63
20. PERSPECTIVA
Perspectiva uma palavra estranha. Ela
muito imersiva, no sentido de que voc est
desenvolvendo a perspectiva de algo simplesmente
por considerar que h uma perspectiva. Esta
a toca de coelho pelo qual no quero descer.
#inception
A perspectiva visual tem um aspecto temporal

sobre ela. Ao delinear a distncia, voc implica a
viagem de um fundo distante para um primeiro
plano presente.
uma maneira excelente de criar uma ambientao enquanto aplica dominncia

ao heri de sua cena. Essencialmente, perspectiva um diferenciador. Ela
separa a frente e a parte de trs de uma maneira mais significativa do que por
meio de uma ordem de camadas ou um ndice z.
Neste template de landing page da Unbounce que busca atrair adeses para
uma academia, a perspectiva utilizada junto com uma dica direcional humana
para dirigir a ateno ao CTA. Espero que no esteja me alongando demais. <<
Percebeu o que eu fiz? :P
64
21. AGRUPAMENTO
Relacionado consistncia e proximidade, o agrupamento se refere a criao
de simplicidade atravs da reunio de elementos parecidos reunindo
elementos similares para reduzir a carga cognitiva.
Eles podem ser elementos que possuem a mesma inteno, objetivos de

comunicao relacionados, ou elementos que so representados da mesma
forma visualmente.
Este um exemplo de como voc pode agrupar contedo, de acordo com

seu relacionamento informacional:
Ao separar a descrio dos detalhes numricos, mais fcil focar em uma

tarefa de cada vez. Leia sobre o produto, ento compre o produto.
65
22. ENCAPSULAMENTO
Este um princpio de amarrao? Talvez. Ou voc pode pensar nele
como o elstico que mantm junto um grupo de aspargos. Seja como for,
encapsulamento fornece separao instantnea e isolamento de um grupo
de elementos dos seus conterrneos ao redor. Quando utilizado em um
grupo de mltiplos elementos, como mostrado neste diagrama, ele funciona
como uma proteo, tal como um crculo de camponeses protegendo suas
crianas da multido furiosa de malfeitores que se aproxima.
Sim, estou sendo muito dramtico. Mas tente olhar para a figura por alguns
segundos, talvez entenda o que estou dizendo. #imaginao
Quando falamos de elementos de uma landing page, o encapsulamento

cria uma sensao de importncia imediata. Voc sabe que a rea foi
envelopada por algum motivo e aceita seu convite visual.
Vamos voltar ao exemplo de comrcio digital citado em algumas pginas

atrs. Como parte de um teste de ecommerce as informaes dspares
foram agrupadas e reunidas em uma caixa restritiva:
66
(A)
(B)
Isso produziu uma boa separao visual entre a descrio do produto e os

detalhes mais importante que voc precisa saber para tomar uma deciso
baseado na sua vontade de comprar.
Ele demonstra um bom uso de trs princpios: Encapsulamento,

Agrupamento e Proximidade. Em primeiro lugar, o agrupamento
utilizado para estabelecer um relacionamento entre as informaes de
disponibilidade, preo, nota, quantidade e assim por diante. Ento, o CTA
trazido para perto (proximidade) destes elementos para ajudar a inspirar a
compra e, finalmente, tudo isso encapsulado em uma caixa.
67
23. CONTATO
O princpio final obtm sua importncia no apenas por gerar ateno,
mas por criar um ponto ou um momento de interesse. Observe a figura
abaixo, voc ver que apesar da presena de outros objetos, sua ateno
levada ao ponto de contato entre o crculo e o retngulo.
H um poder significativo criado neste momento devido a sugesto de um

impacto e de uma unio de itens que estavam separados. A capa do disco
de John e Yoko, Double Fantasy, ilustra isso perfeitamente:
68
Acho que essa uma tima maneira de resumir os 23 princpios. Com um
lembrete de que importante utilizarmos o design para atrair ateno no
apenas para o preo de nossos produtos e para o to importante CTA, mas
tambm para os momentos que possuem o poder de impactar a experincia
emocional do visitante.
E com isso, quero dizer que voc deveria ter fotos de pessoas se beijando em
seu CTA.
69
S O B R E O A U T O R
OLI GARDNER
Co-Fundador da Unbounce, Oli Gardner j viu mais landing

pages que qualquer outra pessoa no planeta, paixo esta
provinda do seu desdm (saudvel) por profissionais de
marketing que enviam trfego de campanha para homepages.
Palestrante e escritor ele fala internacionalmente sobre as
quatro bases da converso: a interseco de texto, design,
interao e psicologia.
Ele criou este novo eBook sobre Design Direcionado para

Ateno a fim de preencher um vazio sobre o papel do design
na converso.
@oligardner
oli@unbounce.com
unbounce.com/br
O Oli est em uma misso para ajudar profissionais de

marketing a combinar dados e design para que criem
experincias de marketing bonitas e de alta converso.
70
PRONTO PARA
FAZER SEU
DESIGN?
Como vimos nos estudos de caso do
captulo anterior, comum combinar
uma srie de princpios de Design
Direcionado para Ateno de maneira a
criar uma experincia que obtenha mais
converses.
Essas combinaes so realmente a

chave para implementar um Design
Direcionado para Ateno. Quando voc
combina Proximidade com Dominncia,
Contraste e Encapsulamento (ou
qualquer outra de um nmero infinito
de combinaes), voc est no caminho
para o sucesso.
O design no deve se focar apenas no

embelezamento, ele deve obedecer seus
princpios fundamentais que, quando
utilizados corretamente, permitem
que voc crie designs de maneira mais
prudente e conceituada.
Agora, siga adiante e seja um designer

direcionado para ateno cheio de bons
princpios.
FAA SEU DESIGN NA UNBOUNCE

GRTIS POR 30 DIAS

Design Direcionado para Atencao

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Direcionado para Atencao

Enviado por

Direitos autorais:

Formatos disponíveis

DESIGN

Ns temos templates bonitos e flexveis para todo tipo de campanha de marketing,

Gerao de Lead Sade e Bem-Estar Viagens e Turismo

eBooks e Webinars Varejo e Comrcio Eletrnico Produtos SaaS

Agncias e Consultorias Imobilirias Aplicativos Mveis

Estudo de caso - Landing page para download do eBook da Unbounce 17

Estudo de caso - Removendo a barra de navegao da pgina 19

Excees para uma Taxa de Ateno de 1:1 20

Efeito da Escolha de Hobson +1 22

Crie Landing Pages e formulrios para gerao de Leads

Identifique e qualifique os melhores contatos

Faa fluxos de Automao de Marketing para enviar emails

Envie campanhas de Email Marketing para nutrir seus Leads

Analise suas aes de Marketing e Vendas com o Marketing BI

Otimize suas pginas para os buscadores (SEO)

Agende publicaes nas redes sociais e acompanhe

O RD Station tambm integra com diversos CRMs como Salesforce

FAA UM TESTE GRATUITO

Q uando uma empresa pensa em investir em Marketing Digital,

S que simplesmente levar mais visitantes para uma pgina no otimizada

E como fazer para reverter esse cenrio?

Chamamos essas pginas de Landing Page.

Dependendo de quanto custou para levar o visitante at a pgina, ter uma

O que o Buzzfeed e outros sites similares, como o Upworthy, fazem melhor

por isso que Buzzfeed to bem-sucedido.

Quando falamos de marketing, h trs aspectos da ateno nos quais

Horror Vacui significa em latim: o medo de espaos vazios. Ele desenvolve um

O SINAL ENFRENTOU O RUDO, E VOC

ATENO UM RECURSO MENTAL LIMITADO

As reservas de energia mental so reduzidas cada vez que a pessoa toma

CARGA COGNITIVA E TOMADA DE DECISO

Foi mostrado atravs de experimentos que as pessoas tm uma quantidade

O presidente Obama sabe disso e desenvolveu mtodos para reduzir

Tambm foram observadas consequncias da fadiga de deciso em

A mesma coisa se aplica a sua landing page. Se a chamada de alguma

Ateno obtida. Parabns!

No esse o foco deste eBook.

Esquilos so uns babacas. Eles so ruins para a converso. Eles so grandes

Entendeu? isso que est acontecendo >> Voc est experimentando um

Aaah, pare de me fazer pensar! Todos os neurnios gritam em unssono.

O que taxa de ateno? Voc pergunta. Boa pergunta, meu amigo.

Taxa de Ateno a taxa do nmero de coisas que voc pode fazer em

E qual o problema de clicarem em outra promoo? Certamente, foi

Sendo assim, removemos esses links da variante B.

A taxa de ateno dos testes 10:1 contra 1:1. O resultado?

A variante B resultou em 31% downloads a mais.

Quando a taxa de ateno cai, as converses aumentam

1. Mltiplos links/botes com o mesmo objetivo

Abaixo, no exemplo do meu Curso de Converso em Landing Pages:

2. Ao utilizar links ncoras em sua navegao

Considere a landing page abaixo da Call to Action Conference:

Claro como a lama?

Observe este exemplo do blog Wheel of Persuasion de Bart Schutzs.

Uma opo no realmente uma opo

Quando voc oferece uma escolha de Hobson, como compre o produto X,

Portanto, aumentam as chances de que o crebro siga na direo de comprar o

Ao adicionar este link, a taxa de ateno dobrada para 2:1.

Claramente, caso eu tivesse sucumbido maldio do estudo de caso e

As lies aprendidas aqui so:

a) Voc deve sempre testar suas hipteses e

b) Nesse caso, aumentar a taxa de ateno teve um impacto negativo na taxa

Caso ainda esteja enviando trfego prontos

A Unbounce permite que voc crie uma