UI-Justiz

Tabelle/Liste/Baum

Nutzende können anhand verschiedener Ansichten, Informationen Filtern und durchsuchen.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#2262

Einleitung

Der Hauptinhalt dieses Seitentyps kann eine Liste, Tabelle oder Baumstruktur enthalten. 

Welcher Typ im jeweiligen Modul verwendet wird und ob ggf. ein Wechsel zwischen diesen Darstellungsformen möglich sein soll, ist vom jeweiligen Teilprojekt zu definieren.

Verwendungsbeispiele

  • Registerzeichenverwaltung einer Justizbehörde
  • Nummernkreisverwaltung einer Abteilung
  • Besetzungsliste einer Abteilung/OE

Inhalt

Die Unterseite eines Moduls mit Inhaltstypen Tabelle, Liste und Baumstruktur enthält immer die folgenden drei Bereiche:

  1. Headerbereich
  2. Pfadnavigation
  3. Inhaltsbereich zur Durchsuchung von Tabellen, Listen oder Baumstrukturen

Aufbau der Seite

Aufbau außerhalb eines Verfahrens

  1. Headerleiste
  2. Pfadnavigation
  3. Seitentitel
  4. Neuanlage-Button
  5. Ansichtswechsel-Schalter (optional)
  6. Suchfeld (optional)
  7. Filter (optional)
  8. [Anzahl] Einträge
  9. Tabellen-Einstellungen (Tabelle)
  
    Alle Auf-/Zuklappen-Schalter (Baumstruktur)
  
    Sortier-Funktion(Liste)
  10. Inhaltsbereich (Tabelle/Liste/Baumstruktur)  
    Scrollbar der Seite (optional)

Aufbau innerhalb eines Verfahrens

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 dem ersten interaktiven Element unterhalb der Pfadnavigation.

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 Seitentitel darunter identisch (siehe Pfadnavigation).

Seitentitel

Der Seitentitel beinhaltet immer den Name der geöffneten Seite. Dieser ist mit der geöffneten Seite (letzter Eintrag) in der Pfadnavigation identisch. Der Schrifttyp ist H1 (siehe Schriften).

Ansichts-Wechsel-Schalter (optional)

Über diesen Auswahlschalter kann (falls fachlich im jeweiligen Modul vorgesehen) zwischen verschiedenen Ansichten wie beispielsweise einer Tabellen-, Listen- oder Baumdarstellung gewechselt werden (siehe Auswahlschalter).

Neuanlage-Button

