Ebook Design Direcionado para Atencao ADD

DESIGN
DIRECIONADO
PARA ATENÇÃO:
23 PRINCÍPIOS VISUAIS
PARA A CRIAÇÃO DE
LANDING PAGES
MAIS PERSUASIVAS
OLI GARDNER
BELOS TEMPLATES DE
LANDING PAGE DIRECIONADOS
PARA CONVERSÃO
Os princípios de design apresentados neste ebook foram elaborados para serem testados
em sua própria landing page. Mas, você não precisa começar do zero.
O editor de landing page Unbounce inclui uma vasta seleção de templates de landing
page de alta conversão responsivas para dispositivos móveis em uma interface “clique e
arraste”. Diferentemente de outras plataformas que oferecem templates fixos e rígidos, a
Unbounce permite que você personalize tudo.
Nós temos templates bonitos e flexíveis para todo tipo de campanha de marketing,
incluindo:
• Geração de Lead • Saúde e Bem-Estar • Viagens e Turismo
• eBooks e Webinars • Varejo e Comércio Eletrônico • Produtos SaaS
• Agências e Consultorias • Imobiliárias • Aplicativos Móveis
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 navegação da página 19
Exceções para uma Taxa de Atenção 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
Direção 28
Movimento 30
Reconhecimento 31
Contraste 33
Tabulação 35
Destaque 36
Espaço Negativo 38
Anomalia 37
Proximidade 38
Distração 45
Interrupção 49
Dominância 51
Consistência 53
Repetição 54
Simetria 56
Sobreposição 57
Alinhamento 59
Continuação 60
Tamanho 62
Perspectiva 64
Agrupamento 65
Encapsulamento 66
Contato 68
SOBRE O AUTOR 70
Quer ir além das Landing Pages e gerar
receita a partir dos seus Leads?
O RD Station é uma plataforma completa para sua
empresa gerar mais tráfego, Leads e vendas:
• Crie Landing Pages e formulários para geração de Leads

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

automaticamente com o Lead Scoring
• Faça fluxos de Automação 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 ações de Marketing e Vendas com o Marketing BI
• Otimize suas páginas para os buscadores (SEO)
• Agende publicações nas redes sociais e acompanhe

tudo pelo calendário de postagens
O RD Station também integra com diversos CRMs como Salesforce

e Pipedrive.
FAÇA UM TESTE GRATUITO

DO RD STATION
DESIGN DIRECIONADO PARA ATENÇÃO: 23 PRINCÍPIOS VISUAIS PARA A CRIAÇÃO DE LANDING PAGES MAIS PERSUASIVAS
6
PREFÁCIO
Q uando uma empresa pensa em investir em Marketing Digital, é

comum que a primeira coisa que venha à cabeça seja comprar mídia
para atrair mais tráfego e assim trazer mais resultados.
Só que simplesmente levar mais visitantes para uma página não otimizada
muitas vezes é como encher um balde furado: por mais que você tente
enchê-lo, sempre haverá desperdício e dificilmente os objetivos serão
alcançados.
E como fazer para reverter esse cenário?
Uma das formas mais eficazes é repensar as suas páginas para que elas
deixem claro qual é a ação que você quer que o visitante realize. Isso pode
ser desde o clique em um Call-to-Action específico até o download de
algum conteúdo ou a compra de um produto.
Chamamos essas páginas de Landing Page.
Ter Landing Pages bem otimizadas para a conversão é muitas vezes o que
define o sucesso ou fracasso de uma estratégia de Inbound Marketing.
Dependendo de quanto “custou” para levar o visitante até a página, ter uma
taxa de conversão de 10% ou de 20% significa, em uma conta simples, que
no segundo caso você reduziu pela metade o custo dessa conversão.
E como fazer para elevar essa taxa de conversão? Neste eBook, Oli Gardner,
fundador da Unbounce, traz (e nós da Resultados Digitais endossamos)
quais são as técnicas de design que mais funcionam para chamar a atenção
de um visitante à ação que você quer que ele realize em determinada
página 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 poça de mediocridade excessiva. Bom, na
verdade, isso é mentira... Você apenas é muito bom em interromper minha
concentração com ótimas chamadas.
O que o Buzzfeed e outros sites similares, como o Upworthy, fazem melhor

que todos os outros é atrair a atenção das pessoas. E esta é uma boa
habilidade para se ter em uma sociedade na qual atenção é 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 não são tão boas quanto o original. O resultado final
é que todos continuam apostando nessa tática repetidas vezes. Infelizmente
para os leitores, o conteúdo de alguns desses sites não é tão bom quanto as
chamadas em que clicaram.
É por isso que Buzzfeed é tão bem-sucedido.
Suas chamadas não são apenas uma isca; há algo especial nelas. Caso fosse
apenas uma enganação, ninguém voltaria ou continuaria a clicar na isca e
eles teriam um problema de retenção sério. Os melhores dentre esses sites
se preocupam em prender a atenção de seus leitores durante a experiência
de leitura. Eu os aplaudo porque sua consistência cria lealdade.
Quando falamos de marketing, há três aspectos da atenção nos quais

precisamos nos focar.
1. Capturando/atraindo a atenção
este é o objetivo da chamada de seu anúncio ou postagem.
2. Mantendo/prendendo a atenção
a chamada de sua landing page faz isso ao confirmar a promessa do anúncio.
3. Focando a atenção
esta é a função do design de sua landing page e o propósito desse material.
9
ENCONTREI UM BURACO E O FECHEI.
A REAÇÃO FOI INACREDITÁVEL.
Há uma praga assombrando a comunidade de marketing e os designers
que levam experiências de marketing aos clientes. É o chamado Horror
Vacui... E, em termos de conversão, ele é realmente assustador.
Jurgen Verfaillie
Horror Vacui significa em latim: o medo de espaços vazios. Ele desenvolve um

