Design de landing pages: estrutura para páginas que convertem

Um bom design de landing pages é um objetivo, argumentado por ordem. Ao contrário de uma página inicial, que serve toda a gente, uma landing page existe para um visitante que chega de um sítio para fazer uma ação: reservar a aula experimental, entrar na lista de espera, aproveitar a oferta. A estrutura que funciona vezes sem conta é um topo claro, o problema nas palavras do leitor, como funciona, prova, os detalhes da oferta, respostas às objeções e o mesmo apelo à ação no fim. O trabalho do design é tornar essa ordem fácil de seguir.

Uma página, um objetivo

Escreve o objetivo numa só frase antes de desenhares seja o que for: “Levar quem nos vê pela primeira vez num anúncio de Instagram a reservar uma aula gratuita de introdução.” Cada secção passa então a ter um teste. Isto ajuda essa pessoa a dar esse passo? Se não, corta-a ou passa-a para o site principal.

Estrutura de uma landing page, secção a secção

1. 1

   Topo

   Título com a promessa, uma linha de apoio, um botão, uma imagem. O design da secção principal trata deste ecrã em pormenor.

2. 2

   O problema

   Duas ou três frases a descrever a situação em que o visitante está, nas palavras dele. Mostra que compreendes antes de vender.

3. 3

   Como funciona

   Três passos, cada um com um título curto e uma frase. As pessoas comprometem-se mais facilmente quando conseguem imaginar o processo.

4. 4

   Prova

   Testemunhos reais com nomes, fotografias de trabalho real, logótipos de clientes reais ou uma pequena demonstração. Nunca inventados.

5. 5

   A oferta em pormenor

   O que recebem exatamente, quando, e o que custa ou não custa. Condições claras eliminam a hesitação.

6. 6

   Objeções

   Umas perguntas frequentes curtas que respondem aos motivos por que as pessoas não agem: tempo, preço, adequação, cancelamento, o que acontece a seguir.

7. 7

   Apelo final à ação

   Repete a promessa do título e o mesmo botão. Os visitantes que leram até ao fim estão prontos; não os obrigues a voltar a subir.

Nem todas as páginas precisam de todas as secções. Uma lista de espera para um lançamento pode ser apenas um topo, três linhas sobre como funciona e um campo de email. Uma oferta de grande compromisso, como um curso ou uma consulta, costuma precisar das sete e de mais prova.

Um exemplo prático: a oferta de introdução de um estúdio de ioga

Faz a página condizer com o anúncio que trouxe as pessoas

A maioria dos visitantes de uma landing page chega de algo: um anúncio de Instagram, um anúncio de LinkedIn, um email, um código QR num folheto. No momento em que aterram, verificam se estão no sítio certo. Repete no título a oferta exata do anúncio e leva o seu visual contigo: o mesmo fundo, as mesmas cores e o mesmo tipo de letra. Uma página com aspeto alheio ao anúncio parece publicidade enganosa, mesmo quando não é.

Desenhar os dois a partir de uma só origem torna isto automático. No Gradiently, um design pode ser redimensionado para todos os tamanhos num só passo com o Pro, por isso a publicação, o story, o cabeçalho do email e o topo da página partilham um Mark e um título. Um visual, todos os tamanhos mostra o fluxo de trabalho, e a coerência da marca explica porque importa para além de uma campanha.

Decisões de design que mantêm as pessoas a descer

• Uma cor de acento para todos os botões, usada em mais lado nenhum. O olho aprende onde clicar. A regra 60 30 10 é uma boa forma de acertar o equilíbrio.
• Espaço generoso entre secções, para cada uma se ler como uma ideia. As páginas apinhadas parecem trabalho pesado.
• Títulos que fazem sentido sozinhos. Muita gente só percorre os títulos; devem contar a história toda.
• Fotografias reais em vez de stock. A tua sala, produto, equipa ou resultados verdadeiros.
• Formulários curtos. Pede só o que precisas agora. É mais fácil dar um email do que um telefone.
• Sem menu de navegação, ou só um logótipo, para não haver para onde fugir.

Primeiro o telemóvel, depois o teste

O tráfego de publicações sociais chega sobretudo em telemóveis, por isso desenha primeiro a versão com 390 píxeis de largura. Mantém o título e o botão no primeiro ecrã, faz os botões com pelo menos 44 píxeis de altura e usa um botão fixo só se não tapar conteúdo.

Não existe uma boa taxa de conversão universal; depende da oferta, do preço e do tráfego. O que podes sempre fazer é tornar a próxima versão mais clara do que a anterior. Para as cores por trás de tudo, vê os esquemas de cores para sites.