Projetar formulários UX

1) Princípios

1. Primeiro a tarefa, depois os campos. Os formulários são uma extensão do cenário personalizado, não uma lista de dados.
2. Uma tela é um alvo. Retire tudo o que não leva ao fim da tarefa.
3. Nunca percam os dados. Vídeo automático, restauração do rascunho, repetições seguras.
4. Mostre-me o que é certo. Regras e exemplos antes do erro; avaliem com cuidado.
5. Disponibilidade padrão. Editoras, foco, contraste, navegação por teclado.
6. Velocidade previsível. Primeira resposta ≤ 100 ms, envio com status claro e progresso.

2) Arquitetura de informação do formulário

O alvo → os passos → campo. Comece com o resultado (por exemplo, «pagamento») e selecione o conjunto mínimo de campos.
Agrupamento de informações pessoais, pagamento, confirmação. Cada grupo ≤ 6 campos.
Divulgação progressiva: mostre os campos adicionais de acordo com a condição (toggle/seleção do país).
A ordem dos campos é como na cabeça de um usuário, de conhecido para complexo.

3) Layout e grade

Uma coluna para o celular e a maioria das tarefas é mais rápida em termos de visão e ordem.
Duas colunas são apropriadas para campos interligados curtos (data/hora, nome/sobrenome).
Altura da linha 40-48 px, distância entre os campos 8-12 px (associados )/16-24 px (grupos).
Alinhamento das editoras em cima do campo; à direita - não usar para formas estreitas.

4) Editoras, playsholders, helpers

A editora é obrigatória. O playsholder é um exemplo, não um substituto.
Coloque o texto sob o campo: regras, formato, referência ao exemplo.
Selecione os campos opcionais «(opcional)» em vez de «» nos campos obrigatórios.

Exemplo:

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Passos e progresso

Moldes multifacetados (CUS/pagamentos): 3 a 5 passos, progresso claro «Passo 2 de 4».
Mantenha os passos concluídos; deixe-me voltar sem perda de dados.
Os botões de navegação «Para trás», «Para frente», «Confirmar» final estão sempre no mesmo lugar.

6) Controle de entrada

Teclados e atributos: 'tipo', 'inputmode', 'autocomplete' sob o tipo de dados.
Use as máscaras de entrada suave (telefone, IBAN, PAN, data) e guarde os valores normalizados.
Não rompa a substituição automática: correto 'autocomplete =' given-name '|' cc-number '|' one-time-código ', etc.
Prediais somas/calçados: «+ 50/+ 100/Tudo» ao lado do campo da quantia.

Tabela de atributos:

Campo	type	inputmode	autocomplete
Email	email	email	email
Telefone	tel	tel	tel
Valor	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Data do cartão	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validação e erros

Estratégia: antes de digitar (helper), durante (dicas suaves), depois (em blur/submit).
Verificações asincrônicas (login, limites, risco) - com debouns de 250-400 ms.
Texto de erro: razão → como corrigir → alternativa.
Painel de sumary acima do formulário para vários erros + foco para o primeiro erro.
Idempotency-Key para ações críticas (taxa/pagamento) e retais seguros.

8) Botões e envio

O CTA primário está selecionado com a cor/tamanho disponível por Enter.
'Busy' - o bloqueio da repetição do clique; em atraso> 3-5 c - «Aguardando confirmação»....
Após o sucesso, é um status claro (brinde/tela «Pronto») + o que acontece a seguir.

9) Disponibilidade (A11y)

As ligações 'label' são corretas, erros através de 'aria-describedy', e críticas, 'role =' alert '.
Visível 'focus-visível', a ordem de Tab corresponde ao visual.
Contraste texto/ícone ≥ AA; Não se trata apenas de cor.
Suporte 'prefers-reduced-motion': mínimo de animações.
Para grupos de rádio, "fieldset/legend", para dicas, "role =" status ".

10) Localização e formatos internacionais

Datas/moedas/números - local ao digitar, armazenamento - ISO/unidades menores.
Admita alfabetos diferentes em nomes/endereços; não limite os defeitos/apóstrofes.
O telefone é armazenado em E.164; o país é escolhido explicitamente ou a partir de '+ CC' na inserção.

11) Performance e estabilidade

