Como criar uma landing page? Parte II - truques de design

Neste artigo, apresentaremos vários truques e regras para construir uma landing page que a tornarão mais acessível para seus usuários. Afinal, assim como um empresário precisa do terno certo, uma mulher precisa do vestido perfeito, a landing page precisa do design adequado e de um conteúdo bem posicionado.

Se você não sabe como criar uma landing page do zero, acesse o nosso artigo “Como criar uma landing page? Parte I", no qual descrevemos todo o processo em detalhes.

Lembre-se de que, ao contrário de ler este artigo, projetar seu próprio site é um processo que consome tempo. No entanto, não desanime. Ao criar o site por conta própria, você pode economizar até US$5.000. Então, vamos começar?

Truque 1 - Quatro dimensões de poder

Talvez você já tenha visto a "grade" na tela ao tirar uma foto? Isso está relacionado à "regra dos terços" e, por acaso, também é usada no design de sites. De acordo com essa regra, a página é visualmente dividida em três partes e consiste em 9 quadrados idênticos.

Os pontos no centro das quatro interseções das linhas são exatamente as "dimensões de poder". Tudo o que estiver dentro desses limites será percebido primeiro pelo olho humano. Ao criar uma landing page, tente posicionar os elementos mais importantes nessas interseções.

Truque 2 - Lei de Hick

Outro truque que pode ser útil vem de William Edmund Hick, um psicólogo britânico. Ele afirmou que o tempo necessário para tomar uma decisão aumenta conforme o número de opções disponíveis cresce. Isso significa que quanto mais opções temos para escolher, mais tempo levamos para decidir.

Em suas pesquisas, Mark Lepper e Sheen Iyengar descobriram que uma mesa com 24 tipos de geleia é menos atraente do que uma com 6 tipos. Quando uma pessoa tem muitas opções, a probabilidade de comprar algo cai 10 vezes. Como usar isso ao criar uma landing page? Limite o número de CTAs e botões e foque em um único objetivo. Considere todas as possíveis decisões do usuário na página e reduza o quanto puder.

Truque 3 - O Modelo “F”

Muitos estudos mostram que, ao visualizar um texto, o olhar humano se move inconscientemente em um determinado padrão. Primeiro olhamos da esquerda para a direita, depois descemos, e damos menos atenção ao canto inferior direito — apenas passamos os olhos por ele.

Se você quer facilitar a assimilação de informações e melhorar a conversão, coloque os elementos mais importantes ao longo da letra F e tudo o que for menos importante fora dela. Meios de contato convenientes devem estar em local de destaque: redes sociais, telefones, etc.

Truque 4 - A Regra dos 8 Segundos

Você tem apenas 8 segundos para captar o interesse do usuário (e até menos, segundo pesquisas recentes). Lamentamos dizer, mas essa é a capacidade de uma pessoa se concentrar em uma coisa só. Então, como prender a atenção do usuário em 8 segundos?

• Deixe o título chamativo e interessante, e também é importante que informe rápida e concisamente sobre as vantagens do produto/página e toque nos problemas que o cliente enfrenta.
• Complementa sua mensagem com imagens atraentes que transmitam o objetivo principal do produto.
• Faça um botão de CTA visível e curto.

Truque 5 - Lei da Similaridade

Os seres humanos percebem toda a estrutura de forma diferente de seus elementos individuais. Gostamos de ter objetos próximos que sejam semelhantes entre si, mas em grupos separados.

Aproveite essa regra. Suponha que seu produto tenha ótimas avaliações. Aproveite isso e coloque o formulário ou aplicativo ao lado da referência.

Truque 6 - Prova social

A prova social é formada por diversos certificados e diplomas. Um estudo da Data Insight e AliExpress mostrou que 9 em cada 10 compras são finalizadas após o cliente ler as avaliações. Como usar isso ao criar um site? Adicione avaliações de clientes ao seu site.

Truque 7 - Above the fold

Já ouviu falar desse termo? Se não, vamos explicar. Above the fold é a parte do site visível sem precisar rolar para ver o restante da página.

Provavelmente não é surpresa que as pessoas leem cada vez menos a cada ano. Normalmente, apenas escaneamos o artigo com os olhos. Pesquisas do Nielsen Norman Group provaram que o conteúdo colocado acima da dobra é 84% melhor recebido pelos usuários do que o conteúdo abaixo.

Por quê? A resposta é simples — visualizar o conteúdo abaixo exige esforço extra (rolar a página). Isso significa que quanto mais longo for seu conteúdo, menor a probabilidade de os usuários se aprofundarem no seu texto.

