Darstellung und Verhalten

Ein Prozessschritt orientiert über den Fortschritt durch einen mehrstufigen Prozess. Er zeigt Nutzenden auf, in welchem Schritt sie sich aktuell befinden und wie viele Schritte sie noch vor sich haben. 

Nutzende können über einen Prozessschritt zu jedem Schritt, der hinter ihm liegt, zurücknavigieren.

• Das Element besteht aus mehreren Schritten. Pro Schritt werden angezeigt:
  • Nummer des Schritts
  • Titel des Schritts
• Aktiver Schritt: die Zahl wird farbig markiert, der Name wird Bold.
• Abgeschlossener Schritt: die Nummer wird durch ein Häkchen-Icon ersetzt.
• Sind mehr Schritte vorhanden als Platz haben, so werden die mittleren Schritte mit «...» ausgeblendet.
  • Bei Klick auf «...» werden die ausgeblendeten Schritte in einem Flyout als Linkliste angezeigt
• Bei Formularen ohne Logik sind folgende Schritte immer sichtbar:
  • Erster Schritt
  • Aktiver Schritt
  • Letzter Schritt
• Bei Formularen mit Logik (Beispiel: Wenn eine Frage im zweiten Schritt mit Ja beantwortet wird, dann wird ein weiterer Schritt angezeigt), werden die Schritte so weit angezeigt, wie es möglich ist. Der Rest wird mit «...» ausgeblendet. In diesem Fall ist «...» nicht klickbar.
• Auf kleinen Screens wird nur der Titel des aktiven Schritts angezeigt
• Jeder Schritt hat Formularfelder.
• Jeder Schritt hat Buttons für die Navigation.
  • Der Button «Weiter» wird bei allen Schritten ausser dem Letzten angezeigt.
  • Der Button «Zurück» wird bei allen Schritten ausser dem Ersten angezeigt.
  • Beim letzten Schritt wird ein Senden-Button angezeigt.
• Nach jedem Klick auf «Weiter» wird das aktuelle Formular validiert. Der nächste Schritt wird erst angezeigt, wenn alles fehlerfrei ist.

Verwendung

Die Prozessschritte nutzen wir für lange Formulare, die aus mehreren komplexen Abschnitten bestehen. Diese können dann in verschiedene Schritte aufgeteilt werden. Durch die Aufteilung wird es für Nutzende einfacher, einen Überblick über das Formular zu erhalten und sie werden Schritt für Schritt durchgeführt.

Jeder Schritt hat einen kurzen Titel, der direkt unter der Nummer angezeigt wird. Der Titel soll kurz, aber verständlich sein. Im Inhaltsbereich eines Schritts wird zuoberst ein längerer Titel angezeigt. Danach folgt das Formular.

Die Anzahl der Schritte ist flexibel. Der letzte Schritt ist aber immer die Bestätigungsmeldung.