Manipularea erorilor și explicațiile UX

1) De ce contează

• explică ce sa întâmplat și ce să facă în continuare,
• salvează datele introduse și previne pierderea progresului,
• oferă o cale sigură de repetare sau alternativă,
• rămâne disponibil (SR/tastatură) și nu dezvăluie prea mult.

2) Tipologia erorilor (pentru interfață)

1. Validarea datelor (client 4xx): câmpuri goale/nevalide, format, lungime, conflict de reguli.
2. Reguli de afaceri: limite, geo-constrângeri, KYC/KYB, duplicate, sloturi indisponibile.
3. Drepturi/permisiuni: rol, acces la resursă, restricții de vârstă.
4. Rețea/server: timeout, offline, 5xx, supraîncărcare, limita ratei.
5. Conflicte/stare: 409/412 (date schimbate), curse, încuietori.
6. Nicio resursă: 404/410, ștearsă/transferată.
7. Plata și riscul: respingerea de către bancă/PSP, anti-fraudă, limitele jocului responsabil.

3) Canale și nivel de afișare

Regula: Nu ascundeți critice în pâine prăjită/hover. În cazul în care utilizatorul se uită, există un mesaj.

4) Erori de copywriting

Structura: cauza → efect → actiune.
Ton: cinstit, neutru, fără vină.
Specificații: specificați un câmp/condiție, evitați codurile și stivele.
Buton-acțiune: „Repetați”, „Schimbă cardul”, „Resetați filtrele”, „Deschideți chatul”.
Date sensibile: nu apar (mascare PAN, atribute personale).

Exemple

Bun: "Plata a eșuat: banca a refuzat tranzacția. Încercați o altă metodă sau încercați din nou mai târziu.

Rău: "Eroare 500. Ceva nu a mers bine"

Bun: "Limita zilnică a cheltuielilor a fost atinsă. Stabiliți o nouă limită sau încercați mâine"

Bun: "Fișierul este prea mare (max. 25 MB). Vă rugăm să comprimați sau să descărcați unele fișiere.

5) Comportament și concentrare (A11y)

Eroarea este afișată în contextul focus: transferăm accentul în primul câmp eronat.
Regiuni vii: 'rol =' status '(politicos) for info,' rol = 'alertă' (asertiv) for critical.
Vizibil „: focus-vizibil”, contrast ≥ AA, alternative la culoare (pictogramă/text).
Legăm mesajul de câmp prin 'aria-descripedby'.

html
<label for = "pwd "> Password </label>
<input id="pwd" name="password" aria-describedby="pwd-err" aria-invalid="true">
<p id = "pwd-err" role = "alert"> Minimum 8 characters </p>

6) Retrai, backoff și idempotence

Repetarea este oferită dacă există o șansă de succes (eșecuri de rețea, 5xx, limita ratei).
Backoff exponențial 1-2-4-8 s, limita de încercări, butonul de înțeles „Repetați”.
Tranzacții critice (rate/plăți): → obligatorii Idempotency-Key exclud duplicatele.
Actualizări optimiste - întoarcere vizuală clară + clarificare.

js async function retry(fn, attempts=3){
let wait=1000; for(let i=0; i<attempts; i++){
try{ return await fn(); }catch(e){ if(i===attempts-1) throw e; await new Promise(r=>setTimeout(r,wait)); wait=2; }
}
}

7) Offline, timeout-uri și conținut parțial

Offline: afișăm bannerul „Fără conexiune”, accesul la memoria cache (numai citire), coada de sincronizare.
Timeouts: UI timeout (3-5 secunde) → starea „Așteptare pentru confirmare”... cu redo/anulare în condiții de siguranță.
Succes parțial: păstrăm ceea ce am reușit; marcare „nu sincronizat”.

8) Conflicte și competitivitate

409/412: date depășite. Sugerează „Actualizare” și arată diff (care sa schimbat).
Încuietori: informăm cine deține blocul și cât timp, butonul "Request access'.

9) Șabloane de probă UI

html
<div class="banner banner--error" role="alert">
<strong> Connection failed. </strong> Shows cached data.
<button class =" btn btn--ghost" id = "retry "> Retry </button>
</div>

html
<div role="alertdialog" aria-labelledby="err-title" aria-describedby="err-desc">
<h2 id = "err-title "> Session expired </h2>
<p id = "err-desc "> Sign in again to continue. </p>
<button class = "btn "> Sign in </button>
<button class =" btn btn--ghost"> Home </button>
</div>

