UI-Justiz

Detailseite eines Verfahrens

Die Detailverfahrensseite ist die Übersichtsseite eines Verfahrens und stellt auf einen Blick die wichtigsten Informationen dar.

Einleitung

Die Verfahrensdetailseite stellt den Startpunkt eines Verfahrens dar und präsentiert alle wichtigen Informationen in einer Übersicht.

Verwendungsbeispiele

  • Immer wenn ein Verfahren geöffnet wird.

Inhalt

Jede Verfahrensdetailseite besteht aus 3 Bereichen:

  1. Headerbereich: Titel des Verfahrens und weitere Verfahrensaktionen
  2. Inhalt: Wichtigsten Hauptinformationen eines Verfahrens 
  3. Fußbereich: mögliche weitere verknüpfte Verfahren

Aufbau der Seite

  1. Headerleiste
  2. Verfahrensheader + Verfahrenstitel
  3. Verfahrenstabs
  4. Seitentitel
  5. Verfahrensaktionen-Button
  6. Inhaltskachel-Gruppe
  7. Titel “Zugehörige Verfahren”
  8. Tabelle
  9. Verfahren-Hinzufügen-Button

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 Tastaturfokus auf dem aktiven Tab im Verfahrensheader.

Headerleiste

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

Verfahrensheader

Zwischen Headerleiste und Seitentitel wird der Verfahrensheader eingeschoben. Dieser füllt die komplette Fensterbreite. (siehe Verfahrensheader)

Titel des Verfahrens

Der Titel des Verfahrens enthält Aktenzeichen und Kurzrubrum. (Schrifttyp H3; siehe Schriften)

Verfahrenstabs

Beim Öffnen der Seite wird der erste Tab standardmäßig geöffnet. (siehe Verfahrenstabs)

Seitentitel “Details”

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)

Verfahrensaktionen-Button

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ü)

Inhaltskachel-Gruppe

Je nach Art des Verfahrens können hier unterschiedlich viele Inhaltskacheln angezeigt werden. Je nach Kachelinhalt, können verschiedene Kachelbreiten definiert werden. (siehe Inhaltskachel)

Titel “Zugehörige Verfahren ([Anzahl])

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)

Verfahren-Hinzufügen-Button

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)

Tabelle: Zugehörige Verfahren

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)

Verhalten beim Scrollen der Seite

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.

Regionen

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Verfahrenstabs

  • Beschriftung “Verfahren”

Kompletter Inhaltskachel-Bereich (bestehend aus Seitentitel, Verfahrensaktionen-Button und Kacheln)

  • Landmark “Region” 
  • Beschriftung “[Titel der geöffneten Registerkarte]”

Kompletter Zugehörige-Verfahren-Bereich (bestehend aus Titel, Verfahren-hinzufügen-Button und Tabelle)

  • Landmark “Region”
  • Beschriftung “Zugehörige Verfahren”

Überschrift-Ebenen

H1: Titel des Verfahrens; visuell H3
H2: Seitentitel “Details”
H3: Titel der Kacheln
H2: Titel “Zugehörige Verfahren”

Weitere Themen: