Gerarchia degli errori e evidenziazione delle priorità

1) Perché una gerarchia di errori

• Spiegarmi cosa è andato storto
• mostrare perché è importante
• Mi dica cosa fare,
• Fissare le priorità se ci sono più errori.
• La gerarchia degli errori riduce il carico cognitivo, accelera la correzione e migliora la conversione dei passaggi (registrazione, pagamenti, KYC).

2) Modello di livelli di criticità (Severity)

1. Info - «Profilo incompleto, può essere compilato in seguito». Non lo blocca.

2. Notice - «Limite quasi esaurito». Consigliamo di agire.

3. Warning - Non corrispondenza formato, dati salvati parzialmente. Potrebbe interferire.

4. Errore - Formato/campo obbligatorio non valido. Blocca un'azione specifica.

5. Critical - «Pagamento rifiutato/rischio di sicurezza». Blocca lo script, richiede un passo immediato.

• Una schermata è uno stato principale.
• In caso di errori multipli: mostra la critica in alto e scorri stabilmente al primo errore.

3) Principi di evidenziazione delle priorità

1. Gerarchia visiva: colore/icona/spessore/contrasto aumentano con criticità.
2. Intimità spazio: errore vicino al campo/zona a cui appartiene.
3. Attivazione e scorrimento: scroll automatico per il primo errore + campo problematico.
4. Un principale callout è uno striscione/alert su un problema critico + suggerimenti locali.
5. I colori/icone/caratteri per Info/Warning/Errore sono invariati in tutto il prodotto.
6. Tempo di vita: errori locali - non ancora corretti; banner - fino alla chiusura/correzione.
7. Non confondiamo lo stato con «errore», «errore», «errore».

4) Linguaggio visivo (token UI)

• Info - blu neutro/grigio,
• Notice - ambra/gialla,
• Warning - arancione,
• Errore - Rosso,
• Critical è uno sfondo rosso intenso e a contrasto.
• Icone: info ⓘ, notice, errore/, success.

• Messaggio inline sotto il campo (cornice minima).
• Row-callout per riga/carta.
• Pagine-alert - per comuni/critici.
• Microanimazione, apparizione morbida, senza layout.

5) Testi di errore: formula e esempi

Formula: Cosa non va + Come correggere + (Perché/vincolo).

Formato data non valido. Digitare in formato DD. MM. GGG"

Il file è troppo grande (max. 10 MB). Scaricare un file più piccolo

"Livello di controllo insufficiente. Passate KYC - ci vorranno ben 2 minuti"

"Pagamento rifiutato dalla banca. Provare un altro metodo o contattare la banca

Gli anti-pattern: «Errore 400», «Qualcosa è andato storto», l'umorismo è stressante.

6) Gerarchia in forme complesse (registrazione/CUS/pagamenti)

1. Inline-convalida su blur - Catturiamo errori locali immediatamente.
2. Controllo globale submit: mostra il banner «Correggi campi contrassegnati» e l'elenco/ancoraggio.
3. Navigazione degli errori con tastiera/tabulazione, «Vai all'errore # 1/# N».
4. Ordine di correzione: prima bloccanti (Errore/Critical), poi Warning/Notice.
5. Salvataggio del contesto: i dati immessi non vengono persi in caso di errore.

7) Specificità degli script

7. 1 Pagamenti/conclusioni

Critical: deviazione da parte del provider/banca, attività sospetta.
Errore: campo card/BAN, limiti per somma/frequenza.
Warning: rete lenta/tempo di attesa eccessivo.

Testo: "Pagamento rifiutato dalla banca. Provare un altro metodo o contattare la banca. La commissione non è stata cancellata"

7. 2 CUS/sicurezza

Critical: documento contraffatto/paese bloccato/multi-account.
Errore - Documento illeggibile/data non corrispondente.

Testo: "La foto del documento è sfumata. Scaricare un'immagine più chiara con buona luce"

7. 3 Ricerca/filtri

