whoiscarlo/agent-skills

Conversão e UX de Landing Pages

Regras para páginas cujo objetivo é obter uma ação: fazer login, inscrever-se, deixar um e-mail, solicitar algo. Destiladas de uma estante de e-books de marketing, conversão e UX (UserTesting, UXPin, SmartBug, Usabilla e outros, aproximadamente 2014 a 2016). Os números que citam são antigos. O comportamento por trás deles não é.

Cada regra é uma instrução, uma breve justificativa e um exemplo. Para uma revisão, comece com o checklist no final.

---

1. Proposta de valor e acima da dobra

1. Passe no teste de cinco segundos. Por que: os visitantes decidem em poucos segundos se uma página é para eles. Se não conseguirem dizer o que você faz até lá, clicam em Voltar. Exemplo: mostre a página para alguém por cinco segundos, esconda-a e pergunte "O que é isso e para quem é?" Se a pessoa não conseguir responder, reescreva o título antes de tocar em qualquer outra coisa.

2. Escreva o título sobre o resultado para o visitante, não sobre você. Por que: uma página que fala sobre "nós" força o leitor a fazer a tradução. "Você" e um resultado concreto fazem isso por ele. Exemplo: "Nós curamos e-mails de marketing" se torna "Veja como 400 marcas escrevem seus e-mails, organizados e pesquisáveis".

3. Apoie o título com dois ou três motivos concretos para agir. Por que: o título motiva; os motivos convertem as pessoas que estão em cima do muro. Exemplo: abaixo do título, três linhas curtas: "Novas marcas toda semana", "E-mails completos, não miniaturas", "Grátis para navegar".

4. Mostre a coisa real, não uma foto de banco de imagens. Por que: imagens genéricas parecem preenchimento e tornam a página menos confiável. Uma captura de tela do produto prova que ele existe. Exemplo: substitua uma foto de equipe sorrindo por uma grade real de e-mails arquivados.

5. Deixe a primeira tela declarar a oferta e depois permita que as pessoas rolem. Por que: o hero deve carregar a proposta de valor e a ação principal, mas amontoar todos os recursos acima da dobra cria bagunça. As pessoas rolam quando a hierarquia está clara. Exemplo: o hero contém título, subtítulo, um botão e uma prévia do produto. Recursos, prova social e FAQ ficam abaixo.

6. Projete primeiro para a tela pequena. Por que: o layout do celular força você a classificar o conteúdo. O que sobrevive no mobile é o que importa, e a versão desktop cresce a partir dele de forma limpa. Exemplo: faça o wireframe da versão 375px com apenas título, botão e uma linha de prova, depois aumente até que haja muito espaço vazio e adicione o próximo item.

7. Mantenha o hero rápido. Por que: atrasos acima de cerca de um segundo fazem as pessoas se sentirem fora de controle, e páginas lentas perdem visitantes e posição nos mecanismos de busca. Exemplo: uma imagem de prévia compactada, sem vídeo em reprodução automática, sem slider.

[Fontes: Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]

---

2. Chamadas para ação

1. Dê a uma landing page um objetivo e um CTA principal. Por que: toda ação extra compete com a que você deseja. Uma página que pede para as pessoas assistirem a um vídeo, lerem seis depoimentos e depois preencherem um formulário as perde ao longo do caminho. Exemplo: um botão "Abrir o arquivo", repetido no topo e no final, e nada mais estilizado como botão.

2. Rotule o botão com o que acontece em seguida. Por que: "Enviar" e "Clique aqui" descrevem o mecanismo, não a recompensa. Um verbo mais a coisa torna o objetivo da página óbvio. Exemplo: "Enviar" se torna "Solicitar esta marca"; "Entrar" se torna "Abrir o arquivo".

3. Diga o que o visitante ganha antes de ele se comprometer. Por que: as pessoas perguntam "pelo que estou trocando meu e-mail?" Responda com texto e, quando possível, uma imagem do resultado. Exemplo: ao lado de um botão bloqueado, uma linha como "Grátis. Faça login com o Google. Leva dez segundos." e uma prévia do arquivo atrás dele.

4. Faça o CTA se destacar pelo contraste, não pelo volume. Por que: um botão saturado em uma página calma atrai o olhar. Uma cor berrante que conflita com a marca barateia todo o site. Exemplo: mantenha a IU ao redor dessaturada e dê apenas ao botão principal a cor mais forte da marca.

