UI-Justiz

Seitentyp Wizard (Geführter Prozess für Neuanlage/Bearbeiten von Objekten)

Der Wizard vereinfacht Nutzenden das Ausführen komplexer und langwieriger Aufgaben.

Einleitung

Geführte Neuanlage-Prozesse helfen Nutzenden bei der Navigation durch, und Erfüllung von unterschiedlichen Verfahrensrelevanten Anlagen. Dabei wird ein “Schritt für Schritt” Prinzip angewendet um die Informationsdichte zu verteilen.

Verwendungsbeispiele

  • Neuanlage eines Verfahrens
  • Neuanlage eines/r Beteiligten im Verfahren
  • ggf. Neuanlage einer Abteilung / Organisationseinheit in der Gerichtsverwaltung

Inhalt

Jeder geführte Neuanlage-Prozess besteht aus 3 Bereichen:

  1. Headerbereich: Titel des Objekts und weitere Aktionen
  2. Sidebar: beinhaltet die Schnellnavigation, welche in Schritten dargestellt ist
  3. Inhaltsbereich: Anzeigebereich des Formulars

Aufbau der Seite

  1. Headerleiste
  2. Neuanlage-Header
  3. Sidebar-Header
  4. Neuanlage-Prozessschritte
  5. Inhaltsbereich (Formular)

Verhalten

Dieser Seitentyp besteht aus folgenden Elementen. Die Reihenfolge der hier genannten Elemente enspricht auch der Fokusreihenfolge, wenn mit der Tastatur navigiert wird. Beim initialen Seitenaufruf liegt der Fokus auf einem der folgenden Elemente im Formularinhaltsbereich (je nach dem, was davon vorhanden):

  1. Titel im Meldungsbanner
  2. Erstes Formularfeld

Headerleiste

Die Hauptnavigationsleiste füllt die komplette Bildschirmbreite und ist zu jedem Zeitpunkt sticky.
(siehe Headerleiste)

Wizard-Header

Der Wizard-Header enthält immer einen Titel, welcher das Objekt sowie die durchzuführende Aktion beschreibt. Je nachdem, ob es sich um eine Neuanlage oder Bearbeitung eines Objekts handelt, gelten unterschiedliche Formulierungsregeln. Bei Aktionen mit Unterobjekten eines Verfahrens wird der übergreifende Bezug noch über Titel dargestellt.

Außerdem enthält der Header einen Button, um die komplette Anlage bzw. Aktion abzubrechen und die Seite zu verlassen. (siehe Wizard: Verhalten Wizard Header)

Linke Bildschirmhälfte (Sidebar)

Der Sidebar-Header enthält im geöffneten Zustand die Überschrift “Schrittübersicht”. 
Neben der Überschrift enthält der Sidebar-Header einen Button, um die Sidebar einzuklappen (falls geöffnet). Bei geschlossener Sidebar wird nur der Button zum Öffnen der Sidebar angezeigt. Der Tooltip des Buttons lautet “Schnellnavigation vergrößern” bzw. “Schnellnavigation verkleinern”.
(siehe Auf-/Zuklappbare Schnellnavigation (Sidebar): Verhalten)

Schritt-Navigation

Die Schrittübersicht bietet eine Übersicht über die für die Neuanlage dieses Objekts bzw. Durchführung der Aktion notwendigen Schritte. Der auf der rechten Bildschirmhälfte geöffnete Schritt ist in der Liste visuell hervorgehoben.
(siehe Wizard: Verhalten Wizard Schrittübersicht)

Rechte Bildschirmhälfte

Inhaltsbereich (Formular)

Im Inhaltsbereich wird das Formular angezeigt. 
Der Formular-Header beinhaltet:

  • den Hinweis über den aktuellen Schritt, in dem sich der Nutzer befindet: “Schritt [Aktueller Schritt]/[Gesamtzahl aller Schritte]”
  • den Titel des aktuellen Schritts. Dieser beschreibt den Inhalt des geöffneten Formulars.
  • Im Formular-Footer kann durch die Buttons “Zurück” und “Weiter” zum vorherigen bzw. nächsten Schritt navigiert werden.
    (siehe Formular: Verhalten von Formular-Footer (Fußzeile))

Responsives Verhalten

Auswirkungen der Fensterbreite

Bei allen Fensterbreite überhalb von 1800 Pixeln gilt:

