Wizard

Der Wizard ist ein Muster, das Benutzer durch einen mehrstufigen Prozess oder eine Aufgabe führt.

Overview

Intro

Der Wizard ist ein Muster, das Benutzer durch einen mehrstufigen Prozess oder eine Aufgabe führt. Es ist besonders nützlich für komplexe oder unbekannte Aufgaben, bei denen der Benutzer möglicherweise geführt werden muss, um die Aufgabe erfolgreich abzuschließen. Ein Wizard teilt die Aufgabe in überschaubare Schritte auf und bietet klare Anweisungen und Feedback, um den Benutzer durch den Prozess zu führen.

1 Wizard

Verwendung

👍 Do	👎 Don't
...bei komplexen Aufgaben, die in kleinere, überschaubare Schritte unterteilt werden können. ...wenn der Benutzer eine Aufgabe zum ersten Mal ausführt und Anleitung benötigt. ...wenn die Aufgabe eine bestimmte Reihenfolge von Schritten erfordert.	...bei einfachen Aufgaben oder einfachen Formularen. ...wenn die Aufgabe keine bestimmte Reihenfolge von Schritten erfordert. ...wenn der Benutzer die Aufgabe häufig ausführt und eine Führung durch den Prozess als störend empfinden könnte.

Anwendungsfälle

Ein Wizard ist besonders nützlich in folgenden Situationen:

• Mehrseitige Anträge : Wenn mehrere Datensätze in einem Antrag erfasst werden müssen, kann ein Wizard den Prozess vereinfachen und übersichtlicher gestalten.
• Erweitern von Datensätzen : Wenn Datensätze um weitere Informationen ergänzt werden sollen, kann ein Wizard den Prozess strukturieren und erleichtern.
• System- oder Anwendungskonfiguration : Bei der erstmaligen Einrichtung eines neuen Systems oder einer neuen Anwendung kann ein Wizard den Benutzer durch den Prozess führen und sicherstellen, dass alle notwendigen Schritte in der richtigen Reihenfolge durchgeführt werden.
• Datenimporte : Wenn Daten importiert werden sollen und dabei mehrere Entscheidungen getroffen werden müssen (zum Beispiel die Zuordnung von Zeilen oder Spalten zu Feldern in Datensätzen), kann ein Wizard den Prozess vereinfachen und Fehler vermeiden.
• Prozesse mit Personeninteraktion : Wenn mit Personen interagiert werden soll und dabei bestimmte Informationen schrittweise abgefragt werden müssen, kann ein Wizard den Prozess strukturieren und sicherstellen, dass alle notwendigen Informationen erfasst werden.

Guidelines

Aufbau

Der Wizard besteht aus dem Stepper, dem Inhaltsbereich mit Formularen und der Funktionsleiste, um einen Vorgang schrittweise zu durchlaufen.

2 Wizard Aufbau Wizard

Stepper

Siehe Stepper für ausführliche Dokumentation.

Im Stepper zeigt die Schrittnummer, in welchem Schritt sich der Benutzer befindet und wie viele Schritte noch ausstehen. Dazu sollen Schritte in der Zukunft deaktiviert werden, wenn sie von Entscheidungen in vorherigen Schritten abhängig sind, welche noch nicht getroffen wurden. Ein Sprung in vorherige Schritte muss immer möglich sein. Über das Aktivieren eines Schritts kann zwischen den Schritten gewechselt werden. Die Prozessnavigation muss am Bildschirm fixiert werden.

Inhaltsbereich

Hier werden die spezifischen Aktionen oder Informationen dargestellt, die für den aktuellen Schritt erforderlich sind. In der Regel befinden sich hier hauptsächlich Formulare. Dabei darf nicht auf andere Formulare in anderen Bereichen verlinkt werden, damit der Benutzer nicht aus dem aktuellen Wizard geleitet wird.

Es kann je nach Größe des Inhalts gescrollt werden.

Funktionsleiste

Die Funktionsleiste bietet neben dem Stepper die Möglichkeit, zwischen den Schritten zu navigieren und bietet weitere Aktionen wie den Prozess abzuschließen. Die Funktionsleiste muss am Bildschirm fixiert werden.

"Weiter" und "Zurück" Buttons

Durch Betätigen des "Weiter" Buttons kann zum nächsten Schritt gewechselt werden. Durch Betätigen des "Zurück" Buttons kann zum vorherigen Schritt gewechselt werden. Dabei gilt es zu beachten, dass der "Zurück" Button im ersten Schritt deaktiviert wird und der "Weiter" Button im letzten Schritt deaktiviert wird. Der "Weiter" Button wechselt beim letzten Schritt vom Primärbutton zum Sekundärbutton.

"Abschließen" Button

Durch Betätigen des "Abschließen" Buttons wird der Prozess abgeschlossen und die Daten abgesendet. Der "Abschließen" Button wechselt beim letzten Schritt vom Sekundär zu Primärbutton.