Primeira resposta visual ≤ 100 ms; verificação asincrona - não bloqueia a tela.
Skeleton em vez de spinner «pendurado», fixe as alturas, evite CLS.
Virtualize listas longas (por exemplo, países/bancos).
Anime apenas 'trans/opacity', sem blur/sombra em massa.

12) Segurança e privacidade

Não enxergue PAN/CVC/passaporte; não envie para RUM/console.
Disfarce os campos sensíveis, e não os guarde no sistema automático.
Não revele se existe uma conta: «Se o email estiver registrado, enviaremos um e-mail».
Armazenamento - o mínimo necessário; mostre o que o KYC quer.

13) Pattern em cenários típicos

13. 1 Pagamento/depósito

O campo do valor dos pré-títulos, a moeda está claramente especificada.
PAN com máscara macia, verificação Luhn; A CVC está oculta; Data de 'MM/YY' com auto - '/'.
Texto sobre comissões/prazos ao lado, não em tooltip.

13. 2 Saída de fundos

Etapas: «Soma → Método → Confirmação».
Progresso e «Normalmente a N minutos/horas» (sem promessas duras).
Opções de método por país; avisos de limites.

13. 3 KYC

Carregador de arquivos passo a passo: requisitos de formato/peso, pré-teste, privacidade.
Prazo de verificação e canal de status (correio/notificação).

13. 4 Limites e jogo responsável

Unidades compreensíveis (por dia/semana/mês), pré-construção, confirmação de alterações, «Entrará em vigor através de»....

14) Antipattern

Placeholder em vez da editora.
Erros de cada símbolo sem debouns.
Redefinir formulário em erro.
A instrução crítica está escondida apenas em tooltip.
Máscaras rígidas que proíbem caracteres validos/inserção.
Bloquear toda a página para verificar um campo.
Envio sem progresso claro.

15) Snippets de implementação

Resumo de erros + foco do primeiro problema

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Botão com personalidade instantânea

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

Esqueleto HTML do grupo de telas de rádio disponível

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Sistema de design de tokens (exemplo)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

presídios CSS

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Métricas e experiências

Compressão Rate, Time-to-Complete, Erro Rate por campos.
Retry Sucess Rate, proporção de formas abandonadas, profundidade do passo.
CTR dicas/exemplos, taxa de reposição automática.
A/B: ordem de campos, precondições de somas, textos de erro, divisão em etapas.

18) QA-folha de cheque

Sentido e fluxo

Os campos correspondem ao objetivo; Não há excesso.
Os grupos são lógicos; no máximo 6 campos por grupo.

Digitar

Corretos 'tipo/inputmode/autocomplete'.
As máscaras são suaves, a inserção não é quebrada, o caret é previsível.

Validação

Helper antes da entrada; erros no blur/submit; Debouns 250-400 mc.
Painel de sumary para múltiplos erros; truque para a primeira.

Disponibilidade

As editoras estão ligadas; contraste ≥ AA; ': focus-visível' é visível.
Navegação do teclado; os grupos de rádio com 'fieldset/legend'.

Performance

Primeira resposta ≤ 100 ms; Não há spinners pendentes.
Sem CLS; listas longas são virtualizadas.

Segurança

Sem logs de campos sensíveis; O PAN/CVC não está na rede automática.
Idempotidade e retais seguros estão incluídos.

19) Especificidades iGaming

Apostas: campo de soma + predial, instantâneo 'busy', confirmação otimista com possibilidade undo (se o regulamento permitir).
Pagamentos/conclusões: comissões explícitas e prazos próximos aos campos, não apenas nas dicas; verificar os limites e status do KYC.
Torneios: formulário de inscrição com um conjunto mínimo de dados, regras e checkbox aceitáveis sem «patterns escuros».
Jogo responsável: Formas de definição de limites com espaçonaves compreensíveis e suprimento de resultados («Seu limite de dia será 2 000 ₴ a partir de amanhã»).

Resumo curto

Uma boa forma é um objetivo claro, um conjunto mínimo de campos, regras compreensíveis antes do erro, resposta instantânea e dados salvos. Projete a estrutura a partir do cenário, respeite a disponibilidade e localização, inclua retraias seguras e idempotação. É assim que as formas se sentem rápidas e confiáveis, especialmente em cenários críticos.