desejo obsessivo de preencher cada pedaço vazio com algo.
O SINAL ENFRENTOU O RUÍDO, E VOCÊ

NÃO VAI ACREDITAR QUEM VENCEU.
Horror Vacui é uma maldição que atinge as páginas de diversas maneiras.
Como seu website é um local de alto tráfego, cada aba, link e setor de produtos
quer um pedaço, o que leva a uma experiência ruidosa que acaba minimizando
o impacto de tudo que é apresentado ali.
10
E em meio ao caos de tais experiências de marketing mal organizadas,
sempre há um objetivo de campanha, subvalorizado, gritando por sua
parcela de atenção, batalhando contra a burocracia do design para poder
falar nesta mesa proverbial.
Combine isso a baixa taxa de atenção das pessoas online e terá uma
completa falta de foco.
ATENÇÃO É UM RECURSO MENTAL LIMITADO
As reservas de energia mental são reduzidas cada vez que a pessoa toma
uma decisão, não importa quão pequena ela seja. Toda vez que você coloca
um link adicional ou um anúncio, você se arrisca a esvaziar essa preciosa
reserva potencial de tomada de decisão – conhecida como carga cognitiva
– reduzindo, com o tempo, a capacidade de realizar decisões racionais por
parte do seu visitante.
CARGA COGNITIVA E TOMADA DE DECISÃO
Foi mostrado através de experimentos que as pessoas têm uma quantidade

limitada de energia mental direcionada ao processo de tomada de decisão.
Quanto mais decisões a pessoa precisa tomar em um dia, menor será a sua
capacidade de tomar decisões inteligentes mais tarde. Isso ocorre porque
a pessoa começa a sofrer de fadiga de decisão.
O presidente Obama sabe disso e desenvolveu métodos para reduzir

a fadiga de decisão e melhorar sua capacidade de tomar as decisões
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 decisão simples. Quando uma proposta é colocada em sua mesa, há
três caixas de verificação na parte inferior: “sim”, “não” e “vamos discutir”.
Também foram observadas consequências da fadiga de decisão em

audiências de liberdade condicional. Pesquisadores analisaram mais de
1.100 decisões feitas por essas equipes no período de um ano e descobriram
um padrão nas decisões da equipe de condicional, mas o padrão não estava
relacionado aos antecedentes legais, crimes ou sentenças dos condenados.
A questão era o momento.
11
Juízes aprovavam a liberdade condicional em cerca de um terço dos casos,
mas a probabilidade de obter condicional flutuava muito durante o dia. Entre
os prisioneiros que eram apresentados à corte no começo 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 descrições das características não são
úteis ou se não é possível identificar a sua real oferta, você forçará seu
visitante a trabalhar mais para validar o propósito de sua página. Isso drena
as energias do cliente e pode levá-los a desistir e sair da página.
PARABÉNS!
Caso queira que a postagem da sua empresa no Facebook passe pelos
filtros e apareça no começo no feed dos fãs, incluir a palavra “parabéns!”
pode fazer com que os algoritmos do Facebook pensem que tal postagem
está conectada a um evento vital como um nascimento, casamento ou
aniversário, humanizando o evento e dando a ele preferência.
Atenção obtida. Parabéns!

Engraçado? Com certeza. Funciona mesmo? Sim, por enquanto. Devo fazer
isso? Não! É uma tática idiota de marketing baseada em uma cilada.
Não é esse o foco deste eBook.

Esse eBook é sobre um tipo diferente de atenção. Princípios de design reais,
comprovados e fundamentais que você pode utilizar para criar experiências
de marketing que maximizarão a quantidade de atenção que os objetivos
de conversão 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 princípios básicos da atenção, precisamos
entendê-la em termos de nosso website e landing pages. Mas,
primeiramente, vamos falar um pouco sobre esquilos.
Esquilos são uns babacas. Eles são ruins para a conversão. Eles são grandes
objetos brilhantes que fazem os cães correrem para a direção errada, e foi por
causa deles que eu escrevi esse parágrafo adicional sem importância alguma,
mas que você está lendo agora.
Entendeu? É isso que está acontecendo >> Você está experimentando um

desvio ou distração. Minhas reclamações diminuíram 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 neurônios.
“Aaah, pare de me fazer pensar!” – Todos os neurônios gritam em uníssono.
Este é o impacto que uma baixa Taxa de Atenção tem sobre o desempenho de
sua landing page.
O que é taxa de atenção? Você pergunta. Boa pergunta, meu amigo.

E aqui está a resposta.
Taxa de Atenção é a taxa do número de coisas que você pode fazer em

uma dada página, em relação ao número 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 atenção deveria ser 1:1.
Sua homepage pode ter uma taxa de atenção de 10:1, 20:1 ou 150:1. A pior que
já vi foi 183:1. Quando eu vi essa página, quis dar uma longa caminhada por
um cais curto.
Aqui está uma representação visual simples de uma taxa de atenção boa e má.
14
TAXA DE ATENÇÃO 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 além de ser difícil de encontrá-la no meio dessa aglomeração (a
taxa de atenção é 57:1), existem outros tantos elementos competindo por
atenção que seus prospectos apertarão o botão de voltar ou clicarão em
outra de suas promoções. Seja qual for a decisão do visitante já prevemos o
resultado: uma campanha fracassada.
E qual é o problema de clicarem em outra promoção? Certamente, foi

