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.
Jeder geführte Neuanlage-Prozess besteht aus 3 Bereichen:
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):
Die Hauptnavigationsleiste füllt die komplette Bildschirmbreite und ist zu jedem Zeitpunkt sticky.
(siehe Headerleiste)
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)
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)
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)
Im Inhaltsbereich wird das Formular angezeigt.
Der Formular-Header beinhaltet:
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 |
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.
H1: Titel des Wizards
H3: Sidebar-Überschrift
H2: Formulartitel