tsx function Fallback({ id, onRetry }: { id: string; onRetry: ()=>void }) {
return (
<div role="alert" className="banner banner--error">
<strong> We couldn't load the page. </strong>
<div> Try again. Код: <code>{id}</code> <button onClick={()=>navigator. clipboard. writeText (id)}> Copy </button> </div>
<button onClick = {onRetry}> Retry </button>
</div>
);
}

10) Token-uri de eroare (sistem de proiectare)

json
{
"error": {
"tones": { "danger": "#", "warning": "#", "info": "#" },
"aria": { "polite": true, "assertive": true },
"timing": { "toastMs": 3500, "retryBackoffMs": [1000,2000,4000] },
"layout": { "fieldGap": 8, "bannerIcon": 20 }
}
}

css
.banner--error { background: var(--bg-danger); color: var(--on-danger); padding: 12px 16px; border-radius: 12px; }
.field-error { color: var(--role-danger); margin-top: 6px; font-size:.875rem; }

11) Securitate și confidențialitate

Nu afișăm urme de stivă, ID-uri interne, căi de baze de date.
Mascăm valori sensibile (hărți, documente).
Mesajele nu ar trebui să solicite unui atacator (de exemplu, că există un cont).
Pentru suport - ID-ul de corelare în loc de piese.

json
{"level":"error","event":"payment_fail","correlation_id":"c-8f1...","user_id":"u-","route":"/pay","psp_code":"DO_NOT_EXPOSE_TO_USER"}

12) Măsurători și control

INP și cota de sarcini lungi la momentul erorii (eroarea nu ar trebui să „atârne” UI).
Încercați din nou rata de succes, erori la 1000 de acțiuni, timp pentru a restabili.
CTR pe „Ajutor/Chat”, procentul de formulare a scăzut.
Hărți de căldură: în cazul în care erorile de câmp apar cel mai adesea.

13) Lista de verificare QA

Disponibilitate

• Concentrează-te pe primul câmp nevalid; „aria-descriptby ”/„ aria-invalid” set.
• Mesaje critice - 'rol = „alertă”'; contrast ≥ AA.

Comportament

• Datele formularului nu se pierd pe eroare.
• Există un clear 'Retry' și un backoff corect.
• Modul offline/cache de lucru; banner vezi.

Copywriting

• Motiv → acțiune; fără jargon tehnic și acuzații.
• Textele sunt localizate și nu rupe grila.

Securitate

• Nici o scurgere PII/secrete; afișează numai coduri/ID securizate.
• Idempotența este activată pentru operațiuni critice.

14) Specificul iGaming

• UI înregistrează imediat „ocupat”; în întârziere> 3 s - „Așteptând confirmarea”....
• La eșec: statutul cinstit („piața închisă”, „coeficientul sa schimbat”) + seif „Retry”.
• Cheie Idempotent pentru a elimina oferta dublă.

• Facem distincția între "eșecul bancar/PSP" vs "eșecul serverului. "Pentru prima -" Alege o altă metodă ", pentru a doua -" Încercați din nou ".
• Pași KYC/AML transparenți; Link-uri "De ce este necesar? ».

• Tonul este grijuliu, nici o presiune. „Limita atinsă - întrerupeți sau actualizați limita”.
• Nu există focare/neon; Contrast AAA, disponibilitate la SR.

• Explicați în mod clar restricțiile și sugerați „Citiți regulile/sprijinul”.

15) Anti-modele

„Ceva nu a mers bine” fără acțiune și context.
Resetează formularul după o eroare.
Ascunde critic în pâine prăjită timp de 3 secunde.
Numai culoare fără text/pictogramă.
Retrageri nesfârșite fără posibilitatea de anulare.
Afișați codurile interne/trasee de stivă.

16) Documentația în sistemul de proiectare

Компоненты: 'FieldError', 'FormError', 'PageBanner', 'AlertDialog', 'ErrorBoundary'.
Token-uri de ton/contrast/sincronizare, presetări a11y și exemple ARIA.
Harta scenariilor tipice (validare, rețea, drepturi, plăți) cu șabloane de text.
„Do/Don' t”: real înainte/după ecrane cu valori de eșec/succes.

Scurt rezumat

Faceți greșeli ușor de înțeles și de gestionat: vorbiți limba umană, salvați datele introduse, oferiți repetări și alternative sigure, respectați accesibilitatea și confidențialitatea. Apoi, chiar și situațiile de urgență păstrează încrederea și nu întrerupe calea utilizatorului - în special în scenariile critice de pariuri și plăți.