UI-Justiz

Zustände (States von Basiselementen)

Zustände zeigen an, in welchem Status sich ein Element befindet und welche Interaktion damit möglich ist.

Ladezustände

Noch nicht fertig geladene Daten werden in GeFa durch Ladezustände angezeigt. Diese enthalten jeweils eine rotierende Ladeanimation mit einem aussagekräftigen Alternativtext und entsprechendem Tooltip. Der Alternativtext sollte angeben, was an der Stelle gerade geladen wird. Beispiele:

  • “Behördenname wird geladen”
  • “Verfahrenstabs werden geladen”
  • “Baumstruktur wird geladen”

Es sollte darauf geachtet werden, die Anzahl an Ladezuständen, die gleichzeitig auf einer Seite sichtbar sein können, möglichst gering zu halten (maximal 8 in Extremfall). Beispiel: Werden die Daten eines Formulars geladen, so wird ein einzige Ladeanimation für das ganze Formular angezeigt statt eine für jedes einzelne Formularfeld.

Zustände interaktiver Elemente

Abhängig von der Art des Elements sind bestimmte Zustände möglich oder ausgeschlossen. Dies wird im Detail pro Element definiert. 

Basiselemente können in der Regel folgende Darstellungsformen annehmen:

Default

Dies ist der Standardzustand. Das Element ist klickbar/aktiv, jedoch nicht selektiert / nicht im Fokus.

Hover

Bei Steuerung mit der Maus wird dieser Zustand angezeigt, wenn man mit der Maus darüber fährt (noch nicht klickt).

Mouse Down / Armed

Dieser Zustand tritt in dem Moment ein, in dem die Maus- oder Tastaturtaste gedrückt ist. Er hällt daher in der Regel nur wenige Augenblicke an.

Fokus

Dieser Zustand zeigt an, wo sich der Tastaturfokus gerade befindet. Dieser Status kann bei maximal einem Element pro Seite gleichzeitig vorkommen.

Fokus + Hover

Der Tastaturfokus liegt auf dem Element und gleichzeitig befindet sich die Maus darüber.

Disabled

Dieser Status wird für Elemente verwendet, die deaktiviert und nicht klickbar sind. Das Element wird “ausgegraut” dargestellt. Das Element darf keine für das Verständnis der Seite essentiellen Informationen enthalten, da die Lesbarkeit eingeschränkt ist.

Read-Only

Elemente werden im Read-Only Status dargestellt, wenn deren Inhalt zum Lesen angezeigt werden muss, dieser aber nicht editierbar ist. Dieser Status kommt beispielsweise vor bei Eingabe- oder Auswahlfeldern. 

Bei Read-Only feldern gibt es keine Pflichtfeldauszeichnung (*).

Innerhalb von Ausklapplisten-Elementen (siehe z. B. Auswahlfeld, Einfach) können, zusätzlich zu den vorher genannten, auch diese Zustände vorkommen:

Selected

Das Element ist ausgewählt.

Selected + Hover

Das Element ist ausgewählt und die Maus fährt darüber.

Selected + Fokus

Das Element ist ausgewählt und gleichzeitig mit der Tastatur fokussiert.

Selected + Fokus + Hover

Das Element ist ausgewählt, gleichzeitig mit der Tastatur fokussiert und die Maus fährt darüber.