"Speichern" Button (erweiterte Variante)

Der Speichern Button ist nur in der erweiterten Variante verfügbar und bietet die Möglichkeit die eingegebenen Daten zwischenzuspeichern, ohne den kompletten Wizard durchlaufen zu müssen.

"Abbrechen" Button

Mit dem "Abbrechen" Button kann die Vervollständigung des Wizards abgebrochen werden. Bei einem Klick auf den Button wird zunächst ein Dialog angezeigt, um den Benutzer darauf hinzuweisen, dass alle Eingaben (Standartvariante) oder ungespeicherte Änderungen (erweiterte Variante) verloren gehen.

Automatische Speicherung (erweiterte Variante)

Bei der erweiterten Variante wird beim Wechsel der Schritte stets eine automatische Speicherung ausgelöst, die mit der Uhrzeit der Speicherung über ein Badge vermerkt wird.

Anordnung & Gruppierung

Der Wizard ist so aufgebaut, dass der Benutzer immer weiß, in welchem Schritt er sich befindet und wie viele Schritte noch ausstehen. Er sollte stets im Hauptarbeitsbereich des Nutzers angezeigt werden.

Varianten/Typen

Standartvariante

Die Standartvariante soll verwendet werden, wenn es nicht nötig ist, dass Benutzer vor dem Ausfüllen des kompletten Wizards zwischenspeichern können sollen.

3 Wizard Standardvariante

Erweiterte Variante

Verwende die erweiterte Variante bei sehr umfangreichen Prozessen, bei denen Nutzer während des Ausfüllens des Wizards zwischenspeichern müssen, um Datenverlust zu verhindern oder später weiterarbeiten zu können.

4 Wizard Erweiterte Variante

Verhalten

Während der Wizard den Nutzer durch den Prozess führt, um ihn abzuschließen, gibt er ihm stehts Feedback, um z.B. Fehler oder abgeschlossene Schritte zu signalisieren. Dazu kann je nach Variante zwischengespeichert werden.

Abschließen

Beim Klicken von "Abschließen" wird eine Validierung durchgeführt (siehe Validierung) und der Nutzer gelangt nach erfolgreicher Validierung zurück zur Seite, von der der Wizard gestartet wurde.

Speichern (erweiterte Variante)

Beim Klick von "Speichern" kann der Nutzer seinen aktuellen Arbeitsfortschritt zwischenspeichern, aber es wird keine Validierung ausgelöst (siehe Validierung). Als Rückmeldung wird dem Nutzer ein Toast angezeigt mit dem Text "[Name des Objekts, das erzeugt werden soll] wurde gespeichert." und der Badge in der Funktionsleiste zeigt den Text "Speicherung um HH:MM Uhr".

5 Wizard Speichern

Abbrechen

Der Wizard kann über einen Klick der "Abbrechen" Taste, über das Aufrufen eines Navigationselements außerhalb des Wizards oder über die Navigation mit dem Browser auf eine andere Seite abgebrochen werden.

Nicht  zum Abbruch führt das Betätigen der Zurück-Taste in der Funktionsleiste oder im Browser. In beiden Fällen wird der vorherige Schritt angezeigt, die im aktuellen Schritt eingegebenen Daten werden aber im Frontend zwischengespeichert (noch nicht in einer Datenbank).

Um Datenverlust zu vermeiden, muss, wenn Änderungen vorliegen, jeder Abbruch bestätigt werden. Wenn keine Gefahr von Datenverlust besteht, weil der Nutzer keine Änderungen vorgenommen hat, wird beim Abbrechen kein Dialog benötigt.

Nach dem Abbrechen gelangt der Nutzer zurück zur Seite von der der Wizard gestartet wurde.

Abbrechen Standartvariante

Bei der Standartvariante wird beim Abbrechen ein Modaler Dialog in der Gefahrenvariante mit folgendem Inhalt angezeigt:

• Titel:  "Eingaben verwerfen?"
• Text:  "Sind Sie sicher, dass alle bisherigen Eingaben verworfen werden sollen?"
• Secondary Button:  "Weiter bearbeiten"
• Secondary Button (negativ-Variante, rot):  "Eingaben verwerfen"
  

6 Wizard Abbrechen Standardvariante

Abbrechen erweiterte Variante

Bei der erweiterten Variante wird beim Abbrechen ein Modaler Dialog in der Transaktionsvariante mit folgendem Inhalt angezeigt:

• Titel:  "Erstellung [Name des Objekts, das erzeugt werden soll] abbrechen?" ein Beispiel hierzu ist "Erstellung Arbeitsbescheinigung §312 SGB III abbrechen?"
• Text:  "Sie haben Änderungen an [Name des Objekts, das erzeugt werden soll] vorgenommen. " ein Beispiel hierzu ist "Sie haben Änderungen an der Arbeitsbescheinigung §312 SGB III für Max Mustermann vorgenommen."
• Vertikale Radiobuttions (Pflichtfeld):  "Wie wollen Sie mit den Änderungen umgehen?"
  
  • Option 1:  "Erstellung abbrechen und Entwurf speichern"
  • Option 2:  "Erstellung abbrechen und Entwurf verwerfen"
• Secondary Button:  "Weiter bearbeiten"
• Primary Button:  "Bestätigen"
  

7 Wizard Abbrechen erweiterte Variante

Schrittwechsel

Die Navigation innerhalb des Wizards erfolgt durch die "Weiter" und "Zurück" Tasten. Mit einem Klick auf diese Tasten können Nutzer zum nächsten oder zum vorherigen Tab wechseln. Darüber hinaus ermöglicht ein Klick auf einen bestimmten Schritt in der Prozessnavigation einen direkten Schrittwechsel.

In der erweiterten Variante des Wizards wird bei jedem Schrittwechsel eine automatische Speicherung durchgeführt. Dieser Vorgang wird dem Benutzer durch ein Badge in der Funktionsleiste angezeigt. Dieses Feature gewährleistet, dass keine Daten verloren gehen, wenn der Benutzer den Prozess vorzeitig verlässt oder bei einer Unterbrechung der Internetverbindung.

Validierung

Durch Frontend erkennbare Fehler

Wenn das Frontend Fehler innerhalb von Formularen des Wizards direkt erkennen kann, wie z.B. bei leergelassenen Pflichtfelder, werden Fehlermeldungen diesbezüglich ausschließlich über das jeweilige Eingabefeld kommuniziert. Das Eingabefeld wechselt dann in den Fehlerzustand und unter dem Feld wird ein Fehlertext angezeigt (mehr dazu unter Formulare). Die Validierung erfolgt beim Verlassen des Feldes.

8 Wizard Frontend Fehler

Validierung bei Schrittwechsel

Des Weiteren löst jeder Schrittwechsel eine Validierung des vorherigen Schritts aus. Der Status dieser Validierung wird in der Prozessnavigation 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.

9 Wizard Validierung vorheriger Schritt

Validierung beim Abschließen

Beim Klick auf "Abschließen" erfolgt die Validierung des gesamten Wizards. Sind noch Fehler in einem oder mehreren Schritten vorhanden, wird zum ersten fehlerhaften Schritt gesprungen.

Zuordbare Fehler

Wenn Fehler den einzelnen Eingabefeldern zugeordnet werden können, sollen diese auch hier direkt an den Feldern angezeigt werden (Fehlerzustand & Fehlertext). Das erste fehlerhafte Feld sollte nun den Fokus erlangen, um die Barrierefreiheit gewährleisten zu können.

10 Wizard Fehler abschließende Validierung

Komplexe Fehler und Fehler durch Dinge außerhalb des Wizards

Nur, wenn sich Fehler aus einer Kombination von mehreren Feldern ergeben oder sich Fehler nicht im Kontext des aktuellen Formulars lösen lassen, sollen Fehler mit einem Callout über der jeweiligen Seite dargestellt werden. Identifizierte fehlerhafte Felder werden, wenn möglich, im Fehlerzustand dargestellt, aber der Fehlertext wird dann ausschließlich über den Callout kommuniziert. Zudem ist es hier wichtig, dass um Barrierefreiheit gewährleisten zu können der Fokus auf die Überschrift des Callouts gesetzt wird.

11 Wizard Komplexe Fehler und Fehler durch Dinge außerhalb des Wizards

Allgemeine Validierungsfehler

Sollte "Abschließen" gedrückt werden und es gibt allgemeine Validierungsfehler, die keinem Feld und Schritt zugeordnet werden können, so werden diese in einem modalen Dialog erklärt.

12 Wizard Allgemeiner Validierungsfehler

Erweiterte Variante speichern

Beim Klick auf "Speichern" in der erweiterten Variante erfolgt keine Validierung.

Barrierefreiheit

Tastaturbedienung

In den Formularen des Wizards sollte wie auch unter Formularen beschrieben, mit der Tab-Taste von links oben nach rechts unten zeilenweise navigiert werden können. Beim Einstieg in einen Schritt ist kein Feld fokussiert, nach dem ersten Drücken von Tab ist das erste Formular-Feld fokussiert. Nach dem letzten Formular-Feld werden die Tasten der Funktionsleiste in folgender Reihenfolge fokussiert:

1. Weiter
2. Zurück
3. Abschließen
4. Speichern (erweiterte Variante)
5. Abbrechen

Wird über "Weiter" oder "Zurück" der Schritt gewechselt, so wird im neu geöffneten Schritt automatisch das erste Formularfeld fokussiert.

Nutzt man Shift-Tab in einem Wizard-Schritt, wird die Prozess-Navigation fokussiert. Innerhalb dieser Navigation kann dann mit den Pfeiltasten der Schritt gewechselt werden.