5. Apenas botões devem parecer botões. Por que: texto emoldurado ou botões falsos que não fazem nada desperdiçam cliques e ensinam as pessoas a desconfiar do resto da página. Exemplo: não coloque uma pílula com borda em torno de "400+ marcas"; estilize como um rótulo ou texto simples.

6. Torne os alvos de toque grandes e bem espaçados. Por que: dedos são menos precisos que cursores. Alvos pequenos ou aglomerados causam toques errados e toques duplos. Exemplo: pelo menos 44 por 44 pontos para o botão principal, com espaço claro do link mais próximo.

7. Não esconda nada importante atrás de hover. Por que: telas sensíveis ao toque não têm hover. Informações que só aparecem ao passar o mouse são invisíveis para usuários de celular. Exemplo: mostre a nota "o que você ganha" abaixo do botão, não em um tooltip.

8. Ofereça um caminho mais suave para quem não está pronto. Por que: a maioria dos visitantes não está pronta para a ação principal na primeira visita. Uma opção secundária de menor compromisso os impede de sair de mãos vazias, mas deve permanecer visualmente secundária. Exemplo: um link de texto "ou receba um e-mail quando novas marcas chegarem" abaixo do botão principal.

[Fontes: 33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]

---

3. Formulários de captura de leads e inscrição

1. Peça apenas o que você vai usar agora. Por que: cada campo reduz a taxa de conclusão. Em um teste, reduzir um formulário de 11 campos para 4 aumentou as inscrições em mais de 100% sem queda na qualidade dos leads. Exemplo: um formulário "Solicitar a próxima marca" precisa de um nome de marca e um e-mail. Não nome, não empresa, não telefone.

2. Remova campos que confundem. Por que: um campo ambíguo pode afundar um formulário. Um caso famoso removeu um único campo opcional "Empresa" que as pessoas interpretavam mal e ganhou milhões em receita. Exemplo: se você adicionar "Site" à solicitação de marca, as pessoas podem não saber se você quer dizer o site delas ou o da marca. Remova-o ou rotule-o exatamente.

3. Colete mais depois, não tudo de uma vez. Por que: perguntar um pouco a cada visita (perfilamento progressivo) gera mais conclusões e dados mais limpos do que um formulário longo que as pessoas preenchem com qualquer coisa. Exemplo: a primeira solicitação pede apenas o e-mail; um e-mail posterior pergunta "em qual setor você trabalha?"

4. Aceite entrada em qualquer formato razoável. Por que: rejeitar "Nike.com" porque você queria "Nike" pune o usuário pelo seu parser. Limpe-o no servidor. Exemplo: remova espaços, remova "www." e ".com", combine sem distinção entre maiúsculas e minúsculas.

5. Coloque o formulário ao lado do valor que ele desbloqueia. Por que: um formulário que fica logo após um conteúdo útil converte muito melhor do que uma caixa de barra lateral genérica que as pessoas aprenderam a ignorar. Exemplo: coloque "Faltou uma marca? Solicite-a" logo abaixo da prévia do arquivo, não no rodapé.

6. Mantenha login e inscrição visualmente distintos. Por que: quando os dois formulários estão empilhados, muitos novos visitantes começam a preencher o errado. Exemplo: um botão "Continuar com Google" que lida com ambos os casos, ou dois painéis claramente separados.

7. Forneça um botão de mostrar senha e um link visível de "esqueci a senha". Por que: senhas digitadas erradas no celular levam as pessoas a e-mails de redefinição que as tiram do fluxo. Exemplo: um ícone de olho no campo de senha; o link de redefinição logo abaixo.

8. Confirme o sucesso na página, em palavras simples. Por que: as pessoas precisam saber que o formulário funcionou e o que acontece a seguir. Exemplo: "Entendido. Enviaremos um e-mail quando a Glossier estiver no arquivo."

9. Explique o que você faz com o e-mail em uma linha curta. Por que: a preocupação com a privacidade é um motivo comum para as pessoas pararem no último campo. Linguagem simples vence um link para texto legal. Exemplo: "Um e-mail quando sua marca for adicionada. Sem newsletter, a menos que você peça."

[Fontes: 3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (form rules only)]

---

4. Prova social e confiança

1. Use números reais quando você os tiver. Por que: as pessoas confiam mais em números concretos do que em adjetivos. Exemplo: "2.140 e-mails de 312 marcas" vence "uma biblioteca enorme".

