Hierarquia de erros e realce prioridades

1) Por que precisa de uma hierarquia de erros

• explicar o que correu mal
• Mostrar por que é importante,
• Diga-me o que fazer a seguir
• priorizar se houver vários erros.
• A hierarquia de erros reduz a carga cognitiva, acelera a correção e aumenta a conversão de passos (registro, pagamentos, KYC).

2) Modelo de níveis de criticidade (Severity)

1. Info - «Perfil incompleto, pode ser preenchido mais tarde». Não bloqueia.

2. Notice - «Limite quase esgotado». Recomendamos a ação.

3. Warning - «Não correspondência de formato, dados armazenados parcialmente». Pode atrapalhar.

4. Erro: «Formato inválido/caixa obrigatório vazio». Bloqueia uma ação específica.

5. Critical - «Pagamento rejeitado/risco de segurança». Bloqueia o cenário e requer um passo imediato.

• Uma tela é um status principal.
• Com vários erros: mostramos a crítica acima e rodamos de forma estável para o primeiro erro.

3) Princípios de realce de prioridades

1. Hierarquia visual: cor/ícone/espessura/contraste aumentam com crítica.
2. Proximidade espacial: erro ao lado do campo/zona a que se refere.
3. Foco e rolagem: scroll automático para primeiro erro + foco para campo problemático.
4. Um callout principal é um banner compartilhado/alert sobre um problema crítico + dicas locais.
5. As cores/ícones/fontes para Info/Warning/Erro estão inalteradas em todo o produto.
6. Tempo de vida: erros locais - ainda não corrigidos; banners - até o fechamento/correção.
7. Não confundimos os estados: «vazio» ≠ «erro», «espera» ≠ «erro».

4) Linguagem visual (UI-tokens)

• Info - azul neutro/cinza,
• Notice - âmbar/amarelo,
• Warning - laranja,
• Error - vermelho,
• Critical - vermelho cheio + fundo de contraste.
• Icones: info ⓘ, notice, erro/, sucess.

• Mensagem inline abaixo do campo (quadro mínimo).
• Row-callout por linha/cartão.
• Page-alert (banner) - para geral/crítico.
• Microanimação, aparição suave, sem layout de «dergui».

5) Textos de erro: fórmula e exemplos

Fórmula: O que é errado + Como corrigir + (Porquê/restrição).

"Formato de data inválido. Digite no formato DD. MM. «GGG»

"O arquivo é muito grande (máximo de 10 MB). Carregue um arquivo menor

"Nível de verificação insuficiente. Passe pelo KYC - vai demorar uns 2 minutos

"Pagamento recusado pelo banco. Tente outro método ou entre em contato com o banco"

«Erro 400», «Alguma coisa correu mal».

6) Hierarquia em formas complexas (registro/CUS/pagamentos)

1. Inline-validação em blur: Capture erros locais imediatamente.
2. Verificação global do submit: Exibindo o banner «Corrigir campos marcados» e a lista/âncora.
3. Navegar com o teclado/tabulação, «Ir para o erro # 1/# N».
4. Ordem de correção: Primeiro bloqueadores (Erro/Critical), depois Warning/Notice.
5. Salvar contexto: os dados digitados não são perdidos por erro.

7) Especificidades de cenário

7. 1 Pagamentos/conclusões

Critical: desvio por provedor/banco, atividade suspeita.
Erro: campo de cartão/IBAN, limites de soma/frequência.
Warning: rede lenta/excesso de tempo de espera.

Texto: "Pagamento rejeitado pelo banco. Tente outro método ou entre em contato com o banco. A Comissão não foi descartada

7. 2 CUS/segurança

Critical: documento falsificado/país bloqueado/conta multi.
Erro: documento não lido/data não correspondida.

Texto: "A foto do documento está desfocada. Carregue uma imagem mais clara quando estiver bem iluminada

7. 3 Pesquisa/filtros

Não é um erro, é um resultado zero.

Texto: "Nenhum resultado para "Se você quiser". Remova o filtro «Provedor: X» ou tente «se». [Redefinir filtros]"

8) Disponibilidade (A11y) e requisitos técnicos

Os erros são declarados para a tela: ária-live = «assertiva» para os críticos, «polite» para os outros.
Campos com erro: ária-invalid =» true», ária-describedy para a mensagem.
O foco é transferido para o primeiro erro; a ordem de tabulação mantém a lógica.
Contraste por WCAG AA; o ícone não substitui o texto.
O texto deve ser lido em voz alta sem perder o sentido.

9) Localização e precisão jurídica

Evitar jargões e metáforas culturais.
Concordar com (glossário): «pagamento rejeitado», «limite ultrapassado», «comprovação».
Especificar prazos e restrições no formato local de «até 15 minutos», moedas/datas.

10) Métricas de qualidade

Erro rate por campo/passo (proporção de usuários que enfrentaram um erro).
Time-to-Fix (tempo médio até a correção do primeiro erro).
Drop-off após o erro (quantos saem sem corrigir).
Repetição de erros (recurrence) por usuário/sessão.
Chamadas de apoio por tipo de erro.
Conversão do passo antes/depois das alterações na hierarquia.

• Scroll auto e foco vs apenas cor/texto.
• A formulação exata da razão vs é geral.
• Ordem de realce (primeiro o banner → inline) vs (somente inline).
• Adicione o link Mostrar requisitos ao lado do erro.

11) Folha de cheque antes do lançamento

• Cada erro tem um nível (Info/Notice/Warning/Erro/Critical).
• Cor/ícone/contêiner correspondem ao nível.
• Há um movimento para o primeiro erro e uma transferência de foco.
• A mensagem explica o que/como/porquê.
• Os termos coincidem com o glossário; a localização foi verificada.
• Disponibilidade: ária-atributos, contraste, leitura em voz alta.
• Os dados não são perdidos por erro.
• Os estados «resultado zero» e «espera» não estão formalizados como erros.

12) Exemplos de antes/depois

Formulário de data

Até: «Erro 400»

Depois de "Formato de data inválido. Use DD. MM. «GGG»

Pagamento

Até: «O pagamento falhou»

Após: "Pagamento recusado pelo banco. Tente outro método ou entre em contato com o banco. A Comissão não foi descartada

KYC

Até: Documento não aceito

Após: "Não foi possível reconhecer o documento. Carregue a foto sem os destaques, veja os cantos e o texto

Pesquisa zero (não erro!)

Até: «Erro: nada encontrado»

Depois de: "Não há resultados de "live roulette". Remova o filtro «High-limit» ou tente «rolette». [Redefinir filtros]"

13) Componentes do sistema de design

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Render: texto + ícone, cor por 'severity'.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
As opções são 'info | notice | warning | errador | critical'.

``

Lista de erros de âncoras de campo, navegação por teclado, Ir para # 1.

'' (lógica)

Regras no campo/formulário/etapa, prioridades, esquemas (por exemplo, JSON-Schema), localização de mensagens.

14) Modelos rápidos de frases

15) Incorporar ao processo

Projete os textos ao mesmo tempo que a lógica de validação.
Guarde as linhas no i18n ao lado dos componentes, e versionize.
Na folha de cheque PR, correspondência de nível, atributos de ária, localização correta.
Invertendo erros regulares de métricas e de suporte.

Barra final

Digitalize os níveis do Info → Critical.
Mostre a prioridade visual e foco.
Explique a correção em breve e especificamente.
Não chamem o vazio de erro.
Mede e melhore: erro rate, Time-to-Fix, drop-off.