---
nome: Interface revisada
descricao: a lista de conferência de uma interface web — clique, formulário, estados, celular, texto, tema e movimento
quando: revisa a interface, revisar a interface, revise a interface, revisão de interface, revisão de ux, ux, usabilidade, revisa a tela, revisa o layout, formulário, dark mode, modo escuro, responsivo, no celular
autor: PrimoCode
---
Revise com a tela FUNCIONANDO no navegador, não só lendo o código. Para cada
problema diga onde está (arquivo:linha ou a tela), o que acontece com quem usa e
a correção. Primeiro o que impede alguém de usar; acabamento vai no fim.

**Clique e toque**
- O que é clicável é `button` ou `a`, com hover, estado pressionado e foco
  visível (`:focus-visible`).
- Alvo de toque de pelo menos 44×44px. Nada importante escondido só no hover.
- Todo clique responde em até 200 ms. Ação que demora mostra que está
  trabalhando e não pode ser enviada duas vezes.
- Ação que apaga pede confirmação ou oferece desfazer.
- O endereço guarda o estado (aba, filtro, página): o voltar do navegador e o
  link compartilhado levam ao mesmo lugar.

**Formulário**
- Todo campo tem `label` ligado a ele. Placeholder não é label.
- `type`, `inputmode` e `autocomplete` certos (email, tel, one-time-code): o
  teclado do celular muda e o preenchimento automático funciona.
- Nunca bloqueie colar. Enter envia.
- O erro aparece ao lado do campo, em texto, dizendo como resolver; o foco vai
  para o primeiro erro, e o que a pessoa digitou continua lá.

**Os quatro estados de toda tela**: carregando (esqueleto do tamanho do conteúdo,
sem a tela pular), vazio (o que fazer agora), erro (o que houve e como tentar de
novo) e cheio (texto longo quebra ou termina em `…`; mil itens não travam).

**Layout**
- De 360px a 1440px sem rolagem para o lado; respeita a área segura do celular
  (`env(safe-area-inset-bottom)`).
- Tela cheia é `100dvh`, nunca `100vh` (no celular, `vh` some sob a barra).
- Imagem com `width`/`height` ou `aspect-ratio`, para a página não pular.
- Número em coluna com `tabular-nums`; título com `text-wrap: balance`.

**Texto**: o botão diz o que acontece ("Salvar endereço", não "OK"). Data e
dinheiro no jeito brasileiro: `Intl` com `'pt-BR'`, `R$ 1.234,56`.

**Tema e movimento**: modo escuro com `color-scheme: dark` (campo e barra de
rolagem acompanham) e contraste de 4.5:1 nos dois temas. Animação só em
`transform` e `opacity`, curta (150 a 300ms) e desligada em
`prefers-reduced-motion`. Nunca `transition: all`.

**Pior caso** (teste com o dado ruim): Texto enorme (`min-width: 0` e
`overflow-wrap: anywhere`); Lista vazia; largura de 320px; Rede lenta (DevTools,
Slow 3G); Mil itens (paginar ou virtualizar).

**Feche com a contagem**: quantos impedem o uso, quantos atrapalham, quantos são
acabamento. E conserte nessa mesma ordem.