← Artigos Design

Design de formulários que convertem

Design de formulários que convertem

Formulários são o ponto onde a intenção do usuário encontra a plataforma. Um campo a mais, uma mensagem de erro genérica, e a conversão não acontece.

  • Menos campos, mais conversão
  • Labels e placeholders não são a mesma coisa
  • Feedback de erro que ajuda
  • Validação em tempo real
  • A posição da VM2
Design
VM2
Voltar

Formulários são o elemento de interface com maior impacto direto em conversão e com menos atenção de design na maioria dos projetos. Recebem cor e tipografia do design system, mas raramente uma revisão séria de UX writing, fluxo e feedback.

O resultado é previsível: usuários chegam ao formulário com intenção de completá-lo e desistem antes de chegar ao botão de envio.

A magnitude do problema é mensurável. O Baymard Institute, que pesquisa usabilidade de e-commerce há mais de 11 anos e atende 71% das empresas Fortune 500 do segmento B2C, aponta que a taxa média de abandono de checkout em 2025 está em 70,19%. Boa parte desse abandono não vem do preço nem do produto, vem do formulário. 18% dos usuários abandonam compra explicitamente porque o processo está “longo ou complicado demais”.


Menos campos, mais conversão

A primeira pergunta a fazer sobre qualquer formulário é: cada campo aqui é necessário? Não “poderia ser útil ter essa informação”. Necessário para que o próximo passo aconteça.

Formulários de cadastro que pedem nome, sobrenome, email, telefone, empresa, cargo e segmento antes de deixar o usuário criar uma conta são formulários de atrito, não de registro. Cada campo adicional reduz a taxa de conclusão de forma significativa. A pesquisa do Baymard mostra que o checkout médio tem 23,48 elementos de formulário, quando a maioria dos sites poderia operar com 6 a 8 campos. Reduzir o formulário em 20 a 60% recupera quase 1 em cada 5 conversões perdidas por complexidade.

A queda de conversão por campo adicional não é linear. Benchmarks de 2026 mostram que a conversão cai de forma moderada entre 3 e 5 campos (de 23,1% para 17,0%), mas despenca depois disso: 11,4% com 7 campos, 6,9% com 10 ou mais. Existe um precipício entre 5 e 7 campos onde cada campo adicional custa quase o dobro do anterior.

A regra prática que sai disso: começar com o mínimo absoluto e adicionar campos apenas quando o valor do dado coletado justifica o custo de conversão. Em geral, qualquer campo adicional precisa passar pelo teste de “vamos perder X% de conversão por isso”. Quando o teste é explícito, a maioria dos campos não passa.


Labels e placeholders não são a mesma coisa

Placeholder como substituto de label é um padrão recorrente e um problema consistente. A Nielsen Norman Group, referência em pesquisa de UX, publicou em 2014 um artigo direto sobre o tema, intitulado “Placeholders in Form Fields Are Harmful”, que continua sendo referência para o assunto. A conclusão é direta: colocar a instrução dentro do campo, em vez de acima, prejudica a usabilidade em vários eixos.

Os problemas se acumulam. Quando o usuário começa a digitar, o placeholder desaparece, e com ele desaparece a instrução de o que digitar naquele campo. Se o usuário precisa pausar e voltar, perdeu o contexto. Pior: usuários com baixa visão, deficiência cognitiva ou usando leitor de tela frequentemente não conseguem ler o placeholder de forma confiável. O WebAIM, em análise de mais de 4 milhões de campos de formulário em um milhão de páginas, encontrou que 39% dos campos não tinham rotulagem adequada para acessibilidade.

Labels visíveis, posicionadas acima do campo, são padrão de acessibilidade WCAG e de usabilidade reconhecida. O formulário fica visualmente mais alto, mas funciona melhor para todos os usuários, especialmente em formulários mais longos onde o contexto de cada campo importa para revisão antes do envio. Quando o espaço é restrito, a alternativa razoável é o padrão de “floating label” (label que sobe quando o usuário interage com o campo), que preserva a visibilidade da instrução.


Feedback de erro que ajuda

“Campo obrigatório” não é uma mensagem de erro útil. Não diz o que está faltando, não diz como corrigir, e não diz por que aquela informação é necessária.

Mensagens de erro eficazes são específicas (“Digite um email válido, como nome@empresa.com.br”), aparecem próximas ao campo onde o problema ocorreu, e usam linguagem que ajuda em vez de culpar. A diferença entre “Email inválido” e “Falta o @ no email” parece pequena, mas guia o usuário diretamente para a correção.

Algumas práticas que diferenciam mensagens úteis de mensagens vazias:

  • Específica o que está errado. “Digite um CEP com 8 dígitos” em vez de “CEP inválido”.
  • Indica como corrigir. “A senha precisa de pelo menos uma letra maiúscula e um número” em vez de “Senha fraca”.
  • Aparece perto do campo, não no topo da página. O usuário não deveria precisar rolar para entender o que faltou.
  • Usa tom que ajuda, não que repreende. “Verifique o ano” em vez de “Data inválida”.

A diferença entre um formulário que irrita e um que guia está, em boa parte, nessas mensagens.


Validação em tempo real

Validar só no envio significa que o usuário preenche tudo, clica no botão, e só então descobre que cometeu um erro na linha 2. Isso é um ciclo frustrante que muitos usuários não completam pela segunda vez.

A diferença é mensurável. O estudo clássico de Luke Wroblewski sobre validação em tempo real, publicado em A List Apart em 2009 e ainda usado como referência, comparou formulários com e sem validação inline. Os resultados foram consistentes em todas as métricas: a versão com validação em tempo real teve 22% de aumento na taxa de sucesso, 22% de redução nos erros cometidos, 42% de redução no tempo de conclusão, e 31% de aumento na satisfação relatada.

Validação em tempo real, ou pelo menos na saída de cada campo (no blur, em vez de no submit), encurta o ciclo de correção e mantém o usuário no fluxo. Tem uma nuance importante porém: validar enquanto o usuário ainda está digitando pode irritar mais do que ajudar. Mostrar “email inválido” depois da segunda letra digitada é desnecessariamente alarmista. A boa prática é validar quando o usuário sai do campo, não enquanto está dentro.


A posição da VM2

Em projetos de plataforma, formulários costumam ser tratados como detalhe técnico tardio: o time de desenvolvimento escolhe a biblioteca, aplica o estilo do design system, e fim. A gente trata diferente. Formulário é interface crítica, talvez a mais crítica em fluxos de conversão, e merece pelo menos a mesma atenção que a página de produto ou o checkout.

Isso significa, na prática, revisar cada campo pedido com a pergunta “qual o custo de pedir isso?”, garantir que labels estão visíveis e mensagens de erro são acionáveis, e implementar validação em tempo real desde o início. Não é exigência técnica complexa. É decisão consciente sobre onde o cuidado de design vale o investimento.


Fontes consultadas: Baymard Institute, Checkout Optimization Research (2025); Luke Wroblewski, “Inline Validation in Web Forms”, A List Apart (2009); Nielsen Norman Group, “Placeholders in Form Fields Are Harmful”; WebAIM, Million Home Pages Accessibility Analysis.

Voltar

Leia também