CATEGORIAS

Sua landing page é péssima! Veja 10 exemplos que não são…

Não leve isso para o lado pessoal, eu sequer vi sua Landing Page. Mas, suponho que ela seja péssima simplesmente porque a maioria é. Um fato triste, mas verdadeiro.

Para dar um gostinho do que está por vir, vejas as miniaturas das 10 landing pages que discutiremos nesse artigo:

Comparando landing page ao mundo real

Imagine entrar em um restaurante e se deparar com uma decoração brega, música alta, funcionários que parecem desonestos, um cardápio com 400 opções, um prêmio pendurado na parede que diz “Melhor bolo de carne de Minas Gerais, 1995” e além de tudo, o lugar está vazio. O que você faria? Eu sinceramente sairia correndo de lá.

Voltando agora para a internet…

É exatamente isso que seus visitantes farão caso seu design seja péssimo, haja vídeos rodando sem um botão para parar, nada que indique que o site é seguro, formulários com um milhão de campos para preencher e depoimentos que parecem ter sido escritos por você mesmo.

Com licença, garçom! Pode me trazer o botão de voltar, por favor?

Entããããoooooo, hoje nós faremos uma viagem até a Loja de Landing Pages de Primeira Linha para ver se conseguimos achar algo que possa inspirar o seu próximo design. Cada uma das seguintes páginas apresenta qualidades excelentes de design focado em conversão, porém infelizmente também apresentam alguns problemas.

1. WebTrends Analytics – abrindo o caminho

Vou admitir, sem rodeios, que tenho uma quedinha pelas landing pages da Webtrends.

Caso esteja buscando inspiração para design de formulários de captura, este é um bom lugar para começar.

O que eu gosto

  • A hierarquia dos elementos da página e informações estão bem estruturados e focados no básico: um logotipo, uma Imagem de Impacto que combina um título claro, uma descrição curta das razões e benefícios do produto/serviço (neste caso um webinário) e um formulário de captura de lead para coletar informações dos visitantes. E… O MAIS importante… Nada mais.
  • A chamada para ação ( o botão CTA – call to action) de formulários de geração de lead geralmente passa despercebida. Para resolver esse problema, eles colocaram uma dica direcional (flecha) no topo do formulário, a qual indica o caminho para a área de ação abaixo.

O que eu mudaria ou colocaria a teste

  • Mais proximidade entre a dica direcional e o CTA. Especificamente, eu combinaria o botão azul com o cabeçalho do formulário – ele se confunde demais com o atual fundo cinza.
  • Mudar o CTA de maneira a descrever o resultado de clicá-lo. Ele deveria dizer “Inscreva-se no Webinário” ao invés do vago “Enviar” (“Submit”). A Webtrends que me perdoe, ainda que eu a ame, esse é um erro amador que não deve ser repetido.

Site*: Webtrends

2. UPS – utilizando janelas modais para manter os visitantes na página

Mesmo com um design limpo e orientado para a conversão, muitas páginas ainda cometem o pecado capital de fornecer links externos que não fazem parte do funil de conversão. A UPS fez um bom trabalho ao evitar isso.

O que eu gosto

  • Os links “Mais” (“More”) nos oradores geram janelas de dialogo modais (utilizando o estilo Lightbox). Isso mantém os visitantes na landing page ao invés de vagarem para outra página – e para longe do seu objetivo de conversão.
  • Eles têm um vídeo. Ótimo! Vídeos são mecanismos comprovados de ampliação de conversão. Estudos da eyeviewdigital.com indicam um aumento de até 80% na conversão. Os especialistas em marketing de vídeo da Turn Here destacam um bom aumento na quantidade de conversões e dizem que um vídeo devidamente otimizado tem 53 vezes mais chances de alcançar a primeira página de busca do Google. Dica: na maioria das vezes, você pode reutilizar seus vídeos colocando-os no Youtube.

O que eu mudaria ou colocaria a teste

  • Os links na parte inferior da página ainda levam a microsites externos (clique na imagem para ver a captura de tela completa). Os Microsites fornecem uma experiência mais focada do que a página inicial: assim sendo, não é um grande problema, no entanto, seria uma melhor aposta anexá-los na janela Lightbox, assim como fizeram na biografia dos palestrantes.
  • A chamada para ação seria melhor caso apresentasse “receba avisos de webcasts futuros” ao invés do genérico e intimidador “Registre-se” (“Sign Up”). Essas palavras podem não ser intimidadoras para veteranos da internet, como você, mas não expressam benefícios ou ganhos – o que faz delas uma forma negativa de reforçar a interação.

Site*: UPS

3. O Futuro do Marketing – socialmente comprovado