uma venda. NÃO! Se eles não interagirem com a campanha que está
promovendo, suas estatísticas de AdWords irão demonstrar um fracasso, já
que “Promo 2” não obteve conversões.
15
TAXA DE ATENÇÃO DA LANDING PAGE 1:1
Agora, observe a landing page abaixo. Fica bem claro que há apenas
uma coisa a se fazer aqui, então a Taxa de Atenção é um perfeito 1:1 e o
propósito da página 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 atenção na taxa de conversão de uma landing page.
A variante A apresenta uma série de links para conteúdos relacionados e
(A)
(B)
17
alguns botões de compartilhamento via redes sociais (nos quais ninguém
clicará nesse momento – um local muito melhor para eles seria na página de
confirmação).
Sendo assim, removemos esses links da variante B.
A taxa de atenção dos testes é 10:1 contra 1:1. O resultado?
A variante B resultou em 31% downloads a mais.
(B)
 31%
“Quando a taxa de atenção cai, as conversões aumentam”
� T U I T E E S S A C I TA Ç Ã O
18
ESTUDO DE CASO - REMOVENDO A BARRA
DE NAVEGAÇÃO DA PÁGINA.
Em um estudo de caso da VWO blog, uma homepage com navegação foi
testada contra uma landing page sem navegação. A taxa de atenção caiu de
15:1 para 3:1 e o resultado foi de um aumento de 100% nas conversões.
(A)
(B)
 100%
19
EXCEÇÕES PARA UMA
TAXA DE ATENÇÃO DE 1:1
Uma pergunta comum quando se discute taxa de atenção é se há exceções,
casos em que há benefícios em uma taxa mais alta. A resposta é sim. Existem
duas exceções.
1. Múltiplos links/botões com o mesmo objetivo
Em landing pages longas, você deve repetir em seu CTA ao longo da página,
para que a ação possa ser solicitada conforme os diferentes conteúdos são
lidos. Você pode até mesmo utilizar um CTA diferente em cada botão para
descobrir se isso encoraja o clique. Não há problemas em fazer isso, desde que
cada botão tenha exatamente o mesmo objetivo na campanha.
Abaixo, no exemplo do meu Curso de Conversão em Landing Pages:
OS
UL
ÍT
AP
LINK NOS C
20
A primeira página tem uma taxa de atenção de 1:1. Ao colocar link em cada
título dos capítulos do curso, a variante teste aumentou a taxa de atenção 12:1.
Enquanto mantendo um único objetivo de levar as pessoas ao curso. A nova
versão desempenhou 15% melhor do que a versão original, como mostrado
nos resultados dos testes abaixo.
2. Ao utilizar links âncoras em sua navegação
Considere a landing page abaixo da Call to Action Conference:
Perceba que há uma barra de navegação no topo da página com seis links
(uma taxa de atenção de 7:1?) Com certeza isso deve quebrar o principio
da Taxa de Atenção, certo? Não neste caso, porque cada link simplesmente
desliza a página para baixo para a respectiva seção da página. Eles não são
”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 circunstâncias. Caso façamos uma decisão bem-
sucedida, sentimo-nos bem sobre quão inteligente somos. Ao reduzir as
opções disponíveis a uma, nós removemos a oportunidade desta dose de
satisfação.
Para equilibrar este dilema, um link secundário pode ser colocado próximo
ao seu CTA. A idéia é, ao colocar uma opção que as pessoas não querem
tomar, elas estarão mais inclinadas a escolher a outra opção do que se não
existisse opção de escolha.
Claro como a lama?
Observe este exemplo do blog Wheel of Persuasion de Bart Schutz’s.

Eu amo a citação (não atribuída) de abertura:
“Uma opção não é realmente uma opção”
Uma Escolha de Hobson é uma escolha com uma opção que você escolhe
ou não fazer. Portanto, se você oferece a um cliente um produto, ele tem
uma escolha de Hobson: “comprar ou não comprar”.
Esta é, por definição, uma situação que apresenta uma taxa de atenção de
1:1. Bart explica desta maneira:
Quando você oferece uma escolha de Hobson, como ‘compre o produto X’,
o cérebro irá utilizar sua energia mental para escolher entre as opções de a)
comprar o produto e b) não comprar o produto.
Mas quando você oferece uma escolha de Hobson +1 como ‘compre o produto X
- ou - tuite isso’, o cérebro utilizará sua escassa energia mental para a) comprar
o produto, b) tuite sobre isso, e ...c) não fazer absolutamente nada. Ao lidar com
a terceira opção, a energia cerebral estará mais escassa do que em uma escolha
de Hobson: “compre ou não compre”.
Portanto, aumentam as chances de que o cérebro siga na direção de comprar o

produto (já que tuitar sobre ele não é realmente uma opção).
22
No entanto, assim como em todo exemplo de estudo de caso — conhecido
também como a praga do estudo de caso ou a maldição da melhor prática
— essa tática não deve ser cegamente implementada sem ser testada para
descobrir se é relevante para o seu cliente.
Eu fiquei fascinado por este conceito, então tentei testar por mim mesmo.
Para a escolha +1, minha escolha de “coisa que você não vai querer fazer” é
um pedido agressivo para iniciar um período de teste de um software – um
comprometimento muito maior do que um curso gratuito.
23
-14% das pessoas começaram o curso
Ao adicionar este link, a taxa de atenção é dobrada para 2:1.
Claramente, caso eu tivesse sucumbido à maldição do estudo de caso e

simplesmente implementado a tática de Bart, eu teria causado um impacto
sério no desempenho do meu curso.
As lições aprendidas aqui são:
a) Você deve sempre testar suas hipóteses e
b) Nesse caso, aumentar a taxa de atenção teve um impacto negativo na taxa

de conversão da minha landing page.
24
PARE DE ENVIAR
TRÁFEGO DE CAMPANHA
PARA SUA HOMEPAGE
Caso ainda esteja enviando tráfego prontos

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