Der Neuanlage-Button ist in den meisten Fällen ein primärer Textbutton ohne Icon, welcher folgendermaßen bezeichnet ist: “[Objekt] anlegen”. Der Objektname in der Buttonbezeichnung ist in der Regel mit dem Seitentitel identisch. 
In manchen Fällen kann der Neuanlage-Button auch ein Untermenü öffnen (beispielsweise, wenn Objekte verschiedener Typen über diesen Button angelegt werden können. In diesem Fall wird zusätzlich zum Buttonext noch ein nach unten gerichtetes Dreiecks-Icon angezeigt (siehe Button).

Suchfeld (optional)

Mit Hilfe der Suchzeile kann der darunterliegende Inhalt durchsucht werden (siehe Suchfeld).

Filter (optional)

Je nach fachlicher Anforderung kann ein vorgefertigtes Set an Filtern bereits angezeigt werden oder Nutzende können sich Filter selbst konfigurieren (siehe Filter).

[Anzahl] Einträge

Dieser Text gibt an, wie viele Einträge der darunterliegende Inhaltsbereich aktuell enthält. Wird eine Suche ausgeführt oder Filterkriterien gesetzt bzw. verändert, so ändert sich auch der Wert entsprechend.    
Der Schrifttyp ist “Subhead” (siehe Schriften). Im Code ist es trotzdem als “H2” zu kennzeichnen.

Tabellen-Einstellungen (nur wenn Tabelle im Inhaltsbereich)

Über die Tabelleneinstellungen können beispielsweise die Spalten und deren Reihenfolge konfiguriert und ggf. Mehrfachauswahl aktiviert bzw. deaktiviert werden     
(siehe Tabelle: Verhalten der Funktion “Tabellen-Einstellungen”)

Alle Auf-/Zuklappen-Schalter (nur wenn Baumstruktur im Inhaltsbereich)

Über die Funktion können alle in der Baumstruktur enthaltenen Elemente auf einmal auf- bzw. zugeklappt werden (siehe Baumstruktur: Verhalten Funktion “Alles auf- bzw. zuklappen”).

Sortier-Funktion (nur wenn Liste im Inhaltsbereich)

Über die Funktion kann sowohl das Sortierparameter als auch die Sortierrichtung der darunterliegenden Liste geändert werden (siehe Listen: Sortierung).

Inhaltsbereich (Tabelle/Liste/Baumstruktur)

Im Inhaltsbereich werden alle Elemente angezeigt, die zu den oberhalb definierten Such- und Filterkriterien passen.     
(siehe Tabelle/Liste/Baumstruktur)

Scrollbar der Seite

(optional, je nach Fenstergröße)

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 dem ersten interaktiven Element unterhalb der Pfadnavigation.

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

Responsives Verhalten

Bei allen Fensterbreiten überhalb von 400 Pixeln gilt:

Elemente

Verhalten

Headerleiste

Komplette Fensterbreite

Pfadnavigation

Füllt alle 12 Spalten des Seitenlayouts

Seitentitel

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

Suchfeld

Maximale Breite von 560 Pixeln; Minimale Breite: 212 Pixel; Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts Eingerückt um16 Pixel (margin left)

Neunalage-Button + Ansichts-Switch

16 Pixel Abstand zueinander; Rechtsbündig ausgerichtet an der letzten Spalte des Formularlayouts; Eingerückt um 16 Pixel (margin right); Top-aligned mit Suchfeld

Filter

Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Eingerückt um16 Pixel (margin left); Maximale Breite vor Umbruch: Komplette 12 Spalten

[Anzahl] Einträge

Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Eingerückt um16 Pixel (margin left)

Tabellen-Einstellungen

(bei Tabellen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts

Sortier-Funktion

(bei Listen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts

Alle Auf/Zuklappen-Funktion

(bei Baumstrukturen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts

Tabelle/Liste/Baumstruktur

Füllt alle 12 Spalten des Seitenlayouts

Zwischen Suchfeld und Neuanlage-Button + Ansichts-Switch bleibt ein Mindestabstand von 16 Pixeln. Das Suchfeld wird ggf. kleiner. Sobald das Suchfeld seine minimale Größe von 212 Pixeln nicht mehr erreichen kann, wird der Neuanlage-Button zu einem Primären Button ohne Text und enthält nur noch ein Plus-Icon. Der Tooltip-Text lautet dann “[Objekt] anlegen”. Handelt es sich bei dem Neuanlage-Button um einen Button mit Untermenü, so wird nur noch das Dreiecks-Icon angezeigt und der Tooltip-Text entspricht dem vorherigen Buttontext.

Ab einer Fensterbreite unterhalb von 400 Pixeln gilt: 

  • Ein 16px-Einrückung (margin) der Elemente Suchfeld (links) Neuanlage-Button + Ansichts-Switch (rechts), Filter (links und rechts) und [Anzahl] Einträge (links und rechts) wird entfernt und die Elemente sitzen jeweils bündig auf dem Spaltenraster.
  • Der Ansichts-Switch wechselt zur Responsiven Version, in der er als Einfachauswahlfeld funktioniert. 
  • Die Elemente [Anzahl] Einträge und Sortierfunktion werden untereinander statt nebeneinander angeordnet.
  • Bei Baumstrukturen: Der Alle auf-/zuklappen-Button wird als reiner Icon-Button ohne Text dargestellt.

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, bleiben fast alle Elemente oberhalb des Tabelleninhalts sichtbar. Der Abstand zwischen Headerleiste, Seitentitel und Suchfeld reduziert sich beim Scrollen leicht (von 32 auf je 24px). Die Anzahl der gefundenen Einträge wird beim Scrollen ausgeblendet.

Wird bei einer Fensterhöhe unterhalb von 960 Pixeln gescrollt, so bleibt nur die Hauptnavigations-leiste und der Tabellenheader immer sichtbar.

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 Pfadnavigation-nhalt nur über die 12 Seitenlayoutspalten erstreckt, wird das Fenster dann auf Höhe der Pfadnavigation auf kompletter Breite blau eingefärbt.     
Ansonsten kein Unterschied zum Scrollverhalten auf Seiten außerhalb eines Verfahrens. Der Verfahrensheader bleibt nicht sticky.

Regionen

Regionen (Landmarks/Code Auszeichnungen): Außerhalb eines Verfahrens

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Pfadnavigation

  • Landmark “Navigation”
  • Beschriftung “Objektpfad”

Kompletter Such- und Ergebnisanzeige-Bereich (Suche, Filter, Anzahl Einträge, Tabelle/Liste/Baumstruktur, Neuanlage-Button + Ansichts-Switch)

  • Landmark “Region”
  • Beschriftung “Datenübersicht”

Regionen (Landmarks/Code Auszeichnungen): Innerhalb eines Verfahrens

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Verfahrenstabs

  • Beschriftung “Verfahren”

Pfadnavigation

  • Landmark “Navigation”
  • Beschriftung “Objektpfad”

Kompletter Such- und Ergebnisanzeige-Bereich (Suche, Filter, Anzahl Einträge, Tabelle/Liste/Baumstruktur, Neuanlage-Button + Ansichts-Switch)

  • Landmark “Region”
  • Beschriftung “Datenübersicht”

Überschrift-Ebenen

Überschrift-Ebenen außerhalb eines Verfahrens

H1: Seitentitel 
H2: Anzahl Einträge in der Sidebar; visuell Schrifttyp “Subhead”

Überschrift-Ebenen innerhalb eines Verfahrens

H1: Titel des Verfahrens; visuell H3  
H2: Seitentitel (visuell Schrittyp H1)  
H3: Anzahl Einträge in der Sidebar; visuell Schrifttyp “Subhead”

Weitere Themen: