• what is unbounce
  • CATEGORIAS

    36 Exemplos de Criativos Designs de Landing Pages – Uma Demonstração e Crítica de Conversão

    landing page critique

    Feliz quarta-feira! É hora de exemplos de landing pages. Hoje, como um presente especial da semana CCD, reuni uma lista de 36 designs de landing pages para criticar, a maioria é incrível, algumas precisam de um pouco de trabalho e também inclui algumas que são simplesmente péssimas (uma lição sobre o que não fazer). Cada uma terá os clássicos “do que eu gosto” e “coisas que eu mudaria ou colocaria a teste”, assim você poderá tirar algumas ideias e inspirações para a sua próxima página.

    Antes de tudo, no caso de você não ter visto o que está acontecendo, estamos no terceiro dia da semana do Conversion Centered Design (Design Centrado em Conversão), no qual a cada dia nos focamos em um princípio da Psicologia e do Design – dos quais eu falarei logo, logo. Só para relembrar, aqui está o que já foi apresentado e o que virá em seguida.

    Os 7 Princípios do Design Centrado em Conversão (CCD)

    Para relembrar os 7 princípios do CCD discutidos no e-book gratuito de segunda-feira – “The Ultimate Guide to Conversion Centered Design“, temos aqui eles divididos por Design e Psicologia. Vou me basear nessas ideias durante as críticas, a seguir.

      1. Design: Encapsulamento
        Esta é uma técnica clássica utilizada para atrair os olhos de seu visitante e criar um efeito de visão de túnel. Você pode pensar nisso como a criação de uma janela em sua landing page na qual seu CTA é a paisagem.
      2. Design: Contraste e Cor
        Alguns dizem que a cor do botão é importante, mas é uma mentira. Na verdade, é no contraste das cores que você precisa se focar. Um CTA verde pode ter um desempenho melhor que um vermelho em algumas circunstâncias, mas se a página é predominantemente verde, o botão verde ficará escondido no meio dos outros elementos da página. Se você se focar em contrastar cores, terá muito mais sucesso em fazer com que ele se destaque. No caso de uma página verde, um botão vermelho seria mais adequado.
      3. Design: Dicas Direcionais
        Chame atenção para os elementos mais importantes de sua página utilizando setas curvadas em lugares inesperados. Organize uma sequência de setas para definir um caminho para seu visitante seguir, finalizando em seu CTA.
      4. Design: Espaço em Branco
        Dê aos elementos de sua página espaço para respirar, de maneira a produzir um efeito calmante e permitir que seu CTA se destaque do resto de seu design.
      5. Psicologia: Urgência e Escassez
        Motivadores psicológicos comuns são a utilização da urgência (tempo limitado) e escassez (estoque limitado).
      6. Psicologia: Experimente Antes de Comprar
        Ao disponibilizar seu produto para avaliação antes da compra, você demonstra confiabilidade. Isso aumenta a confiança e é um fator importante para aumentar as conversões.
      7. Psicologia: Prova Social
        Prova social é criada pelas estatísticas e ações de um grupo em particular e isso pode aprimorar em muito o fator “eu também”. O maior benefício é um nível autêntico de credibilidade.

    Uma Aplicação Prática de CCD

    Para demonstrar como você pode aplicar os conceitos de CCD a uma landing page, mostrarei um exemplo de template antes e depois. O propósito deste template, em particular, é facilitar o download de um e-book em troca dos clássicos nome e e-mail.

    Nota: Este template está disponível para uso dentro da seleção de templates para landing page da plataforma de landing pages da Unbounce.

    O Template antes do Tratamento de CCD

    landing page template
    Template de uma landing page de um e-book sem aplicação dos conceitos de CCD.

    O Template Depois do Tratamento de CCD

    landing page template conversion centered design
    Template de uma landing page de um e-book com os conceitos de CCD aplicados.

    36 Exemplos de Landing Pages Criticados em Relação à Conversão

    Está animado para ver alguns ótimos exemplos? Deveria estar, são 36 deles. A maioria é de clientes da Unbounce, mas eu coloquei alguns assustadores também, apenas para variar, e te assustar para que você torne suas páginas melhores.

    Eu tenho certeza de que essa não é sua primeira experiência com landing pages, então se segure, coloque suas ideias de design no lugar e venha comigo por uma viagem pelo mundo das landing pages.

    E que comecem as críticas…

    1. Mobile Commons

    mobile commons landing page example

    Do que eu gosto

          • Título claro e sedutor: Seu título é a primeira coisa que as pessoas verão em sua landing page, e a Mobile Commons fez um bom trabalho utilizando seu título para descrever o que eles fazem, e garantindo que você queira continuar a ler com o “Descubra porque…” (“Find out why…”).

    Coisas que eu mudaria ou colocaria a teste

          • Sem respaldo para a afirmação “10x as conversões”: Dizer que vai aumentar em 10x as conversões é uma afirmação ousada. Essencialmente, isso diz que alguém convertendo 10% teria uma taxa de conversão de 100%, o que não é possível. Seria muito mais eficaz ter testemunhos de clientes falando sobre a melhoria que alcançaram nas conversões.
          • O texto do botão precisa descrever seu propósito: É simples de resolver. Seu botão de CTA deve sempre explicar explicitamente o que acontecerá quando clicado, por duas razões. Em primeiro lugar, para que as pessoas saibam o que vão receber, e em segundo, para que haja outro elemento na página dando suporte a seu propósito. Neste caso, acho que eu sugeriria algo do tipo “Agende uma ligação para discutir soluções móveis”.
    Princípio do CCD Como foi feito
    Encapsulamento Área do formulário bem encapsulada : O princípio nº1 do CCD fala sobre o uso de encapsulamento para atrair a atenção para suas áreas de formulário. A Mobile Commons, novamente, faz um bom trabalho, garantindo que a área de conversão se destaque do resto da página e deixa claro onde você precisa ir para completar suas interações com a página.
    Cor e Contraste Cor do botão: O CTA deveria ser mudado para se destacar mais do resto da página. Da maneira que está, o tom azul fica um pouco apagado. Há um bom contraste com o fundo do formulário, mas, no geral, a página tem cores conflitantes. Caso se afaste e olhe para essa página, será difícil diferenciar os elementos mais importantes. Um pouco disso poderia ser solucionado movendo os logos dos clientes para o fim da página, de preferência em tons de cinza, para prevenir conflitos com o resto da página.
    Espaço em Branco A página muito aglomerada poderia ter mais espaços em branco: O princípio nº 4 do CCD fala do uso de espaço em branco para melhorar a clareza e a experiência de leitura de sua página. Ao tornar a página um pouco maior, eles poderiam tornar cada parte da mensagem mais clara reunindo em blocos mais consumíveis. Isso também poderia atrair mais atenção para os depoimentos, distanciando a coluna esquerda do formulário.
    Prova Social Testemunhos poderosos: O testemunho do CEO do Tumblr é muito convincente. É uma marca com a qual muitos estão familiarizados e fornece muita credibilidade à página.

    2. Macquarie University

    macquarie university landing page example
    Clique na imagem para ver a versão completa.

    Pensamentos

    Esta é difícil de criticar. É realmente uma boa landing page. Ah, mas lá está o temido botão “Inscreva-se”, de novo! Tsc, tsc. Há algumas coisas que gostaria de sugerir para manter a experiência da landing page intacta. Em primeiro lugar, eu sei que as pessoas têm medo de remover links (ou “vazamentos”, como prefiro chamá-los), mas você realmente não precisa citar todas as alegações feitas neste momento. Não é um papel em branco, é um dispositivo de marketing. Em segundo lugar, a área do formulário precisa de uma pequena alteração. Vou descrever uma hipótese para cada.

    Hipóteses para Teste A/B

    A área do formulário:

    Ao aprimorar a mensagem da área do formulário para explicar e focar o propósito da página, a comunicação ficará mais clara, encorajando mais pessoas a completarem o formulário que elas sabem que irá beneficiá-las. Isso também aumentará o número de leads relevantes e qualificados.

    Vazamentos da página:

    Distrações afastam as pessoas da razão pela qual *você* as pagou para estarem aqui. Remover todos os links da página de maneira que exista apenas uma ação, aumentará o engajamento com o objetivo de conversão da página e, consequentemente, a quantidade de formulários completados, reduzindo as taxas de rejeição.

    Recomendação de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Esclareça o propósito do formulário: O cabeçalho do formulário é sua única chance de descrever a razão pela qual você está solicitando dados pessoais. Aqui as palavras sugerem que você completa o formulário para “Inscrever-se para o evento”. Ainda assim, batendo o olho no texto (esse é o máximo que as pessoas irão fazer), eu não vejo menção a um evento. E o terrível botão “Inscreva-se” não ajuda em nada. Você receberá informações sobre a universidade de acordo com seu nível de estudo (atual ou desejado?) ou um prospecto de cursos disponíveis? Então, meu conselho para o teste é dizer exatamente o que você irá receber no cabeçalho, e reforçar isso no CTA.
          • Nunca use “inscreva-se”: Você foi avisado.
          • Página com vazamentos: Tire todos os links da página (com exceção da declaração de privacidade). Se você realmente precisa fazer um link para algo, faça isso em uma lightbox, de maneira a manter possíveis estudantes na página.
          • Adicione um FAQ: Você pode eliminar a necessidade de tantas questões abrindo uma página de FAQ em uma lightbox que discuta todas as questões que, atualmente, você está respondendo em links externos. Isso reduzirá seus pontos de interação a um total de três. O CTA, política de privacidade e FAQ.
    Princípio do CCD Como foi feito
    Encapsulamento Este é óbvio. O formulário está contido em sua própria caixa, o que ajuda a destacá-lo da imagem de fundo.
    Dicas Direcionais A seta pode ser pequena, mas é um lembrete de que a ação está no formulário. Saber disso, de cara, deixa a pessoa relaxada para explorar o conteúdo da página, ciente de que sabe para onde ir, caso decida continuar.
    Espaço em Branco A área do formulário está bem separada do conteúdo, e há bastante espaço para respirar ao redor da imagem principal. Uma ótima demonstração sobre como usar o espaço em branco de maneira apropriada.

    3. American Bullion

    american bullion landing page example
    Clique na imagem para ver a versão completa.

    Pensamentos

    Meu Deus. O que eu faço com isso? É uma ótima página. Farei uma reviravolta aqui e falarei sobre o que eu gosto nela.

    Do que eu gosto

          • Título descritivo: O título diz sobre o que é a página em três palavras.
          • Parágrafo de introdução simples: Descreve o que você receberá, ao completar o formulário.
          • CTA e cabeçalho do formulário perfeitos: O cabeçalho do formulário e o texto do botão são descritivos.
          • Informação de apoio: Tudo o que você precisa saber está, praticamente, acima da dobra, mas caso não esteja convencido, você pode dar uma olhada na grande quantidade de provas sociais abaixo, incluindo: testemunhos, menções na mídia e símbolos de confiança.

    A única coisa que eu adicionaria a essa página seria um subtítulo acima do terceiro passo dizendo qual é sua função, tal como: “Sobre Investimentos em Ouro”.

    Princípios do CCD Como foi feito
    Encapsulamento Hoje estão me mimando. Outro formulário bem colocado em um recipiente. É isso.
    Cor e Contraste Seria muito bom se a área azul de baixo fosse de uma cor diferente – talvez cinza escuro. Aí, a única área azul seria o recipiente do formulário, o que realmente o destacaria. Eu também gosto da forma como os logotipos de confiança são jogados para o plano de fundo em tons de cinza. Isso os mantém visíveis sem gerar conflitos com as áreas mais importantes.
    Prova Social Há uma tonelada de logotipos de prova social apresentados, embora eu ache que o grupo inferior de logotipos seja um exagero… Os dois depoimentos poderiam receber um tratamento diferente para fazer com que se destaquem como citações, ao invés do atual design que faz com que se pareçam com um bloco de texto, como o resto da página.

    4. Florida Hospital – TAVR

    tavr landing page
    Clique na imagem para ver a versão completa.

    Outra landing page excelente. Apesar de não deixar imediatamente claro o que é TAVR (a minúscula descrição do acrônimo é difícil de ver). Se você tem anúncios muito direcionados, é melhor garantir que o título combine perfeitamente com eles.

    Hipóteses para Teste A/B

    Ao explicitar no título o que é TAVR, mais pessoas poderão se identificar, permanecer na página e completar o formulário, como resultado.

    Dispositivo de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Mudança do título: Eu faria um teste utilizando o nome completo do procedimento, colocando o acrônimo como elemento secundário. A frase “A Substituição da Válvula (TAVR) é o Melhor para Você?” (“Is Valve Replacement (TAVR) Right for You?”), seguida por uma explicação do que é o acrônimo e como é o procedimento no primeiro parágrafo. Nota: Eu não sei dizer se isso é informação o bastante para que as pessoas entendam.
          • Otimize o Pague por Clique: Se há anúncios pagos (AdWords, etc.) atraindo tráfego para esta página, eu mudaria o cabeçalho para um texto com um fundo gráfico, ao invés de ter uma imagem gigante. Isso aumentaria o Índice de Qualidade, um teste poderia comparar a mudança neste Índice, ao tornar o cabeçalho legível para bots.
    Princípio do CCD Como foi feito
    Encapsulamento Amo que o encapsulamento esteja realmente se tornando um princípio de design. Eu tenho uma sugestão aqui, mas será discutida na seção sobre cores.
    Cor e Contraste Este é um ótimo exemplo do uso de um único tom para a maior parte da página. O que realmente abre caminho para o uso de cor e contraste que façam a área do formulário se destacar. Ao escolher uma cor que se opõe ao azul, você realmente chamaria atenção. Aqui você poderia tentar um vermelho mais escuro. E então, poderia mudar o botão para branco.

    5. SweetIQ Whitepaper Download

    whitepaper download lead gen landing page
    Clique na imagem para ver a versão completa.

    Pensamentos

    Esta é uma página de download de livro branco/e-book bem comum, no entanto, o design subjacente não suporta a estética de uma página focada em empresas físicas. Sendo um documento eletrônico distribuído digitalmente, é importante deixar óbvio que ele é para empresas locais.

    Existem algumas maneiras de se fazer isso. Utilize imagens para mostrar empresas físicas, seja no livro ou no plano de fundo da página, ou explicitando no CTA o aspecto ‘local’.

    Outra coisa a ser mencionada aqui é que o texto, realmente, não diz nada sobre o conteúdo do download. É um relatório? Um e-book? Isso realmente precisa ser dito.

    Hipóteses para Teste A/B

    Ao se focar no aspecto de empresas locais no CTA, haverá um melhor entendimento da relevância para as empresas físicas locais e downloads mais focados (criando leads melhores e mais qualificados).

    Recomendação de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Texto do CTA: Eu testaria o texto atual do CTA contra algo mais explícito como “Faça Agora o Download de um Livro Branco Baseado em seu Local”, com uma linha de apoio curta, abaixo do botão, que diga “Para Comércio Varejista Físico”.
    Princípio do CCD Como foi feito
    Encapsulamento Novamente, irei defender o Sr. Contraste aqui.
    Cor e Contraste A área do formulário se destaca bem nessa página. Você não consegue não notá-la. Neste caso, eu tentaria utilizar um botão vermelho para fazer com que ele se destaque da paleta de cores principais. Essa página é tão simples que não há complicação visual para ser compensada, mas, ainda assim, você deve ter o hábito de praticar a separação.
    Experimente Antes de Comprar Sempre que tiver um e-book/livro branco/relatório para oferecer, você deve fornecer uma prévia. Algo que aprendemos nessa semana de CCD foi que ter uma pequena apresentação de Slideshare em sua página, para apresentar parte de seu conteúdo, pode gerar um bom aumento nas taxas de conversão.

    6. Benchmark

    benchmark-th
    Clique na imagem para ver a versão completa.

    Pensamentos

    Há dois CTAs diferentes na página, tanto em cor quanto em texto. Eles poderiam ser mais consistentes, e apresentar o que o próximo passo irá revelar (acredito que seja a homepage).

    Sem uma proposição clara de valor, eu não sei como essa companhia se diferencia dos outros 100 provedores de serviços de e-mail por aí.

    Hipóteses para Teste A/B

    Ao incluir uma proposição de valor bem definida que ilustre porque eles são únicos, as pessoas ficarão mais dispostas a clicar e seguir para o próximo passo.

    Recomendação de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Slogan: Poderia haver um slogan ao lado do logotipo (para utilizar um pouco do espaço desperdiçado ali) que ajudaria a definir melhor a empresa. Afinal, Benchmark não é a mesma coisa que e-mail, ao meu ver.
          • O título principal: Poderia ser mais forte, mais uma vez, diferenciação é a chave aqui. Por que deveria dar atenção para a Benchmark? Qual é a diferença principal? Eu sugiro um título de 2 níveis, no qual o título principal explica o benefício central, e o secundário dá apoio com mais informações (estatísticas, número de consumidores, etc.). Depois, moveria isso para o topo do primeiro parágrafo e do vídeo.
          • Imagem ou vídeo do software sendo usado: Ao invés de se focar nos testemunhos no primeiro nível, eu incluiria alguns tópicos que dariam apoio ao título novamente – e um vídeo ou captura de tela do software. (E, então, mover os depoimentos mais para baixo).

    Teste e veja…

    Princípio do CCD Como foi feito
    Prova Social A página fala de pequenos negócios, e então apresenta empresas gigantes como prova de sucesso. Parece haver um desencontro em relação aos tamanhos das empresas, o que pode fazer com que as pessoas percebam essa oferta como focada para o mercado de grandes empresas.

    7. Imigração de Cônjuges para o Canada

    immigration to canada landing page
    Clique na imagem para ver a versão completa.

    Pensamentos

    Bom, tudo tem uma primeira vez! Um infográfico em uma landing page. Muito legal. Embora demande tempo para ser lido.

    O título de abertura é muito situacional ao invés de ser descritivo. Seria mais forte se ele fosse mais simples, ao invés de “fofo”. O infográfico acertou: “Patrocine a viagem de seu cônjuge para o Canadá”.

    Hipóteses para Teste A/B

    Ao mudar o título para descrever diretamente o propósito da página, a taxa de rejeição diminuirá, e as conversões aumentarão.

    Ao trocar o infográfico por fatos em forma escrita, a clareza e a rapidez de leitura aumentarão, o que resultará em mais pessoas preenchendo o formulário, uma vez que compreenderão melhor os benefícios da FWCanada.

    Recomendação de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Título da Página: Mude o título da página para “Patrocine seu cônjuge para vir ao Canadá” e utilize um subtítulo que diga algo como: “Deixe que a FWCanada facilite esse patrocínio”.
          • Troque o infográfico: Pegue os pontos principais do infográfico e informe aos leitores quem pode se inscrever, quem pode patrocinar e como se inscrever. Provavelmente, na formatação de um parágrafo introdutório seguido por tópicos separados.
    Princípio do CCD Como foi feito
    Encapsulamento É difícil se destacar nessa página, pois ela é feita inteiramente de caixas. Acho que a melhor coisa que poderia ser feita aqui, seria adicionar um pouco de espaço em branco que permitisse mais espaço para respirar.
    Espaço em Branco Como mencionei antes, isso seria ótimo para esse design. Ao misturar os elementos da página para apresentar informações necessárias antes da chamada para ação, criando uma hierarquia de informações melhor, a página não exigiria mais que você pulasse de um lado para o outro para descobrir qual a ordem das informações.
    Urgência e Escassez Eu acho que a maior urgência é se afastar do infográfico e voltar ao conteúdo regular, ainda que essa seja uma ideia inovadora.
    Prova Social O objetivo desta empresa é executar um procedimento jurídico. Por esse motivo, é necessária uma prova social poderosa. É o serviço perfeito para tirar proveito de histórias de sucesso. Para ser sincero, eu ficaria em dúvidas sobre usar essa página sem provas sociais.

    8. Falcon Social

    falcon social landing page example
    Clique na imagem para a versão completa.

    Pensamentos

    Esta página é, na verdade, um microsite, eu sugeriria inicialmente tirar a navegação do cabeçalho e do rodapé para aumentar o engajamento na página e torná-la uma landing page específica da promoção.

    O que a Falcon Social faz muito bem é algo que venho afirmando há muito tempo, a utilização de lightbox para mostrar conteúdo adicional, sem abandonar a página. Isso acontece se você clicar em qualquer um dos links “saiba mais”.

    No entanto, faltam explicações sobre quais são as soluções fornecidas antes de perguntar se o visitante quer iniciar um teste gratuito. Isso poderia ser incluído em um paragráfo introdutório ao lado do vídeo mencionando a duração do teste, juntamente com uma afirmação dos benefícios.

    Hipóteses para Teste A/B

    Ao mudar o texto do CTA para uma afirmação direcionada aos benefícios, dizendo aos clientes quais são estes quando se registram, mais pessoas iniciarão o teste.

    Recomendação de Teste A/B

    Sugestões sobre o que testar para provar a hipótese:

          • Texto do CTA: Para testar CTA diferentes, eu faria o original contra um CTA de principais benefícios, como “Aumente sua Marca Socialmente” com um pequeno apoio “teste gratuito por X dias”, logo abaixo do botão.
    Princípio do CCD Como foi feito
    Cor e Contraste Os CTAs, nessa página, realmente se destacam. Se você apertar os olhos olhando para a página, eles se mostram ricos em contraste.
    Espaço em Branco Ter um espaço ao redor da principal área de conteúdo (em ambos os lados) daria a página uma sensação de estar menos atulhada. Se tentar imaginar o conteúdo indo até as bordas, talvez para reduzir a altura da página, veria que é muito mais cansativo para os olhos. Há muito conteúdo aqui, portanto ela poderia utilizar mais espaço vertical.
    Prova Social Esta é uma boa maneira de utilizar testemunhos. Ela começa com uma lista de clientes, depois segue informando o que alguns deles dizem sobre a empresa. De forma geral, a hierarquia de informação é muito bem feita nessa página. Introdução, detalhes, afirmações de apoio.

    9. Manpacks

    Do que eu gosto

          • É sexy: Resposta previsível? Sim, com certeza. Esse é o ponto.
          • Validação: Eles vão direto ao assunto, mostrando as publicações famosas que apresentaram a empresa. Em relação ao design, o cinza monocromático evita uma bagunça de cores que possa tirar a atenção da chamada para ação (CTA).
          • Proposições de valor: O conteúdo principal da página responde duas questões simples: “O que é isso?” e “Qual a importância disso para mim?”
          • Depoimentos: O segundo é o mais engraçado que já li. Socks as a Service (Meias como Serviço) – genial.
          • Remoção da Dúvida: O subtexto abaixo do CTA diminui a percepção de risco, que pode melhorar a taxa de click-through (CTR).

    Coisas que eu mudaria ou colocaria a teste

          • Slogan: Para esclarecer mais rapidamente qual é o propósito da página, eu colocaria um slogan sucinto abaixo do logotipo.
          • Título principal (proposição de valor central): Existem diversas maneiras de utilizar um título: A) Utilize uma afirmação clara do que você está oferecendo para permitir um entendimento do propósito da página, ou B) convença o visitante a querer continuar a ler utilizando um título sedutor. Eles utilizaram a opção B aqui, aparentemente em uma tentativa de chamar a atenção e aumentar a curiosidade (ou estimular algo em particular). Como teste, eu tentaria a abordagem A e deixaria claro imediatamente – o que é a Manpacks (isso realmente poderia ser melhor trabalhado com o slogan, para ajudar a passar no teste de 5 segundos).

    O exemplo abaixo mostra uma página alternativa que eles criaram, acredito que para falar com um segmento diferente ou criar um gatilho emocional diferente.

    Princípio do CCD Como foi feito
    Encapsulamento Aqui a regra do encapsulamento é aplicada ao conteúdo. Adicionar o recipiente azul separa a área do conteúdo principal muito bem, tornando a experiência de leitura muito mais simples.
    Prova Social Estes são os melhores e mais engraçados exemplos de depoimentos que eu já vi, encaixam-se perfeitamente em uma marca divertida. O Tweet na parte inferior direita contém a frase: “Socks as a Service” (“Meias como Serviço”) brincando com o acrônimo SaaS. Brilhante. Sempre me faz rir.

    10. Eu clicaria no botão de reset

    Percebe o grande botão vermelho à esquerda? Reiniciar (Reset) o quê? Sua ideia de empresa? Suas habilidades de design? Espero que algo mágico aconteça ao clicá-lo.

    Dicas

    Descobrir seu potencial (Unlock your potential) para quê? Viver em uma comunidade fechada em uma rua sem saída na Flórida? Seja mais específico sobre o propósito da página e o que ela oferece.

    Os princípios de CCD não são aplicáveis aqui. Seria doloroso demais.

    11. Procurando um cara ric…a??

    Certo, se caras ricos é o que você procura, vai fundo. Quem sou eu para te impedir – talvez eu seja um deles, algum dia. Mas, a não ser que eu esteja errado, eles não deveriam ser homens? Três deles parecem claramente mulheres para mim :). Aliás, eu pesquisei “fique rico rápido” enquanto procurava exemplos, e foi isso que encontrei – acho que casamento/namoro é um método.

    Dicas

    Acredito que as moças bonitas estejam ali para ajudar a vender (para homens) a ideia de usar dinheiro para “conseguir o que você quer”. Mas ainda assim, coloque algumas afirmações do que o “serviço” proporciona. Você terá mais conversões se as pessoas souberem o que esperar. E talvez um pouco de classe. #SóDizendo.

    12. Zen Web Solutions

    zen web solutions landing page example

    Do que eu gosto

          • Boa combinação de mensagens no formulário: No design de formulários, é importante garantir que o cabeçalho do formulário combine com o texto no botão. Isso, realmente, dá foco ao propósito da página. Lembre-se de nunca usar o termo “inscreva-se”, pois isso quebra esta regra e você perde a informação de apoio. Portanto, temos um ótimo trabalho aqui.

    Coisas que eu mudaria ou colocaria a teste

          • Resultados dos clientes são difíceis de decifrar: A imagem de resultados dos clientes é uma parte importante do cabeçalho da página, ainda assim ela não faz muito sentido. Eu não estou certo de quais são os serviços de adesão, portanto poderia ser utilizada uma imagem mais descritiva e afirmações de apoio.
          • O propósito do formulário poderia ser simplificado: Atualmente, o formulário tem dois propósitos. Um número de telefone para entrar em contato com a empresa para discutir negócios, ou fazer o download de um guia de marketing. Como a ação do formulário é pegar o guia, eu não deixaria mais nebuloso ao colocar um número de telefone ali. Eu sugiro colocá-lo abaixo da área do formulário, como uma ação secundária. Dê a eles, primeiramente, o conteúdo gratuito e, depois, peça para ligarem. Você, também, poderia tentar inverter essa ordem.
    Princípio do CCD Como foi feito
    Dicas Direcionais Eu gosto da presença de uma seta depois da afirmação “Descubra como podemos ajudá-lo” (“Find out how we can help you”), apontando para o formulário e para o próximo passo.
    Cor e Contraste Há muitos elementos em laranja na página, escolher uma cor para o botão que não esteja dentro do escopo do laranja fará com que ele se destaque mais. Azul ou verde seriam melhores, aumentar o tamanho também o tornaria mais dominante. O recipiente do formulário também poderia ter um algo a mais para destacá-lo na página.
    Prova Social Os depoimentos também têm uma rede métrica de sucesso, o que é uma estratégia inteligente. No entanto, isso poderia ser comunicado mais eficazmente de forma escrita, ao invés de tentar brincar com a imagem. Mau uso de design.

    13. Certify

    certify landing page example

    Do que eu gosto

          • Expectativas são comunicadas próximas ao formulário: Abaixo do cabeçalho do formulário é dito que alguém entrará em contato com você em até 24 horas.

    Coisas que eu mudaria ou colocaria a teste

          • O fotograma de cartaz do vídeo deveria ser mais sedutor: Um fotograma de cartaz é a imagem visível em seu vídeo antes do botão ser clicado. Em muitos casos, deixa-se que seja a captura de tela do início do vídeo. Pode ser mais eficaz ter uma afirmação de benefício descritiva e sedutora no início – para fazer as pessoas quererem assistir.
          • Pedindo pelo contato cedo demais: Uma coisa que eu testaria é o local do formulário. É bom estar acima da dobra na maior parte, mas quando você está pedindo para a pessoa se comunicar com você, você deve expor as informações do produto oferecido primeiro. Pode ser algo simples, como colocar alguns tópicos no lugar do formulário e abaixá-lo um pouco. Talvez, por isso, você tenha que mudar o terceiro bloco de características para outro lugar, e trocar o 2 pelo 4. Ou você poderia estender o cabeçalho para ser mais longo, e equilibrar o design colocando uma afirmação relevante abaixo do vídeo, falando sobre os benefícios do serviço. Ou você poderia trocar os depoimentos de lugar.
          • Nunca “inscreva-se”: Mude o texto do botão e diga algo como “Por favor, entre em contato para maiores informações”. Educado e direto ao ponto.
    Princípio do CCD Como foi feito
    Encapsulamento Como mencionei acima, se você mudasse o formulário para baixo para ficar metade dentro e metade fora da área do cabeçalho principal, você poderia encapsulá-lo muito bem em um elemento do design que realmente o separasse dos elementos ao redor, devido a como ele quebra as linhas existentes.
    Cor e Contraste A escolha de cor para os 2 CTA (apenas um por favor, tsc, tsc) é bem contrastante com seu entorno, mas tem algo nesse design que o deixa muito plano. No entanto, olhando a certa distância, eles se destacam.
    Espaço em Branco Há alguns espaços em brancos generosos na área de conteúdo principal que permite que seus olhos deslizem para baixo da página através do conteúdo. Isso seria ainda melhor se uma fonte maior fosse utilizada, com o espaçamento entre linhas mais alto, para dar lugar para o texto respirar.
    Experimente Antes de Comprar Demonstrações do produto em vídeo são sempre boas janelas para sua oferta, e podem simplificar o conteúdo subsequente, pois você pode facilmente olhar por cima e ver quaisquer buracos remanescentes no seu processo de compra. Neste exemplo, você poderia facilmente ignorar os conteúdos 1, 2 e 3 abaixo do vídeo, já que eles são discutidos no vídeo.
    Prova Social O subtítulo da página é, na verdade, um depoimento que esclarece o propósito do produto, ao mesmo tempo em que adiciona prova social.

    14. FluidSurveys

    Do que eu gosto

          • Proposição clara de valor: O título é bem simples e não deixa dúvidas sobre o propósito da página e do produto. E está muito bem amparada por uma explicação bem escrita dos principais benefícios, logo abaixo.
          • Depoimentos Destacados: O destaque dos depoimentos dá um pouco mais de tempero ao design e evita que a página pareça abarrotada de textos.
          • Contraste: Eles escolheram duas boas cores contrastantes para destacar elementos importantes. O rótulo “free” (gratuito) e o CTA do formulário.
          • Contexto de uso: A escolha de imagens possibilita a compreensão de que o produto pode produzir enquetes prontas para dispositivos móveis.
          • Validação: Assim como no exemplo acima, eles passam uma forte sensação de confiança ao incluir o grupo de logotipos.
          • Eles são Canadenses! Woot!

    Coisas que eu mudaria ou colocaria a teste

          • Remova a navegação do rodapé: Qualquer navegação externa na landing page pode levar seus visitantes para o caminho errado. Eu recomendaria a remoção da navegação no rodapé para simplificar as escolhas disponíveis.
          • Explique os logos: Adicione uma pequena etiqueta(como no exemplo 1) para exemplificar que eles são logos de clientes (ou sites que apresentaram/escreveram sobre a empresa).
    Princípio do CCD Como foi feito
    Cor e Contraste A cor é utilizada aqui para configurar muito bem a hierarquia de informações. Parte de cima, meio e parte de baixo. O que permite quebrar visualmente a informação em três partes, acelerando o processo de leitura. O CTA também se destaca como único elemento verde na página.
    Espaço em Branco Layout bem simples com design espaçoso. Permita que os olhos vaguem pela página e você verá como é fácil identificar cada bloco de informação. Remova a navegação do rodapé e verá que isso pode ser ainda mais forte.
    Prova Social Apenas um toque de design por trás dos depoimentos faz com que se destaquem como algo diferente da seção de conteúdo acima, ajudando a criar uma barreira visual que mantém seus olhos no lugar quando está lendo as três partes de cima.

    15. Golden Sands

    Do que eu gosto

          • Experiência: Ele faz com que eu queira sair de férias imediatamente e ir para um bom hotel. Os travesseiros, literalmente, estão vendendo o produto suavemente.
          • Preço: Um ponto importante sobre uma viagem é o preço, e eles tiram essa questão do caminho diretamente, assim você pode seguir para os detalhes mais específicos sabendo se consegue pagar ou não. #smrt

    Coisas que eu mudaria ou colocaria a teste

          • O cabeçalho do formulário: Inscreva-se agora? Para quê? Não é claro para o que você está se inscrevendo – eu achei que era um site de reservas, mas aparentemente eu tenho que me inscrever para algo. Deixe claro o motivo para as pessoas preencherem seu formulário.
          • Proposição primária de valor: Não há uma afirmação clara da função da página ou do que você receberá. Eu moveria os logotipos de hotéis do topo e adicionaria uma afirmação forte que (ESTÁ FALTANDO TEXTO AQUI)
          • Exclusivo: Existe uma menção de um convite exclusivo para uma prévia, mas não explica para o que você está sendo convidado. Eu também daria mais destaque a isso, se for um ponto de venda importante – talvez utilizando algumas dicas direcionais para atrair os olhos do leitor.
    Princípio do CCD Como foi feito
    Encapsulamento O uso de opacidade para o recipiente do formulário é um bom exemplo de como atrair um pouco de atenção para o mesmo, sem deixar de seguir o design de estética suave da página.
    Espaço em Branco A utilização de áreas mais escuras em ambos os lados do conteúdo, ajuda a levá-lo pelo conteúdo no meio da página, como um funil.
    Prova Social Bom e ruim. O certificado de excelência do Trip Advisor permite que você saiba que uma autoridade reconhecida validou a empresa. Os depoimentos apresentados são anônimos, o que reduz seu impacto (pois eles poderiam ter sido inventados). Sempre peça permissão para utilizar depoimentos e inclua o nome da pessoa que o forneceu para ganhar pontos extras de confiança.

    16. Echodemic

    Do que eu gosto

          • Declaração de abertura: A frase inicial descreve a oferta perfeitamente e de forma sucinta.
          • Honestidade: O custo está dito, de maneira que você possa medir o valor em potencial de aumentar o alcance de sua marca.
          • Método de contato claro: O grande número de telefone aumenta o fator de confiança e o informa da possibilidade de falar com pessoas reais.

    Coisas que eu mudaria ou colocaria a teste

          • Mova o formulário: Coloque o formulário acima dos logos de marcas.
    Princípio do CCD Como foi feito
    Cor e Contraste Nesta página meus olhos não têm ideia do que fazer. Eles saltam para todo lado tentando encontrar uma área importante. O contraste precisa ser diminuído e ser mais bem alinhado em termos de pesado contra leve. Nem vou começar a falar sobre o formulário. Ainda que você chegue até ele, é muito plano e pouco descritivo, sem nenhum propósito real relacionado.
    Espaço em Branco Refazer a arquitetura da página para se focar em apenas um elemento com duas colunas de conteúdo visualmente relacionadas iria simplificar muito o processo.
    Prova Social O número de seguidores fornece um pouco de credibilidade à afirmação deles, já que é isso que estão vendendo como serviço. Mas não o bastante para, realmente, inspirar confiança. Eu removeria isso até o número ser significante. Como os logotipos se relacionam? São apenas nomes de hotéis para lhe ajudar a entender o propósito da página? Ou são clientes reais? Esclareça com um título, caso eles sejam clientes.

    17. Demandforce

    Do que eu gosto

          • Quota de mercado: Parece que eles já têm uma quota de mercado de 30% – invista.

    Coisas que eu mudaria ou colocaria a teste

          • Formulário extenso: Há apenas dois campos necessários, não faça com que os visitantes sintam como se tivessem que trabalhar para conseguir informações. Diminua para apenas o nome e número de telefone. E não comece a conversa com “Preencha esse formulário.” Isso é o equivalente de entrar em uma loja de roupas e dizerem para você comprar essas roupas antes mesmo de experimentá-las. Seduza ou até coaja, mas não instrua.
          • Chamada para ação: Caso o visitante não queira se inscrever, ele provavelmente responderá melhor a “Peça um tour” ou “Comece agora”.
          • Rodapé: Os links no rodapé, com exceção da política de privacidade, são apenas distrações. Elimine o máximo de vazamentos para manter as conversões altas.
    Princípio do CCD Como foi feito
    Encapsulamento Eu gosto das cores invertidas do recipiente do formulário aqui. O branco se destaca bem do fundo sólido (roubando um comentário da Srª. Contraste).
    Prova Social Como visto na…!: Logo no topo está um testemunho que descreve um benefício associado ao produto por uma autoridade externa, e então sustenta a afirmação com uma ótima citação de uma empresa mostrando como gerou mais renda (quem não gosta disso!?) – doações para Unbounce.com/oli-is-poor/ . Eles tem até uma avaliação da Amazon :).

    18. Boost Your Search – Auditoria Gratuita

    Do que eu gosto

          • ROBÔS: Gostamos de robôs.

    Coisas que eu mudaria ou colocaria a teste

          • Atenha-se a suas armas: Escolha uma ação e atenha-se a ela. Em um caso como esse, leads por e-mail não são tão valiosos quanto o cliente.
          • Faça duas páginas: Diferencie a ação “Auditoria Gratuita” e “Plano Pago” em duas landing pages separadas, de maneira que possa segmentar o tráfego de canais como PPC.
    Princípio do CCD Como foi feito
    Encapsulamento Demais. Demais.
    Dicas Direcionais Há uma dica bem pequena no cabeçalho do formulário, mas isso só é útil, caso seus olhos consigam parar de saltar pela tela.
    Cor e Contraste Separação de cores com contraste: Esse é o meu maior problema com a página. Tudo tem as mesmas três cores, tornando muito difícil distinguir qual é o objetivo esperado da página (ponto de interação). Eu tentaria colocar tudo dentro das mesmas tonalidades de cores básicas, de maneira que a grade de preços possa se destacar. Eu também colocaria as duas outras faixas de preços do lado de fora, com a mesma cor apagada, de maneira a fazer com que a faixa recomendada (central) seja a mais dominante.
    Espaço em Branco Nenhum.
    Urgência e Escassez Apenas a urgência de fugir.
    Prova Social Dê suporte: Citar as fontes (estatísticas e depoimentos) mostra que você não inventou os dados apenas para fazer a venda.

    19. Eureka Report

    Do que eu gosto

          • Vermelho, Branco e Preto: O esquema de cores é clássico e confiável; isso é claramente orientado para negócios.

    Coisas que eu mudaria ou colocaria a teste

          • O quê? O produto, Eureka Report, é sobrepujado pelo incentivo. Vou receber a Eureka Report ou a revista Time? Arranje a hierarquia para que fique claro qual é o propósito da página. Tente trocar as posições do bloco “10 razões” com o bloco do formulário.
          • Top X: Ainda que listas do tipo Top 10 sejam populares, listas menores têm mais efeito e ficam na memória. Teste com 5 ou 7 itens, você terá mais espaço para brincar!
    Princípio do CCD Como foi feito
    Urgência e Escassez Este é o princípio nº 5 do CCD e é utilizado no canto superior direito com um prazo. Seria ainda melhor se fosse colocado ao lado do formulário, para aumentar a urgência da ação que você está prestes a realizar.

    20. Monsoon – O Valor da Associação

    Do que eu gosto

          • Tecnologia moderna: Fala com um setor muito específico de tecnologia moderna (atinge o nerd de HTML5, é o que estou tentando dizer).
          • Por quê?: Uma seção forte sobre a importância da tecnologia da empresa.

    Coisas que eu mudaria ou colocaria a teste

          • Aplicativos móveis: O propósito “parece” ser a construção de aplicativos móveis, mas isso está afundado no meio de textos com fonte pequena embaixo das imagens principais – seria melhor utilizar textos grandes para passar a mensagem e, então, seguir com imagens de “contexto de uso” onde pudéssemos ver o aplicativo sendo usado em dispositivos móveis.
          • Fale conosco: Por quê? Qual o benefício de falar com vocês sobre o projeto? Tente adicionar um benefício direto ao lado do CTA que diga: “Fale conosco sobre seu próximo projeto, vamos discutir cada parte dele!”
    Princípios do CCD Como foi feito
    Encapsulamento O formulário está acima da dobra e está bem contido, embora pudesse ter um pouco mais de contraste e uma dica visual para indicar que é isso que você quer que o cliente faça.
    Prova Social Clientes: Coloque o título acima das imagens para que fique claro porque elas estão lá.

    21. Dev Auditions

    Do que eu gosto

          • Proposição clara de valor: É claramente relacionado a contratar as melhores pessoas – focado em desenvolvimento. Mas o título poderia ser mais claro (veja abaixo).
          • Passo-a-passo: O processo de 3 etapas desenha uma imagem simples de como funciona a empresa.
          • Próximo aos benefícios: Eu gosto do começo, meio e fim dessa página. Assim como uma boa história, ela o leva pelo que você precisa saber, terminando com o que irá receber e fechando com o CTA. +1.

    Coisas que eu mudaria ou colocaria a teste

          • Título mais claro: “Contrate de Maneira Inteligente” (Hire Smarter) é genérico para quem está procurando por contratações de desenvolvimento, então faça com que o logo de desenvolvimento seja maior ou mude o título principal para algo mais claro como: “Contrate Talentos em Desenvolvimento, de Maneira Inteligente”.
          • Tipos de posição: Como é de recrutamento, eu incluiria o escopo dos tipos de talentos alcançados, já que o desenvolvimento pode ser muito abrangente. Quais áreas de conhecimento e dentro de quais limites geográficos?
    Princípio do CCD Como foi feito
    Cor e Contraste Aqui, as escolhas de cores criam uma série de segmentos conforme você desce pela página e cada peça de conteúdo se destaca bem da área que a contém, sem se tornar uma distração para a página, como um todo.
    Espaço em Branco Esta página é bem separada em blocos visuais, o que sempre ajuda no processo de leitura. No todo, isso dá um bom aspecto profissional à apresentação do conteúdo. Eu passaria um tempo nesta página.
    Prova Social Alguns logos. Depois de um tempo eles começam a ficar menos poderosos. Todos apresentam isso, então você precisa ser mais criativo com seu uso. Minha recomendação é posicionar uma citação verdadeira de uma empresa em contexto com uma peça de conteúdo semanticamente relacionado, tal como a descrição de uma característica.

    22. Right Signature

    Do que eu gosto

          • Informações claras sobre o que você irá receber, incluindo brindes para dar mais incentivo: O texto abaixo do botão ajuda o visitante a relaxar, descrevendo o que acontecerá em seguida – e adição de utilização gratuita é um bom incentivo para se inscrever.
          • Um título que descreve exatamente o que o produto faz: Eu amo esse título. É tão claro e direto ao ponto que você não tem como não entender, imediatamente, o que o serviço faz.
          • Demonstração de simplicidade: O design de 3 passos abaixo da área principal faz com que seja muito rápido entender como esse serviço é utilizado, limitando o número de leads ruins, pois eles sabem para o que estão se registrando.

    Coisas que eu mudaria ou colocaria a teste

          • Nada! Eu poderia falar por dias sobre o que eu gosto nessa página, mas ainda tenho muitas para escrever, então vou parar agora. Bom trabalho, RightSignature.
    Princípio do CCD Como foi feito
    Encapsulamento A primeira coisa que você vê nesta página é o formulário – está belamente posicionado e com um design focado na clareza, seguindo a regra do encapsulamento. E sempre estará acima da dobra.
    Cor e Contraste A cor dominante na página também é a mais importante, o que faz com que você consuma o conteúdo na ordem correta.
    Prova Social Depoimentos de alto nível: Um grande fator de confiança provém destes depoimentos, pois eles ajudam a descrever os benefícios, através do uso de citações bem escolhidas, ao mesmo tempo em que realçam a exposição que o serviço recebeu.

    23. E-book da Monetate

    Do que eu gosto

          • Design da imagem do e-book demonstra profissionalismo: Por ter uma capa com um belo design, você mostra que tempo e esforço foram utilizados em sua criação (ao contrário de uma capa branca comum e enfadonha).
          • Tópicos simples apresentam os motivos para você querer o e-book: A chamada “você aprenderá” (“You’ll learn”) para os tópicos, realmente, dá o tom de que isso é útil e lista o que você conseguirá por lê-lo (ao contrário de dizer o que está nele), uma abordagem muito mais focada nos benefícios.
          • Definição clara do que você receberá, no título: Às vezes, é bom informar que o e-book não será um “Guerra e Paz”. Ao delimitarem que são 10 dicas, eles têm uma boa chance de aumentar as conversões por fornecerem um recurso de fácil consumo. Ainda que e-books longos inspirem confiança, eles normalmente não são lidos.

    Coisas que eu mudaria ou colocaria a teste

          • Local do compartilhamento social: As pessoas são mais dispostas a compartilhar algo depois de receberem o produto. Eu sugeriria colocar os botões de compartilhamento social na página de confirmação do formulário. E com isso você também tem o benefício de remover as distrações da página principal.
    Princípio do CCD Como foi feito
    Experimente Antes de Comprar As pessoas reagem bem à ideia de experimentar antes de comprar, portanto, adicionar uma prévia do e-book (o primeiro capítulo ou algumas páginas selecionadas) poderia ajudar as pessoas a saberem pelo que estão trocando seus dados pessoais.

    24. Go Fun

    Do que eu gosto

          • Infelizmente, não muito.

    Coisas que eu mudaria ou colocaria a teste

          • Mudar a hierarquia de informações: A primeira coisa que você vê é “INSCREVA-SE AGORA” (“SIGN UP NOW”), que é algo muito agressivo e não há uma razão para fazer isso. Combinar as mensagens é algo crítico para conversões, portanto faça com que essa primeira afirmação combine com o texto dos anúncios/links que trouxeram as pessoas até aí.
          • O que é isso?: Não há descrição do que é a Go Fun. A reação da maioria das pessoas à confusão é clicar no botão de voltar. Explorando mais, existe uma pequena seção de texto que explica o que é. Isso deveria ser grande e proeminente. Eles pedem 20 e-mails de seus amigos, é preciso ter um grande fator de confiança na página para fornecer o e-mail de amigos.
    Princípio do CCD Como foi feito
    Encapsulamento e Contraste O contraste da área primária coloca um pouco de foco no formulário, mas o formulário é tão ofuscado pelo texto, que ele tende a desaparecer.

    25. Fast Track Sales

    Do que eu gosto

          • O título forte explica a proposição de valor, em segundos: Eles vendem casas rápido, e explicam rápido. Ótimo título.
          • Título do formulário e CTA explicam claramente o que você vai receber:

    É o bastante.

    Princípio do CCD Como foi feito
    Encapsulamento Claramente, o formulário é a parte mais importante da página. Tanto pelo recipiente contrastante do formulário como pelo cara estar segurando-o.
    Dicas Direcionais Você pode considerar o homem como um tipo de dica, ele utiliza contato visual direto para atraí-lo para aquela parte da página.
    Cor e Contraste O CTA se destaca muito bem da página, atraindo atenção para o formulário.
    Prova Social Um grupo forte de logotipos da imprensa acrescenta veracidade à percepção de que possuem um bom histórico público.

    26. OCD – Testes Clínicos

    Do que eu gosto

          • CTA faz uma pergunta: Perguntas são dispositivos muito poderosos de persuasão e colocar uma no CTA (botão) pode ajudar nas conversões, pois as pessoas querem saber a resposta.
          • Fotos ajudam a aliviar a pressão: Ao mostrar fotos de pessoas comuns felizes, eles o deixam mais calmo, tirando o estigma de um problema comum que pode afetar qualquer um.

    Coisas que eu mudaria ou colocaria a teste

          • Mover os botões sociais: Como sempre digo, coloque-os na página de confirmação. Se as pessoas acabaram de ser convertidas, há mais chance de compartilharem.
    Princípio do CCD Como foi feito
    Dicas Direcionais Se a cor da seção inferior não fosse laranja, a seta acima da área do formulário teria mais impacto, e o levaria da palavra OCD até o formulário.
    Cor e Contraste Aqui, o contraste leva sua atenção para longe do formulário, e é um pouco exagerado, visualmente. Não fique olhando por muito tempo.

    27. Learn French

    Do que eu gosto

          • Utilização de vídeo: a página é simples, o vídeo remove a necessidade de mais texto, uma boa técnica para aumentar a clareza da página. Também é um vídeo bastante tocante sobre o motivo que levou o fundador a criar a empresa depois de se casar com alguém de outro país. Muito autêntico.
          • Diferenciação: A maneira que utilizam o conceito de conversação, ao invés de apenas aprender palavras, parece mais interessante para clientes em potencial.
          • CTA claro: Aprenda francês. Sim.

    Coisas que eu mudaria ou colocaria a teste

          • Texto de CTA: Eu tentaria mudar o texto do botão para “Aprenda Francês de Conversação” , mantendo o conceito da página.
    Princípio do CCD Como foi feito
    Dicas Direcionais Há uma pequena dica acima do formulário, mas levou um tempo para que eu a percebesse, o que é o oposto do que deve acontecer.
    Espaço em Branco As áreas de conteúdo estão bem divididas pelas imagens. Eu tornaria o texto maior e mais espaçoso para melhorar a leitura.

    28. Kingsley Judd Wine Investments

    Do que eu gosto

          • Vinho!: Não tem como não gostar.
          • Título de duas palavras: Não dá para ser mais simples que isso. Em duas palavras eles lhe disseram sobre o que é a página.
          • Design bonito, simples e compacto: A imagem borrada é nítida o bastante para passar a sensação de uma vinícola, enquanto apresenta o formulário a você. Ótimo uso de contraste no recipiente do formulário e no botão.
          • Incentivo: Ter a opção de se inscrição para um sorteio gratuito é uma boa maneira de gerar conversões.

    Coisas que eu mudaria ou colocaria a teste

          • Termos e Condições: Se você terá um sorteio, precisa ter um link para os termos e condições.
    Princípio do CCD Como foi feito
    Dicas Direcionais A seta sobre o formulário é sutil, mas ajuda a ligar a afirmação acima ao formulário. Na verdade, funcionou ao contrário para mim, levando meus olhos a ler o texto.
    Encapsulamento Muito bem feito.
    Cor e Contraste O botão vermelho é uma boa escolha de design. Ele não apenas se destaca, mas se conecta visualmente com apenas um outro elemento. A palavra GANHE (WIN).
    Espaço em Branco Um monte. Especialmente abaixo da área do banner principal. Muito bonito.

    29. Box

    Box---Simple-Online-Collaboration--Online-File-Storage,-FTP-Replacement,-Team-Workspaces-560
    Clique para ver a imagem completa.

    Box é um serviço de compartilhamento de arquivos situado em Los Altos, Califórnia. Ao longo dos últimos sete anos, eles levantaram US$248 milhões em financiamento de capital de risco.

    Gosto

          • Faz o que diz na caixa (entendeu a piada?) – o texto do título diz tudo: sem jargões no meio. Simplicidade atrai, especialmente quando resolve um problema real de empresas. Esse tipo de linguagem também ajuda com o SEO, já que copia o tipo de pergunta que alguém poderia fazer, quando procura por uma solução em compartilhamento de arquivos. Tudo isso é apoiado por subtítulos bons e claros que ajudam o olhar a verificar o conteúdo.

    Não gosto

          • Integração do vídeo fraca – Box decidiu fazer com que vídeo desvaneça no plano de fundo da imagem do cabeçalho. Eu nem percebi na primeira vez que visitei a página. Este é um daqueles momentos em que vale a pena não tentar ser esperto. Eu fiz testes que deixaram claro que mostrar o vídeo na página gera mais conversões do que esperar que as pessoas encontrem o link para que ele apareça.
    Princípio do CCD Como foi feito
    Encapsulamento Seus olhos são, imediatamente, levados à área do formulário, devido ao baixo impacto da área branca à esquerda. Unido ao cabeçalho do formulário, você entende o que está acontecendo muito rápido (que é um teste gratuito). No entanto, adicionar uma afirmação de benefícios no cabeçalho explicaria o que se inscrever no teste significaria para você.
    Prova Social A afirmação de uma larga base de clientes pode aumentar a confiança de que eles estão no mercado faz algum tempo.

    30. GoToMyPC

    GoToMyPC-560
    Clique para ver a imagem completa.

    GoToMyPC é um serviço online para acesso remoto aos computadores da sua casa e do trabalho.

    Gosto

          • Texto claro – as características não são o ponto mais importante aqui, a principal questão é que você pode acessar seu computador remotamente. GoToMyPC se foca em um título e texto que vendam os benefícios com uma linguagem simples. Jargões matam landing pages, a não ser que tenha um nicho muito específico de audiência, não caia em suas garras.
          • Layout – o layout da página deveria ser lido como se lê um livro. Esta página faz isso, criando uma jornada lógica: título, imagem e descrição, registro, ações após o registro.

    O que eu colocaria a teste

          • A posição do formulário – Trocar o formulário para que ele apareça na direita ao invés de aparecer na esquerda (e vice-versa) é um teste comum que pode ter resultados surpreendentes. Culturas diferentes leem em direções diferentes, então faça um teste. Ao trocá-los também seria possível ler o “Pode ser usado em” antes do formulário.
    Princípio do CCD Como foi feito
    Cor e Contraste O elemento dominante da página é o CTA. Ótimo. Não muito. A palavra “Continue” não diz nada sobre o propósito da página/formulário.
    Espaço em Branco Pouco espaço em branco nesta página. Como resultado, eu percebo meus olhos saltando muito – principalmente, lutando entre o desejo de ler o conteúdo no início e a afirmação “Experimente de graça”. Deveria haver um título mais forte no topo para evitar isso (mas isso não conta tanto como espaço em branco, mas como design de conteúdo).

    31. CarFax

    carfax-th
    Clique para ver a versão completa.

    Do que eu gosto

          • Direto ao ponto: O título principal faz uma pergunta que, imediatamente, manda embora qualquer um que possa ter chegado aqui por engano. “Vai comprar um carro usado?” (“Buying a used car?”) Sem dúvida! Estou no lugar certo.
          • Online vs. off-line: A página solicita o número do chassi do carro – provavelmente, você só saberá isso procurando no carro – por sorte eles tem uma página móvel que o permite fazer isso pelo seu celular. Ganham mais pontos!

    O que eu mudaria ou colocaria a teste

          • Nada. Eu amo essa página! Eles claramente tiveram algumas pessoas inteligentes fazendo o design e a arquitetura da página.
          • Texto do botão: Certo, eu mudaria uma coisinha. O CTA deveria dizer “Veja o Relatório” ao invés de “Ir” (“Go”).
    Princípio do CCD Como foi feito
    Encapsulamento Aqui eles encapsularam 3 peças de conteúdo, o que ajuda a ler o conteúdo em blocos crescentes.
    Cor e Contraste Eles utilizam bem a cor azul para levá-lo a interação. Primeiro você lê o título “Vai comprar um carro usado?” (“Buying a used car?”) e, então, você salta imediatamente para a próxima área em azul – o botão diz “Veja uma Amostra do Relatório”. Essa é uma boa conexão e um bom fluxo de comunicação.
    Experimente Antes de Comprar Eles têm uma amostra de relatório para que você veja, primeiramente. É uma ótima maneira de gerar confiança em seus visitantes, permitindo que eles saibam o que esperar.

    32. Oprah Sweepstakes

    oprah-th
    Clique na imagem para ver a versão completa.

    Do que eu gosto

          • Combinação entre mídias: É disso que falei no começo. Há uma correlação clara entre a landing page e a capa da revista. Oprah tem uma aparência feliz, utilizando uma forte conexão pessoal (contato visual direto), que faz com que você se sinta confortável.

    O que eu mudaria ou colocaria a teste

          • Inscreva-se: Aparentemente, os designers da Oprah não leram minha última postagem sobre exemplos de landing pages. A palavra inscreva-se não diz nada sobre o que acontecerá quando você clicar. Eu mudaria isso para um CTA de linha dupla que diga:

            Primeira linha: Assine a revista O
            Segunda linha (texto menor): para se inscrever em um sorteio de $25k

          • O título e subtítulo poderiam ser melhores: É uma página com duplo propósito – assinar a revista e se inscrever no sorteio. Mas o título apenas diz inscreva-se (não para a revista), então pode ser lido como “inscreva-se para o sorteio”. É uma coisa pequena, mas a clareza é importante. Ninguém quer ler todas as letras miúdas.
    Princípio do CCD Como foi feito
    Dicas Direcionais Oprah criou uma forte conexão com os visitantes utilizando a abordagem do contato visual. Você pode utilizar a linha de visão como uma dica direcional, ou pode prender as pessoas em sua página, olhando direto para eles.
    Cor e Contraste O CTA se destaca apenas devido ao tamanho. Fora isso, ele está visualmente escondido no meio do esquema geral de cores. Eu não acho que seja um grande problema aqui, já que não há outro ponto de interação na página para gerar conflito.
    Espaço em Branco O texto nessa página está terrivelmente apertado, tornando realmente difícil entender os detalhes complexos dessa oferta de dois gumes.
    Prova Social Oprah. É o bastante, certo?

    33. Intuit

    intuit-th
    Clique na imagem para ver a versão completa.

    Mais provas de que os caras grandes estão fazendo certo. Esta é uma landing page excelente. Aqui está o motivo:

    Do que eu gosto

          • Título baseado em benefícios: Indica que há outras opções por ai, mas essa é a melhor maneira de fazer isso. Ao invés de descrever o que faz, ele utiliza um benefício para aprimorar o título.
          • Uso de dicas direcionais: Padrões de design centrado em conversão (passo 11) inclui o uso de dicas direcionais para ajudar a natureza persuasiva da página – aqui uma seta é utilizada para indicar a direção correta.
          • CTA descritivo: Obviamente, você iniciará um teste gratuito.
          • Prova social: A página está repleta de indicadores de prova social, uma lista impressionante de logos de clientes, símbolos de segurança e um prêmio de Escolha do Editor.

    O que eu mudaria ou colocaria a teste

          • Quanto custa? Não há menção de quanto irá custar após o teste gratuito de 30 dias. Uma boa maneira de incluir isso é dizer: “Grátis por 30 dias e depois escolha um plano a partir de $xx”.
          • Não é necessário cartão de crédito: Esta é uma informação muito importante; mas, ainda assim, está enterrada em um texto pequeno. Eu recomendaria tornar isso um subtítulo no botão para reforçar a falta de uma barreira para a inscrição.
    Princípio do CCD Como foi feito
    Dicas Direcionais A seta azul certamente deixa claro o que você deve fazer e funciona bem com a cor contrastante do CTA.
    Cor e Contraste O CTA se destaca do resto da página, mas fora isso, ela é um pouco atulhada.
    Espaço em Branco Para remover o atulhamento, aumente um pouco o comprimento da página, permitindo que ela respire. Parece que alguém solicitou que tudo fosse espremido na menor área possível.
    Prova Social Aqui está um exemplo de logotipos de clientes que funciona, para mim. E isso se dá porque ele explica quais são seus clientes alvo (grandes empresas da Fortune 100). Ao menos, eu espero que esse seja o mercado alvo! (Eu tenho uma pequena impressão de que não é, conforme escrevo isso). Então, talvez, eu retire minha afirmação :). Eu gosto de verdade da insígnia “Escolha do Editor” – o que reforça, ainda mais, que este pode ser um produto para consumidores de nível menor.

    34. Adobe Test & Target

    adobe-th
    Clique para uma versão completa.

    Do que eu gosto

          • Gênio acidental: Quando a página carrega, o formulário leva cera de 2 segundos para aparecer. Claramente, sendo carregado dinamicamente de um servidor em algum lugar. No entanto, o que isso faz é atrair sua atenção para o formulário, assim que ele carrega. Pessoalmente eu amo isso como um dispositivo de persuasão.
          • Título perfeito até o último pixel: O uso do espaço em branco ao redor do título e a comunicação clara fazem um ótimo título.
          • Hierarquia de conteúdo: A adobe divide o conteúdo, muito bem, em blocos fluídos:
            • Propósito da página.
            • Afirmação de benefício.
            • Tópicos de benefícios baseados no mercado alvo.
            • Afirmação de ação.

            Copie este fluxo de conteúdo – é muito bom.

    O que eu mudaria ou colocaria a teste

          • O botão de inscreva-se – Pelo amor: Façam um que diga “Pegue seu Livro branco”.
          • Obrigatórios? Deixe claro quais campos são obrigatórios, isso fará com que o formulário pareça mais curto do que ele é.

    A brandura desta página é uma vantagem, pois faz o CTA se destacar. Honestamente, no entanto, essa página é tão simples que seria difícil espremer um aumento de conversões dela, se alterar o número de campos do formulário – o que seria meu primeiro plano de ação.

    35. Isso é para crianças ganharem dinheiro?

    Este é outro susto.

    Aparentemente, você brinca com brinquedos enquanto ganha pilhas de dinheiro ao mesmo tempo. Parece meu tipo de trabalho.

    Dicas

    Eu pressionei o botão voltar assim que vi o site, voltei a olhar para ele devido a essa postagem. É confuso demais. Em primeiro lugar eu extrairia o conteúdo da coisa que se parece com um banner no topo da página, já que ele aprece um anúncio, o que fará com que as pessoas que o ignorem. E ele tem a informação mais importante nele. Sobre o que é exatamente esse site.

    36. Quem come aparelhos eletrônicos para perder peso?

    O que é mais assustador do que assassino de filmes de terror com uma faca gigante? Bater em uma porta que diz entre, temos sofás confortáveis e cerveja grátis, e então cair 90 metros de um prédio (a porta dava para o lado de fora do 20º andar) porque mentiram e o que você queria não estava do outro lado da porta. O que estou tentando dizer? Boa pergunta. Esta página não é ruim – a experiência de landing é ruim. Por quê? Eu procurei por “perda de peso”. Eu sei que há tabletes para isso, mas normalmente não do tipo eletrônico de 9 polegadas. E o coelho não vai lhe salvar dessa vez TELUS.

    Dicas

    Para de apostar em palavras chave irrelevantes…


    Bem, aí estão. 36 designs de landing pages analisados, criticados, aproveitados e prontos para serem copiados e aperfeiçoados. Espero que possa ter tirado diversas boas ideias para o seu próximo design. Quer saber de uma coisa? Porque não entra nos comentários e me conta? Vejo você lá.

    — Oli Gardner


    Sobre Andréa Amaral
    Andrea Amaral é fascinada por estratégias de marketing digital e vendas online. Para ela um bom networking é quando você aprende e compartilha estratégias mirabolantes que quando colocadas em prática resultam em dados significativos. Siga @ndreaamaral no Twitter.
    » Mais publicações por Andréa Amaral