Design de Formulário: Por que os visitantes abandonam seu formulário de inscrição no meio

Um visitante clica seu CTA. O formulário abre. Doze campos, metade deles não está clara, um dropdown de país com 195 entradas, uma regra de senha que diz "deve conter um caractere especial" mas não diz qual. Eles chegam no campo cinco e fecham a aba.

Esse é quase cada formulário de signup na internet. Formulários são onde intenção vai morrer. O visitante chegou disposto a converter, e o formulário tomou exatamente o esforço certo para convencê-los do contrário.

Você não consegue vender com um hero ótimo e depois desperdiçar com um formulário terrível. Aqui está como consertá-lo.

O que design de formulário intuitivo realmente é

Um formulário que se sente invisível. Os visitantes pensam no que estão dizendo, não em como dizê-lo. Campos são agrupados logicamente, erros aparecem no momento certo, teclados móveis combinam o tipo de entrada, e nada é perguntado duas vezes.

"Um bom formulário não deve apenas coletar informação mas também facilitar a experiência do usuário tanto quanto possível, reduzindo barreiras e incertezas." , Jakob Nielsen

O princípio: cada campo extra, rótulo vago ou regra surpresa é trabalho mental. Os visitantes apenas têm tanto antes de saírem. Economize essa energia para as partes que importam.

Por que isso importa em uma página de destino

Formulários ficam no fundo do funil. Um fix de UX pequeno aqui levanta mais receita que quase em qualquer outro lugar.

Impacto direto em conversões

Um experimento famoso do Expedia: remover um campo opcional "Nome da Empresa" adicionou $12M/ano em lucro. Um campo. Atrito é dinheiro real.

Confiança

Se seu signup é duro, os visitantes assumem que seu produto será duro. O formulário é uma prévia do que trabalhar com você se sente.

Qualidade de dados

Validação em tempo real e instruções claras reduzem typos e inputs quebrados. Menos lixo em seu banco de dados, menos tickets de suporte.

Móvel

Digitar em um telefone é mais lento e mais propenso a erros. Formulários que não otimizam para móvel se saem abandonados em taxas muito maiores.

Como usar isto em sua página

A forma mais rápida para um formulário melhor é subtração.

1. Corte cada campo que conseguir

O movimento mais alto de alavanca única: delete campos. Pergunte apenas o que você absolutamente precisa para onboard um visitante.

• Faça: Use smart defaults, detecte país por IP, prefill campos óbvios.
• Evite: Perguntar por dados "opcionais" que ajudam seu time de marketing mas não faz nada para o visitante agora.

2. Agrupe campos logicamente

Os humanos lidam com informação melhor em lotes. Divida o formulário em seções, "Informação de Conta", "Envio", "Pagamento", visualmente distintas com cabeçalhos claros.

3. Valide em tempo real

Não espere por "Submit" para dizer ao visitante que campo três estava errado. Mostre erros conforme digitam, confirme fills corretos com um check pequeno.

• Veja Comunicação Rápida e Visual: Usando Ícones Efetivamente para dicas de estado de erro.
• Verifique Acessibilidade de Cor: Projetando para Todo Mundo para que cores de erro sejam legíveis para todo mundo.

4. Use a entrada certa para a contagem de opção

• Mais de 5 opções: dropdown.
• 5 ou menos: radio buttons ou controles segmentados. Mantém tudo visível, menos cliques.

5. Rótulos acima do campo

Rótulos alinhados no topo são o padrão ouro. O olho digitaliza para baixo uma coluna única. Eles não desaparecem quando o visitante foca o campo (diferente de placeholders flutuantes).

Para mais, veja O Formulário Ideal: Dominando Estrutura.

Maneiras comuns de quebrar isto

Placeholders como rótulos

• O erro: Rótulo apenas aparece no placeholder. Clique o campo, rótulo desaparece, visitante esquece o que digitar.
• O conserto: Mantenha rótulos visíveis acima do campo o tempo todo.

Esconder o que é obrigatório

• O erro: Nenhum indicador em campos obrigatórios até o formulário falhar no submit.
• O conserto: Marque obrigatório com *. Ou melhor, marque os poucos que são opcionais, já que a maioria deveria ser obrigatória.

Teclado móvel errado

• O erro: Teclado de texto padrão aparece quando o visitante está digitando um número de telefone.
• O conserto: Use o input type certo, email, tel, number. Móvel então mostra o teclado certo automaticamente.

Como produtos reais lidam com isto

Spotify

Placeholders claros, validação em tempo real que sinaliza emails duplicados ou senhas fracas conforme digita, e uma linha de auth social no topo para que visitantes pulem o formulário inteiro. O "formulário" é mal lá se você clica Google.

Duolingo

Coluna única, curto, sem surpresas. Microcopy como "Pagamento criptografado SSL Seguro" reduz a ansiedade gut-check de passar um cartão. O formulário faz seu trabalho e sai do caminho.

Princípios relacionados

Formulários dependem do básico. Combine isto com:

Comunicação Rápida e Visual

Como ícones dão aos visitantes feedback instantâneo na validação de formulário.

Acessibilidade de Cor

Como escolher cores que funcionam para visitantes com visão baixa.

Perguntas frequentes