2. Atribua cada depoimento a uma pessoa real. Por que: um nome, cargo e foto tornam uma citação relacionável. Uma citação anônima parece inventada. Exemplo: "Me salvou horas na nossa série de boas-vindas." Priya S., especialista em ciclo de vida de marketing em uma marca DTC, com foto.

3. Mostre logos reconhecíveis de forma discreta. Por que: a credibilidade por associação funciona, mas logos coloridos competem com o CTA. Exemplo: uma única linha de logos de marcas em escala de cinza logo abaixo do hero.

4. Coloque a prova onde a dúvida surge. Por que: um depoimento no meio da página, ao lado da afirmação que ele apoia, faz mais do que uma parede de citações no final. Exemplo: após "e-mails completos, não miniaturas", uma citação de alguém que usou a visualização em tamanho real.

5. Teste a prova social em vez de presumir que ela ajuda. Por que: os números de assinantes às vezes diminuem a conversão, especialmente quando o número é pequeno. Exemplo: teste A/B do hero com e sem "Junte-se a 800 profissionais de marketing".

6. Ganhe confiança com polimento e honestidade. Por que: a qualidade visual é a primeira coisa que as pessoas usam para julgar a credibilidade. Erros de digitação, botões quebrados e alinhamento confuso são lidos como "não é legítimo". Exemplo: revise cada texto, clique em cada link antes do lançamento.

7. Nunca use padrões escuros. Por que: truques como opt-ins ocultos ou links de cancelamento difíceis de encontrar vencem uma vez e perdem o usuário para sempre. Exemplo: uma caixa desmarcada e claramente rotulada "Enviar também o resumo semanal", nunca uma caixa pré-marcada enterrada em letras miúdas.

8. Seja transparente sobre custo e termos. Por que: as pessoas preferem ver o preço cedo, e afirmações "grátis" que se revelam condicionais destroem a confiança. Exemplo: se a navegação é gratuita, mas os downloads são pagos, diga isso na landing page, não após o login.

[Fontes: The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]

---

5. Fluxo e estrutura da página

1. Mapeie o caminho antes de projetar a página. Por que: sem um planejado "o que eles farão a seguir", as páginas se tornam becos sem saída. Exemplo: escreva: aterrissar, ler título, ver prévia, clicar em "Abrir o arquivo", fazer login, aterrissar dentro do arquivo.

2. Remova a navegação principal de landing pages de objetivo único. Por que: cada link de navegação é uma saída da oferta. Exemplo: logo mais um CTA no cabeçalho, nenhum menu "Blog / Sobre / Preços".

3. Nunca coloque uma página de splash na frente da página real. Por que: ela adiciona uma etapa e não diz nada ao visitante. Exemplo: nenhuma porta "Entrar no site". A landing page é a porta da frente.

4. Faça cada página terminar com um próximo passo. Por que: uma página que simplesmente para deixa o visitante procurando. Se eles não encontrarem para onde ir em alguns segundos, vão embora. Exemplo: o FAQ termina com o mesmo CTA do hero.

5. Escreva para escaneadores. Por que: a maioria das pessoas lê apenas títulos, subtítulos e primeiras frases. Exemplo: parágrafos curtos, subtítulos claros, listas com marcadores para recursos.

6. Agrupe e espaçe o conteúdo para reduzir a carga cognitiva. Por que: o espaço em branco melhora a compreensão, e agrupar itens relacionados permite que as pessoas absorvam mais sem remover nada. Exemplo: agrupe os recursos em três cartões em vez de nove linhas soltas.

7. Use padrões familiares a menos que tenha prova de que o seu é melhor. Por que: padrões reconhecíveis permitem que as pessoas ajam sem pensar. Quebrá-los força o aprendizado e causa erros. Exemplo: coloque o login no canto superior direito, não em um gesto oculto. Se sua regra para um padrão precisar de "a menos que" ou "exceto", esse é o momento de repensá-la.

8. Rotule os links pelo que está por trás deles. Por que: rótulos claros dão "cheiro de informação". Rótulos criativos o escondem. Exemplo: "Navegar por marcas", não "As coisas boas".

9. Atenda à acessibilidade básica. Por que: é boa UX para todos, incluindo pessoas sob sol forte ou em um celular lento. Exemplo: contraste de texto de pelo menos 4,5:1, texto do corpo de pelo menos 16px, altura da linha em torno de 1,5, rótulos reais nos campos do formulário.

10. Projete os estados vazio e de espera intencionalmente. Por que: uma tela em branco após o login parece quebrada. Um estado vazio ou de carregamento claro informa às pessoas o que esperar e as mantém no controle. Exemplo: "Carregando 2.140 e-mails..." com uma grade esqueleto, não uma página branca.

[Fontes: 33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]

---

6. Os crimes de design a evitar

Uma lista rápida dos erros que mais frequentemente afundam uma página. Cada linha diz o que fazer em vez disso.

• Sliders e carrosséis. Muito poucas pessoas clicam em slides após o primeiro, e eles tornam a página lenta. Mostre uma imagem forte em vez disso.
• Vídeo ou som em reprodução automática. Isso assusta as pessoas e elas vão embora. Use um botão de reprodução e deixe-as escolher.
• Fotos de banco de imagens cafonas. Elas parecem suspeitas em uma página que pede dados. Use fotos reais do produto.
• Vários CTAs concorrentes em uma landing page. Escolha um.
• Botões "Enviar" padrão. Renomeie para a ação.
• Formulários mais longos do que a oferta vale. Reduza ao mínimo.
• Bagunça. Cada bloco deve merecer seu lugar. Remova até doer.
• Paredes de texto. Divida em títulos, parágrafos curtos e marcadores.
• Texto de baixo contraste ou minúsculo. Cinza claro sobre branco falha na legibilidade.
• CTAs não relacionados ao conteúdo da página. Uma oferta global na barra lateral que não corresponde à página converte mal. Combine a oferta com a página.
• Falar sobre si mesmo. Troque "nós" por "você" e o resultado do visitante.
• Ignorar o mobile até depois. Projete mobile primeiro.
• Pop-ups que bloqueiam o conteúdo. Use banners no topo ou na parte inferior.
• Links quebrados e imagens ausentes. Teste antes de publicar.
• Muitos campos de formulário. Peça apenas o necessário.
• Falta de hierarquia visual. Dê destaque aos elementos mais importantes.
• CTAs genéricos. Seja específico sobre o que acontece ao clicar.
• Esconder o preço ou custo. Seja transparente.
• Depoimentos genéricos. Use citações reais com nomes e fotos.
• Esquecer de testar. Teste com usuários reais.

[Fontes: Compilado das fontes acima]

---

Checklist de revisão de landing page

Use esta lista para revisar qualquer página cujo objetivo seja converter um visitante. Verifique cada item.

Proposta de valor e acima da dobra

• O título passa no teste de cinco segundos?
• O título é sobre o resultado para o visitante, não sobre você?
• Há dois a três motivos concretos para agir abaixo do título?
• A imagem do hero mostra o produto real?
• A primeira tela carrega rápido (menos de 1s)?

Chamada para ação

• Há exatamente um CTA principal?
• O botão diz o que acontece a seguir?
• O valor de clicar está claro antes do clique?
• O botão se destaca pelo contraste?
• Há um caminho secundário para os não prontos?

Formulário

• O formulário pede apenas o que você usará agora?
• Os campos estão claramente rotulados?
• A entrada é aceita em formatos razoáveis?
• A confirmação do sucesso é mostrada?
• O uso do e-mail é explicado?

Prova social

• Os números são reais e específicos?
• Os depoimentos são atribuídos a pessoas reais?
• A prova está colocada perto da afirmação que apoia?
• A prova foi testada?

Fluxo e estrutura

• A navegação principal foi removida?
• A página termina com um próximo passo?
• O conteúdo é escaneável?
• Os links têm rótulos claros?
• A página é acessível?
• Os estados vazio e de carregamento são projetados?

Evitar crimes de design

• Sem sliders ou carrosséis?
• Sem som ou vídeo em reprodução automática?
• Sem fotos de banco de imagens?
• Apenas um CTA na página?
• Botões rotulados com a ação, não "Enviar"?
• Formulário curto?
• Sem bagunça ou paredes de texto?
• Contraste suficiente e texto legível?
• Sem pop-ups que bloqueiam?
• Todos os links e imagens funcionam?

---

Este guia foi compilado de fontes de UX e conversão, incluindo UserTesting, UXPin, SmartBug, Usabilla e outros. Os princípios subjacentes permanecem válidos, embora benchmarks de desempenho e dados de testes específicos possam estar desatualizados.