Fortschritts- und Statusindikatoren

1) Grundsätze

1. Sofortige Reaktion (≤ 100 ms). Jede Aktion wird sofort visuell bestätigt: Drücken Sie → 'busy '/Skelett/Mikroanimation.
2. Ehrlichkeit und Berechenbarkeit. Die Prozentsätze spiegeln den tatsächlichen Fortschritt wider, nicht die „ewigen 99%“. Wenn eine Bewertung nicht möglich ist, verwenden Sie eine nicht definierte (indeterminate) Option und Erklärung.
3. Kontext neben der Aktion. Indikator, wo der Benutzer schaut/handelt (Taste, Karte, Block), nicht in der fernen Ecke.
4. Unauffälligkeit nach dem Erfolg. Erfolg ist ein kurzer Check/Fade und das war 's. Fehler - verständliche Erklärung und sichere Wiederholung.
5. Standardverfügbarkeit. 'role =' progressbar', 'aria-valuenow', Live-Regionen, Kontrast ≥ AA.

2) Arten von Indikatoren und wann sie zu verwenden sind

Linearer Fortschritt (determinate/indeterminate). Download/Import/Export, Schritte mit verständlichem Umfang.
Zirkulärer Fortschritt (normalerweise indeterminate). Kurze lokale Operationen an kompakten Standorten.
Stepper (Schritt für Schritt). Aufeinander folgende Schritte („Schritt 2 von 4“), KYC, Master-Prozesse.
Skeleton (Skeleton-Stecker). Um die Struktur des Inhalts anstelle von Spinnern zu ersetzen; Vermeiden Sie „shimmer“ für Benutzer mit 'prefers-reduced-motion'.
Status-Abzeichen (Erfolg/Warnung/Gefahr/Info). Objektstatus (In Bearbeitung, Abgelehnt, Fertig).
Banner/Status Toast. Globale Ereignisse: Offline, Serverausfall, Warteschlangensynchronisation.
Inline-Loader (Button/String). Lokale Operationen: „Speichern“..., „Senden“....

3) Bestimmter vs unsicherer Fortschritt

Determinate: Der Umfang der Arbeit ist bekannt → wir zeigen %/Stufen.
Indeterminate: Volumen unbekannt → „Verarbeitung im Gange“... + Kontext („Normalerweise bis zu 1-2 Minuten“).
Statuswechsel: Sie können mit indeterminate beginnen → zu determinate gehen, wenn die Bewertung erscheint.
ETA Vorsicht: Zeigen Sie den Bereich („~ 30-60 Sekunden“) und vermeiden Sie „Versprechen“.

4) Platzierung und Muster

Lokal zur Aktion: Schaltfläche' aria-busy', Spinner in der Tabellenzeile, Fortschritt in der Karte.
Über Block/Liste: Linearer Balken unter dem Sektionenheader im Batch-Betrieb.
Global: top thin progress (route-change), Systembanner.
Sticky-Panel (mobil) : Bestätigung/Fortschritt durch CTA im unteren Dock.

5) Verfügbarkeit (A11y)

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

Indeterminate: Setzen Sie' role = 'progressbar' ohne' aria-valuenow', fügen Sie den erläuternden Text in 'role =' status' hinzu.
Live-Regionen: 'aria-live =' polite' für normale Updates, 'assertive' nur für kritische.
'aria-busy =' true''auf einem Container, der vorübergehend durch Aktionen blockiert wird.
Der Fokus „springt“ nicht: Bewegen Sie den Fokus beim Phasenwechsel auf den Schrittkopf des Steppers.

6) Copywriting und visuelle Semantik

Kurz und bündig: „Download läuft“..., „Wir bearbeiten die Zahlung“....
Fügen Sie "was als nächstes" hinzu: "Fertig. Wir aktualisieren die Seite automatisch".
Farben: grün - Erfolg, orange - Warnung/Aufmerksamkeit, rot - Fehler. Farbe ≠ der einzige Bedeutungsträger: Geben Sie ein Symbol/Text.

7) Optimistische Updates und Pullbacks

Optimist: Ändern Sie die Benutzeroberfläche sofort (z. B. die Markierung „In Favoriten“) und bestätigen Sie leise mit dem Server.
Bei einem Fehler - Soft Rollback + Erklärung und 'Retry'.
Kritische Transaktionen (Rate/Zahlung): optional „weiche Optimisten“ (fix „Gesendet → Warten auf Bestätigung“...), aber ohne Änderung des Geldstatus bis zur Bestätigung.

8) Warteschlangen und Hintergrundaufgaben

Zeige die Warteschlange:'n 'Aufgaben in Bearbeitung, einzelne Karten mit Fortschritt.
Geben Sie eine Pause/Stornierung für lange Operationen, wenn möglich.
Hintergrundverarbeitung: Abzeichen „Im Hintergrund“, Toast nach Abschluss, Abschnitt „Aufgabenverlauf“.

9) Performance und Timings

Erste Reaktion ≤ 100 ms: Skeleton/Inline-Busy anstelle von Leerraum anwenden.
Animationen: 120-180 ms (in), 80-140 ms (out), nur 'transform/opacity'.
Lange Prozesse: Aktualisierung des Fortschritts nicht mehr als 10-15 Mal/Sekunde; gruppieren Sie die Änderungen.

