Progresul și indicatorii de stare

1) Principii

1. Răspuns instantaneu (≤ 100 ms). Orice acțiune este imediat confirmată vizual: apăsarea → „ocupat ”/schelet/microanimație.
2. Onestitate şi predictibilitate. Procentele reflectă progresul real, nu „eternul 99%”. Dacă evaluarea nu este posibilă, utilizați o variantă nedeterminată și o explicație.
3. Contextul de lângă activitate. Indicatorul este în cazul în care utilizatorul este în căutarea/acționează (buton, card, bloc), nu în colțul îndepărtat.
4. Stealth după succes. Succesul este o scurtă verificare/estompare și asta este. Eroare - explicație ușor de înțeles și repetare sigură.
5. Disponibilitate implicită. 'role = „progressbar”', 'aria-valuenow', regiuni vii, contrast ≥ AA.

2) Tipuri de indicatori și când să le utilizați

Progresul liniar (determinați/nedeterminați). Încărcare/importare/export, pași cu domeniu de aplicare clar.
Progresul circular (de obicei nedeterminat). Operațiuni locale scurte în locuri compacte.
Pas cu pas (pas cu pas). Pași secvențiali („Pasul 2 din 4”), KYC, procese master.
Schelet (dopuri schelet). Pentru a substitui structura de conținut în loc de spinners; evita „shimmer” pentru utilizatorii cu „preferă-redus-mişcare”.
Insigne de stare (succes/avertizare/pericol/info). Starea obiectului (În proces, Respins, Gata).
Banner/stare pâine prăjită. Evenimente globale: offline, eșec server, sincronizare coadă.
Încărcător inline (buton/linie). Operațiuni locale: „Salvați”..., „Trimiteți”....

3) Progresul definitiv vs incert

Determinați: cantitatea de muncă este cunoscută → arătăm %/etape.
Nedeterminat: volum necunoscut → „Procesarea în curs”... + context („De obicei până la 1-2 minute”).
Starea de tranziție - Puteți începe cu nedeterminate → du-te pentru a determina când apare evaluarea.
ETA cu atenție: afișați intervalul („~ 30-60 secunde”) și evitați „promisiunile”.

4) Plasarea și modele

Local la acțiune: „aria-ocupat” buton, spinner în rândul de masă, progresul cărții.
Deasupra blocului/listei: bara liniară de sub antetul secțiunii în timpul operațiunilor lotului.
Global: progres subtil de top (schimbare de traseu), bannere de sistem.
Panou lipicios (mobil): confirmare/progres pe CTA în docul inferior.

5) Disponibilitate (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

Indeterminate: set 'rol = „progressbar”' fără 'aria-valuenow', adăugați text explicativ la 'rol = „stare”'.
Regiuni vii: 'aria-live =' politicos '' pentru actualizări regulate, 'asertive' doar pentru cele critice.
'aria-ocupat = "adevărat" "pe un container care este blocat temporar de acțiuni.
Focus nu „sari”: la schimbarea etapei, mutați focalizarea la antetul pas pas pas cu pas.

6) Copywriting și semantică vizuală

Pe scurt și în cazul: „Încărcare în curs de desfășurare”..., „Procesarea plății”....
Adăugați "ce urmează": "Făcut. Să reîmprospătăm pagina automat.
Culori: verde - succes, portocaliu - avertizare/atenție, roșu - eroare. Culoarea ≠ singurul mediu de semnificație: dați o pictogramă/text.

7) Upbeat actualizări și pullback-uri

Optimist: schimbăm interfața UI imediat (de exemplu, marca „Favorite”) și o confirmăm în liniște cu serverul.
În caz de eroare - rollback moale + explicație și 'Retry'.
Operațiuni critice (rată/plată): opțional „soft optimist” (fixați „Sent → Waiting for confirmation”...), dar fără a modifica condiția monetară înainte de confirmare.

8) Cozi și sarcini de fundal

Afișați coada: „n” sarcini în procesare, carduri individuale cu progres.
Pauză/anulare pentru operații lungi, dacă este posibil.
Procesare fundal: „În fundal” insigna, pâine prăjită la finalizare, „Istoricul sarcinii” secțiune.

9) Performanță și calendare

Prima reacție ≤ 100ms: utilizați scheletul/inline-ocupat în loc de gol.
Animații: 120-180 ms (in), 80-140 ms (out), numai „transformare/opacitate”.
Procese lungi: actualizarea progresului nu mai mult de 10-15 ori/sec; Modificări de grup.