Prova social, no contexto de landing pages, refere-se à ideia de que seus visitantes serão influenciados positivamente (embora possa haver aspectos negativos) ao mostrar evidências da participação de outros no uso de seu produto ou serviço. Isso pode ser apresentado através de contadores que demonstram seus seguidores nas redes sociais (Twitter, Facebook, etc.) e testemunhos que descrevem a reação emocional dos consumidores do mundo real à sua oferta.

O que eu gosto

  • A prova social é perfeitamente utilizada aqui. Ao invés de mostraras pessoas que acompanham ou se inscreveram para a conferência, são apresentadas fotos enormes de um grande número de personagens famosos na indústria do marketing. Aprovações criam credibilidade, que leva a conversões. Mesmo que não saibam quem é o organizador (ThoughtLead, neste caso), o fato de ser patrocinado pela IBM e ter oradores como Guy Kawasaki fará com que a venda aconteça por si só.
  • A chamada para ação descreve perfeitamente o que o cliente vai receber: registro gratuito. Note que essa captura de tela foi tirada depois da conferência, portanto as mensagens são relativas a uma repetição do áudio ao invés do registro da conferência em si.
  • Contraste: O CTA rosa brilhante salta contra o fundo monocromático.
  • Repetição do CTA: Em landing pages (clique na imagem para vê-la completamente), é importante repetir o CTA para lembrar aos visitantes do objetivo de sua página, caso já estejam a 10 páginas da principal. Aqui o CTA é colocado no topo, acima da dobra e no fim para aqueles que terminaram de explorar a página toda.
  • CTA secundário: No mundo social de hoje, o Marketing Boca a Boca (Word of Mouth Market, WOMM) é fundamental. Aqui eles incluíram um botão de compartilhamento do Twitter, permitindo que os visitantes compartilhem notícias sobre eles.
  • Confirmação do CTA: Uma vez que tenha completado o formulário, a oportunidade de falar para o mundo através do Twitter é apresentada novamente. Esse é um ótimo uso da área da página de agradecimento.

Site*: Future of Marketing

4. Clearvale: No Jive Talkin’ – um CTA único e sedutor

Caso estivesse dirigindo seu carro por esta estrada, você teria 2 opções: esquerda ou direita.

Nesta landing page você só tem uma opção, clicar na placa. Este é o tipo de landing page chamada “click through”. Ela também é conhecida como página de salto ou pelo nome mais bonito “página de romance” – já que o propósito da página é aumentar o nível de interesse do visitante até que ele queira conhecê-lo melhor. Sou obrigado a dar o crédito pelo termo “página de romance” a Scott Brinker .

O que eu gosto

  • Simplicidade e sedução. Fazem você querer clicar na placa por dois motivos: primeiro, porque é sua única opção e, em segundo lugar, porque o texto na placa implica um ponto de vista controverso.

O que eu mudaria ou colocaria a teste

  • Fiquei um pouco desapontado quando vi que a próxima página era um blog ao invés de uma continuação da experiência de marketing, por isso, eu faria algo mais envolvente ali. Mas não podemos negar que a taxa de cliques nesta landing page será muito alta.
  • Eu realmente não entendo a conexão do visual com o texto na placa, mas suspeito que isso seja um tipo de alusão ao desconhecimento sobre o que virá a seguir.

Site*: Clearvale

5. Groupon – um belo fluxo simplista

Temos aqui um ótimo exemplo de uma landing page guiada no Groupon.

O que eu gosto

  • Eles utilizaram segmentação de geolocalização para definir minha localização, e estão apresentando uma proposta arrojada (50% – 90% de desconto) para atiçar meu interesse.
  • É colorido e com um bom contraste na sua área de ação . A cor intensa e brilhante é atraente e torna a área de ação (formulário) muito mais clara.
  • Usabilidade. O indicador de progresso abaixo do formulário lhe permite saber que existem 3 etapas e em qual delas você está neste processo.
  • Formulários simples: Na segunda etapa (a parte geradora de lead), eles pedem apenas pelo seu endereço de e-mail, reduzindo ao mínimo a barreira para entrar.

O que eu mudaria ou colocaria a teste

  • Caso não saiba o que é o Groupon (apesar do seu tamanho, nem todo mundo conhece), não há nada que lhe informe no que você terá desconto de 50% – 90%. A imagem mostra bebidas, que pode ser o motivo pelo qual coloquei meu e-mail, mas alguns indicativos dos detalhes das ofertas também seria bom.

Site*: Groupon

6. Oprah – sorteios para gerar lead

É a Oprah. Ela é tão famosa que o produto literalmente se vende sozinho, mas nem por isso está tudo bem. Continue lendo.

O que eu gosto

  • Foco nos benefícios: Ao começar oferecendo férias como premiação, eles estão tocando diretamente no desejo das pessoas. A marca é tão poderosa, neste caso, que ela pode ser seguramente deixada no fim da página.
  • Marca: A marca Oprah é o argumento de venda, seu rosto está em tudo associado a ela e aqui ela evoca o sentimento de estar de férias para deliciar seus seguidores leais a ganhar um pedacinho do estilo de vida Oprah.
  • Sorteios são mecanismos de geração de lead muito populares, e aqui estão utilizando prêmios gratuitos como adicional para a assinatura de uma revista “sem riscos”.

O que eu mudaria ou colocaria a teste

  • Os links para política de privacidade e regras abrem novas janelas que são um pouco bagunçadas. Uma solução melhor seria usar uma lightbox modal como a da UPS, no exemplo acima.
  • Fico chateado por ter de repetir a mesma coisa diversas vezes, mas a chamada para ação em seus botões é REALMENTE IMPORTANTE. Qualquer dúvida dos visitantes sobre o que acontecerá ao clicar pode acabar gerando pequenas desconfianças. Expresse-se claramente para que as pessoas saibam o que esperar. Aqui poderiam ter utilizado um CTA de duas linhas que começaria com a seguinte frase: “participe do sorteio”, seguido pela segunda linha “e inicie sua assinatura de avaliação”.

Site*: Oprah

7. Verisign – moldando confiança

Esta landing page é focada na construção da promessa central da marca Verisign – confiança.

O que eu gosto

  • Ela conta uma história simples: Sendo uma página click through “clique para continuar”, ela fornece informações interessantes o bastante para animar os visitantes e encorajá-los a continuar pelo caminho pretendido.
  • CTA baseado em benefícios: Cada chamada para ação é baseada em benefícios reais para negócios, encorajando um clique para descobrir como a Verisign pode aumentar a confiança e qual é o efeito gerarado.

O que eu mudaria ou colocaria a teste

  • Contraste do CTA: Eu prefiro ver o CTA apresentado com mais contraste em relação ao resto da página.

Site*: Verisign

8. CameraPlus – a perfeita página longa para venda de produtos

Este é o equivalente moderno, no estilo Apple, das antigas landing pages de vendas com texto extenso. Você já deve ter visto algumas versões pouco confiáveis deste tipo de página, nas quais o escritor utiliza uma vastidão de texto ultra persuasivo para convencê-lo de que, apesar de serem um bando de zés-ninguém, eles construíram um negócio virtual que jorra dinheiro.

Ainda que pegue emprestado o conceito de página longa que lista as características até que você esteja pronto para comprar, a comparação termina aí.

Esta é uma landing page muito boa.

O que eu gosto

  • O design combina os desejos e as expectativas do comprador. O consumidor alvo já possui um iPhone, então está acostumado a ver um belo design com apps colocados em um contexto com seu uso proposto.
  • Contexto de uso: Este é um conceito IMPORTANTE. A primeira imagem do iPhone mostra um vídeo apresentando o app em uso. Isso é tudo o que você precisa para ser convencido sobre o quão legal é o app. Você pode explorar a grande lista de características abaixo para reforçar sua decisão de compra.
  • O preço e a chamada para ação para comprar o app são bem posicionadas acima da dobra, permitindo que você explore a página sabendo como interagir quando estiver pronto.
  • Endosso por celebridade: Incluir a célebre fotógrafa Lisa Bettany – que, para seu conhecimento (e fofocas), está namorando o fundador da Mashable, Pete Cashmore – é um artifício inteligente para ajudar a convencer os visitantes de que vale a pena comprar. Fotógrafos profissionais que apenas querem um app legal para seus telefones acharão isso convincente.
  • Prova de conceito: A galeria de fotos no final encerra com perfeição mostrando que você pode tirar ótimas fotos com esse app.
  • As avaliações abaixo do telefone estão destacadas em vermelho, tornando-as o aspecto visual mais importante da primeira tela. Embora eu normalmente recomende que o CTA receba esse nível de destaque, nesta página você é levado até o que costuma mudar a opção de um consumidor entre comprar ou não – o que outras pessoas dizem.

O que eu mudaria ou colocaria a teste

  • Eu realmente gostaria de fazer um teste A/B com uma versão mais curta da página, permitindo que o vídeo faça a venda ao invés de 10 páginas de conteúdo deslizante.

Site*: http://campl.us/

9. SEOmoz – escolhas com as informações necessárias para fazer uma escolha

informada

Apesar de parecer uma landing page única, na verdade esta é a página principal de preços. Eles se apropriaram de princípios de conversão de design e os aplicaram diretamente à página mais importante do site. Eu gosto muito desta abordagem. Está se tornando cada vez mais comum incluir avaliações na página de preços (por um bom motivo).

O que eu gosto

  • Confiança e Credibilidade: O símbolo da Verisign colocado ao lado do botão de compra e um agrupamento de marcas mundialmente conhecidas colocado logo abaixo ajudam a reforçar os valores do produto.
  • Título sucinto.
  • Menção sutil da contagem de consumidores: Abaixo das grandes marcas consumidoras está uma ótima adição – “e mais milhares” (“and thousands more”) – que amplia o elemento de confiança.
  • Atenção aos diferentes estilos de leitura: Existe uma boa mistura de tópicos, unida a uma descrição detalhada para aqueles que precisam de mais informações.
  • Testemunhos REAIS: As fotos parecem ter sido tiradas de perfis sociais. As fotos, pareadas ao nome e empresa, permitem que se verifique facilmente que estes são empresários reais.

O que eu mudaria ou colocaria a teste

  • Chamada para Ação: O CTA utiliza uma pequena palavra –”Experimente” (“TRY”). O que gera uma sensação de oferta de baixo compromisso. No entanto, a única menção ao elemento sem risco é a “garantia dinheiro de volta em 30 dias” (“30-day money back guarantee”) no topo da página. Isso deveria ser reafirmado no ponto de conversão (ou seja, abaixo do CTA).
  • Adoraria saber a taxa de conversão em comparação a páginas similares que têm as distrações normais de navegação global e rodapé.

Site*: SEOmoz

pricing page

10. Times Reader – demonstrando contexto de uso

Sendo um dos maiores jornais do mundo, eles claramente precisam se manter atualizados aos tempos no que se refere a marketing (tentando desesperadamente fazer um trocadilho).

Vamos dissecar a última landing page desta coleção…

O que eu gosto

  • Estilo de vida. O nível de modernização do consumo de notícias demonstrado é impressionante. Utilizando um belo Macbook Pro e um vídeo embutido, eles apresentam um excelente “contexto de uso”, e permitem que você imagine a nova experiência de leitura que estão vendendo.
  • É um ótimo vídeo que realmente demonstra o poder que este instrumento tem de contar uma história. Isso é especialmente importante, dado o produto.

O que eu mudaria ou colocaria a teste

  • Assim como na página da SEOmoz, eu gostaria de ver a mensagem de segurança (neste caso, 2 semanas gratuitas), repetida ao lado do CTA.

Assista o Vídeo

Como disse no início, não quero fazer um link de campanha aqui, para evitar a distorção dos dados apenas para propósitos editoriais. No entanto, o vídeo desta landing page está disponível livremente no Youtube, o que mencionei antes como uma ótima reutilização de conteúdo de campanha para ajudar nas classificações orgânicas.

Imagem de Amostra do You Tube

Caso você tenha outros bons exemplos de landing pages ou se tiver quaisquer dúvidas, por favor, compartilhe nos comentários.

Saudações.

— Por Oli Gardner, Adaptação de Andréa Amaral

oli-gardner3


* Nota: links são fornecidos para as páginas das marcas associadas como forma de agradecimento pela utilização das capturas de tela. Eu, normalmente, não crio links com landing pages baseadas em campanhas (a não ser que tenha pedido permissão), pois isso pode atrapalhar os dados.

Outra nota: Fonte da imagem “You Suck” (da index page do blog)

Sobre Oli Gardner
Oli Gardner é um dos co-fundadores da Unbounce. Oli já viu mais landing pages do que qualquer pessoa no mundo! Formador de opinião é também Palestrante do Conversion Centered Design. Siga o Oli no Twitter
» Mais publicações por
  • Boa tarde. Para lande pages de cursos (email marketing, linguas, etc) é necessário uma land page extensa ou uma página curta, mais suscinta e indo direto ao ponto é melhor? Tenho essa dúvida.

    • Olá Alexandre, a minha dica é sempre fazer um teste A/B, or resultados dependerão do mercado de atuação, do seu público-alvo, etc. Cubra os 5 elementos essenciais: título que chame atenção e explique sua proposta única de venda ( seu diferencial), informações sobre sua oferta ( o que seu cliente irá ganhar ao te dar o email deles por exemplo), e o mais importante seu botão CTA. Veja quantos pontos sua landing page faz usando essa lista: http://unbounce.com/br/otimizando-suas-paginas-de-conversao/50dicasmatadoras/
      Abraços,

  • Passei esse post como leitura obrigatória na aula do MBA de MKT Digital da ESAMC Campinas hoje. Muito bom!