experiência de landing page dedicada para
cada campanha de marketing, com taxa de
atenção sempre 1:1 independentemente se
seu tráfego 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

móveis utilizando templates responsivos ou
começando do zero.
• Substituir dinamicamente o texto de suas

landing pages para combinar com o dos
seus anúncios.
EXPERIMENTE A UNBOUNCE
GRÁTIS 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 atenção é o inimigo, então o Design Direcionado para Atenção é
o herói de nossa história, batalhando contra um mar de objetos brilhantes.
Design direcionado para atenção é uma aderência disciplinada aos princípios

do design em uma tentativa de reduzir a complexidade visual e aprimorar a
facilidade de compreensão.
Há muitas, muitas maneiras de se alcançar a simplicidade visual. O problema é

que uma decisão de design positiva pode ser facilmente desfeita por uma que
seja má implementada.
Nesta seção discutirei com vocês nada menos do que 23 princípios visuais
de design. “Minha nossa, cara! Agora *você está* dando muitas opções para
*nós*!” Faz sentido. Felizmente, *eu* mesmo fiz essa afirmação, portanto, irei
ignorá-la e ficarei feliz por aprender algo incrível (aprender novamente no meu
caso, pois eu já sabia disso senão não estaria escrevendo).
^^ Tá, estou me gabando. Bom, que princípio é esse?
Cada um desses 23 princípios pode nos ensinar algo sobre como abordar e
comunicar nossas mensagens visualmente.
Sem uma ordem em particular...
27
1. DIREÇÃO
Assim como um diretor de filme habilmente nos guia através de uma experiência
de cinema, o princípio da direção pode ser usado para orientar os nossos
curiosos visitantes ao objetivo final de nossas landing pages. É provavelmente
o menos sutil de todos os 23 princípios, por isso, se direcionamento é sua
franqueza, não vai machucar colocar uma seta para mostrar o óbvio.
Existem muitos exemplos de direção no mundo real:


28
• As linhas coloridas no chão da área de emergência de um hospital, as
quais você deve seguir caso esteja atordoado por uma concussão ou
sangrando muito.
• A seta “você está aqui” no mapa de um aeroporto. Quando você passa

pela segurança, você precisa saber onde está em relação ao portão 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 saída de um estacionamento.
• A sinalização esclarece por

onde cada um deve ir:
Apesar da obviedade das dicas

direcionais, ainda me espanta o
quanto isso não parece óbvio na
prática (tanto online quanto na
vida real).
29
2. MOVIMENTO
Embora possa deixá-lo enjoado ou não, a percepção de movimento é uma
de nossas qualidades reativas mais primitivas, criada para permitir que
evitássemos os ataques de feras terríveis.
Como uma técnica de landing page, o movimento foi rapidamente adotado

como tática para atrair a atenção a certos elementos conforme a página é
carregada ou deslizada.
Infelizmente, na atualidade isso está sendo implementado por um bando

de designers egocêntricos cujo maior desafio é conseguir adicionar o maior
número possível de modinhas em sua página.
O movimento tem um lugar importante em nosso arsenal de design e,

como tal, são necessários muitos testes para determinar a melhor maneira
de usálo.
30
3. RECONHECIMENTO
Aqui está a explicação de Steve Krug sobre esse princípio em seu livro “Don’t
Make Me Think” (Não me faça pensar):
“Reconhecimento (em inglês affordance) são dicas visuais no design de

um objeto que sugerem como ele pode ser usado. Por exemplo, o estilo
tridimensional de alguns botões evidencia que devem ser clicados.”
E aqui está um diagrama que ilustra essa afirmação (adaptado a partir do

exemplo de Steve):
BOTÃO CTA BOTÃO CTA BOTÃO CTA BOTÃO CTA
Forte Baixo
reconhecimento reconhecimento
Como você pode ver, o primeiro botão tem uma sombra que cria um efeito
3D. O segundo é redondo e achatado, fazendo com que ainda se pareça com
um botão. O terceiro exemplo se parece mais com uma caixa (o atualmente
onipresente “botão fantasma”) e o quarto exemplo é apenas um texto que não
parece “clicável” de maneira alguma.
A proximidade tem um papel importante na compreensão desse princípio.

Caso os links ou botões fantasma estejam localizados no topo da página, a
proximidade lhes dá um reconhecimento implícito.
Uma ausência de reconhecimento pode ser vista em formulários em que o

design almeja a criação de um tratamento mais suave, como no exemplo a
seguir:
31
Como você pode ver (ou não), os campos do formulário são elementos
simplesmente sublinhados que se misturam ao fundo. A falta de um contorno
completo implica que você pode nem mesmo notar que é um formulário,
pensar que é uma simples página de geração de cliques (esta foi minha
primeira reação) e descobrir que é um formulário apenas quando clicar na
chamada para ação e receber uma mensagem de erro.
32
4. CONTRASTE
O botão vermelho funcionou melhor que o verde! Incrível! Que ideia genial.
Béééééééééé... << imagine o som de uma buzina bem alto.
Isso não é uma ideia genial. É um exemplo do fenômeno da maldição dos

estudos de caso (que já mencionei antes).
O simples fato de que a mudança de cor do botão funcionou para outra

pessoa é interessante na melhor das hipóteses, e na pior, muito, muito
perigoso nas mãos dos que são facilmente influenciáveis (vamos chamá-
los de gerência).
Esse “aprendizado” não é apenas intransferível, ele é completamente

impreciso e fundamentalmente falho.
A razão pela qual a mudança da cor do botão foi positiva no experimento

