Version:

Stepper ​

Der Stepper ist eine Komponente, die den Fortschritt durch eine Reihe von Schritten in einem Prozess darstellt.

Overview ​

Intro ​

Der Stepper ist eine Komponente, die den Fortschritt durch eine Reihe von Schritten in einem Prozess darstellt. Es ist ein visuelles Hilfsmittel, das den Benutzern hilft, ihre Position in einem Workflow oder Prozess zu verstehen.

broken_image
Figma

Stepper Titelbild

Verwendung ​

👍 Do👎 Don't
...wenn der Benutzer durch einen Prozess mit mehreren Schritten geführt werden muss.
...der Prozess in einer bestimmten Reihenfolge abgeschlossen werden muss.
...der Prozess komplex ist und der Benutzer klare, visuelle Hinweise auf den Status, den Fortschritt und die verbleibenden Schritte benötigt.		...wenn der Prozess nur einen Schritt erfordert.
...wenn es sich um keinen zusammenhängenden Prozess handelt, sondern nur um verschiedene Seiten zwischen denen hin und her gesprungen werden kann (hierzu die Sichtreiter verwenden).
...wenn die Eingabeschritte nicht auf mehrere Seiten aufgeteilt sind, sondern sich auf einer Seite befinden (hierzu die Ankernavigation verwenden)

Guidelines ​

Aufbau ​

Der Stepper besteht aus mehreren Elementen:

  • Schritte : Jeder Schritt repräsentiert eine Aufgabe oder einen Teil des Prozesses. Ist ein Schritt unbearbeitet und nicht gesperrt, wird kein Indikator angezeigt.
  • Indikatoren : Indikatoren zeigen den Status von Schritten an.
    • Success: Erfolgreich validierte Schritte werden mit einem Checkmark Icon markiert.
    • Error: Fehlerhaft validierte Schritte werden mit einem Fehler Icon markiert.
    • Disabled: Einzelne Schritte können gesperrt werden, weil z.B. zunächst andere Schritte abgearbeitet werden müssen. Diese werden Gesperrt dargestellt.
  • "Weiter" und "Zurück" Pfeil-Buttons : Die "Weiter" und "Zurück" Pfeil-Buttons ermöglichen eine unbeschränkte Anzahl von Elementen im Stepper und erscheinen, sobald Schritte aus Platzgründen nicht dargestellt werden können.
    broken_image
    Figma

Stepper Aufbau

Anordnung & Gruppierung ​

Der Stepper sollte so platziert werden, dass er vom Nutzer sofort erfasst werden kann, damit eine optimale Prozessunterstützung möglich ist. Um Nutzer optimal durch komplexe Prozesse zu leiten, wird der Stepper häufig als Teil des Wizards verwendet.

Verhalten ​

Ein Schritt kann via Mausklick oder über eine Auswahl mit Tastaturbedienung aufgerufen werden.  

Overflow Verhalten ​

Die Breite der einzelnen Schritte wächst mit der Länge des Namens. Schritte sollten deswegen möglichst prägnant benannt werden. Können Schritte auf der rechten Seite des Steppers aus Platzgründen nicht angezeigt werden, wird ein "Weiter"-Pfeil Button dargestellt. Werden Schritte auf der linken Seite des Steppers nicht angezeigt, wird ein "Zurück"-Pfeil Button angezeigt.

broken_image
Figma		 Scroll left
broken_image
Figma		 Scroll right

States ​

Einzelne Schritte im Stepper können die Interaction States Enabled, Hover, Active, Selected, Disabled und Focused haben. 

Dazu können Schritte über unterschiedliche Stati verfügen. Beim Wechsel der Schritte erfolgt eine Validierung des vorherigen Schritts. Der Status dieser Validierung wird im Stepper angezeigt und kann entweder "Success" (Erfolg) oder "Error" (Fehler) sein. Dies dient dazu, den Benutzer über den Erfolg oder mögliche Probleme bei der Durchführung des vorherigen Schritts zu informieren. Einzelne Schritte können auch mit dem Status "Disabled" für Nutzer gesperrt werden, weil z.B. vorherige Schritte zuerst bearbeitet werden müssen.

broken_image
Figma		 Step Enabled
broken_image
Figma		 Step Hover
broken_image
Figma		 Step Active
broken_image
Figma		 Step Selected
broken_image
Figma		 Step Disabled
broken_image
Figma		 Step Success
broken_image
Figma		 Step Error
broken_image
Figma		 Step Error Hover

Barrierefreiheit ​

Tastaturbedienung ​

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist die Prozessnavigation fokussierbar. Einzelne Prozessschritte lassen sich dann mit den Pfeiltasten ansteuern.

Ist ein Prozessschritt oder ein Pfeilbutton im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.