Landing Page - Design e UX

O primeiro passo para escolher o design do seu site é considerar quem faz parte do seu público-alvo. Mulheres ou homens? O que fazem? O que fazem no tempo livre? Qual é o objetivo deles e o que esperam? Ao responder a essas perguntas, você facilita sua tarefa. Você saberá se deve usar cores pastéis e relaxantes ou talvez escuras e misteriosas. Depois de saber o básico do seu site e ter uma visão inicial, siga as regras abaixo.

Regra #1 - Imagens de alta qualidade

Um estudo da Bright Local mostrou que 60% das pessoas preferem resultados de busca que contenham imagens. Por sua vez, pesquisas da Skyword mostraram que imagens interessantes geram em média 94% mais impressões. Ao escolher imagens, tente evitar as comuns e estereotipadas, busque algo original e interessante. Normalmente é preciso pagar por essas imagens, mas há muitos sites que oferecem imagens de alta qualidade gratuitamente. Veja alguns exemplos:

• Pexels,
• Unsplash,
• StockSnap,
• Negative Space,
• Superfamous Studios,
• Little Visuals,
• Gratisography,
• Kaboompics,
• Picjumbo.

Tamanho da imagem

Outro fator importante que afeta toda a experiência do usuário é a velocidade do site, e, portanto, o tamanho das imagens e vídeos. Eles devem ser o mais leves possível, sem perder qualidade.

Para comprimir imagens se você é usuário de Windows, recomendamos:

• Riot,
• File Minizer Pictures,
• Caesium Image Compressor,
• File Optimizer,
• Pingo,
• JPEG mini.

Para comprimir imagens se você é usuário de MacOS, recomendamos:

• JPEG mini,
• ImageOptim,
• TinyBeest,
• Photo Size Optimizer.

Softwares online para compressão de imagens:

• TinyJPG.com,
• Compressor.io,
• Kraken.io.

Tamanho do vídeo

Quando se trata do tamanho dos arquivos de vídeo, o caso é semelhante ao das imagens. No entanto, é um pouco mais complicado. Fotos podem ter apenas alguns MB, enquanto vídeos geralmente têm mais de cem MB, o que pode deixar seu site muito mais lento.

Os melhores compressores de vídeo:

• Any Video Converter Free,
• Leawo Prof. Media,
• Freemake Video Converter,
• WinX Video converter,
• MediaCoder (apenas para Windows),
• AVS Video converter (apenas para Windows),
• Total Video Converter,
• HandBrake.

Regra #2 - Cores

As cores no marketing desempenham um papel muito importante e sua escolha deve ser cuidadosamente pensada. Elas afetam principalmente como o usuário percebe sua empresa. Se você quiser saber mais sobre a psicologia das cores no marketing de afiliados, confira nosso artigo “A psicologia das cores no marketing de afiliados. Como os detalhes podem mudar seus ganhos?”.

Lembre-se de que as cores da marca devem estar alinhadas com sua missão e, acima de tudo, devem agradar ao seu público-alvo. No entanto, o mais importante é sua oferta e a qualidade dos serviços.

Além disso, o uso das cores é importante quando se trata de acessibilidade para pessoas com deficiência, como falamos na 4ª regra. Lembre-se de não colocar duas cores claras diferentes uma ao lado da outra, especialmente azul e verde, pois isso pode ser problemático para pessoas daltônicas. A combinação de cores mais legível é preto no branco.

Regra #3 - Títulos claros e evidentes

O usuário deve lembrar da sua página e querer voltar a ela. Ao colocar um título claro (não invasivo) e evidente, você ajuda muito. Vale a pena prestar atenção às pessoas com deficiência ou excluídas digitalmente e facilitar o uso do site. Veja como deve ser:

Regra #4 - Acessibilidade para pessoas com deficiência

Para facilitar a navegação de pessoas com deficiência, compilamos uma lista de pontos que devem ser considerados ao projetar um site. Além disso, esse conteúdo adaptado terá um impacto positivo no SEO, o que se traduz em melhor posicionamento no Google ou outros buscadores.

Descrições ALT

Descrições ALT são descrições alternativas das imagens postadas em seu site. Isso permite que softwares de leitura de tela informem ao usuário o que está ali. E, em caso de internet lenta, você verá o que está na imagem, então essa solução não é apenas para softwares.

Legendas para vídeos

Se seu site tem muitos vídeos, é uma boa ideia adicionar legendas para ajudar pessoas surdas. Para áudios mais longos, vale a pena transcrevê-los. Um programa online que pode ajudar a adicionar legendas automaticamente é, por exemplo, veed.io.

