Verwendung
Die Fortschrittsnavigation dient zum einen der Darstellung der Schritte eines laufenden Prozesses. Sie zeigt an, bei welchem Schritt sich Nutzende gerade befinden, die Gesamtzahl der Schritte und den Gesamtfortschritt in mehrstufigen Prozessen.
Sofern fachlich vorgesehen besteht die optionale Möglichkeit, innerhalb der Prozess-Schritte zu navigieren, d. h. Nutzende sollten zu jedem zuvor abgeschlossenen oder bearbeiteten Schritt zurückkehren können, um die Daten zu überprüfen, bevor der gesamte Prozess abgeschlossen wird.
Die einzelnen Schritte sind von links nach rechts bzw. abhängig vom Viewport von oben nach unten angeordnet, um darzustellen, wie Nutzende sich durch den Prozess bewegen.
Positionierung & responsives Verhalten
- Die Fortschrittsnavigation nimmt die volle Breite des Viewports ein. Das Padding innerhalb der Komponente muss mit dem Seitenabstand übereinstimmen, dass die Inhalte der Komponente im Grid liegen.
- Die Fortschrittsnavigation wird immer unterhalb der H1 platziert.
- Nach der Fortschrittsnavigation folgt immer die H2 mit dem Titel des aktuellen Schritts.
Ab dem Breakpoint XL (≥ 1200px)
- Die Desktop-Variante der Fortschrittsnavigation kann angezeigt werden.
- Die Fortschrittsnavigation wird immer in den linken drei Spalten des Girds platziert. Unterhalb der Fortschrittsnavigation werden keine weiteren Komponenten platziert.
Zustände
Eine Fortschrittsanzeige hat die Zustände Abgeschlossen, Aktuell, Nicht begonnen, Fehlerhaft und Deaktiviert.
- Abgeschlossen
- Ein Schritt gilt als abgeschlossen, wenn die erforderlichen Eingaben oder Auswahlen innerhalb dieses Schritts getätigt und zum nächsten Schritt fortgefahren wurde. Nach Möglichkeit sollten die Eingaben validiert werden um zu bestätigen, dass der Schritt abgeschlossen wurde, bevor Nutzende fortfahren. Abgeschlossene Schritte werden visuell und im Code entsprechend als solche markiert.
- Aktuell
- Ein Schritt ist aktuell, wenn Nutzende mit den Eingaben oder Auswahlen innerhalb dieses Schritts interagieren. Der aktuelle Schritt wird visuell und im Code entsprechend als solcher markiert.
- Nicht begonnen
- Ein Schritt gilt als nicht begonnen, wenn Nutzende bisher noch nicht mit diesem interagiert haben. Nicht begonnene Schritte werden visuell als solche markiert.
- Fehlerhaft
- Ein Schritt kann fehlerhaft sein, wenn ungültige oder unvollständige Informationen eingegeben wurden. Neben der Hervorhebung als Fehler kann hier optional bereits ein Hinweis auf die Art des Fehlers gegeben werden, z. B. über ein entsprechendes Tooltip auf dem Symbol.
- Deaktiviert
- Ein Schritt ist deaktiviert, wenn alle darin enthaltenen interaktiven Funktionen entfernt wurden. Im Gegensatz zu anderen Zuständen sind deaktivierte Zustände nicht fokussierbar, werden oftmals nicht von Screenreadern ausgegeben und unterliegen auch keinen Kontrastanforderungen.
Interaction Design
Die Schritte erhalten bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs.
Mausklick auf den Prozessschritt bzw. Tap auf Touch UIs sowie die Eingabe (Enter) bei Tastaturbedienung auf einem fokussierten Element lösen den Sprung zum jeweiligen Prozessschritt aus.
Do’s and Dont’s
So:
- Wenn Nutzende einen linearen Prozess von drei oder mehr Schritten durchlaufen sollen.
- Wenn es für Nutzende von Vorteil ist, den Fortschritt bei langen Formularen zu verstehen.
- Wenn Eingaben validiert werden müssen, bevor mit einem folgenden Schritt fortgefahren wird.
So nicht:
- Wenn ein Prozess oder Formular weniger als drei Schritte hat.
- Wenn der Prozess in beliebiger Reihenfolge abgeschlossen werden kann.
- Wenn sich die Anzahl oder Reihenfolge der Schritte aufgrund der Applikationslogik ändern kann.
