Schritt- & Fortschritts-System

Was macht Schritt- & Fortschritts-System?

Zweck

Das Schritt- & Fortschritts-System-Skill bietet eine Methodik zum Entwerfen und Dokumentieren, wie Benutzer durch mehrstufige Prozesse navigieren oder auf Hintergrundaufgaben warten. Es stellt sicher, dass komplexe Workflows (wie Checkouts oder Onboarding) in überschaubare Abschnitte unterteilt werden, wodurch die kognitive Belastung reduziert wird, indem dem Benutzer mitgeteilt wird, wo er sich befindet, was er abgeschlossen hat und was noch zu tun ist.

Anwendungsfälle

• E-Commerce-Checkouts: Führen der Benutzer durch Versand, Zahlung und Überprüfung.
• Mehrstufige Formulare: Aufteilung langer Dateneingabeaufgaben in logische Abschnitte.
• Benutzer-Onboarding: Visualisierung des Einrichtungsprozesses für ein neues Konto.
• Lade-/Hochlade-Zustände: Kommunikation des Status langlaufender Operationen.
• Lernpfade: Anzeigen des Fortschritts durch einen Kurs oder Lehrplan.

Wann NICHT zu verwenden

• Einzelansicht-Aufgaben: Wenn eine Aufgabe in einer einzigen Ansicht ohne Kontextwechsel abgeschlossen werden kann, fügt ein Fortschrittssystem unnötiges Rauschen hinzu.
• Unendliche Feeds: Scrollen durch Inhalte, bei denen es kein definiertes „Ende“ des Fortschritts gibt.
• Kritische Hochgeschwindigkeits-Interaktionen: Bei denen die Verzögerung durch die Anzeige von Fortschrittsindikatoren eine zeitkritische Aufgabe behindern würde (z.B. Echtzeit-Gaming-UI).

Eingaben

1. Schritt-Inventar: Eine Liste der diskreten Stufen, die zur Erledigung der Aufgabe erforderlich sind.
2. Aufgabentyp: Handelt es sich um eine benutzergesteuerte Sequenz (Stepper) oder einen systemgesteuerten Prozess (Fortschrittsbalken)?
3. Linearität: Müssen die Schritte der Reihe nach abgeschlossen werden, oder kann der Benutzer zwischen ihnen springen?
4. Inhaltsbeschränkungen: Beschriftungen, Beschreibungen und Symbole für jeden Schritt.

Ausgaben

1. Fortschritts-Framework: Eine Definition des Komponententyps (Horizontal, Vertikal oder Kreisförmig).
2. Zustandsmatrix: Visuelle Spezifikationen für die Zustände Ausstehend, Aktiv, Abgeschlossen und Fehler.
3. Responsive Strategie: Wie sich der Indikator an mobile Viewports anpasst (z.B. Ausblenden von Beschriftungen, Wechseln zu numerisch).
4. Barrierefreiheits-Spezifikationen: ARIA-Rollen, Live-Regionen und Tastatur-Interaktionsregeln.

Arbeitsablauf

1. Kategorisieren des Fortschrittstyps

Bestimmen Sie das am besten geeignete visuelle Muster:

• Horizontaler Stepper: Am besten für lineare Prozesse mit 3–5 Schritten auf dem Desktop.
• Vertikaler Stepper: Am besten für nicht-lineare Prozesse, Schritte mit unterschiedlichen Inhaltslängen oder Mobile-First-Abläufe.
• Kontinuierlicher Fortschrittsbalken: Am besten für systemgesteuerte Aufgaben (Uploads, Laden) oder Prozesse mit einer hohen Anzahl von Mikroschritten.
• Fortschrittskreis: Am besten für Dashboard-Widgets oder wenn der Platz extrem begrenzt ist.

2. Definieren der Schritte-Hierarchie und Beschriftungen

• Primäre Beschriftung: Prägnanter Name des Schritts (z.B. „Versand“).
• Sekundäre Beschriftung (optional): Kurze Beschreibung oder Status (z.B. „In Bearbeitung“).
• Visueller Indikator: Zahlen (für die Reihenfolge), Symbole (für den Kontext) oder Punkte (für minimalistisches Design).

3. Festlegen der Zustandsvisualisierung

Definieren Sie klare visuelle Unterscheidungen für jeden Zustand:

• Ausstehend: Niedriger Kontrast, normalerweise ausgegraut.
• Aktiv: Hoher Kontrast, oft unter Verwendung der primären Markenfarbe oder eines „Glow“-Effekts.
• Abgeschlossen: Verwenden Sie ein „Häkchen“-Symbol und eine auffällige Farbe (oft Grün oder eine abgeschwächte Version der aktiven Farbe).
• Fehler: Verwenden Sie ein „Warnungs“-Symbol und eine semantische Fehlerfarbe (Rot).

4. Entwerfen für Bewegung und Feedback

• Übergänge: Verwenden Sie subtile Animationen beim Wechsel zwischen Schritten, um den Fortschritt zu verstärken.
• Anklickbarkeit: Bestimmen Sie, ob Benutzer auf vorherige Schritte klicken können, um zurückzugehen.
• Validierung: Visualisieren Sie, dass ein Schritt gültig/vollständig ist, bevor Sie den Fortschritt ermöglichen.

5. Planen von responsiven Anpassungen

Mehrstufige Indikatoren sind dafür bekannt, auf mobilen Geräten zu versagen:

• Beschriftungsreduktion: Auf Mobilgeräten Textbeschriftungen ausblenden und nur Zahlen oder Symbole anzeigen.
• Übergang zu „Schritt X von Y“: Ersetzen Sie die vollständige visuelle Leiste durch eine einfache textuelle oder numerische Zusammenfassung.
• Vertikale Verschiebung: Konvertieren Sie horizontale Balken auf kleinen Bildschirmen in vertikale Listen.

Entscheidungsregeln

• Die 5-Schritt-Regel: Wenn ein horizontaler Stepper mehr als 5 Schritte hat, wechseln Sie zu einem vertikalen Stepper oder einem einfachen „Schritt X von Y“-Textindikator, um Unordnung zu vermeiden.
• Symbol vs. Zahl: Verwenden Sie Zahlen, wenn die Reihenfolge der Sequenz kritisch ist; verwenden Sie Symbole nur, wenn sie einen unmittelbaren semantischen Wert bieten (z.B. ein „Kreditkarten“-Symbol für die Zahlung).
• Linearität: Wenn Benutzer Schritte in der Reihenfolge abschließen müssen, deaktivieren Sie Klicks auf „zukünftige“ Schritte. Handelt es sich um ein flexibles Setup, erlauben Sie das Springen.
• Kontexterhaltung: Zeigen Sie immer die Beschriftungen des aktuellen, vorherigen und nächsten Schritts an. Andere können bei Bedarf abgeschnitten werden.

Einschränkungen

• Barrierefreiheit:
  • Verwenden Sie role="progressbar" mit aria-valuenow, aria-valuemin, aria-valuemax und einem menschenlesbaren aria-valuetext (z.B. „Schritt 2 von 4: Zahlung“) für kontinuierliche Balken.
  • Verwenden Sie aria-current="step", um den aktiven Schritt in einer Sequenz zu identifizieren.
  • Stellen Sie sicher, dass die Kontrastverhältnisse für aktive vs. inaktive Schritte WCAG AA (4,5:1) erfüllen.
  • Wenn Schritte anklickbar sind, müssen ihre Ziele WCAG 2.2 SC 2.5.8 (mindestens 24x24 Pixel, 44 Pixel bevorzugt) erfüllen und sichtbare :focus-visible-Zustände anzeigen.
• Hierarchie: Der Fortschrittsindikator sollte ein Leitfaden sein, nicht der Hauptfokus. Er befindet sich normalerweise oben (horizontal) oder links (vertikal) des Inhalts.
• Responsivität: Darf keinen horizontalen Überlauf verursachen.

Häufige Fehlermuster

• Der „Geheimnisvolle Fortschritt“: Anzeigen eines Balkens ohne Beschriftung oder Prozentsatz, sodass der Benutzer sich fragt: „Wie viel noch?“
• Unzugängliche Zustände: Nur Verwendung von Farbe (z.B. Grün vs. Grau), um den Abschluss anzuzeigen, ohne Symbole oder Text.
• Überfüllte Horizontale: Erzwingen zu vieler Schritte in einem horizontalen Layout, was zu überlappendem Text oder winzigen Berührungszielen auf mobilen Geräten führt.
• Mangelnde Beständigkeit: Ausblenden des Fortschrittsindikators auf einigen Seiten eines mehrstufigen Ablaufs, sodass Benutzer ihren Orientierungssinn verlieren.

Validierungskriterien

• Der aktuelle Schritt ist deutlich von abgeschlossenen und kommenden Schritten unterschieden.
• Abgeschlossene Schritte verwenden einen nicht-farblichen Indikator (wie ein Häkchen).
• Die mobile Ansicht ist funktionsfähig und läuft nicht über oder ist überladen.
• ARIA-Rollen und aria-current sind korrekt angewendet.
• Das System behandelt „Fehler“-Zustände für einzelne Schritte.
• Der Indikator wird konsistent über alle Schritte des Ablaufs hinweg platziert.