Design da página de destino: 12 regras importantes com exemplos reais

Em nosso artigo anterior sobre páginas de destino, analisamos oito fatores principais que precisam ser considerados ao criá-los. Neste momento, decidimos elaborar o design das landing pages. Como o design de páginas da Web está inextricavelmente ligado ao conteúdo, também examinaremos alguns pontos relacionados ao conteúdo das páginas de destino.

Certamente, você conhece o objetivo principal da página de destino - incentivar um visitante do site a realizar uma determinada ação (por exemplo, comprar seu produto ou inscrever-se no boletim informativo). Na implementação deste objetivo, não o último papel é desempenhado pelo design de alta qualidade. Ele é capaz de focar a atenção de clientes potenciais em sua chamada para ação, para torná-la mais visível. Além disso, simplifica a percepção de todas as informações postadas na página de destino.

E agora, de palavras - para negócios. Considere regras específicas, após as quais você pode melhorar o design da sua página de destino e, portanto, aumentar o nível de conversão em seu website.

1. Cuide da usabilidade de sua landing page.

Entrando na sua landing page, o visitante do site deve entender imediatamente:

  • alvo da página
  • ação que ele deve tomar
  • os benefícios que seu produto trará

Se não atender a esses requisitos, pode ser considerado inútil. Não force os visitantes do seu site a passear pelo labirinto da sua página de destino. Acredite, eles não vão querer gastar seu tempo com isso e simplesmente acenar com uma caneta. Como resultado, seu site aumentará apenas a taxa de rejeição, e um aumento na taxa de conversão continuará sendo um sonho inatingível.

Aqui está um exemplo de uma página de destino bem-sucedida, tirada do site FeedMyInbox, da qual até mesmo um aluno lidará:

2. Não use muitos gráficos.

Sua página para chamar a ação deve conter apenas os elementos gráficos necessários. Imagens excessivas somente ficarão confusas, especialmente se estiverem localizadas na área da “primeira tela”. Na metade superior da barra de rolagem, deve haver apenas um logotipo e uma imagem estilizada do produto que você deseja vender.

Junto com essas imagens, imagens que mostram as vantagens ou características do seu produto também são permitidas. Tenha cuidado ao usar ícones. Em alguns casos, eles não trarão nenhum benefício, mas apenas distrairão a atenção dos clientes em potencial.

Considere a página de destino do site Dialogix, que oferece um serviço da web para monitorar redes sociais:

Como você pode ver, não há elementos gráficos extras na página. Ele contém apenas o logotipo do programa, sua captura de tela, ícones de empresas clientes, bem como a imagem de um pássaro bonitinho que simboliza o Twitter.

3. Minimize as opções de navegação

Quanto mais opções de navegação você oferecer aos visitantes do site em sua página de destino, maior a probabilidade de usá-los. Sua home page pode conter dezenas de links de navegação, mas a página de destino deve indicar apenas uma direção para os clientes em potencial, já que é o elemento inicial do funil de vendas.

Se você não puder fazer sem links para outras áreas do seu site, pense em como reduzir a probabilidade de os visitantes do site clicarem neles. Por exemplo, você pode deixar apenas a barra de navegação superior e remover completamente alguns links. Os links de navegação são necessários somente se os visitantes do site tiverem um motivo sério para clicar neles. Se você acredita que os clientes em potencial provavelmente não procurarão esses links, não será possível incluí-los.

Os criadores do aplicativo eWedding, com o qual você pode criar seu próprio site dedicado ao seu casamento, adotaram essa regra. Na página de destino de seu site, apenas os links relacionados ao produto em si (por exemplo, características do aplicativo ou variações de tópico) são visíveis. E os outros links estão localizados em um lugar isolado: na parte inferior da página. Além disso, eles são impressos em letras bem pequenas:

4. Use janelas modais

Ao postar informações ou alguns links que podem ser de interesse para os visitantes do seu site, tente usar janelas modais em vez de redirecioná-las para uma nova página. As janelas modais podem fornecer aos clientes em potencial qualquer informação sem interromper o funil de conversão.

Janelas e dicas de ferramentas modais podem conter perguntas freqüentes, listas de recursos de produtos, capturas de tela, etc. Use-os na primeira oportunidade conveniente, para não suspender o processo de transformar os visitantes do site em compradores reais.

Por exemplo, na página de venda do programa Capo que cria espectrogramas de arquivos de música, uma janela modal é usada na forma de uma captura de tela de sua interface:

5. Evite vermelho no botão de call-to-action.