Non è un errore, è un risultato zero.

Testo: Nessun risultato per «{query}». Rimuovere il filtro Provider: X oppure provare con {alt}. [Reimposta filtri] '

8) Disponibilità (A11y) e requisiti tecnici

Gli errori vengono dichiarati allo screener: aria-live = «assistenziale» per i critici, «polite» per gli altri.
Campi con errore: aria-invalid =» true», aria-describedby per messaggio.
L'attivazione viene spostata al primo errore. l'ordine di tabulazione mantiene la logica.
Contrasto per WCAG AA; l'icona non sostituisce il testo.
Il testo deve essere letto ad alta voce senza perdere il senso.

9) Localizzazione e precisione legale

Evitare gergo e metafore culturali.
Concordare termini (glossario): «pagamento rifiutato», «limite superato», «convalida».
Specifica i tempi e i limiti in formato locale: «fino a 15 minuti», valuta/data.

10) Metriche di qualità

Errore rate per campo/passo (percentuale di utenti che hanno incontrato un errore).
Time-to-Fix (tempo medio fino alla risoluzione del primo errore).
Drop-off dopo l'errore (quanti passano senza essere risolti).
Ricorrenza degli errori per utente/sessione.
Richieste di supporto per tipo di errore.
Conversione del passo prima/dopo le modifiche alla gerarchia.

• Scroll automatico e fuoco vs solo colore/testo.
• La formulazione esatta del motivo vs è generale.
• Ordine di evidenziazione (prima il banner → inline) vs (solo inline).
• Aggiunge il collegamento Mostra requisiti accanto a un errore.

11) Foglio di assegno prima del lancio

• Ogni errore ha un livello (Info/Notice/Warning/Errore/Critical).
• Colore/icona/contenitore corrispondono al livello.
• È possibile scorrere il primo errore e spostare il trucco.
• Il messaggio spiega cosa/come/perché.
• I termini corrispondono al glossario; localizzazione verificata.
• Accessibilità: attributi aria, contrasto, leggibilità ad alta voce.
• I dati non vengono persi in caso di errore.
• Gli stati Risultato zero e Attesa non sono stati impostati come errori.

12) Esempi di prima/dopo

Modulo data

Fino a: «Errore 400»

Dopo: "Formato data non valido. Usate il DD. MM. GGG"

Pagamento

Fino alle: «Non è stato pagato»

Dopo: "Pagamento rifiutato dalla banca. Provare un altro metodo o contattare la banca. La commissione non è stata cancellata"

KYC

Fino a: «Documento non accettato»

Dopo: "Impossibile riconoscere il documento. Caricare una foto senza riflessi, vedere angoli e testo

Ricerca zero (nessun errore!)

Fino a: «Errore non trovato»

Dopo "Non ci sono risultati per "live roulette". Rimuovere il filtro «High-limit» oppure provare «roulette». [Reimposta filtri] '

13) Componenti del sistema di progettazione

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Render: testo + icona, colore per severity.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
Le opzioni sono «info | notice | warning | error | critical».

``

Elenco degli errori di ancoraggio ai campi, navigazione tastiera, Vai a # 1.

'' (logica)

Regole in campo/modulo/passo, priorità, schemi (ad esempio JSON-Schema), localizzazione dei messaggi.

14) Modelli di frasi veloci

15) Incorporazione nel processo

Progettate i testi contemporaneamente alla logica di validazione.
Memorizzare le righe in i18n accanto ai componenti e versionare.
Nel foglio di assegno PR: corrispondenza del livello, disponibilità di attributi aria, localizzazione corretta.
Ruota regolarmente errori per metriche e feedback del supporto.

Scorciatoie totali

Digitalizzare i livelli Info → Critical.
Mostrate la priorità visivamente e focalmente.
Spieghi la correzione in breve e in particolare.
Non chiami il vuoto un errore.
Misurare e migliorare: errore rate, Time-to-Fix, drop-off.