Elemente

Verhalten

Headerleiste

Komplette Fensterbreite

Wizard-Header

Komplette Fensterbreite

Sidebar Geöffnet

Füllt 3 Spalten des Seitenlayouts

Sidebar Geschlossen

Füllt eine Spalte des Formularlayouts

Schrittnavigation

Füllt kompletten Sidebar-Bereich

Inhaltsbereich (Formular)

bei geöffneter Sidebar: Füllt Spalten 4 bis 12 des Seitenlayouts. 

Innerhalb des Formularbereichs wird ein vom Seitenlayout 

abweichendes Grid verwendet (siehe Raster & Breakpoints: Raster innerhalb von Formularen und Modalen).

Inhaltsbereich (Formular)

bei geschlossener Sidebar: Füllt Spalten 2 bis 12 des Seitenlayouts. 

Innerhalb des Formularbereichs wird ein vom Seitenlayout 

abweichendes Grid verwendet (siehe Raster & Breakpoints: Raster innerhalb von Formularen und Modalen).

Bei allen Fensterbreiten unterhalb von 1800 Pixeln gilt abweichend:

Elemente

Verhalten

Sidebar Geöffnet

Füllt 4 Spalten des Seitenlayouts

Formular

bei geöffneter Sidebar: Füllt Spalten 5 bis 12 des Seitenlayouts. 

Innerhalb des Formularbereichs wird ein vom Seitenlayout 

abweichendes Grid verwendet (siehe Raster & Breakpoints: Raster innerhalb von Formularen und Modalen).

Bei einer Fensterbreite unterhalb von 1200 Pixeln gilt abweichend:

Elemente

Verhalten

Sidebar Geschlossen

Füllt 2 Spalten des Formularlayouts

Bei einer Fensterbreite unterhalb von 960 Pixeln:

Elemente

Verhalten

Sidebar

Wird komplett ausgeblendet

Stattdessen ist zwischen Wizard-Header und Inhaltsbereich zentriert in der Fenstermitte ein Schrittübersicht-Ausklappliste dargestellt. Dieses hat eine fixe Breite von 288 Pixeln. Es funktioniert als Klickfläche und öffnet ein Select-Element, in dem die Einzelschritte zu sehen sind.
(siehe Geführter Prozess für Neuanlage/Bearbeiten von Objekten (Wizard): Verhalten Wizard Schrittübersicht)

Ab einer Fensterbreite unterhalb von 480 Pixeln gilt abweichend:

Elemente

Verhalten

Formular

Füllt die komplette Fensterbreite

Auswirkungen der Fensterhöhe und Scrollverhalten

Wird bei Fensterhöhen über 720px gescrollt, so ist die Seite nicht als ganzes scrollbar, sondern nur der Inhaltsbereich des Formulars. Im unwahrscheinlichen Fall einer sehr langen Schrittnavigation, wäre auch diese hier separat scrollbar. Beide Elemente (Schrittnavigation und Formular) haben dann je eine einzelne Scrollbar innerhalb. Alle Elemente auf der Seite bleiben ansonsten beim Scrollen fix stehen.

Wird bei Fensterhöhen unter 720px gescrollt, so hat nur noch die komplette Seite eine Scrollbar und dafür sind die Inhaltsbereiche von Formular und Schrittnavigation nicht mehr einzeln scrollbar. Entsprechend wird nur noch eine Seitenscrollbar statt der beiden Scrollbars bei Schrittnavigation und Formular angezeigt. Nur die Headerleiste bleibt dann beim Scrollen fix stehen.

Für die Definition des Scrollverhaltens innerhalb des Formularbereichs (Stickyness von Formular-Header und -Footer), siehe Wizard: Verhalten.

Regionen

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Wizard-Header

  • Landmark “Region”
  • Beschriftung “Kopfbereich Neuanlage”

Kompletter Sidebar-Bereich

  • Landmark “Navigation”
  • Beschriftung “Schrittübersicht”
  • Beschriftung und Tooltip des Buttons zum Aus-/Einklappen ist “Schnellnavigation verkleinern” bei geöffneter Sidebar und “Schnellnavigation vergrößern” bei geschlossener Sidebar.

Formular

  • Region “Formular”

Überschrift-Ebenen

H1: Titel des Wizards
H3: Sidebar-Überschrift
H2: Formulartitel

Weitere Themen: