9 dicas de Design infalíveis para você construir uma Landing Page eficiente

Há algum tempo atrás nós publicamos esse artigo aqui, onde te ensinamos o que é uma Landing Page e alguns de seus objetivos em uma estratégia de Inbound Marketing. A partir dele, você deve ter percebido que ela é a porta de entrada para o trabalho de conteúdo, pois por ali passam os visitantes com potencial para se tornarem leads.

Porém, para que uma conversão qualificada aconteça, é necessário que o layout da página seja tão atrativo que não tenha como resistir a preencher os dados no campo de captura e receber o material proposto.

Sendo assim, já deu para você notar que uma boa Squeeze Page (como também é chamada) é a alma do Inbound, é ali que você deve concentrar seus esforços iniciais. Há quem diga que ela não é uma página, mas sim um trabalho artístico.

De acordo com Damien Newman, antigo analista de Design da IDEO e atual CEO da consultora de transformação Central, existem 2 fases no processo de criação do designer: a que ele sabe onde a ideia vai chegar e a que ele não sabe. Ele reuniu isso em uma teoria chamada “The Squiggle” (ainda sem tradução para o Português) e que é exemplificada na imagem auto explicativa abaixo.

O Squiggle
Segundo Damien, a primeira parte se refere justamente as etapas iniciais no processo de criação de uma landing page, onde a ponta “embaralhada”, digamos assim, representa aquele momento em que você não sabe o que vai dar certo ou não.

Contudo, nessas dicas que você vai ler, eu não vou especificar ou abordar nenhum aspecto em relação ao outro; muito menos falar parte a parte da página. Vou considerar o todo, uma visão geral do design voltado a conversão, que é o que importa para suas vendas. Isso inclui o design de interfaces, design mobile, usabilidade e navegabilidade da página, assuntos que já até comentei nesse outro artigo aqui.

Vou retirar o que há de melhor e mais importante de cada ponto e misturar em uma única lista para facilitar o seu entendimento da função do bom design para uma landing page eficaz e que converta mais, principalmente. Então, prepara papel e caneta para anotar tudo e vem comigo!

As 9 dicas de Design para Landing Page

Landing Pages que convertem

Crie um título conciso e claro

Não parece ser um elemento do Design, mas um título objetivo e bem colocado traz a leveza que sua página precisa. Além disso, por ser a primeira coisa vista, é o resumo perfeito da oferta que você tem a fazer,  e direcionar o foco do visitante para ele é o primeiro item crucial para o êxito da navegação na página e entendimento do produto.

Veja nesse exemplo abaixo como o posicionamento do título é feito, atraindo a atenção de forma correta, como ilustra a seta.

Exemplo de landing page

Crie um sub título com informações extras

Isso ajuda a contextualizar as coisas, pois você pode falar mais da oferta, evidenciando um benefício que o usuário vai obter  ao baixar o seu material, seja ele qual for. Isso acaba por direcionar mais o foco para a oferta que você vai fazer depois (veja no exemplo anterior como isso foi feito).

Esconda o Menu de Navegação

Essa sacada é essencial pois muitos profissionais esquecem disso na hora de criar uma squeeze page. Ter uma barra lateral, no topo ou no rodapé da página, faz com que a pessoa distraia a atenção e torna o visual confuso e sem objetividade. Então, se você quer manter o usuário na página e “vender” o seu conteúdo para ele, retire qualquer menu de navegação da sua Squeeze.

Veja nesse caso abaixo, que apesar de ter um layout bem feito, o menu de navegação no rodapé atrapalha a visualização e polui um pouco o visual.

fluidsurveys_LPnavigationfooter

Inclua apenas imagens relevantes

Esse ponto é muito importante pois a imagem que você usar deve estar de acordo com o conteúdo que a pessoa vai receber após preencher o formulário com seus dados. Muitos artigos e profissionais por aí gostam de dizer que as imagens devem ser atraentes, mas o que isso significa se ela não tem nada a ver com a oferta? Nada.

E esse ponto não serve apenas para imagens, mas também para vídeos, que igualmente devem ser pertinentes e auxiliar no destaque a oferta. Por exemplo, se você está ofertando um e-book, coloque a capa dele em evidência. Se for um teste de alguma coisa, forneça um print do vídeo que demonstra o item.

Veja abaixo dois modelos que são considerados referências nesse quesito: um com imagem, outro com vídeo.

eureka-th-Landing Image Match

Como oferta de inscrição para revista Times, ela mostra exatamente o que vai ser obtido. Mensagem clara e objetiva.

knovio-Landing- Video

Mantenha o formulário de captura conciso

Formulários muito longos tendem a repelir o usuário, pois as pessoas no geral preservam muito os seus dados pessoais, portanto pedir muitos dados pode causar desistência no preenchimento e abandono da página. É uma briga entre qualidade e quantidade, pois quanto mais detalhes você pede, mais qualificado o lead vai ser; quanto menos detalhes, menos qualificado será o lead.

