Tərəqqi və status göstəriciləri

1) Prinsiplər

1. Ani cavab (≤ 100 ms). Hər hansı bir hərəkət dərhal vizual olaraq təsdiqlənir: → 'busy '/skelet/mikroanimasiya.
2. Dürüstlük və proqnozlaşdırıla bilən. Faiz «əbədi 99%» deyil, real tərəqqini əks etdirir. Qiymətləndirmə mümkün deyilsə, müəyyən olmayan (indeterminate) variantını və izahını istifadə edin.
3. Hərəkətin yanında kontekst. Göstərici istifadəçinin uzaq küncdə deyil, baxdığı/hərəkət etdiyi yerdədir (düymə, kart, blok).
4. Uğurdan sonra görünməzlik. Uğur - qısa çek/fakt və hər şey. Səhv - başa düşülən izahat və təhlükəsiz təkrarlama.
5. Default mövcudluğu. 'role = «progressbar»', 'aria-valuenow', live-regionlar, kontrast ≥ AA.

2) Göstərici növləri və nə zaman istifadə olunur

Xətti tərəqqi (determinate/indeterminate). Yükləmə/idxal/ixrac, aydın həcmdə addımlar.
Dairəvi tərəqqi (adətən indeterminate). Kompakt yerlərdə qısa lokal əməliyyatlar.
Stepper (addım-addım). Ardıcıl mərhələlər («2 addım 4»), KYC, master proseslər.
Skeleton (skeleton-qapaq). Spinner əvəzinə məzmun strukturunu əvəz etmək üçün; 'prefers-reduced-motion' ilə istifadəçilər üçün «shimmer» çəkinin.
Status nişanları (success/warning/danger/info). Obyektin vəziyyəti («Emalda», «Rədd edildi», «Bitdi»).
Status banner/tost. Qlobal hadisələr: offline, server nasazlığı, növbə sinxronizasiyası.
Inline loader (düymə/sətir). Lokal əməliyyatlar: «Saxlama»..., «Göndərmə»....

3) Müəyyən vs qeyri-müəyyən tərəqqi

Determinate: məlum iş həcmi → %/mərhələləri göstərir.
Indeterminate: həcmi naməlum → «emal gedir»... + kontekst («Adətən 1-2 dəqiqə»).
Variant dəyişikliyi: indeterminate → ilə başlaya bilərsiniz.
ETA diqqətli olun: aralığı göstərin («~ 30-60 san») və «vədlərdən» qaçın.

4) Yerləşdirmə və nümunələr

Lokal hərəkət: 'aria-busy' düyməsi, cədvəl xəttində spinner, kartdakı irəliləyiş.
Blok/siyahı üzərində: paket əməliyyatları zamanı bölmənin xederi altında xətti bar.
Qlobal: üst incə tərəqqi (route-change), sistem bannerləri.
Sticky panel (mob.) : aşağı dokda CTA təsdiq/tərəqqi.

5) Mövcudluq (A11y)

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

Indeterminate: 'role =' progressbar '-siz' aria-valuenow '-u yerləşdirin, izah mətnini' role = 'status' -a əlavə edin.
Canlı bölgələr: 'aria-live = «polite»' adi yeniləmələr üçün, 'assertive' - yalnız kritik olanlar üçün.
'aria-busy = «true» müvəqqəti bloklanmış konteynerdə.
Fokus «atlamır»: mərhələni dəyişdirərkən fokusu stepper addımının başlığına keçirin.

6) Kopyalama və vizual semantika

Qısa və iş üzrə: «Yükləmə var»..., «Ödənişi emal edirik»....
"Sonrakı" əlavə edin: "Bitdi. Səhifəni avtomatik yeniləyəcəyik".
Rənglər: yaşıl - uğur, narıncı - xəbərdarlıq/diqqət, qırmızı - səhv. Rəng ≠ yeganə məna daşıyıcısı: ikon/mətn verin.

7) Optimist yeniləmələr və geri qaytarmalar

Optimistika: Dərhal UI-ni dəyişdiririk (məsələn, «Favoritlərdə») və səssizcə serverlə təsdiqləyirik.
Səhv olduqda - yumşaq geri dönüş + izahat və 'Retry'.
Kritik əməliyyatlar (bahis/ödəniş): əlavə olaraq «yumşaq nikbinlik» («Göndərildi → Təsdiq gözləyirik»...), lakin təsdiqlənmədən əvvəl pul vəziyyətini dəyişdirmədən.

8) Növbələr və fon tapşırıqları

Bir növbə göstərin: 'n' emal tapşırıqları, ayrı-ayrı kartlar.
Mümkünsə uzun əməliyyatlar üçün fasilə/ləğv verin.
Fon emalı: «Fonda» nişanı, tamamlandıqdan sonra tostlar, «Tapşırıqların tarixi» bölməsi.

9) Performans və tayminq

İlk reaksiya ≤ 100 ms: boşluq əvəzinə skeleton/inline-busy tətbiq edin.
Animasiyalar: 120-180 ms (in), 80-140 ms (out), yalnız 'transform/opacity'.
Uzun proseslər: tərəqqinin yenilənməsi 10-15 dəfə/saniyədən çox deyil; dəyişiklikləri qruplaşdırın.

