UI-Justiz

Inhaltstyp Formular

Im Formular können Nutzende, in unterschiedlichen Eingabe- und Auswahlfeldern, Informationen eingeben.

Einleitung

Formulare enthalten vordefinierte Felder und Funktionen, die Nutzende ausfüllen können.

Verwendungsbeispiele

  • Neuanlage einer Justizperson
  • Neuanlage einer Verteilung im GVP
  • Details eines Entscheiders
  • Details einer Spruchgruppe

Inhalt

Jede Verfahrensstartseite besteht aus 3 Bereichen:

  1. Headerbereich
  2. Pfadnavigation
  3. Inhaltsbereich vom Typ Formular

Aufbau der Seite

Aufbau außerhalb eines Verfahrens

  1. Headerleiste
  2. Pfadnavigation
  3. Formulartitel
  4. Inhaltsbereich (Formular)

Aufbau innerhalb eines Verfahrens

  1. Headerleiste
  2. Titel des Verfahrens
  3. Verfahrenstabs
  4. Pfadnavigation (hell)
  5. Inhaltsbereich (Formular)

Verhalten

Verhalten außerhalb eines Verfahrens

Dieser Seitentyp besteht immer 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 Formular-Inhaltsbereich (je nach dem, was davon vorhanden ist):

  1. Titel im Meldungsbanner
  2. Titel im Hinweisbanner Typ 1 (sofern dieser im oberen Teil des Formulars platziert ist) 
  3. Erstes Akkordeon
  4. Erstes Formularfeld

Headerleiste

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

Pfadnavigation

Die Pfadnavigation gibt immer an, in welchem Objekt, ausgehend von dem geöffneten Modul, sich Nutzende befinden. Dabei ist die Bezeichnung des letzten Eintrages in der Pfadnavigation mit dem Titel des geöffneten Formulars darunter identisch (siehe Pfadnavigation).

Inhaltsbereich (Formular)

Im Inhaltsbereich wird das Formular angezeigt (siehe Formular).

Verhalten innerhalb eines Verfahrens

Der genau gleiche Aufbau (siehe oben Aufbau der Seite) gilt auch für Detailformulare innerhalb eines Verfahrens. Die einzigen Unterschiede sind:

Beim initialen Seitenaufruf liegt der Fokus auf einem der folgenden Elemente im Formular-Inhaltsbereich (je nach dem, was davon vorhanden):

  1. Titel im Meldungsbanner
  2. Titel im Hinweisbanner Typ 1 (sofern dieser im oberen Teil des Formulars platziert ist) 
  3. Erstes Akkordeon
  4. Erstes Formularfeld

Zwischen Headerleiste und Pfadnavigation wird der Verfahrensheader eingeschoben. Dieser füllt die komplette Fensterbreite.

Responsives Verhalten

Bei einer Fensterbreite überhalb von 1600 Pixeln:

Elemente

Verhalten

Headerleiste

Komplette Fensterbreite

Pfadnavigation

Füllt alle 12 Spalten des Seitenlayouts

Formular

Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Maximale Breite vor Umbruch: 12 Spalten

Ab einer Fensterbreite unterhalb von 1600 Pixeln gilt abweichend:

Elemente

Verhalten

Formular

Füllt alle 12 Spalten des Seitenlayouts

Ab einer Fensterbreite unterhalb von 480 Pixeln gilt abweichend:

Elemente

Verhalten

Formular

Füllt die komplette Fensterbreite

Verhalten beim Scrollen der Seite

Verhalten beim Scrollen der Seite außerhalb eines Verfahrens

Wenn Nutzer:innen bei einer Fensterhöhe von über 1024 Pixeln scrollen, bleibt die Headerleiste, Pfadnavigation und Formularheader, sowie der Formular Footer sichtbar.   

Ab einer Fensterhöhe unter 1024 Pixeln verschwindet die Pfadnavigation beim Scrollen.   

Für die Definition des Scrollverhaltens innerhalb des Formulars (Stickyness von Formular Header und Footer), siehe Formular: Verhalten beim Scrollen.

Verhalten beim Scrollen der Seite innerhalb eines Verfahrens

Die Pfadnavigation liegt zunächst auf hellem Grund. Sobald Nutzer:innen anfangen zu scrollen und der Verfahrensheader den sichtbaren Bereich verlässt, wird die Pfadnavigation invertiert (siehe Pfadnavigation) und bleibt am oberen Rand sticky. Auch wenn sich der Pfadnavigations-Container nur über die 12 Seitenlayoutspalten erstreckt, wird das Fenster dann auf Höhe der Pfadnavigation auf kompletter Breite blau eingefärbt (nicht nur ab Beginn der ersten Spalte).    

Ansonsten kein Unterschied zum Scrollverhalten auf Seiten außerhalb eines Verfahrens. Der Verfahrensheader bleibt nicht sticky.

Regionen

Regionen außerhalb eines Verfahrens

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Pfadnavigation

  • Landmark “Navigation”
  • Beschriftung “Objektpfad”

Regionen innerhalb eines Verfahrens

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Verfahrenstabs

  • Beschriftung “Verfahren”

Pfadnavigation

  • Landmark “Navigation“ 
  • Beschriftung “Objektpfad”

Überschrift-Ebenen

Außerhalb eines Verfahrens

H1: Formulartitel; visuell H2

Innerhalb eines Verfahrens

H1: Titel des Verfahrens; visuell H3
H2: Formulartitel

Weitere Themen: