Die Verfahrensdetailseite stellt den Startpunkt eines Verfahrens dar und präsentiert alle wichtigen Informationen in einer Übersicht.
Jede Verfahrensdetailseite 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 Tastaturfokus auf dem aktiven Tab im Verfahrensheader.
Die Hauptnavigationsleiste füllt die komplette Bildschirmbreite und ist zu jedem Zeitpunkt sticky. (siehe Headerleiste)
Zwischen Headerleiste und Seitentitel wird der Verfahrensheader eingeschoben. Dieser füllt die komplette Fensterbreite. (siehe Verfahrensheader)
Der Titel des Verfahrens enthält Aktenzeichen und Kurzrubrum. (Schrifttyp H3; siehe Schriften)
Beim Öffnen der Seite wird der erste Tab standardmäßig geöffnet. (siehe Verfahrenstabs)
Die Bezeichnung des Seitentitels entspricht der Bezeichnung des aktiven Tabs im Verfahrensheader. Im Fall der Startseite des Verfahrens ist der erste Tab aktiv. Dementsprechend lautet der Titel immer “Details”. (Schrifttyp H2; siehe Schriften)
Dieser primäre Button beinhaltet die verschiedenen Verfahrensaktionen. Je nach Status des Verfahrens ist ist die Anzahl und Art der möglichen Verfahrensaktionen verschieden. (siehe Button und Pop-up-Menü)
Je nach Art des Verfahrens können hier unterschiedlich viele Inhaltskacheln angezeigt werden. Je nach Kachelinhalt, können verschiedene Kachelbreiten definiert werden. (siehe Inhaltskachel)
Dieser Titel gibt in Klammern an, wie viele Einträge sich in der darunterliegenden Tabelle befinden. Da hier im Regelfall nicht sehr viele Verfahren gelistet sein werden, sind zusätzliche Such- und Filtermöglichkeiten nicht nötig. (Schrifttyp H2; siehe Schriften)
Dieser primäre Button öffnet ein Modal/einen Unterprozess (Details noch zu definieren), in dem ein weiteres zugehöriges Verfahren gesuchen und hinzugefügt werden kann. (siehe Button)
Hier werden alle bereits verknüpften Verfahren tabellarisch aufgelistet. (siehe Tabelle)
Bei allen Fensterbreiten gilt:
Elemente | Verhalten |
|---|---|
Headerleiste | Komplette Fensterbreite |
Verfahrensheader | Komplette Fensterbreite |
Seitentitel | “Details”: Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Maximale Breite vor Umbruch: 12 Spalten |
Verfahrensaktionen-Button | Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts |
Inhaltskachel-Gruppe | Füllt alle 12 Spalten des Seitenlayouts |
Titel | “Zugehörige Verfahren”: Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Maximale Breite vor Umbruch: 12 Spalten; Minimale Größe von 340 Pixeln |
Verfahren-Hinzufügen-Button | Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts |
Tabelle | Füllt alle 12 Spalten des Seitenlayouts |
Zwischen Seitentitel und Verfahrensaktionen-Button bleibt ein Mindestabstand von 24 Pixeln bestehen. Sobald beide Elemente nicht mehr in eine Zeile passen, wird der Verfahrensaktionen-Button unter dem Seitentitel (linksbündig zur ersten Spalte des Seitenlayouts) dargestellt.
Zwischen Titel “Zugehörige Verfahren” und Verfahren-Hinzufügen-Button bleibt ein Mindestabstand von 24 Pixeln bestehen. Sobald der Titel seine minimale Größe von 340 Pixeln nicht mehr erreichen kann, wird der Verfahren-Hinzufügen-Button zu einem Primären Button ohne Text und enthält nur noch ein Plus-Icon. Der Tooltip-Text lautet dann “Verfahren hinzufügen”.
Ab einer Fensterbreite unterhalb von 760 Pixeln (sobald das Seitenlayout in ein einspaltiges Layout umbricht) gilt abweichend:
Alle Kacheln der Inhaltskachel-Gruppe müssen die Akkordion-Funktion zum Öffnen und Schließen enthalten (auch wenn sie bei größeren Fensterbreiten ggf. nicht interaktiv waren). Im Standardfall sind alle Inhaltskacheln geöffnet. (siehe Inhaltskachel)
Wenn bei Fensterhöhen über 960 Pixeln gescrollt wird, bleiben die Verfahrenstabs unter der Headerleiste sichtbar. Der Rest des Verfahrensheaders verschwindet.
Erreichen Nutzende bei Scrollen den Bereich “Zugehörige Verfahren”, so bleibt der entsprechende Titel und der Verfahren-hinzufügen-Button, sowie der Tabellenheader in diesem Bereich sticky. (Vorausgesetzt die Liste der Zugehörigen Verfahren ist so lang, dass so weit überhaupt gescrollt werden kann, bevor das Seitenende erreicht ist).
Bei Fensterhöhen unter 960 Pixeln verschwinden die Verfahrenstabs und nur noch Headerleiste und der Tabellenheader der Zugehörigen Verfahren bleibt sticky.
H1: Titel des Verfahrens; visuell H3
H2: Seitentitel “Details”
H3: Titel der Kacheln
H2: Titel “Zugehörige Verfahren”