é a criação de um contraste forte entre o botão e o seu ambiente. É isso.
Simples assim. Não foi uma reação emocional, foi uma reação baseada
em uma porcentagem de chance do botão ser percebido em meio a uma
página que engolia o botão original.
Veja o diagrama abaixo. A página tem um tom azul dominante (porque

todo elemento é azul, genial #falandocomigomesmo). Caso o círculo
laranja fosse da cor azul, ele se destacaria? Não, é claro que não.
33
E é por isso que o botão laranja venceu a competição.
Também é importante notar que 8% dos homens são daltônicos, motivo pelo
qual o contraste da cor em relação ao resto da página se torna mais importante
do que a própria cor.
34
5. TABULAÇÃO
Este é um princípio bastante conhecido pela maioria das pessoas
familiarizada com formatação de listas de tópicos em documentos. No
entanto, é importante discuti-lo, especialmente caso uma longa lista de
benefícios e recursos seja apresentada em sua página.
Você pode adicionar um pouco de clareza, reduzir o tempo de compreensão

e aplicar ênfase através da interrupção e adição de hierarquias por meio de
recuos. Isso também aprimora o relacionamento entre diferentes pontos.
O efeito de proximidade surge aqui novamente para mostrar que esses
elementos são relacionados e subordinados a um elemento mestre.
É mais fácil visualizar uma lista com recuo e parar para se aprofundar no
assunto quando necessário.
35
6. DESTAQUE
Correspondências de vendas. Marcações em amarelo. Coisas bem brega,
mas feitas por um motivo. Elas funcionam. A Sharpie estaria falida caso não
funcionasse. No entanto, não servem para todos.
Destaque é um exemplo de atenção seletiva, desenvolvida por

Robert Solso como um exercício em que os leitores eram capazes de
eliminar ou ignorar o texto circundante e se focar apenas nas palavras
“destacadas”.
Em termos de implementação 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 eficácia, é 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 invés de tanto negrito, poderia ser utilizado um pouco de tabulação
(nesting) para agrupar os tópicos relacionados, a leitura se tornaria muito
mais fácil.
“Se você usou negrito em mais de

10% do seu texto na sua landing page,
você não está enfatizando nada”
37
7. ESPAÇO NEGATIVO
Lembram-se do Horror Vacui? Ele é a antítese absoluta do conceito de espaço
em branco ou espaço negativo, ou caso você queira ser mais específico estou
falando daquele fundo amarelo de seu website.
O espaço em branco permite que os elementos de sua página 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 atenção para 1:1 quase
sempre cria espaços extras que são suficientes para tornar seu design
mais suave. Imagine sua homepage, agora imagine-a com apenas
um link (sem mudar mais nada).
Caso queira atrair atenção para algo, você pode adicionar espaço em branco
ao redor. A reação natural a isso é: “Por que há apenas aquilo naquela parte da
página? 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 seção é separada

por uma área significativa de espaço
negativo (neste caso, espaço vazio).
O espaço permite que você isole

cada unidade de forma distinta, para
ser consumida separadamente das
outras.
Além disso, veja como cada seção tem

sua própria informação e hierarquia
visual. Como se fosse uma landing
page sobre si mesma com a presença
dos elementos essenciais: um
título/subtítulo, imagem, recursos/
benefícios e uma chamada para ação.
Muito bom.
39
8. ANOMALIA
Se você tem um palestrante importante em sua conferência, deve colocá-lo
no topo da lista para que tenha maior impacto? Talvez. Porém, há um método
alternativo que pode ser ainda mais impactante. Considere o quadrado no
campo de círculos abaixo. A beleza está em sua diferença, ele imediatamente
cria um poder de centralização que leva seu olhar até o meio do arranjo.
Tudo porque você pintou o palestrante importante como um quadrado.
40
9. PROXIMIDADE
Elementos que estão próximos uns dos outros são percebidos como mais
relacionados do que elementos que estão longe um do outro. Isso faz sentido
e deixa mais clara a importância que a proximidade tem como influenciador
positivo ou negativo de conversão ao redor do CTA.
Considere o exemplo abaixo.

Caso minha foto e mensagem
estivessem em outro lugar da
página, se relacionariam ao
contexto e não ao CTA. No entanto,
posicioná-la diretamente abaixo
do CTA aumenta a chance de que
alguém faça a leitura no momento
em que está considerando clicar no
botão.
41
Quando foi testada, essa variante da página perdeu por 14% para uma página
que não apresentava este adendo ao CTA. Um exemplo real de métrica 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 atenção o impacto que
um elemento tem em seus elementos vizinhos.
Outro exemplo são os gráficos com legenda. Quanto mais próxima a legenda
estiver do gráfico (sobreposição é uma boa escolha) mais fácil será atribuir os
significados aos diferentes elementos apresentados no gráfico. Quando não
estão próximos, o esforço adicional para direcionamento dos olhos faz com
que a interpretação exija um esforço maior de nossas reservas cognitivas.
42
POSICIONAMENTO ERRADO DO CTA
No exemplo abaixo, a chamada para ação é apresentada em uma barra lateral.
Ela parece com um anúncio em um banner, o que pode levar as pessoas a
ignorá-la. Não há CTA nessa postagem de blog, o que leva o visitante a acreditar
que ela possa não existir (um erro) ou que os links/conteúdos relacionados no
fim da postagem são o CTA, os quais não são.
O local mais apropriado para a barra lateral seria em uma posição mais
próxima, dentro ou no fim da postagem. Um link de teste também deveria
estar presente dentro do texto da postagem do blog, utilizando contraste para
destacá-lo.
Perceba que existem duas formas para esta página. Caso já tenha acessado o
Marketo antes, você visualizará essa versão sem barreiras (sem formulário).
Esta é a versão difícil de interpretar. Outra tática de aprimoramento é a
utilização de contraste no CTA. Azul no azul não é uma boa ideia.
43
Caso não tenha fornecido seu email para o Marketo antes, você receberá uma
versão com barreira (formulário de geração de lead) que é um pouco melhor,
pois nela o formulário se destaca:
44
10. DISTRAÇÃO
Esta é fácil. 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 atenção..
Você sabe em qual clicaria? Achei que não. Olha a Taxa de Atenção aí
gente!
Distração é análoga ao prejuízo criado por uma alta taxa de atenção. Caso
haja muita coisa acontecendo em sua página, as chances de seu visitante
ver o que você quer que ele veja são diminuídas em proporção direta a
quantidade de distrações.
Considere o exemplo simples abaixo, nele a remoção da barra de navegação

gerou um aumento de 105% na taxa de cliques.
45
(A)
(B)
 105%
46
REMOVENDO BOTÕES DE
COMPARTILHAMENTO SOCIAL.
Outro exemplo. Aqui os botões de compartilhamento social oferecem
interações adicionais e removê-los aumentou a conversão em 11,9%.
(A)
(B)
 11.9%
47
Agora, há duas razões pelas quais isso pode ter ocorrido.
1. As distrações fazem com que a página fique aglomerada.
2. A prova social negativa de poucos compartilhamentos sociais agiu como

uma interferência.
Uma lição importante aqui é que independentemente da razão do impacto,

reduzir a taxa de atenção e minimizar distrações levou a resultados incríveis.
48
11. INTERRUPÇÃO
O marketing de interrupção tem uma má reputação, como supostamente
deveria. Mas não é disso que estou falando. O design de interrupção 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 tópicos. 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 máximo de três tópicos que resumam
o propósito e o benefício de comprar um item, enquanto um comprador
metódico precisa averiguar todos os detalhes.
Há três pontos principais que são relevantes quando alguém lê sua lista
de tópicos.
1. O primeiro tópico é o item com mais chances de ser lembrado nos

momentos subsequentes à leitura.
2. O efeito de recência: O último tópico é o primeiro a ser lembrado em um

curto período após a leitura. No entanto, não demora muito para que o
efeito da primazia assuma o controle e recoloque o primeiro item como
dominante.
49
3. O efeito de interrupção: Já que decidiu destacar um item no meio da lista,
você está lhe dando uma dominância ainda maior que o primeiro e o último.
Considere a lista de tópicos abaixo como um exemplo:
• Esta é a primeira e mais importante característica do produto
• Lorem ipsum outro conteúdo para preencher a lista de tópicos
üü A ênfase de interrupção foi aplicada a este elemento
• Este é o último elemento na lista, tem grande valor em virtude de ser

o argumento de conclusão e por ser apresentado visualmente com um
ponto final.
À primeira vista, essa longa lista de tópicos tem apenas três elementos
dominantes e, portanto, importantes.
Você também pode interromper as linhas de sua interface ou design para criar
uma quebra que traga a atenção, como no exemplo a seguir da Fast Company.
Aqui a interrupção da grade torna a leitura mais tranquila, ao mesmo tempo
em que fornece o descanso necessário já que apresenta parágrafos longos
de texto.
50
12. DOMINÂNCIA
Há uma diferença sutil, mas importante entre os princípios de tamanho
e dominância. Tamanho influi na dominância, mas precisa ser combinado
com proximidade para realmente estabelecer uma relação significante com
outro elemento.
Um uso comum de Dominância é a representação visual de botões de

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

para adicionar clareza ao propósito dos botões.
Finalmente, no terceiro exemplo, a interação com o “<< anterior” é

apresentada como um simples link menos importante que o botão
“próximo >>” de progresso. Isso cria uma hierarquia visual a partir do uso
de Dominância.
51
O seguinte exemplo utiliza Dominância, Contraste e Proximidade para criar
uma experiência mais eficaz, o resultado foi um aumento de 31% na taxa
de cliques.
(A)
(B)
 31%
52
13. CONSISTÊNCIA
Consistência pode colocar ordem ao caos. Observe o diagrama abaixo por
cinco segundos.
Não leva muito tempo para que seu cérebro separe os quadrados dos
círculos. Agora, imagine que não há nenhuma correlação entre os objetos
similares. Os círculos não se relacionam com outros círculos e os quadrados
não tem ideia do que os outros quadrados estão fazendo. Caos completo.
Entretanto, se cada quadrado representa a mesma coisa e todos os

círculos significam a mesma coisa, o caos se torna ordem. Esse é o poder
da consistência.
Consistência é uma parte essencial do branding.
Quando definimos e ampliamos o que é familiar, nós aumentamos a

compreensão e o contexto. Toda vez que a {empresa x} faz/diz/expressa
A, há semelhanças com a última vez que fez/disse/expressou A.
A consistência reduz o tempo de compreensão e o impacto do design

sobre a carga cognitiva.
53
14. REPETIÇÃO
Aliteração é uma das minhas técnicas de escrita favoritas. A repetição de
consoantes fricativas ou rimas ou batidas é magnético. A maneira mais fácil
de explicar o que estou querendo dizer é ouvir 10 segundos da música “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 atenção conforme ela canta com o coro depois de 0:42.
Aí estão dois exemplos de aliteração.
A primeira é a repetição das palavras “never ever ever”, no qual a

ênfase é no som de “ever”, mas o exemplo mais forte é a próxima 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.”
Ouça e vai entender o que quero dizer. Ela cria um elemento focal muito forte
na música a partir da repetição 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 repetição pode ajudar a atrair atenção para elementos e textos

importante da landing page. Pergunte para a Taylor Swift.”
54
O exemplo mais óbvio de repetição em uma landing page é um grupo de
tópicos. Isso é fácil, e se utilizar as técnicas de interrupção com tabulação e
agrupamento (explorados abaixo), você as tornará eficazes.
Afastaremos um pouco e olharemos para isso num nível macro. Pense em

uma landing page longa que apresenta três listas de tópicos ao longo da
página. Repentinamente, enquanto olha para a imagem como um todo,
esses três elementos ficam mais nítidos assim que percebe o padrão
apresentado na página.
Se estiver fortemente conectada a sua consistência, a repetição pode

trazer sentimentos de familiaridade para seu design e ajudar a garantir a
compreensão e coesão da marca.
55
15. SIMETRIA
Simetria é fortemente correlacionada a beleza. Percebemos características
simétricas como sendo mais atrativas – talvez porque permitam que
nosso olhar relaxe, tirando a necessidade de interpolar as diferenças na
construção facial.
A Apple aproveita desse princípio na página de produto do MacBook:
56
16. SOBREPOSIÇÃO
Extremamente relacionada ao conceito de proximidade, a sobreposição
pode ser utilizada para conectar um elemento a outro. Em termos de
marketing, este é o uso mais comum de informações relacionadas a preços
(como balões de preços em forma de explosão) e destaque gráfico (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 sobreposição permite que você saiba que esta é

uma anotação e não 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 comunicação não seria tão clara.
57
O benefício desta técnica é 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 atualizações visíveis que

ele envia para chamar a atenção. Os aplicativos que precisam de atualização
se destacam em relação aos outros aplicativos através da sobreposição de
alerta numérico, 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á razões para que interfaces gráficas, 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 página tivesse cinco pixels removidos
do seguinte (em termos de seu alinhamento superior, esquerdo ou direito),
a experiência se tornaria caótica rapidamente.
Alinhamento é a maneira mais simples e rápida de organizar um design

abarrotado, adicionando clareza visual e aumentando a sensação de bem-
estar. Pode parecer um pouco com papo de yoga, mas é verdade. Quando
contrapus um design bagunçado com um organizado, eu vi e senti uma
reação visceral em ambas as extremidades do espectro.
59
18. CONTINUAÇÃO
Uma boa narração e uma comunicação eficaz de marketing dependem de
sequência. Dizer as coisas certas, na ordem certa.
Esta é a essência da hierarquia de informações, ela pode ser profundamente

auxiliada por dicas visuais.
Observando a landing page abaixo, não há dúvidas sobre a ordem com a qual
seu conteúdo deve ser consumido. Mas, caso as dicas direcionais fossem
removidas em algum momento, a ordem ficaria aberta a interpretação, por
isso a continuação é tão importante. Ela é persistente.
“ Suas landing pages dizem as coisas certas na ordem certa?

Dicas visuais podem ajudar na hierarquia das informações. ”
60
61
19. TAMANHO
Afirmação simples: quanto maior for algo, mais facilmente será percebido.
Tamanho é relacionado a dominância, mas a diferença é que o tamanho

é relativo a tudo que está presente na página ou seção, como oposto aos
elementos mais próximos. Desta maneira, a maior coisa na página pode ser
percebida como a mais importante.
Neste template de landing page que criamos com nossos amigos na Wistia,
a atenção está claramente sendo direcionada para o vídeo de demonstração
do produto, que domina a página:
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 não quero descer.
#inception
A perspectiva visual tem um aspecto temporal

sobre ela. Ao delinear a distância, você implica a
viagem de um fundo distante para um primeiro
plano presente.
É uma maneira excelente de criar uma ambientação enquanto aplica dominância

ao herói de sua cena. Essencialmente, perspectiva é um diferenciador. Ela
separa a frente e a parte de trás 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 adesões para
uma academia, a perspectiva é utilizada junto com uma dica direcional humana
para dirigir a atenção ao CTA. Espero que não esteja me alongando demais. <<
Percebeu o que eu fiz? :P
64
21. AGRUPAMENTO
Relacionado à consistência e proximidade, o agrupamento se refere a criação
de simplicidade através da reunião de elementos parecidos – reunindo
elementos similares para reduzir a carga cognitiva.
Eles podem ser elementos que possuem a mesma intenção, objetivos de

comunicação relacionados, ou elementos que são representados da mesma
forma visualmente.
Este é um exemplo de como você pode agrupar conteúdo, de acordo com

seu relacionamento informacional:
Ao separar a descrição dos detalhes numéricos, é mais fácil focar em uma

tarefa de cada vez. Leia sobre o produto, então compre o produto.
65
22. ENCAPSULAMENTO
Este é um princípio de amarração? Talvez. Ou você pode pensar nele
como o elástico que mantém junto um grupo de aspargos. Seja como for,
encapsulamento fornece separação instantânea e isolamento de um grupo
de elementos dos seus conterrâneos ao redor. Quando utilizado em um
grupo de múltiplos elementos, como mostrado neste diagrama, ele funciona
como uma proteção, tal como um círculo de camponeses protegendo suas
crianças da multidão furiosa de malfeitores que se aproxima.
Sim, estou sendo muito dramático. Mas tente olhar para a figura por alguns
segundos, talvez entenda o que estou dizendo. #imaginação
Quando falamos de elementos de uma landing page, o encapsulamento

cria uma sensação de importância imediata. Você sabe que a área foi
envelopada por algum motivo e aceita seu convite visual.
Vamos voltar ao exemplo de comércio digital citado em algumas páginas

atrás. Como parte de um teste de ecommerce as informações díspares
foram agrupadas e reunidas em uma caixa restritiva:
66
(A)
(B)
Isso produziu uma boa separação visual entre a descrição do produto e os

detalhes mais importante que você precisa saber para tomar uma decisão
baseado na sua vontade de comprar.
Ele demonstra um bom uso de três princípios: Encapsulamento,

Agrupamento e Proximidade. Em primeiro lugar, o agrupamento é
utilizado para estabelecer um relacionamento entre as informações de
disponibilidade, preço, nota, quantidade e assim por diante. Então, 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 princípio final obtém sua importância não apenas por gerar atenção,
mas por criar um ponto – ou um momento – de interesse. Observe a figura
abaixo, você verá que apesar da presença de outros objetos, sua atenção é
levada ao ponto de contato entre o círculo e o retângulo.
Há um poder significativo criado neste momento devido a sugestão de um

impacto e de uma união 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 princípios. Com um
lembrete de que é importante utilizarmos o design para atrair atenção não
apenas para o preço de nossos produtos e para o tão importante CTA, mas
também para os momentos que possuem o poder de impactar a experiência
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, paixão esta
provinda do seu desdém (saudável) por profissionais de
marketing que enviam tráfego de campanha para homepages.
Palestrante e escritor ele fala internacionalmente sobre as
quatro bases da conversão: a intersecção de texto, design,
interação e psicologia.
Ele criou este novo eBook sobre Design Direcionado para

Atenção a fim de preencher um vazio sobre o papel do design
na conversão.
� @oligardner
✉ oli@unbounce.com
🔗 unbounce.com/br
O Oli está em uma missão para ajudar profissionais de

marketing a combinar dados e design para que criem
experiências de marketing bonitas e de alta conversão.
70
PRONTO PARA
FAZER SEU
DESIGN?
Como vimos nos estudos de caso do
capítulo anterior, é comum combinar
uma série de princípios de Design
Direcionado para Atenção de maneira a
criar uma experiência que obtenha mais
conversões.
Essas combinações são realmente a

chave para implementar um Design
Direcionado para Atenção. Quando você
combina Proximidade com Dominância,
Contraste e Encapsulamento (ou
qualquer outra de um número infinito
de combinações), você está no caminho
para o sucesso.
O design não deve se focar apenas no

embelezamento, ele deve obedecer seus
princípios 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 atenção cheio de bons
princípios.
FAÇA SEU DESIGN NA UNBOUNCE

GRÁTIS POR 30 DIAS

Ebook Design Direcionado para Atencao ADD

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

Ebook Design Direcionado para Atencao ADD

Enviado por

Direitos autorais:

Formatos disponíveis

DESIGN

• Geração de Lead • Saúde e Bem-Estar • Viagens e Turismo

• eBooks e Webinars • Varejo e Comércio Eletrônico • Produtos SaaS

• Agências e Consultorias • Imobiliárias • Aplicativos Móveis

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

Estudo de caso - Removendo a barra de navegação da página 19

Exceções para uma Taxa de Atenção de 1:1 20

Efeito da Escolha de Hobson +1 22

• Crie Landing Pages e formulários para geração de Leads

• Identifique e qualifique os melhores contatos

• Faça fluxos de Automação de Marketing para enviar emails

• Envie campanhas de Email Marketing para nutrir seus Leads

• Analise suas ações de Marketing e Vendas com o Marketing BI

• Otimize suas páginas para os buscadores (SEO)

• Agende publicações nas redes sociais e acompanhe

O RD Station também integra com diversos CRMs como Salesforce

FAÇA UM TESTE GRATUITO

Q uando uma empresa pensa em investir em Marketing Digital, é

E como fazer para reverter esse cenário?

Chamamos essas páginas de Landing Page.

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

É por isso que Buzzfeed é tão bem-sucedido.

Quando falamos de marketing, há três aspectos da atenção nos quais

Horror Vacui significa em latim: o medo de espaços vazios. Ele desenvolve um

O SINAL ENFRENTOU O RUÍDO, E VOCÊ

ATENÇÃO É UM RECURSO MENTAL LIMITADO

CARGA COGNITIVA E TOMADA DE DECISÃO

Foi mostrado através de experimentos que as pessoas têm uma quantidade

O presidente Obama sabe disso e desenvolveu métodos para reduzir

Também foram observadas consequências da fadiga de decisão em

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

Atenção obtida. Parabéns!

Não é esse o foco deste eBook.

Entendeu? É isso que está acontecendo >> Você está experimentando um

“Aaah, pare de me fazer pensar!” – Todos os neurônios gritam em uníssono.

O que é taxa de atenção? Você pergunta. Boa pergunta, meu amigo.

Taxa de Atenção é a taxa do número de coisas que você pode fazer em

E qual é o problema de clicarem em outra promoção? Certamente, foi

Sendo assim, removemos esses links da variante B.

A taxa de atenção dos testes é 10:1 contra 1:1. O resultado?

A variante B resultou em 31% downloads a mais.

“Quando a taxa de atenção cai, as conversões aumentam”

1. Múltiplos links/botões com o mesmo objetivo

Abaixo, no exemplo do meu Curso de Conversão em Landing Pages:

2. Ao utilizar links âncoras em sua navegação

Considere a landing page abaixo da Call to Action Conference:

Claro como a lama?

Observe este exemplo do blog Wheel of Persuasion de Bart Schutz’s.

“Uma opção não é realmente uma opção”

Portanto, aumentam as chances de que o cérebro siga na direção de comprar o

Ao adicionar este link, a taxa de atenção é dobrada para 2:1.

Claramente, caso eu tivesse sucumbido à maldição do estudo de caso e

As lições aprendidas aqui são:

a) Você deve sempre testar suas hipóteses e

b) Nesse caso, aumentar a taxa de atenção teve um impacto negativo na taxa

Caso ainda esteja enviando tráfego prontos

A Unbounce permite que você crie uma

Com a Unbounce, você pode...

• Criar, publicar e testar landing pages sem

• Otimizar suas campanhas para dispositivos

• Substituir dinamicamente o texto de suas

Design direcionado para atenção é uma aderência disciplinada aos princípios

Há muitas, muitas maneiras de se alcançar a simplicidade visual. O problema é