İlerleme ve durum göstergeleri

1) İlkeler

1. Anında yanıt (≤ 100 ms). Herhangi bir eylem hemen görsel olarak onaylanır: 'meşgul'/iskelet/mikroanimasyona basmak.
2. Dürüstlük ve öngörülebilirlik. Yüzdeler "sonsuz %99'değil, gerçek ilerlemeyi yansıtır. Değerlendirme mümkün değilse, belirsiz bir değişken ve açıklama kullanın.
3. Etkinliğin yanındaki bağlam. Gösterge, kullanıcının uzak köşede değil, aradığı/hareket ettiği yerdir (düğme, kart, blok).
4. Başarıdan sonra gizlilik. Başarı kısa bir kontrol/solma ve bu kadar. Hata - anlaşılabilir açıklama ve güvenli tekrarlama.
5. Varsayılan kullanılabilirlik. 'role =' progressbar '', 'aria-valuenow', canlı bölgeler, kontrast ≥ AA.

2) Gösterge türleri ve ne zaman kullanılacağı

Doğrusal ilerleme (belirlemek/belirsiz). Yükleme/içe aktarma/dışa aktarma, net kapsama sahip adımlar.
Dairesel ilerleme (genellikle belirsiz). Kompakt yerlerde kısa yerel operasyonlar.
Stepper (adım adım). Sıralı adımlar ("Adım 2/4"), KYC, ana süreçler.
İskelet (iskelet tıkaçları). Spinner yerine içerik yapısını değiştirmek için; 'prefers-reduced-motion' olan kullanıcılar için "shimmer'dan kaçının.
Durum rozetleri (başarı/uyarı/tehlike/bilgi). Nesnenin durumu (Süreçte, Reddedildi, Hazır).
Afiş/durum tostu. Global olaylar: çevrimdışı, sunucu hatası, kuyruk senkronizasyonu.
Satır içi yükleyici (düğme/satır). Yerel işlemler: "Kaydet"..., "Gönder"....

3) Kesin vs belirsiz ilerleme

Belirleyin: iş miktarı biliniyor - %/aşamaları gösteriyoruz.
Belirsiz: bilinmeyen hacim - "İşlem devam ediyor"... + bağlam ("Genellikle 1-2 dakikaya kadar").
Durum geçişi - Değerlendirmenin ne zaman görüneceğini belirlemek için belirsiz ile başlayabilirsiniz.
ETA dikkatli bir şekilde: aralığı gösterin ("~ 30-60 saniye") ve "vaatlerden" kaçının.

4) Yerleştirme ve desenler

Yerel olarak harekete: 'arya-meşgul' düğmesi, masa sırasındaki döndürücü, kart ilerleme durumu.
Blok/listenin üstünde: Toplu işlemler sırasında bölüm başlığının altındaki doğrusal çubuk.
Global: en ince ilerleme (rota değişikliği), sistem afişleri.
Yapışkan panel (mobil): Alt yuvadaki CTA'da onay/ilerleme.

5) Kullanılabilirlik (A11y)

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

Belirsiz: set 'role =' progressbar '' olmadan 'aria-valuenow', 'role =' status 'için açıklayıcı metin ekleyin.
Canlı bölgeler: Düzenli güncellemeler için 'aria-live =' kibar ', yalnızca kritik olanlar için' iddialı '.
'aria-busy =' eylemler tarafından geçici olarak engellenen bir konteyner üzerinde 'true'.
Odak "atlama" yapmaz: sahne alanını değiştirirken odağı step adım başlığına taşıyın.

6) Metin yazarlığı ve görsel semantik

Kısaca ve durumda: "Devam eden yükleme"..., "Ödeme işleme"....
"Sırada ne var'diye ekle:" Bitti. Sayfayı otomatik olarak yenileyelim.
Renkler: yeşil - başarı, turuncu - uyarı/dikkat, kırmızı - hata. Renk ≠ tek anlam aracıdır: bir simge/metin verin.

7) iyimser güncellemeler ve geri çekilmeler

İyimser: Kullanıcı arayüzünü hemen değiştiriyoruz (örneğin, "Sık Kullanılanlar" işareti) ve sessizce sunucuyla onaylıyoruz.
Hata durumunda - yumuşak geri alma + açıklama ve 'Yeniden deneme'.
Kritik işlemler (oran/ödeme): isteğe bağlı olarak "yumuşak iyimser" ("Gönderilenler> Onay bekleniyor"... düzeltmesi), ancak onaylanmadan önce parasal durumu değiştirmeden.

8) Kuyruklar ve arka plan görevleri

Kuyruğu göster: Işlemede'n 'görevleri, ilerlemeli bireysel kartlar.
Mümkünse uzun işlemler için duraklat/iptal et.
Arka plan işleme: "Arka planda" rozet, tamamlandıktan sonra tost, "Görev geçmişi" bölümü.

9) Performans ve zamanlamalar

100ms ≤ ilk reaksiyon: Boşluk yerine iskelet/satır içi meşgul kullanın.
Animasyonlar: 120-180 ms (in), 80-140 ms (out), sadece 'transform/opacity'.
Uzun süreçler: en fazla 10-15 kez/sn ilerleme güncelleme; Grup değişiklikleri.

