UX de landing page: o que decide se a pessoa consegue usar a sua página

UX não é a lista de seções da página

Quase todo texto sobre "UX de landing page" em português entrega a mesma coisa: uma lista de blocos que a página precisa ter. Essa lista é útil, mas não é UX. É outro assunto, e ele tem endereço próprio: a estrutura da landing page trata de quais blocos entram e em que ordem.

UX é o que sobra depois disso. Uma definição prática, sem teoria: a experiência da sua página é a quantidade de trabalho que ela cobra de quem chegou para conseguir o que veio buscar.

Ler cobra trabalho. Procurar cobra trabalho. Acertar um botão pequeno com o polegar cobra trabalho. Preencher um campo cobra trabalho. Esperar cobra trabalho. Cada um desses custos parece desprezível sozinho. Somados, eles decidem quem termina e quem desiste no meio.

Ninguém lê a sua página, as pessoas varrem

Primeira correção de expectativa: o visitante não começa no canto superior esquerdo e desce lendo palavra por palavra. Ele varre. O olho pula de âncora em âncora, título, número, botão, rosto, e só desacelera quando alguma dessas âncoras promete o que ele quer.

Isso tem uma consequência incômoda: você não controla a ordem em que a sua página é lida, você só influencia. E influencia com tamanho, peso, contraste, espaço e posição, que é o assunto de hierarquia visual.

Duas regras práticas saem daí. A primeira: cada bloco carrega uma ideia só. Se você precisa de dois parágrafos para explicar o que aquele bloco queria dizer, o título dele está errado.

A segunda: escreva os títulos como se eles fossem a página inteira. Se alguém ler apenas os títulos, do topo até o fim, e entender a oferta, a varredura funciona. Se os títulos forem enfeites do tipo "Sobre nós" e "Nossos diferenciais", quem varreu não recebeu nada, e vai embora achando que ali não tinha nada.

Legibilidade: o texto que ninguém lê porque não dá

Antes de discutir o que o texto diz, vale garantir que ele possa ser lido. Cinco coisas resolvem quase tudo aqui, e todas são decisões de dez segundos.

Tamanho

Corpo de texto pequeno é o defeito mais comum e o mais fácil de corrigir. No celular, 16 pixels é o piso do texto corrido, não o tamanho generoso. Abaixo disso, quem tem mais de quarenta anos vai aproximar o aparelho do rosto ou fechar a página. Fecha mais vezes do que aproxima.

Largura da linha

Linha longa demais cansa porque o olho perde o começo da linha seguinte e relê a mesma frase sem perceber. A convenção tipográfica fala em algo entre 45 e 75 caracteres por linha, e ela é bem anterior à web. Num monitor grande, um parágrafo que atravessa a tela inteira tem o dobro disso. Limitar a largura do texto não é capricho de designer, é o que permite ler dois parágrafos seguidos sem se perder.

Entrelinha

Texto grudado vira uma massa cinza, e o olho evita massa cinza. Para texto corrido, entrelinha em torno de uma vez e meia o tamanho da fonte funciona bem. Título aceita bem menos, porque a linha é curta e o olho não corre risco de se perder.

Contraste

Cinza claro sobre branco é a escolha estética mais popular da última década e a mais cara. Ela some no celular, some na tela ao sol e some para qualquer pessoa com a visão um pouco cansada. A diferença entre isso e as outras quatro decisões dessa lista é que contraste tem número e dá para conferir em segundos, como explico em acessibilidade em landing page.

Caixa alta, itálico e centralização

Os três funcionam em dose pequena e destroem a leitura em dose grande. CAIXA ALTA apaga o contorno da palavra, que é justamente o que o olho usa para reconhecer palavras sem soletrar. Parágrafo inteiro em itálico cansa. Texto centralizado com mais de três linhas obriga o olho a procurar o início de cada linha nova, porque a borda esquerda deixou de existir.

Fricção: a que protege e a que só cobra pedágio

Fricção é qualquer coisa que exige um passo a mais. A ideia corrente é que toda fricção é ruim e precisa ser eliminada. Isso é falso, e seguir à risca produz páginas que geram muito contato inútil.

A pergunta que separa as duas colunas é sempre a mesma: esse passo a mais melhora a conversa que vem depois? Se melhora, ele se paga. Se não melhora, ele é imposto.

Existe pesquisa séria sobre fricção em formulário, e ela mede algo mais específico do que "menos é melhor":

11,3

era a média de campos num checkout em 2024, quando cerca de 8 dariam conta do recado. Entre os usuários observados, 17% já abandonaram uma compra por complexidade do processo.

