Como aplicar UX Design na construção de Landing Pages

Com algumas dicas simples, é possível entender melhor o seu usuário, tornar a experiência de visitar a sua Landing Page mais positiva e alavancar as suas conversões

Maria Luiza Agostini
Maria Luiza Agostini29 de agosto de 2022
Templates de Landings Pages

O UX Design busca desenhar e construir uma boa experiência para o usuário digital, seja em apps, plataformas ou sites. Por mais simples que seja uma Landing Page, é possível aplicarmos alguns conceitos que vão fazer toda a diferença para a experiência dos usuários. 

Neste post, vamos entender como é possível utilizar esses conceitos e transformá-los em ferramentas importantes para a construção das suas Landing Pages. Vamos te mostrar como adaptar a teoria à sua estratégia, sem fórmulas prontas. 

O importante aqui é entender como utilizar os conhecimentos de UX Design da melhor forma para o seu negócio, e assim alavancar as conversões através de boas experiências. Continue a leitura e descubra!

O que é UX Design?

Todos os pontos de interação entre os serviços e produtos de uma empresa e seu usuário final geram experiências, certo? O UX Design busca entender essas experiências, estudá-las a fundo e construí-las de forma a atender às necessidades dos seus usuários. 

O principal objetivo do UX Design é colocar o usuário no centro de tudo. É importante estar sempre aberto a aprender com o seu usuário. Colocá-lo no centro significa, muitas vezes, abrir mão das nossas suposições e entender, através de pesquisas, quais são as reais dores desse público. 

Nesse processo, muitos insights são gerados e conseguimos criar experiências cada vez mais positivas.

De acordo com o NN Group, "o primeiro requisito para uma experiência de usuário exemplar é atender às necessidades exatas do cliente, sem complicações ou incômodos". Para que isso seja possível, UX Design envolve muita análise, pesquisas e testes. É através deles que vamos conseguir ouvir o nosso usuário e interpretar suas necessidades, traduzindo isso em uma experiência positiva com o produto, ou nesse caso, a Landing Page. 

ux designer trabalha em landing page

O que é uma Landing Page?

Sabemos que a Landing Page, também conhecida como página de aterrissagem, tem por objetivo a conversão do usuário. Dessa forma, todos os seus elementos são pensados para converter. E é aí que o UX Design se torna essencial. 

Em uma Landing Page, temos um período curto para captar o interesse do usuário. Por isso, precisamos demonstrar valor de forma clara, para que ele tenha entendimento do que está sendo proposto e se sinta confortável e curioso. Assim, ele continuará na página, conhecendo mais o produto e eventualmente convertendo. 

Conceitos de UX Design podem ser de grande importância para guiar a experiência desse usuário e ajudar a página a cumprir com o seu objetivo: a conversão.

>> Leia mais: Landing Page: tudo o que você precisa saber

Como construir Landing Pages focadas em UX Design? 

Para começar a construir a sua Landing Page baseada em UX Design, antes de mais nada, é preciso que você tenha clareza da proposta de valor. É a partir dela que vamos construir a experiência da página. 

Uma vez que você tenha a sua proposta de valor definida, vamos compartilhar com você alguns conceitos importantes, que adotamos na RD Station, para enriquecer a experiência do usuário na sua Landing Page, confira!

>> Mais de 100 templates para personalizar, editar e deixar com a cara do seu negócio. Teste grátis!

1. Criar conexão

Não podemos esquecer que experiência é sobre pessoas, ou seja, tem alguém do outro lado da tela. Uma forma de começar a criar conexão é entender qual a necessidade do seu usuário. É importante que ele se sinta compreendido, que sinta que seu problema pode ser solucionado por alguém que entende suas dores.

No caso abaixo, usamos a headline H1 da página para demonstrar ao usuário que entendemos as suas necessidades. Nesse caso, é organizar e automatizar os processos comerciais.

Landing Page de levantada de mão do RD Station CRM.

Como usar imagens na Landing Page

O uso de imagens e ilustrações também é uma forma adicional de criar conexão. Esses recursos visuais ajudam a deixar a mensagem mais concreta. Se o usuário entra na página e faz uma leitura dinâmica do texto, observando somente algumas palavras principais, as imagens ou ilustrações podem ajudá-lo a compreender mais rapidamente do que se trata a Landing Page. 

