Formulários (forms)

Os elementos que coletam dados de quem usa: cadastro, login, checkout, feedback.

Hard

O que é

Formulário é onde a pessoa entrega informação ao produto: cadastro, login, pesquisa, checkout. É um dos padrões mais comuns de interface e, ao mesmo tempo, um dos maiores pontos de atrito, já que toda informação pedida custa tempo e esforço de quem está do outro lado.

Em design, ele é um equilíbrio entre simplicidade e completude. Cada campo a mais aumenta a carga e tende a derrubar a taxa de conclusão. Por isso existem táticas que ajudam: revelar campos aos poucos, oferecer autofill, validar inline, usar rótulo claro, agrupar com lógica e prevenir erro antes que ele aconteça.

A acessibilidade aqui é inegociável. O rótulo precisa estar ligado ao campo, o placeholder não substitui o rótulo, a mensagem de erro tem que ser descritiva pra leitor de tela, e a ordem de tabulação precisa fazer sentido.

Em uma frase

Esse cadastro tem campo demais, vamos cortar pra três e validar inline pra subir a conclusão.

A pergunta que ele responde

Como reduzo o abandono num formulário sem deixar de coletar o que preciso?

Quando usar

Ajuda em qualquer ponto onde o produto precisa coletar algum dado de quem usa.

Como não usar

O cuidado é não pedir campo demais sem necessidade, nem usar placeholder no lugar de rótulo, porque isso quebra a acessibilidade.

Na prática

Pense num cadastro que pedia oito campos e tinha abandono alto. O time corta pra três, adiciona autofill e validação inline, e a taxa de conclusão sobe.

Não confunda com

Vale separar placeholder de rótulo. O placeholder é só uma dica dentro do campo, e ela some no momento em que a pessoa começa a digitar. O rótulo identifica o campo e precisa ficar visível o tempo todo. Trocar um pelo outro deixa a pessoa sem saber o que estava preenchendo no meio do caminho.

D

Em inglês

Forms

Pronúncia

n/a

Também chamado de

formulários, forms, campos de entrada

Origem

n/a

Fonte

Saiba mais

Luke Wroblewski, Web Form Design