O que interessa aqui não é o número, é o mecanismo por trás dele: a quantidade de campos pesa mais na usabilidade do que a quantidade de etapas, e o tamanho aparente pesa mais que o tamanho real. Um formulário de oito campos que parece curto se sai melhor que um de seis que parece longo.

Isso muda o que você faz na prática. Em vez de cortar campo por instinto, você conserta a aparência de esforço: agrupa o que é do mesmo assunto, tira do caminho o que é opcional, e para de mostrar dez caixas vazias de uma vez.

O dedo não é o cursor

Toda página feita no computador nasce com o mesmo vício: o mouse acerta um alvo de doze pixels e o polegar não. Pior, o dedo cobre a área que está mirando, então a pessoa erra sem enxergar que errou. Quem projeta com mouse nunca sente isso.

• Alvo pequeno. Ícone de redes sociais, link de rodapé e botão de fechar são os campeões, e dois deles costumam estar colados.
• Alvos vizinhos demais. Espaço entre alvos importa tanto quanto o tamanho de cada um. Dois botões encostados produzem toque errado, e toque errado numa página de contato significa ligação não feita.
• Link no meio do parágrafo. Funciona no texto, mas nunca deve ser a única forma de chegar à ação principal.
• Hover não existe no toque. Qualquer coisa que só aparece quando o mouse passa por cima simplesmente não existe no celular.

As plataformas publicam tamanhos mínimos de alvo, e eles não são sugestão estética. Os números e o resto do contexto de quem usa uma mão só estão em landing page no celular.

Feedback: a página precisa responder

A regra é antiga e continua sendo violada todo dia: toda ação do usuário precisa de resposta visível, e a resposta precisa vir rápido o bastante para a pessoa ligar uma coisa à outra.

• Botão que não muda ao ser tocado. A pessoa toca de novo, e você recebe dois envios da mesma pessoa, ou nenhum.
• Envio sem confirmação. O formulário some e nada aparece no lugar. Quem enviou não sabe se enviou.
• Erro genérico. "Ocorreu um erro" não informa nada e não sugere saída.
• Validação só no envio. A página joga a pessoa de volta ao topo para ela descobrir sozinha qual dos nove campos está errado.
• Espera sem sinal. Qualquer coisa que demore mais que um instante precisa mostrar que está acontecendo.

A linha mais cara dessa lista é a segunda. Alguém preencheu tudo, tocou em enviar e a página ficou muda. Essa pessoa não tenta de novo, e você nunca vai saber que ela existiu, porque o contato não chegou até você.

Mensagem de erro boa faz três coisas: diz o que aconteceu, diz onde aconteceu e diz o que fazer agora. "Telefone inválido" faz uma. "O telefone precisa ter DDD, como em 11 99999 0000" faz as três, e custa a mesma linha de código.

Cada decisão que você não toma, o visitante toma

Uma página com três chamadas concorrentes na mesma altura não oferece liberdade, oferece um problema para resolver. Escolher consome energia, e energia gasta escolhendo não é energia gasta convertendo.

• Duas ações de mesmo peso visual. Se as duas parecem igualmente importantes, nenhuma é a principal.
• Menu completo de site institucional dentro da landing page. É uma coleção de saídas apresentada logo na primeira tela.
• Três formas de contato lado a lado. A pessoa passa a escolher o meio em vez de executar a ação, e às vezes escolhe não escolher.

Isso não significa uma única ação na página inteira. Significa uma ação principal por tela, repetida ao longo do caminho, com no máximo uma alternativa de peso claramente menor ao lado.

Como conferir a sua página sem ferramenta nenhuma

Cinco testes que custam uma tarde e encontram mais coisa do que a maioria das auditorias pagas:

1. Teste dos títulos. Leia só os títulos, de cima a baixo. Dá para entender a oferta e o próximo passo? Se não dá, a varredura não funciona.
2. Teste do desfoque. Aperte os olhos até a página ficar borrada. O que continua saltando é a sua hierarquia real, e ela costuma ser diferente da que você pretendia.
3. Teste do polegar. Uma mão só, de pé, sem apoiar o aparelho. Tente completar a ação principal. Todo erro de toque conta.
4. Teste do silêncio. Dê uma tarefa concreta a alguém que nunca viu a página ("descubra quanto custa e como pedir") e fique calado. Onde a pessoa hesita, é ali.
5. Teste da pergunta repetida. Toda dúvida que chega no seu WhatsApp é uma coisa que a página não respondeu. Essa lista já está no seu celular.

Nenhum desses testes prova nada estatisticamente, e não precisa provar. Eles encontram defeito, e defeito grande aparece já na primeira pessoa. Para páginas com pouco tráfego, isso costuma valer mais do que qualquer painel de métrica, porque volume baixo não sustenta medição fina.