Em muitas culturas, particularmente nos Estados Unidos e países europeus, o vermelho tem uma conotação negativa. Em sua imagem do mundo, vermelho é a cor da agressão, do perigo e de um sinal de trânsito. Mesmo nas conotações mais positivas (paixão e amor), tons de vermelho causam ansiedade às pessoas. A partir daqui, uma conclusão: se o seu site for destinado ao público europeu e americano, recuse a utilização de um fundo vermelho no botão de apelo à ação. Talvez, em alguns casos, isso vá embora, mas não vale a pena o risco. Melhor usar cores mais calmas, como azul ou verde (como é feito no aplicativo de planejamento de tempo de colheita):

6. Faça o botão de chamada para ação visível.

Então, descobrimos que o fundo vermelho não é a melhor solução para chamar a atenção para o botão de call to action (veja o parágrafo anterior). Mas há outro extremo - o uso de cores muito pálidas ou letras pequenas, por causa do qual ele é literalmente perdido na sua landing page. O botão de call-to-action deve ser um ponto brilhante na sua landing page para que os visitantes do site possam percebê-lo mesmo a olho nu.

O grau de "visibilidade" do botão de call-to-action pode ser avaliado usando um simples teste visual: recue cerca de um metro e meio da tela do computador e responda honestamente a pergunta: "O botão call-to-eye está claro no olho?" Se você não puder dizer sim com confiança, seu botão de call-to-action precisa funcionar.

Talvez seja necessário alterar sua cor para que ela contraste com o plano de fundo da própria página ou aumente ligeiramente o tamanho da fonte. Alguns web designers descuidados até conseguem colocar o botão CTA fora da "primeira tela", e ainda se surpreendem com o fato de as taxas de conversão do site não saírem do papel. Para não repetir os erros, considere cuidadosamente todos os aspectos do botão de call-to-action.

Tomemos um exemplo dos designers do site Plnnr, que faz excursões individuais para diferentes cidades. Seu botão amarelo, localizado em um fundo cinza, é simplesmente impossível não notar!

7. Especifique apenas informações de interesse para os visitantes do site.

Dê aos visitantes do seu site apenas as informações necessárias para tomar uma decisão. Não sobrecarregue suas cabeças com muita informação. Seu objetivo é transformar clientes em potencial em compradores reais com a quantidade mínima de informações.

Pense em quais informações seus clientes em potencial podem ter interesse e expresse-as usando palavras precisas e compreensíveis. Seu texto deve ser curto e tocar no ponto. Consumidores modernos realmente valorizam seu tempo, então eles imediatamente querem saber se sua oferta atende às suas necessidades. Se eles não conseguirem fazer isso em segundos, eles deixarão seu site sem hesitação.

Além disso, o texto apresentado na página de destino deve ter uma estrutura clara (título, subtítulo, listas com marcadores). Sujeito a essa condição, os visitantes do site poderão folhear toda a página e selecionar apenas as informações de interesse.

Dê uma olhada na página de destino do editor de texto online TitanPad. Como você pode ver, ele contém apenas as informações necessárias (funções de aplicativo e um claro apelo à ação):

8. Não solicite muita informação.

Ao criar um formulário de assinatura, tente minimizar as informações solicitadas pelos visitantes do site. Na maioria dos casos, basta pedir um endereço de e-mail. Se você precisar de outros dados pessoais de seus clientes em potencial, por exemplo, um número de telefone celular, deverá explicar por que está solicitando essas informações.

Novamente, isso é necessário para que os visitantes do seu site tenham menos motivos para abandoná-lo. Afinal, quase todas as pessoas têm dúvidas sobre como você vai usar seus dados pessoais. E se você começar a encher sua caixa de e-mail com spam? Ou você vai enviar uma mensagem de texto para ele, bagunçando o celular dele com informações desnecessárias?

Qualquer informação adicional que você pergunte aos visitantes do site é outro obstáculo para se tornar seus clientes. E quanto mais obstáculos em seu caminho, maior a probabilidade de que eles não cheguem ao seu destino final.

Felizmente, muitos desenvolvedores da Web estão cientes dessa verdade simples e tentam não extrair informações extras de clientes em potencial. Em alguns sites, eles não solicitam nenhum dado pessoal: você simplesmente registra e continua seu trabalho. Veja, por exemplo, o blog Pen.io. Tudo o que é exigido de você é criar o nome da sua página e uma senha, e você pode imediatamente começar a criar uma postagem:

9. Não pergunte aos visitantes do site c de uma só vez.

Imagine que um cliente em potencial venha ao seu site e imediatamente veja um botão brilhante chamando por um determinado produto para comprar. Qual será a reação dele? Na melhor das hipóteses, ele terá várias perguntas, como: "O que eles sugerem que eu compre?" ou "Quanto custa este produto?" E na pior das hipóteses - ele imediatamente fechará sua landing page, pensando que eles querem empurrar uma coisa inútil sem sequer perguntar se ele precisa dela.

Portanto, não comece imediatamente a falar sobre a compra, se você não quiser assustar seus clientes. Divida o processo de compra em 2 a 3 etapas para que eles aprendam as informações necessárias antes de tomar uma decisão final. Caso contrário, eles terão a impressão de que você está impondo seu produto neles.

O botão de call-to-action deve conter frases mais neutras, por exemplo, "Exibir planos e preços de tarifas" ou "Saiba mais". Eles contêm menos subtexto forçado do que nas expressões Comprar agora ou Inscrever-se. Além disso, graças a eles, os visitantes do site entendem o que devem esperar na próxima etapa.

Os desenvolvedores do plugin VaultPress projetado para suportar sites WordPress aplicaram esta regra com sucesso na prática:

10. Apontar para um design simples e organizado.

Todos os desembarques têm um objetivo específico: incentivar os visitantes do site a realizar uma ação específica. Se determinados elementos de design não contribuem para a implementação dessa tarefa, você pode se livrar deles com segurança.

Isso não significa que sua página de destino deve estar meio vazia: basta determinar quais componentes são relevantes e quais não são. Se você tiver certeza de que eles aumentarão a confiança do cliente em sua chamada de vendas, ajudá-los a entender melhor seu produto e, em geral, melhorar suas impressões gerais de sua empresa, a conclusão é óbvia: esses elementos devem estar presentes em sua página de destino.

Preste atenção na página de destino do aplicativo Things 2 for iPhone:

Como você pode ver, é feito de forma simples e com bom gosto. Ao mesmo tempo, contém todos os elementos necessários: uma descrição do aplicativo, suas capturas de tela e uma chamada à ação ("Vá para a App Store").

11. Realce melhores ofertas.

Se a sua página de destino contiver diversas chamadas de ação (por exemplo, tabelas com diferentes planos de tarifas), você poderá solicitar aos visitantes do seu site a opção mais lucrativa ou popular usando ferramentas gráficas. Por exemplo, você pode realçar a frase correspondente no quadro ou aumentar sua fonte.

Você não deve destacar automaticamente a opção mais cara, caso contrário, os visitantes do seu site pensarão que você está fazendo isso de propósito para torná-los garfo. A maioria das empresas concentra clientes potenciais em um plano de tarifas intermediárias, que contém todas as opções necessárias e, ao mesmo tempo, tem um preço razoável.

Veja como os designers do site do Ning, oferecendo um aplicativo para criar sua própria plataforma social, fizeram o seguinte:

Como você pode ver, eles escolheram um plano de fundo mais escuro para o plano tarifário Performancé, que pertence à categoria de preço médio. Além disso, ele está localizado no centro da tela - a área mais visível da página. Preste atenção ao ícone da Escolha Popular, indicando a popularidade deste plano tarifário.

12. Relate os benefícios do seu produto.

A principal questão que interessa aos visitantes do seu site: "Que benefícios receberei deste produto?" Não é suficiente listar suas características gerais e funções - você deve indicar como pode ajudá-las na vida real. Em primeiro lugar, você deve estar confiante no valor do seu produto para transmitir essa ideia a seus clientes em potencial com a ajuda de um título brilhante, texto claro e estrutura de conteúdo ideal na página de destino.

Em geral, não hesite em elogiar seu produto de acordo com o mérito, como é feito, por exemplo, pelos desenvolvedores do aplicativo Skylight:

Não se esqueça de testar as páginas de destino

Então, analisamos uma dúzia de recomendações para o design de landing pages e fornecemos exemplos reais a seguir. Esperamos que eles o inspirem a melhorar ainda mais suas páginas de destino.

No entanto, não se esqueça de outro estágio importante na criação de páginas de destino - teste A / B. Qualquer alteração que você fizer no design do seu pouso, de uma forma ou de outra, levará a certos resultados. Eles podem aumentar ou diminuir a taxa de conversão de seu site ou até mesmo mantê-lo no mesmo nível. Tudo depende da situação específica.

Daí a conclusão: não seja preguiçoso para realizar testes A / B antes de parar em uma versão específica da página de destino. Tome nota dos resultados desses estudos e selecione a opção que está à frente de todos os outros em termos de conversão, mesmo que, à primeira vista, pareça inconspícua para você.

Loading...

Deixe O Seu Comentário