Guia landing pages otimizadas para conversão + template grátis no Figma

Dicas de como escrever o conteúdo, CTA’s e detalhes da anatomia de uma landing page.

Laís Lara Vacco
UX Collective 🇧🇷

--

Parte de um wireframe de um site

Boas landing pages são compostas por alguns grupos principais de elementos. E é neles que vou focar neste artigo.

Isso não quer dizer que eles sejam os únicos, nem que sejam todos obrigatórios.

Essa base é uma compilação que tenho usado ao longo dos anos e o que me ajuda a ser mais eficiente na avaliação e criação de páginas que estimulam a conversão e comunicam os benefícios ao público.

A diferença entre landing page e home page

Ao lado esquerdo, o rascunho de uma home page com vários botões indicando que cada botão leva a um destino diferente. Ao lado esquerdo, o rascunho de uma landing page, com 3 botões que levam ao mesmo destino.

Landing page é diferente de home page (ou página inicial), pois cada uma tem objetivos e públicos diferentes.

A landing page é focada em levar o público a um objetivo específico, como baixar um e-book, se inscrever em um webinar ou comprar um produto. Isso não quer dizer que ela não possa ter mais de um CTA (Call to action).

Mas é importante lembrar que o CTA é um reflexo desse objetivo, e ter muito deles pode dificultar a efetividade da proposta, competindo por atenção e até mesmo tirando as pessoas do objetivo principal.

Já a página inicial (home page) é a introdução para o seu site. Ela costuma ter vários destinos, onde você convida as pessoas a explorarem o seu site, saberem quem você é, o que você oferece, quais seus valores e como entrar em contato.

Ao definir seus objetivos e estudar bem o seu público, escolha o que é ideal para o seu contexto.

Como saber o que escrever de conteúdo 📝

É importante lembrar que as pessoas chegam na sua página com diversas objeções. Converse com o seu público ou pessoas conhecedoras dele e anote as objeções que surgirem. Foque em um conteúdo que responda às objeções.

Se os visitantes não sabem o que seu produto faz, explique.

Se sabem o que faz, mas não sabem por que precisariam, então explique os benefícios.

Ou se não estão convencidos de ele que fará o que afirma fazer, então adicione provas.

No livro Making Websites Win, escrito por especialistas em CRO (Conversion Rate Optimization), eles sugerem criar uma tabela como essa abaixo, onde uma coluna foca nas objeções e, ao lado, as contra-objeções:

Tabela com duas colunas. Ao lado direito, objeção e ao lado esquerdo, contra-objeção. Nenhuma linha está preenchida.

Priorize as objeções principais pensando no seu público e no seu objetivo de negócio.

Como escrever o título

Após levantar as objeções e contra objeções, é hora de priorizar e sumarizar as mensagens.

Lembre-se:

  • Não fale como se estivesse se vangloriando. Foque nos benefícios para o seu público;
Wireframe de duas seções hero de um site. Ao lado esquerdo, escrito 'Somos a plataforma nº1 de idiomas.', com um X indicando estar errado. Ao lado direito, com um ícone indicado certo: 'Aprenda um novo idioma. De graça.'
  • Não use discursos corporativos;
  • Não use termos vagos como: rápido, inovador ou eficiente. Use números. Quanto mais específico o argumento, melhor.
Wireframe de duas seções hero de um site. Ao lado esquerdo, escrito ‘Soluções inovadores para fraudes. Entregas rápidas.’, com um X indicando estar errado. Ao lado direito, com um ícone indicado certo: ‘Detecte fraudes em menos de um minuto.’

Se pergunte:

Se as pessoas vissem somente esse texto da página, elas saberiam dizer:

  • O que você faz?
  • O que elas ganham ao escolher o seu produto/serviço?

Como escrever o CTA ('call to action' ou chamada para a ação)

  • Use palavras de ação: verbos no imperativo que indiquem claramente o que o usuário deve fazer, como “baixe”, “acesse”, “compre”, “inscreva-se”, etc.
  • Evite termos vagos ou passivos que não comunicam o destino, como “saiba mais”, “veja aqui”, “clique aqui”, etc.
  • Seja específica ao apresentar o benefício: use palavras ou expressões que mostrem ao usuário qual é o benefício ou a vantagem de realizar a ação, como “grátis”, “exclusivo”, “personalizado”, “garantido”, etc. Isso pode aumentar o valor percebido e gerar mais interesse.
  • Limite o tamanho do texto: use frases curtas e que transmitam a mensagem de forma direta. Evite frases complexas que possam confundir ou desinteressar. Uma sugestão é usar no máximo 5 palavras.

Como saber se a página está otimizada para conversão?

Uma alternativa para avaliar e ajudar na criação de conteúdo das páginas é o framework LIFT, focado em otimização de conversão.

A imagem do avião é uma metáfora para como os fatores afetam a taxa de conversão de um site ou aplicativo.

Ilustração de um avião, onde a urgência está na cauda do avião, a proposta de valor é como se fosse o motor do avião e está no meio, a distração e a ansiedade são os trens de pouso, com setas para baixo e a relevância e a clareza são impulsionadores de voo com setas para cima.
Diagrama do modelo LIFT

A ideia é que a proposta de valor seja como o motor que impulsiona o avião para frente e os outros fatores são como as asas, a cauda e o trem de pouso que ajudam a equilibrar e dirigir o avião.

Quanto mais sustentação ele tem, mais alto pode voar. Esse diagrama do Modelo LIFT é uma forma visual para lembrar e aplicar os seis fatores ao otimizar o site ou aplicativo.

Sobre os 6 fatores de conversão para avaliar as experiências:

  • Definir a proposta de valor (value proposition): determina a taxa de conversão potencial.
  • Aumentar a relevância (relevance): a página deve ser relevante aos desejos e necessidades do visitante. Responda: por que as pessoas devem comprar de você?
  • Aumentar a clareza (clarity): a página deve ser clara e objetiva na comunicação da proposta de valor e call-to-action. Responda: A página está relacionada ao que o visitante estava esperando ver?
  • Impulsionar com urgência (urgency): a página deve transmitir a sensação de que uma ação deve ser tomada imediatamente. Há algum indicativo de que uma ação deve ser tomada imediatamente?
  • Diminuir a ansiedade (anxiety): a página deve transmitir credibilidade e confiança ao visitante. Quais são as possíveis preocupações do visitante em relação à ação de conversão?
  • Diminuir a distração (distraction): elementos desnecessários na página podem afastar o visitante do objetivo de conversão. Há elementos na página que podem desviar a atenção do visitante do objetivo de conversão?

Ferramentas de Inteligência Artificial (IA) para ajudar na criação do conteúdo

Tenho utilizado o chatGPT ou o chat do Bing para me ajudar a gerar ideias de conteúdo de páginas.

Gosto de pedir pelo menos 10 sugestões e não paro nos primeiros resultados. Sigo refinando e acrescento minhas ideias, até chegar em um texto que considero bom o suficiente para testar.

Pra quem quiser investir em ferramentas de IA, testei essas e achei interessante os resultados:

  • Plugin MagiCopy do Figma. Porém, ele é limitado na versão gratuita.
  • Jasper AI é focada em criação de conteúdo. Pode ser configurada para o Português. A ferramenta é paga com 7 dias grátis de teste.
  • Tome AI ajuda a criar apresentações e projetos em formato de storytelling. Pode ser útil para a ideação do conteúdo. Possui plano gratuito.

Anatomia de uma landing page 🩻

Logo abaixo, vamos aos detalhes de cada seção.

Wireframe em preto e branco de uma landing page, com tags ao lado nomeando cada seção.

Seção Hero

Wireframe da seção hero com as tags destacando: título (headline), subtítulo, social proof

Hero é a seção do topo da página e inclui:

  • o título H1 (ou headline)
  • subtítulo (ou subheader)
  • uma imagem ou ilustração incrível, se você tiver

Pode ser interessante já incluir a prova social (ou social proof) nessa seção também, seja com o número total de usuários e/ou logos de empresas que utilizam o produto.

O Miro colocou o social proof logo abaixo do botão (CTA) principal:

Captura de tela da página inicial do Miro. Abaixo do CTA tem uma parte com logos de seus usuários e está escrito 50M usuários.

Seção: benefícios e features

Wireframe da seção de benefícios e features.

Nesta seção tente responder:

  • Por que a sua solução é melhor do que as outras que existem? Por exemplo: 80% mais rápida que XYZ.
  • Que dor você está resolvendo com ela?
  • Quais são os benefícios que você entrega?

Seção: casos de uso ou depoimentos

Wireframe da seção de casos de uso ou depoimentos, logo abaixo a outra seção de como funciona e também outra seção de Chamada à ação CTA

Além de trazer depoimentos de quem já usou o seu produto, utilize vídeos ou crie artigos de pessoas contando em mais detalhes a experiência delas.

Exemplo do Jestor:

Captura de tela da seção de casos de uso do site Jestor. Ao lado esquerdo tem um texto da fala do  head de operações de uma empresa, elogiando a plataforma. Ao lado direito da mesma seção, o vídeo com a capa da pessoa falando.

Exemplo do Asana:

Captura de tela da seção de casos de uso do site Asana. Ao lado direito tem um texto da fala da diretora  de uma empresa, elogiando a plataforma. Ao lado esquerdo da mesma seção, o vídeo com a capa dela sorrindo.

Seção: Como funciona

Tente responder nessa seção:

  • O que é o seu produto/serviço?
  • Como ele funciona?

Última chamada para a ação

Esse é o desfecho do storytelling que você criou.

Utilize essa seção para fazer um último convite do porquê a pessoa deve clicar. Não se esqueça de alinhar expectativas e usar um texto específico no CTA ou 'Chamada para a ação'. Ele deve ser objetivo e indicar o que a pessoa deve fazer em seguida.

Seção: Perguntas Frequentes

Wireframe da seção de perguntas frequentes e do rodapé

Responda as principais perguntas e objeções do seu público.

Lembre-se: como as perguntas são escritas importa, pois as pessoas frequentemente digitam perguntas em mecanismos de buscas.

Foque em perguntas do vocabulário do seu público para que facilitar que as buscas delas combinem com suas perguntas, assim seu site ganha prioridade no motor de busca do Google.

Rodapé (footer)

O importante é que o rodapé seja consistente e compreensível, pois mesmo que ele receba menos atenção que o conteúdo principal, ele ainda é utilizado pelos usuários para encontrar informações importantes ou complementares.

Teste, teste e teste 🔄

Lance uma versão que seja melhor do que a atual e siga melhorando.

Teste com o público ou pessoas que se assemelham a ele. Observe a reação delas ao usar, veja se elas identificam o principal benefício e se têm problemas.

Veja se elas conseguem responder:

  • Qual é o propósito deste site?
  • O que elas podem fazer no site?
  • Quem é o público-alvo do site?

Bônus 🎁

Captura de tela dos dois wireframes de landing pages no Figma, com pequenas anotações ao lado de cada seção da página.

Referências

Obrigada Cali (Renato Caliari) pela revisão do artigo e compartilhamento de conteúdos que me ajudaram ao longo dos anos.

--

--