É importante ressaltar que temos que buscar sempre a coerência visual. Então, para usar ilustrações ou imagens, as mesmas devem fazer sentido com a estética da página, bem como entender onde cabe ou não usar esse tipo de recurso.

No exemplo abaixo, usamos a ilustração para auxiliar o entendimento do material que estamos oferecendo. A ilustração tem cores e estética que são coerentes com o resto da página, por isso o seu uso faz sentido para a experiência.

Landing Page do Calendário de Conteúdo para Redes Sociais.

Prova social e UX Design

Outra forma de criar conexão com o usuário é usar o recurso da prova social. Ela nada mais é que um fenômeno psicológico em que as pessoas assumem as ações de outras na tentativa de refletir o comportamento correto para uma determinada situação. 

Existem várias formas de utilizar a prova social, veja alguns exemplos:

  • Texto: usando exemplos numéricos, como “Mais de 5 mil empresas já cresceram com o RD Station Marketing”;
  • Logotipos: usando logos de empresas confiáveis que utilizam o seu produto;
  • Depoimentos: trazer relatos de clientes satisfeitos que já utilizaram o produto.

Antes de mais nada, é importante entender qual dos formatos funciona melhor para a sua estratégia. Utilizar números de prova social no texto é legal para trazer impacto. Caso o número seja realmente muito expressivo, você pode colocar essa informação logo no título da página, que é onde o olhar do usuário provavelmente vai chegar primeiro.

Caso os usuários que estão chegando na página sejam imaturos quanto ao produto sendo oferecido, faz sentido usar logotipos de clientes notáveis logo abaixo da primeira dobra. A ideia é dar confiança pro usuário buscar conhecer mais.

Já os depoimentos geralmente ficam um pouco mais abaixo da página, pois entendemos que o usuário que chegou até lá esteja precisando de algum reforço para concretizar a ação que queremos. Nesse sentido, ler um depoimento de outro cliente de sucesso pode cair muito bem.

Abaixo, veja um exemplo de prova social em formato de depoimento. Ela está numa área mais abaixo da página.

Landing Page de levantada de mão do RD Station CRM.

2. Ter uma narrativa

A partir da proposta de valor, qual é a história que eu estou tentando contar para o meu usuário? É importante criar uma narrativa e guiar o usuário através da página, para que ele entenda qual o valor do que estamos oferecendo. 

O H1 da Landing Page vai ser o título da sua história. É através dele que o usuário vai entender do que se trata a página, ele serve como uma isca. A partir disso, você pode começar a construir a história que quer contar no decorrer desta página, lembrando que não é necessário colocar todas as informações na primeira dobra! 

Muitas vezes uma página muito carregada de informações vai repelir o usuário, ao invés de guiá-lo até a conversão. Abaixo, um exemplo de página que usamos o copy para contar uma história, e guiar o usuário dentro dessa narrativa durante a navegação na página.

Landing Page da Masterclass: Os segredos de negócios da RD Station.

Hierarquia da informação

Para entender como guiar esse usuário através dessa narrativa, vamos usar a hierarquia da informação. O que significa isso? 

A hierarquia da informação é quando usamos recursos visuais para demonstrar qual é a escala de importância das informações apresentadas. Por exemplo: como sabemos que um título é um título? Provavelmente ele está sendo apresentado com uma fonte maior, com mais peso e talvez em uma cor diferente. 

Esses são alguns exemplos de recursos visuais que podemos usar para direcionar o olhar do usuário. Junto da hierarquia da informação, temos ainda a ordem de leitura. De acordo com pesquisas feitas pelo Nielsen Norman Group, existem dois padrões de leitura mais comuns: o F e o Z.

Vamos usar a primeira dobra da página do Social Media Day para exemplificar:

Landing Page do Social Media Day

O padrão F demonstra que os usuários costumam direcionar o olhar primeiro na horizontal, da esquerda para a direita, partindo da parte de cima da página, e em seguida na vertical.

UX Design na Landing Page do Social Media Day, padrão F

Já o padrão Z, indica que o usuário guia o olhar iniciando pelo lado esquerdo, indo até o direito e fazendo uma diagonal para chegar até a parte inferior.

UX Design na Landing Page do Social Media Day, padrão Z

A diferença entre os dois padrões é o tipo de conteúdo. O padrão F geralmente acontece para conteúdos densos, onde a ordem de leitura é essencial, como por exemplo, um blogpost. 

Já o padrão Z é aplicado normalmente para conteúdos mais pontuais, com menos texto, em que a ordem de leitura não é imprescindível para o entendimento da mensagem. Esse é o caso das Landing Pages.

Montando a narrativa visual

Agora que já entendemos o que é hierarquia da informação e ordem de leitura, podemos começar a montar visualmente a narrativa que construímos.

Como vimos no padrão de leitura, o usuário nem sempre vai seguir a ordem que imaginamos. Dessa forma, o uso de recursos de UX Design é super indicado para demonstrar importância. 

Como no exemplo da página do Social Media Day, usamos o nome do evento com um tamanho bem maior que os demais elementos, em uma cor de destaque. Além disso, colocamos ele na posição onde o olhar bate primeiro: o lado esquerdo.

Exemplo de hierarquia boa e ruim em UX Design para Landing Page

Temos acima um exemplo de boa hierarquia versus hierarquia ruim. Na segunda imagem, podemos ver que o título não tem destaque suficiente, ele acaba se misturando num mesmo bloco visual que o subtítulo, o que passa a sensação de um texto denso. Assim, ele não capta o olhar do usuário.

>> Leia também: SEO para Landing Page: 5 melhores dicas para otimização

3. Ser objetivo

Agora que já entendemos como criar conexão e ter uma narrativa, vamos entender como reunir tudo isso e ser objetivo! É importante lembrar que temos frações de segundos para captar a atenção do usuário. 

É claro que temos muitos benefícios para oferecer pra ele, e queremos contar tudo, mas em uma fração de segundo não vamos conseguir, por isso precisamos eleger o que é prioridade.

Ao iniciar a construção de uma Landing Page focada em UX design, faça a pergunta: qual a minha prioridade? Isso vai te ajudar a entender qual informação você quer valorizar, e qual faz sentido deixar pra um outro momento da página.

Já falamos sobre construir narrativa e sobre hierarquia da informação, e aqui você vai aplicar esses conceitos à informação que você elegeu como prioritária. 

Na imagem abaixo, por exemplo, para a estratégia dessa Landing Page entendemos que faria sentido priorizar as informações de data e local do evento. A partir de análises, percebemos que era isso que o nosso público buscaria ao entrar na página. 

Landing Page do Intensivão de Planejamento de Marketing 2022.

Dessa forma, trouxemos essas informações junto com o nome do evento, logo na primeira dobra, em seguida um subtítulo, que consideramos menos prioritário. Lembra que o usuário vai olhar para uma coisa de cada vez? Então que seja para a informação que vai manter ele na página.

Ao priorizar uma informação, não esqueça de mantê-la simples e focada. É muito interessante que o usuário não precise se esforçar para entender a mensagem. Isso vai ajudá-lo a ter uma experiência mais fluida e, assim, mantê-lo na página por mais tempo, aumentando as chances de conversão.

No exemplo abaixo, usamos um subtítulo que indica exatamente o que o usuário vai encontrar, de forma simples e focada. Essa informação serve como uma isca para o usuário.

Landing Page do Marketing Day 2022.

Aplique o UX Design com o criador de Landing Pages do RD Station Marketing

Agora que você já aprendeu alguns conceitos de UX Design para aplicar à sua estratégia e aumentar a conversão, use o RD Station Marketing para colocar em prática.

Todas as páginas trazidas como exemplo nesse post foram construídas usando a ferramenta. Ela conta com um editor de Landing Pages que facilita muito o seu trabalho, contando com templates e funcionalidade drag and drop! Além disso, ela permite personalizações do código para quem já está mais avançado na construção de LPs.

As Landing Pages são a porta de entrada para todas as segmentações e automações de Marketing Digital oferecidas pelo RD Station Marketing. Você pode construir suas páginas de acordo com as necessidades do seu negócio, solicitando as informações que são importantes para conduzir seus Leads pela jornada de compra!

Que tal aplicar as dicas de UX Design deste post e já conhecer todo o poder do editor de Landing Pages do RD Station Marketing? Essa funcionalidade está disponível no teste gratuito da ferramenta, e é só clicar no banner abaixo para começar!

vitrine de landing pages
Maria Luiza Agostini

Maria Luiza Agostini

Veja também

Marketing
10 fatores de conversão para criar uma home page de site matadora
Marketing
Como o Unimestre conseguiu captar 25x mais leads e cortar o tempo de negociação pela metade com o RD Station Marketing
Marketing
O que você perdeu em maio: 10 conteúdos do mês pra você não ficar por fora de nada