Exemplos de landing page com potencial de conversão

Falo muito por aqui sobre as principais técnicas para aumentar as conversões das suas landing pages. Temos até este guia completo (e longo!) com um passo a passo bem detalhado. Mas que tal complementar esse conhecimento com exemplos de layout de landing page?

Ver como uma LP preparada para a conversão funciona ajuda a ter ideias para hipóteses de otimização. Eu digo “hipóteses” porque você nunca deve alterar uma página com base nas ideias dos concorrentes ou de outras interfaces. 

Na otimização de conversão temos a regra: o que funciona para um pode não funcionar para o outro. 

Por isso, o ideal é sempre rodar testes para saber se a hipótese de que aquilo vai funcionar é verdadeira. Se quiser saber como rodar um, acesse este guia. Ainda assim, a fim de criar essas hipóteses, você precisa ter os insights certos.

Dessa forma, preparei a lista abaixo com vários bons exemplos de layout de landing page. A escolha desses exemplos foi baseada na metodologia de análise heurística que utilizamos aqui na Supersonic, ou seja, cada página atende a um ou mais critérios determinados. Conheça a análise heurística aqui.

Vale ainda destacar que layouts de landing page são quase sempre precedidos de um wireframe, ou seja, um “rascunho” mais profissional do que se pretende criar. Já expliquei o que é wireframe e sua importância aqui, se quiser checar antes de continuar.

Com tudo isso esclarecido, vamos aos exemplos.

Título e subtítulo

O título e o subtítulo da página são, talvez, seus elementos mais importantes. Acertando essas poucas palavras, você já tem meio caminho andado na geração de leads.

Isso porque o título e o subtítulo são vistos em primeiro lugar pelo visitante. Neles, deve estar explícita a sua proposta de valor, ou seja, o que você oferece ao cliente e seu diferencial em relação aos concorrentes. Além disso, a mensagem deve ser clara e objetiva, com bom posicionamento logo na primeira aba.

Veja este exemplo:

Veja a landing page da plataforma de idiomas Duolingo. O título “Aprenda idiomas de graça. Agora e sempre” transmite a ideia de qual é o produto, o diferencial e o motivo pelo qual você deveria aderir.

Abaixo, já vemos logo um CTA que direciona para a inscrição de forma destacada. Um carrossel na parte inferior da dobra ainda mostra as línguas trabalhadas, que também fazem parte do diferencial da plataforma.

Comparação com outros produtos

Para deixar ainda mais claro o diferencial da sua oferta, é uma boa ideia compará-la com outras soluções concorrentes ou alternativas.

Veja esta página do site de imóveis Quinto Andar voltada para proprietários:

A lista apresenta de forma clara os benefícios de anunciar na plataforma em comparação com outros métodos, como imobiliárias tradicionais. Outro detalhe importante é o formulário fixo, que permite visualizar todo o conteúdo da página e ter acesso à conversão facilmente.

Há também a possibilidade de fazer comparações entre os produtos da própria empresa. Assim, você fortalece a possibilidade de upsell, alcançando maior ticket médio.

Confira esta galeria do site da Samsung:

Nessa landing page, você consegue, facilmente, comparar os produtos, suas funcionalidades e design.

CTA (call-to-action ou chamada para a ação)

Um erro frequentemente encontrado em landing pages é a falta de CTA ou, quando ele aparece, ter pouco destaque ou estar posicionado após a primeira dobra. 

Veja a página do app de correção ortográfica Grammarly. Além de um título e um subtítulo claros e diretos, o CTA está destacado, diz exatamente o que acontecerá depois de clicar e ainda há um incentivo: “é gratuito”.

CTAs levam o seu usuário a dar o próximo passo. Ao não incluí-los, você deixa o visitante perdido, sem saber o que fazer em seguida.

Ainda utilizando o exemplo do Grammarly, repare como o design possui consistência. Cores e fontes estão em harmonia, sem causar ruído ou dificuldade de leitura. Isso também ajuda a deixar o CTA reinar e se destacar.

Aprenda mais sobre o uso de CTAs, como escrevê-los e posicioná-los.

Elimine as objeções

Nem sempre título, subtítulo e CTAs em dia são suficientes para aumentar a taxa de conversão. Muitas vezes, é necessário ter algo a mais, que faça o visitante se sentir mais compelido a clicar.

Para isso, vale dizer o que está em jogo se o usuário escolher não converter. Veja esta tela da landing page do Pipedrive, ferramenta de CRM:

Em primeiro lugar, o CTA diz “comece gratuitamente”, sinalizando que você pode testar antes de comprar. Além disso, um copy embaixo diz que não é necessário fornecer dados de cartão de crédito, superando uma barreira importante desse tipo de oferta.

Informações escaneáveis

Toda vez que você abre uma página, lê tudo que está escrito nela? Provavelmente, não. É comum “escanearmos” o conteúdo, ou seja, ler títulos, compreender as informações por meio das imagens e pescar algumas frases e palavras destacadas.

Por isso, facilite esse processo para o seu visitante. Veja este exemplo de landing page da TAG, serviço de assinatura de livros:

Observe como foram utilizados vários infográficos mostrando o conteúdo das cestas mensais, os preços, o funcionamento, etc. Em poucos segundos, conseguimos compreender a proposta.

Claro, nem sempre a sua oferta será de fácil entendimento como essa. Tudo no CRO é assim: depende. Já escrevemos sobre como aumentamos em 8 vezes o tamanho de uma landing page e conseguimos 662% mais conversões. Confira aqui.

Provas sociais e de autoridade

Quando alguém que conhecemos ou com quem nos identificamos recomenda um produto ou solução, temos maior tendência de confiar na oferta. É por isso que você deve incluir esses dois tipos de elementos nas suas landing pages:

1. Provas sociais: pessoas com o mesmo problema falam sobre como a solução as ajudou;
2. Provas de autoridade: profissionais de referência na área recomendam a solução.

Veja este exemplo de landing page novamente da Quinto Andar:

Uma das principais dores de proprietários de imóveis é a demora para anunciar e conseguir locatários. Assim, uma pessoa que passou por uma experiência positiva com relação a isso diz como o processo foi ágil.

Mais exemplos de landing page

Neste artigo, você viu alguns dos elementos que mais ajudam a converter visitantes em clientes. Pudemos observar como essas técnicas são colocadas em prática e como ajudam a aumentar o potencial de conversão da página. 

Você pode conferir outros exemplos de landing pages de alta taxa de conversão na nossa página de casos de sucesso. Em todos eles, explicamos o processo de concepção dos projetos e como pensamos cada detalhe das propostas. 

Aproveite e faça o download do nosso template de landing pages. É um modelo com um wireframe básico para páginas de alta conversão.