Formulários Legíveis: Labels e Validação
Os erros mais comuns em design de formulário — e como evitá-los. Desde labels bem posicionadas até mensagens de erro que realmente ajudam.
Por que formulários são difíceis de usar?
Formulários são a ponte entre o que o utilizador quer fazer e o que você precisa saber. Quando essa ponte é fraca, as pessoas desistem. Não preenchem o formulário, fecham a aba, vão embora. É simples assim.
A boa notícia? Não é complicado fazer melhor. Na verdade, a maioria dos problemas vem de três coisas: labels que não deixam claro o que preencher, mensagens de validação que aparecem tarde demais ou são confusas, e campos que não indicam se algo deu errado. Vamos explorar como resolver cada um desses problemas.
Labels: O Guia Invisível
Um label é mais que um rótulo. É a primeira coisa que o utilizador lê para entender o que precisa de preencher. Se o label é vago ou está mal posicionado, o utilizador fica confuso.
A regra de ouro? Coloca o label acima do campo de input, alinhado à esquerda. Por quê? Porque quando o utilizador escreve, o label fica visível. Se o label fica ao lado (especialmente à direita), desaparece da vista no campo periférico. Acredita ou não, isso importa muito.
Labels eficazes têm estas características:
- São específicos. “Email” é bom. “Introduza os seus dados” é confuso.
- Não usam asteriscos sozinhos. Escreve “Email (obrigatório)” ou “Email *”.
- Usam linguagem clara. “Data de nascimento”, não “DOB” ou “Data natal”.
- Têm contraste adequado com o fundo. Se não consegues ler, não funciona.
Também precisas de tomar cuidado com placeholders. Sabe aquele texto cinzento que desaparece quando clicas? Não substitui o label. Deve ser uma dica adicional — “Ex: [email protected]” — não a explicação completa do campo.
Mensagens de Validação que Funcionam
Aqui é onde muitos designs falham completamente. A mensagem de erro aparece quando o utilizador já saiu do campo. É tarde demais. Ou aparece com um tom agressivo — “ERRO! CAMPO INVÁLIDO!” — que faz o utilizador sentir-se como se tivesse feito algo errado.
Mensagens de validação boas são amigáveis. Explicam o que deu errado em linguagem simples. “Este email não parece válido. Verifica se tem o @?” é muito melhor que “Formato inválido”.
Timing Certo
Valida quando o utilizador sai do campo (blur event), não enquanto escreve. Exceção: se há um padrão óbvio (como números de cartão), podes validar em tempo real.
Linguagem Clara
Evita jargão técnico. Em vez de “Comprimento mínimo não atingido”, escreve “A senha tem de ter pelo menos 8 caracteres”.
Ajuda Construtiva
A mensagem deve dizer o que fazer para corrigir. “Palavra-passe fraca” não ajuda. “Adiciona pelo menos um número” é útil.
Estados Visuais: O Utilizador Precisa Saber Onde Está
Um campo de input tem vários estados: vazio, preenchido, focado, com erro, com sucesso. Cada um deve ser visualmente distinto. Não é apenas para parecer bonito — é para o utilizador saber o que está a acontecer.
Estado Focado
Quando o utilizador clica no campo, muda algo — uma cor, um underline, uma sombra. Sem isso, não fica claro que o campo está ativo.
Estado Válido
Um ícone de checkmark verde é clássico, mas funciona. Mostra que o campo foi preenchido corretamente e o utilizador pode avançar.
Estado Inválido
Vermelho + ícone X + mensagem de erro. Tudo junto. Não deixes o utilizador adivinhar o que deu errado.
Dicas Adicionais
Se um campo tem requisitos especiais (mínimo 8 caracteres, sem espaços), mostra isso perto do label, não escondido em letra pequena.
Espaçamento e Organização
Campos muito juntos parecem caóticos. Campos muito afastados deixam o formulário parecer vazio. A distância entre campos deve ser aproximadamente 1.5 vezes a altura de um campo de input.
E aqui está um truque que funciona: agrupa campos relacionados. Se peço “Nome” e “Apelido”, coloca-os próximos. Se depois peço o email, deixa mais espaço antes. Isto ajuda o utilizador a ver a estrutura do formulário mentalmente.
“Um bom formulário desaparece. O utilizador preenche sem pensar, sem frustração. Esse é o objetivo.”
— Princípio de Design de Formulários
O alinhamento também importa. Se os campos não estão alinhados à esquerda, fica desorganizado. Mesmo que tenhas espaço, mantém tudo alinhado numa grelha invisível.
O Resumo: 5 Regras Simples
Labels acima do campo, não ao lado ou dentro.
Mensagens de erro são amigáveis e explicam o que fazer.
Estados visuais (focado, válido, inválido) são óbvios.
Espaçamento consistente entre campos, mais espaço entre grupos.
Testa com pessoas reais. Se alguém fica confuso, algo está errado.
Formulários não precisam ser complicados. Quando aplicas estas regras, vês a diferença imediatamente: mais pessoas completam o formulário, menos erros, menos frustrações. Não é magia — é apenas bom design.
Nota sobre este artigo
Este artigo é um guia educacional sobre boas práticas em design de formulários. Os princípios apresentados baseiam-se em pesquisa de UX amplamente documentada. Cada projeto tem requisitos únicos — estas são recomendações gerais, não regras absolutas. Sempre testa com os teus utilizadores reais para confirmar o que funciona melhor no teu contexto específico.