10) Fragmente

Progresul local la buton

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Determinarea liniară

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

Stepper

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) Scheletul corect

Utilizați forma conținutului viitor (carduri/linii), fără strălucire nesfârșită (sau dezactivați cu „preferă reducerea mișcării”).
Limita de timp: dacă se încarcă> 300-500 ms, scheletul este justificat; cu întârzieri mai mici, „micro-decolorare” este suficient.

12) Insigne de stare (stări de obiect)

Exemple sunt draft, în proces, confirmare în așteptare, gata, respins.

Text scurt, pictogramă stabilă/culori de fundal, contrast ≥ AA.
Icon' aria-ascuns =” adevărat”' + etichetă text (pentru SR).
Click - dezvăluie detalii sau deschide „Istorie”.

13) Specificul iGaming

• Apăsând CTA → „Trimis”..., cu o întârziere de> 3 secunde - „Așteptând confirmarea”... (nedeterminat).
• Succes - „Pariu acceptat” + cec; eroare - explicație onestă („perioada de piață închisă/raportul schimbat”) și Retry sigur.

• Determinați pe etape: „Metoda de verificare → Trimiteți → Confirmați PSP”.
• Pentru ieșire - În procesul de insignă, ecran de stare în profil, gama ETA; împinge la finalizare.

• Înregistrarea pas cu pas (pași), progresul de a acorda (N/puncte), „Participant” insigna de stare.
• Actualizare în timp real - curat, fără clipiri, cu 'aria-live = „politicos”'.

• Stepper + insigna "Sub revizuire. "Arată ce este deja acceptat (bifați) și ce a mai rămas.

14) Culori, contrast și text

Succes/Info/Avertizare/Pericol - patru tonuri stabile în sistemul de proiectare.
Contrast text la fundal insigna ≥ AA.
Nu utilizați aceeași culoare pentru „în proces” și „avertizare”.

15) Măsurători

Time-to-First-Feedback (TTFF): faceți clic pe primul răspuns vizual.
Timp de finalizare pe operațiuni și rata de scădere/avort pentru sarcini lungi.
Încercați din nou rata de succes pentru operațiunile de progres.
% dintre optimiștii care au finalizat cu succes (și ponderea rollback-urilor).
Schelet vizibil de timp/spinner (obiectiv: cât mai puțin posibil).

16) Anti-modele

Buton silențios (fără spinner)> 100 ms.
Infinite spinners fără explicații sau alternative.
Procent fals/cursor atârnat 99%.
Resetează conținutul pe eșec și nu poate fi rejudecat.
Numai culoare fără text/pictograme pentru stare.
Progresul este departe de acțiune (utilizatorul nu vede).

17) Proiectarea tokenurilor sistemului (exemplu)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) Lista de verificare QA

Răspuns și onestitate

• TTFF ≤ 100 ms; există un local ocupat/schelet.
• Determina - real%; nedeterminată - cu o explicație.

Disponibilitate

• 'rol = „progressbar” '/' aria-valuenow' corect; regiuni vii pe actualizări.
• Contrastul insigne/text ≥ AA; culoarea nu este singurul purtător de sens.

Comportament

• Optimist cu rollback corect și explicație.
• Cozile sunt afișate; există o anulare/pauză (dacă este cazul).
• Progresul în apropierea scenei nu se suprapune CTA.

Performanță

• Actualizări nu mai mult de 10-15 ori/sec; animații „transform/opacitate”.
• Scheletul nu tachinează strălucirea cu 'reduce-motion'.

Texte

• Scurt, fără jargon tehnic; „Ce urmează” după finalizare.
• Nici o „promisiune” de timp exact, cu excepția cazului garantat.

19) Documentația în sistemul de proiectare

Компоненты: 'ProgressBar', 'ProgressCircle', 'Stepper', 'StatusBadge', 'InlineLoader', 'Skeleton'.
Reguli pentru selectarea tipului, copywriting și culori pentru stări.
Modele: optimist, cozi, procesare fundal, sincronizare offline.
Do/Don' t gallery: „perpetuu spinner”, procente false, „mute” CTA vs bun TTFF.

Scurt rezumat

Indicatorii de progres și statut ar trebui să ofere feedback la timp, onest și accesibil. Plasați-le alături de acțiune, distingeți între progresul clar și incert, respectați a11y și nu abuzați de animații. În iGaming, acest lucru este deosebit de important pentru pariuri, plăți, turnee și KYC - progresul calm, previzibil crește direct încrederea și conversia.