10) Snippetlər

Düymədə yerli irəliləyiş

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>

Xətti determinate

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) Skeleton düzgün

Sonsuz shimmer olmadan gələcək məzmun formasını (kartlar/sətirlər) istifadə edin (və ya 'prefers-reduced-motion' ilə söndürün).
Zaman həddi: əgər yükləmə> 300-500 ms, skeleton bəraət; daha az gecikmələrdə kifayət qədər «mikro-fade».

12) Status nişanları (obyekt halları)

Nümunələr: Layihə, Emal, Təsdiq gözləyir, Hazır, Rədd edildi.

Qısa mətn, davamlı ikona/fon rəngləri, kontrast ≥ AA.
' aria-hidden =» true»' + mətn etiketi (SR üçün).
Klik - detalları açırıq və ya "Tarix 'i açırıq.

13) iGaming xüsusiyyətləri

• Basın CTA → «Göndərildi»..., gecikdikdə> 3 s - «Təsdiq gözləyirik...» (indeterminate).
• Uğur - «Mərc qəbul edildi» + çek; səhv - dürüst izahat («bazar dövrü bağlı/əmsal dəyişdi») və təhlükəsiz Retry.

• Mərhələlərə görə determinate: «Metodu yoxlamaq → Göndərmə → PSP təsdiq».
• Çıxış üçün - nişan emalında, profil status ekranı, ETA diapazonu; bitdikdən sonra push.

• Step qeydiyyat (addımlar), mükafata qədər irəliləyiş (N/xal), status nişanı «iştirak edir».
• Real-time yeniləmə - diqqətlə, yanıb-sönmədən, ilə 'aria-live = «polite»'.

• Step + döş nişanı «Yoxlanılır». Artıq nə qəbul edildiyini və nə qaldığını göstərin.

14) Rənglər, kontrast və mətn

Success/Info/Warning/Danger - dizayn sistemində dörd davamlı ton.
≥ AA nişanının arxa planına mətn kontrastı.
«Emal» və «xəbərdarlıq» üçün eyni rəngdən istifadə etməyin.

15) Metrika

Time-to-First-Feedback (TTFF): klikdən ilk vizual cavaba qədər.
Completion Time əməliyyatları və uzun tapşırıqlar üçün drop/abort rate.
Tərəqqi əməliyyatları üçün retry success rate.
müvəffəqiyyətlə başa çatan% nikbinlik (və geri qaytarma payı).
Visible time skeleton/spinner (məqsəd: mümkün qədər az).

16) Anti-nümunələr

«Lal» düyməsi (busy/spinner yoxdur)> 100 ms.
Sonsuz spinner heç bir izahat və alternativ.
99% asılı saxta faiz/sürgü.
Təkrar etmək imkanı olmadan səhv olduqda məzmunu sıfırlayın.
Yalnız status üçün mətn/simgələr olmadan rəng.
Hərəkət yerindən çox uzaqda (istifadəçi görmür).

17) Dizayn sistemi tokenləri (nümunə)

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) QA-çek siyahısı

Cavab və dürüstlük

• TTFF ≤ 100 ms; yerli busy/skeleton var.
• Determinate - real%; indeterminate - izahat ilə.

Mövcudluq

• 'role = «progressbar» '/' aria-valuenow' düzgün; live-regionlar yeniləmələrdə.
• Nişanlar/mətn kontrastı ≥ AA; rəng yeganə məna daşıyıcısı deyil.

Davranış

• Düzgün geri dönüş və izahat ilə optimistika.
• Növbələr göstərilir; ləğv/fasilə var (mümkünsə).
• Yerin yaxınlığındakı irəliləyiş, CTA-nı bağlamır.

Performans

• Ən çox 10-15 dəfə/san; animasiya 'transform/opacity'.
• Skeleton 'reduce-motion' zamanı shimmer ilə sataşmır.

Mətnlər

• Qısa, texniki jarqon olmadan; tamamlandıqdan sonra «sonra nə».
• Zəmanət verilmədiyi təqdirdə dəqiq vaxtın «vədləri» yoxdur.

19) Dizayn sistemində sənədləşmə

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Tip seçimi qaydaları, kopyalama və statuslar üçün rənglər.
Nümunələr: optimistika, növbələr, fon emalı, oflayn sinxronizasiya.
Do/Don 't-qalereya: «əbədi spinner», saxta faiz, «dilsiz» CTA vs yaxşı TTFF.

Qısa xülasə

Tərəqqi və status göstəriciləri vaxtında, dürüst və əlverişli rəy verməlidir. Onları hərəkətin yanında yerləşdirin, müəyyən və qeyri-müəyyən irəliləyişləri ayırın, a11y-yə hörmət edin və animasiyalardan sui-istifadə etməyin. iGaming-də bu, bahislər, ödənişlər, turnirlər və KYC üçün xüsusilə vacibdir - sakit, proqnozlaşdırıla bilən irəliləyiş birbaşa inamı və dönüşümü artırır.