10) Parçacıklar

Düğmedeki yerel ilerleme

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>

Doğrusal belirleme

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) İskelet doğru

Sonsuz ışıltı olmadan gelecekteki içeriğin (kartlar/çizgiler) biçimini kullanın (veya 'prefers-reduced-motion'ile devre dışı bırakın).
Zaman sınırı:> 300-500 ms yüklüyorsa, iskelet haklı çıkar; Daha düşük gecikmelerle, "mikro-solma" yeterlidir.

12) Durum rozetleri (nesne durumları)

Örnekler Taslak, Süreçte, Bekleyen Onay, Hazır, Reddedildi'dir.

Kısa metin, kararlı simge/arka plan renkleri, kontrast ≥ AA.
Simge' aria-hidden =" true"' + metin etiketi (SR için).
Tıklayın - ayrıntıları ortaya çıkarın veya "Geçmiş'i açın.

13) iGaming'in özellikleri

• CTA tuşuna basmak - "Gönderildi"...,> 3 saniye gecikmeli - "Onay bekleniyor"... (belirsiz).
• Başarı - "Bahis kabul edildi" + kontrol; Hata - dürüst açıklama ("piyasa dönemi kapalı/oran değişti") ve güvenli Yeniden Deneme.

• Aşamalara göre belirleyin: "Yöntemi kontrol edin - Gönderin - PSP'yi Onaylayın".
• Çıktı için - Proses rozetinde, profildeki durum ekranında, ETA aralığında; Tamamlandığında itin.

• Kayıt basamağı (adımlar), ödüle ilerleme (N/puan), "Katılımcı" durum rozeti.
• Gerçek zamanlı güncelleme - düzgün, hiçbir yanıp sönüyor, 'aria-canlı =' kibar'ile.

• Stepper + rozeti "İnceleme Altında. "Zaten kabul edileni göster (işaretle) ve geriye kalanları.

14) Renkler, kontrast ve metin

Başarı/Bilgi/Uyarı/Tehlike - tasarım sisteminde dört kararlı ton.
AA ≥ rozet arka planıyla metin kontrastı.
"Süreç içinde've" uyarı "için aynı rengi kullanmayın.

15) Metrikler

Time-to-First-Feedback (TTFF): İlk görsel yanıt için tıklayın.
İşlem tamamlanma süresi ve uzun görevler için düşme/iptal oranı.
İlerleme işlemleri için başarı oranını yeniden deneyin.
Başarılı bir şekilde tamamlayan iyimserlerin yüzdesi (ve geri dönüşlerin payı).
Görünür zaman iskeleti/spinner (hedef: mümkün olduğunca az).

16) Anti-desenler

Sessiz düğme (meşgul/döndürücü yok)> 100 ms.
Açıklama veya alternatif olmadan sonsuz iplikçiler.
Yanlış yüzde/% 99 asılı kaydırıcı.
Başarısızlık durumunda içeriği sıfırlar ve yeniden denenemez.
Sadece durum için metin/simgeler olmadan renk.
İlerleme eylemden uzaktır (kullanıcı görmez).

17) Tasarım sistemi belirteçleri (örnek)

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) KG kontrol listesi

Yanıt ve dürüstlük

• TFF ≤ 100 ms; yerel bir meşgul/iskelet var.
• Belirlemek - gerçek %; belirsiz - bir açıklama ile.

Kullanılabilirlik

• 'rol = "progressbar"'/' aria-valuenow' doğru; Güncellemelerde canlı bölgeler.
• AA ≥ rozetlerin/metinlerin kontrastı; Renk, anlamın tek taşıyıcısı değildir.

Davranış

• Doğru geri alma ve açıklama ile iyimser.
• Kuyruklar görüntülenir; Bir iptal/duraklatma var (varsa).
• Sahnenin yakınındaki ilerleme CTA ile örtüşmüyor.

Performans

• Güncellemeler en fazla 10-15 kez/sn; 'transform/opacity' animasyonları.
• İskelet 'reduce-motion'ile ışıltı alay etmez.

Metinler

• Kısa, teknik jargon olmadan; "Sırada ne var" tamamlandıktan sonra.
• Garanti edilmedikçe kesin zamanın "vaatleri" yoktur.

19) Tasarım sistemindeki belgeler

Компоненты: 'ProgressBar', 'ProgressCircle', 'Stepper', 'StatusBadge', 'InlineLoader', 'Skeleton'.
Durumları için tür, metin yazarlığı ve renk seçme kuralları.
Desenler: iyimser, kuyruklar, arka plan işleme, çevrimdışı senkronizasyon.
Do/Don't gallery: "Perpetual spinner", yanlış yüzdeler, "sessize alma" CTA vs iyi TTFF.

Kısa Özet

İlerleme ve durum göstergeleri zamanında, dürüst ve erişilebilir geri bildirim sağlamalıdır. Onları eylemin yanına yerleştirin, kesin ve belirsiz ilerlemeyi ayırt edin, a11y'ye saygı gösterin ve animasyonları kötüye kullanmayın. İGaming'de bu özellikle bahis, ödemeler, turnuvalar ve KYC için önemlidir - sakin, öngörülebilir ilerleme doğrudan güven ve dönüşümü arttırır.