Por essa razão, especialistas dizem que tudo depende do objetivo da sua estratégia de conteúdo e o que funciona melhor para o seu negócio. No final das contas, a melhor recomendação de design para landing page é mantê-la em apenas uma coluna e alinhado com a largura da página.

Tenha botões de Call to Action que chamem atenção

A chamada para ação ou Call to Action em Inglês (CTA) é um elemento de extrema importância quando se pensa em design para landing page. Ele deve realmente atrair a atenção e ser principalmente coerente com o objetivo.

Como assim? Se a sua ideia é que a pessoa baixe um e-book ou white paper, escreva dentro dele a palavra “baixar” e assim por diante. Nada de termos gerais que não definem exatamente o que o usuário deve fazer. Ele deve ser uma identificação com a busca feita pelo visitante e interesse pelo conteúdo.

Um outro quesito é que o botão deve ser grande, bem visível e com cores que chamem atenção como o vermelho ou laranja, não tenha receio de abusar de cores fortes aqui (falarei de cores a seguir). No exemplo abaixo, você vê como deve ser um bom botão de CTA, aquele que não precisa de instruções extras sobre o que deve ser feito.

zipongo-Landing-good CTA

Pense nas cores certas

Veja aqui como as cores destacam o conteúdo.

Veja aqui como as cores destacam o conteúdo.

A cor certa vai dar o tom da sua página e consequentemente influenciar na decisão do visitante, podendo trazer mais tráfego, matar alguém de tédio, ou assustá-lo de vez e aumentar a taxa de rejeição. Você não quer isso certo?

Uma pesquisa mostra que mais de 92% das pessoas são influenciadas pela cor na decisão da compra. Com base nisso, a empresa Sherwin Williams realizou um extenso estudo em que analisou a influência da cor por gênero, idade e emoção causada (o item mais impactante).

Agora é hora de prestar atenção pois vou dar uma dica matadora sobre cores no design para landing page: Use apenas uma cor para toda squeeze page, com diversas variações para ela, com exeção do CTA, pois ele é o grande ponto de interesse do usuário.

Quer mais uma sacada? o laranja é a cor preferida e mais usada nas landing pages pois é associada com a geração de sentimentos positivos. Além disso, o azul é uma ótima cor para passar a urgência pelo clique e o verde é bom para motivar a pessoa a seguir algum comando.

Se você quiser saber mais sobre isso e manja de Inglês, leia esse artigo onde Gregory Ciotti explana a cerca da sua teoria “Piscologia das cores”. 

Faça o teste do “piscar de olhos”

Aí você me pergunta: o que vem a ser isso? Eu explico. Essa análise consiste em verificar se em apenas um piscar de olhos você consegue obter informações da página. Ao final, você deve ter sido capaz de identificar sobre o que é a squeeze, Qual é a oferta em questão, qual o valor dela para o visitante e como conquistar a oferta contida ali. Se você conseguiu tudo isso, parabéns, você conseguiu projetar uma boa interface.

Cheque se o seu layout é responsivo

Apesar de último dessa lista, esse elemento é extremamente importante no design para landing page. O que você quer é que o seu formulário e a sua página seja visualizada em qualquer aplicativo, de qualquer navegador, sem interrupções ou problemas de interação e navegação. Atualmente, os softwares e ferramentas já vem com essa capacidade instalada, mas não custa nada checar.

Veja aqui como não fazer, pois essa imagem aparece cortada quando vista em um tablet.

Veja aqui como não fazer, pois essa imagem aparece cortada quando vista em um tablet.

Em resumo

Durante esse artigo você viu que o design para landing page é composto por diversos elementos que vão além do web design, incorporando técnicas de usabilidade, navegação on page e design de interface. Portanto, essas dicas que abordei são apenas um apanhado dos muitos detalhes envolvidos no processo.

Dessa forma, espero que você tenha compreendido como o bom design é vital para uma landing page e que com essas orientações que passei você construa páginas de captura que convertam mais e destaquem o seu conteúdo.

E para terminar, vamos resumir todas as dicas dadas:

  1. Tenha um título conciso e claro
  2. Inclua um sub título detalhando sua oferta
  3. Esconda o menu de navegação para “limpar” o layout
  4. Escolha imagens relevantes
  5. Mantenha o formulário de captura em uma coluna só
  6. Insira botões de CTA que chamem atenção do usuário
  7. Fique atento as cores
  8. Faça o teste do “piscar de olhos”
  9. Verifique se o seu layout é responsivo

Agora, se esse texto gerou valor para você ou se você tem algo a acrescentar, fique a vontade para comentar abaixo e será muito bem vindo!

 

Veja também:

Case Elsevier: campanha de landing pages para aumentar a conversão

Tem Redley no portfólio Aotopo: confira nosso trabalho de desenvolvimento de landing page