10) Snippets

Lokaler Fortschritt am Button

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>

Lineare 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 richtig

Verwenden Sie ein Formular für zukünftige Inhalte (Karten/Zeilen), ohne unendlichen Schimmer (oder deaktivieren Sie bei 'prefers-reduced-motion').
Zeitlimit: Wenn das Laden> 300-500ms ist, ist das Skelett gerechtfertigt; bei kleineren Verzögerungen genügt ein „Mikro-Fade“.

12) Status-Abzeichen (Objektzustände)

Beispiele: Entwurf, In Bearbeitung, Ausstehende Bestätigung, Fertig, Abgelehnt.

Kurzer Text, stabile Icon/Hintergrundfarben, Kontrast ≥ AA.
Symbol' aria-hidden =“ true“' + Textbeschriftung (für SR).
Per Klick - wir verraten Details oder öffnen die „Story“.

13) Besonderheiten von iGaming

• Drücken Sie CTA → „Gesendet“..., mit einer Verzögerung von> 3 s - „Warten auf Bestätigung“... (indeterminate).
• Erfolg - „Wette akzeptiert“ + Scheck; Fehler - ehrliche Erklärung („Marktperiode geschlossen/Koeffizient geändert“) und sichere Retry.

• Schritt für Schritt: „Methode überprüfen → Senden → PSP bestätigen“.
• Für die Ausgabe - Abzeichen In der Verarbeitung, Statusbildschirm im Profil, ETA-Bereich; Push am Ende.

• Registrierungs-Stepper (Schritte), Fortschritt bis zur Belohnung (N/Punkte), Teilnahmestatus-Abzeichen.
• Real-Time-Update - ordentlich, kein Blinken, mit 'aria-live =' polite'.

• Stepper + Abzeichen „On Check“. Zeigen Sie, was bereits akzeptiert wurde (Häkchen) und was übrig bleibt.

14) Farben, Kontrast und Text

Erfolg/Info/Warnung/Gefahr - vier nachhaltige Töne im Designsystem.
Der Kontrast des Textes zum Hintergrund der Plakette ≥ AA.
Verwenden Sie nicht die gleiche Farbe für „in Bearbeitung“ und „Warnung“.

15) Metriken

Time-to-First-Feedback (TTFF): vom Klick bis zur ersten visuellen Reaktion.
Vervollständigung Zeit für Operationen und Drop/Abortrate für lange Aufgaben.
Retry-Erfolgsrate für Fortschrittsoperationen.
% Optimisten, die erfolgreich abgeschlossen haben (und der Anteil der Pullbacks).
Sichtbares Zeitskelett/Spinner (Ziel: so wenig wie möglich).

16) Anti-Muster

„Stumme“ Taste (kein Busy/Spinner)> 100ms.
Endlose Spinner ohne Erklärung und Alternative.
Falsche Prozentsätze/Schieberegler hängen bei 99%.
Setzen Sie den Inhalt bei einem Fehler zurück, ohne ihn wiederholen zu können.
Nur Farbe ohne Text/Icons für den Status.
Der Fortschritt ist weit vom Ort der Handlung entfernt (der Benutzer sieht nicht).

17) Design System Token (Beispiel)

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) QS-Checkliste

Reaktion und Ehrlichkeit

• TTFF ≤ 100 ms; es gibt ein lokales busy/Skelett.
• Determinate - real%; indeterminate - mit Erklärung.

Verfügbarkeit

• „role =“ progressbar „“/„ aria-valuenow“ sind korrekt; Live-Regionen auf dem neuesten Stand.
• Abzeichen/Text-Kontrast ≥ AA; Farbe ist nicht der einzige Bedeutungsträger.

Verhalten

• Optimist mit korrektem Rollback und Erklärung.
• Warteschlangen werden angezeigt; es gibt eine Stornierung/Pause (falls zutreffend).
• Fortschritt in der Nähe des Ortes der Handlung, nicht überlappen CTA.

Leistung

• Updates nicht mehr als 10-15 mal/s; Animationen 'transform/opacity'.
• Skeleton neckt nicht shimmer 'ohm bei' reduce-motion'.

Texte

• Kurz, ohne Techjargon; „was kommt als nächstes“ nach der Fertigstellung.
• Ohne „Versprechen“ einer genauen Zeit, wenn sie nicht garantiert ist.

19) Dokumentation im Konstruktionssystem

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Typauswahlregeln, Copywriting und Farben für Status.
Muster: Optimist, Warteschlangen, Hintergrundverarbeitung, Offline-Synchronisation.
Do/Don 't-Galerie: „ewiger Spinner“, falsche Prozentsätze, „stummer“ CTA vs. guter TTFF.

Kurze Zusammenfassung

Fortschritts- und Statusindikatoren sollten zeitnahes, ehrliches und zugängliches Feedback liefern. Platzieren Sie sie neben der Aktion, unterscheiden Sie zwischen bestimmten und unbestimmten Fortschritten, respektieren Sie a11y und missbrauchen Sie keine Animationen. Bei iGaming ist dies besonders wichtig für Wetten, Zahlungen, Turniere und KYC - ein ruhiger, vorhersehbarer Fortschritt erhöht direkt das Vertrauen und die Konversion.