Links editados e marcados corretamente

Em vez de incluir um link nas palavras “Clique aqui”, prefira “Para mais informações, visite [endereço do site]”, isso ajuda muito pessoas cegas. Além disso, destaque os links em uma cor diferente do texto comum. Assim, os usuários não precisarão procurá-los com o mouse.

Tamanho dos botões

Se os botões que redirecionam para outras páginas do seu site forem muito pequenos, podem ser um problema para pessoas com dificuldades de navegação. Certifique-se de que a área “clicável” do botão seja sempre grande o suficiente.

Navegação pelo teclado

Seu site deve ser estruturado de forma que, ao pressionar a tecla "TAB", o usuário navegue de maneira lógica e intuitiva da barra de endereços para o menu e outras áreas do site. Assim, pessoas com deficiência poderão navegar facilmente pelo seu site.

Regra #5 - Espaço

Outro ponto é o espaço no seu site, o usuário deve rapidamente e sem esforço saber sobre o que é seu site e o que esperar dele. Você obviamente não quer que sua landing page pareça um site de 2010, com texto e anúncios por toda parte e o usuário sem saber o que fazer. Hoje, situações assim são raras. No entanto, veja o exemplo abaixo de uma página que poderia ter sido muito melhor projetada.

O início não está tão ruim, informação simples sobre o que a empresa faz e o que esperar dela. Agora foque no que está abaixo. O usuário é bombardeado com vários links e frases que lembram spam. Isso é o que você deve evitar.

Regra #6 - Menu transparente e simetria

Assim como o cabeçalho deve ser simples, o menu também. Hoje, o padrão é uma barra de menu principal no topo, clara e fácil de navegar. Certifique-se de que sua landing page seja simétrica, o olho humano aprecia isso.

Regra #7 - Rodapé

Por último, mas não menos importante - o rodapé. Como ele deve ser e o que deve conter? O rodapé deve ser principalmente pensado, simples e interessante. Você precisa pensar no que espera dos usuários que chegam ao final da página? Se você souber a resposta, será muito mais fácil projetar um bom rodapé. Normalmente, os visitantes rolam o site para encontrar informações de contato.

Isso não significa que você não possa colocar ali coisas muito importantes para você. Lembre-se que o rodapé deve atender às necessidades dos usuários e, ao mesmo tempo, permitir que você atinja seus objetivos. Veja alguns exemplos de informações que um rodapé pode conter:

• política de privacidade e termos de uso,
• informações de contato,
• navegação,
• links para redes sociais,
• assinatura de newsletter.

Landing Page - conteúdo textual

Após criar os títulos e botões adequados, o próximo passo é criar o conteúdo da página. É lógico que tudo deve estar relacionado à oferta que você está promovendo e incentivar a compra desse produto.

Os principais princípios para criar um conteúdo claro são hierarquia e sistema: cada bloco deve estar em seu lugar. Você pode fazer um esboço no PowerPoint ou em uma folha de papel para tentar recriar a estrutura. Uma interface clara só pode ser alcançada se você responder às principais perguntas: o quê, onde, para onde e por quê. A informação deve ser sequencial: qual produto, por que o usuário precisa dele. Você pode especificar credenciais para aumentar a confiança. Sites de LeadGeneration devem postar o conteúdo passo a passo, de forma curta e simples. Minimizar etapas aumentará suas taxas de conversão.

No mercado, você pode encontrar soluções atraentes para ajudar a criar e personalizar seu site, que fica ótimo em qualquer dispositivo. Um dos exemplos é o Kubio - plugin de criação de sites que estende o Gutenberg para oferecer total liberdade de design e uma experiência de criação de site fluida. Ele permite editar páginas inteiras em uma única interface intuitiva sem precisar entender a estrutura de templates do WordPress.

Este site oferece uma vasta galeria de templates para dar um ponto de partida rápido ao seu novo site. Também fornece uma extensa biblioteca de blocos com elementos como tabelas de preços, galerias de imagens, sliders e acordions para ajudar a construir páginas avançadas rapidamente. Vale mencionar que o site salva automaticamente cada área da página, como cabeçalho, rodapé e conteúdo, nos templates corretos.

Principais recursos do Kubio Builder:

• criação de páginas inteiras em uma única interface intuitiva,
• opções avançadas de design e responsividade,
• crie páginas combinando seções pré-definidas,
• vasta galeria de templates,
• extensa biblioteca de blocos.

Você já chegou até aqui?

Esperamos que, ao chegar até aqui, você já saiba como projetar seu site como um profissional. Agora só resta desejar boa sorte!