UI-Justiz

Modul-Einstiegsseite Erweiterte Suche (Recherche)

Die erweiterte Suche besteht aus Default-Parametern und aus beliebig vielen, von Nutzenden frei hinzufügbaren, Suchparameter-Elementen.

Einleitung

Die Startseite des Moduls “Recherche” folgt einem leicht anderen Aufbau als alle anderen Modul-Startseiten.

Verwendungsbeispiele

  • Erweiterte Suche (Recherche)

Inhalt

Jede Moduleinstiegsseite der Recherche besteht aus 3 Bereichen:

  1. Headerbereich
  2. Suchparameter-Bereich
  3. Ergebnisanzeige-Bereich

Aufbau der Seite

  1. Headerleiste
  2. Seitentitel
  3. Aktionsbuttons
  4. Suchparameter-Elemente
  5. Button “Suchparameter Hinzufügen”
  6. Button “Suche Starten”
  7. [Anzahl] Einträge (visuell nicht angezeigt)
  8. Tabs (optional)
  9. Tabellen-Einstellungen
  10. Ergebnis-Tabelle
  11. Scrollbar der Seite

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 Öffnen der Seite sind die Standard-Suchparameter anhand der Rolle des Nutzenden vorgefüllt und der Tastaturfokus liegt im ersten dieser Standard-Suchparameter-Elemente.

Headerleiste

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

Seitentitel

Der Seitentitel beinhaltet immer den Name des geöffneten Moduls. Dieser sollte mit der Bezeichnung des entsprechenden Eintrags in der Hauptnavigation übereinstimmen. In diesem Fall lautet der Seitentitel “Erweiterte Suche”. Der Schrifttyp ist H1.  
(siehe Schriften)

Aktionsbuttons

Hier sind seltener benötigte Funktionen platziert, wie beispielsweise “Suche zurücksetzen” oder “Suche speichern”. Diese sind als Liste umgesetzt.  
(siehe Button)

Sucheingabe-Bereich

Suchparameter-Gruppe(n)

Es können beliebig viele Suchparameter-Gruppen untereinander angezeigt werden. Diese sind jeweils als Formularfeldgruppe umgesetzt und der Titel beschreibt den Objekttyp, auf den sich die enthaltenen Suchparameter-Elemente beziehen. Eine Gruppe kann 0-n Suchparameter-Elemente beinhalten. Diese sind entweder vom Fachprojekt vorgegeben oder können von Nutzenden manuell über einen sekundären Plus-Button innerhalb der Gruppe hinzugefügt werden.

Gruppe-Hinzufügen-Button(s) (optional)

Der tertiäre Button mit der Bezeichnung “[Objekt] hinzufügen” fügt entweder direkt eine weitere Suchparameter-Gruppe hinzu oder öffnet, falls mehrere Objekttypen zur Auswahl stehen, ein Pop-Up-Menü, in dem der Objekttyp gewählt werden kann. Nach Hinzufügen einer neuen Gruppe ist das erste interaktive Element darin anschließend fokussiert (siehe Button).

Button “Suche Starten”

Der “Suche starten”-Button ist ein primärer Textbutton mit Lupen-Icon, der zu jedem Zeitpunkt aktiv ist. Auch nach Ausführen einer Suche bleibt der Button aktiv, damit Nutzende die Treffer jederzeit aktualisieren können. Der Tastaturfokus wird auf den ersten Tab im Ergebnisanzeige-Bereich gelegt. (siehe Button)

Ergebnisanzeige-Bereich

Dieser wird erst angezeigt, sobald die Suche über den Button “Suche starten” gestartet wurde.

[Anzahl] Einträge Gefunden

Die Zwischenüberschrift “[Anzahl] Einträge gefunden” wird visuell nicht auf der Maske angezeigt. Vom Screenreader wird dieser Text immer ausgegeben, sobald der “Suche starten”-Button betätigt wurde und die Trefferzahl berechnet wurde.

Tabs (optional)

Mit Tabs können die Suchergebnisse in einheitliche Objekttypen unterteilt (Beispiel: Verfahren, Beteiligte und Termine). Die Tabs sind dabei in ihrer voraussichtlich Häufigkeit der Nutzung sortiert (von links nach rechts). In Klammern hinter der Tab-Beschriftung wird jeweils die Anzahl der zu diesem Objekttyp gefundenen Ergebnisse angezeigt. Solange Suchergebnisse geladen werden, wird ein Ladesymbol in Klammern hinter der Tabbeschriftung angezeigt “.  
(siehe Tab)

Tabellen-Einstellungen

Ü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”)

Ergebnis-Tabelle

Im Inhaltsbereich werden alle Suchergebnisse angezeigt, die zu den oberhalb definierten Suchparametern passen.  
(siehe Tabelle)

Scrollbar der Seite

(optional, je nach Fenstergröße)

Responsives Verhalten

Bei alle Fensterbreiten über 800px gilt:

Elemente

Verhalten

Headerleiste

Komplette Fensterbreite

Seitentitel

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

Aktionsbuttons

Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts. Maximale Breite, bevor die Buttons mit Text zu reinen Icon-Buttons wechseln: 6 Spalten

Suchparameter-Elemente

Angeordnet in zwei Listen, linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts. Maximale Breite: 12 Spalten. Reicht der verfügbare Platz in der horizontalen nicht aus, so brechen die einzelnen Suchparameter-Elemente innerhalb der Listen um und die Listen werden mehrzeilig. Sobald die längste Suchparameter-Element nicht mehr im verfügbaren vertikalen Platz darstellbar ist, wechseln alle Suchparameter-Elemente zur responsiven Version und nehmen die gesamte Inhaltsbreite (alle Seitenlayout-Spalten) ein.

Button “Suchparameter Hinzufügen”

Immer als letztes Element der Liste manuell hinzufügbarer Suchparameter-Elemente angeordnet. Sobald diese zur responsiven Version wechseln, immer unterhalb, linksbündig zur ersten Seitenlayout-Spalte angeordnet.

Button “Suche Starten”

Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts

Tabs

füllen alle 12 Spalten des Seitenlayouts

Tabellen-Einstellungen

Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts

Ergebnis-Tabelle

füllt alle 12 Spalten des Seitenlayouts

Bei allen Fensterbreiten unter 800 Pixeln gilt abweichend:

TABELLE

Verhalten beim Scrollen der Seite

Wenn Nutzende bei einer Fensterhöhe von über 1024 Pixeln scrollen, bleiben fast alle Elemente oberhalb des Tabelleninhalts sichtbar. Der Abstand zwischen Headerleiste und Seitentitel+Aktionsbuttons reduziert sich beim Scrollen von 48 auf 24px. Der Abstand zwischen Seitentitel und Suchparameter-Elementen reduziert sich beim Scrollen von 40 auf 32px.    
Besonderheit: Nimmt der Suchparameter-Eingabebereich mehr als 50% der Fensterhöhe ein, so bleibt dieser beim Scrollen nicht sticky (so wird verhindert, dass bei schmaler Fensterbreite zu wenig Platz für den Ergebnisanzeige-Bereich bleibt). Dann gilt das gleiche Scrollverhalten wie bei 1023-960px.

Bei Fensterhöhen zwischen 1023 Pixeln und 960 Pixeln wird beim Scrollen der komplette Sucheingabe-Bereich ausgeblendet und nur noch die Headerleiste sowie der Ergebnisanzeige-Bereich bleibt sichtbar.

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

Regionen

Headerleiste

  • Landmark “Header”

Kompletter Seiteninhalt unterhalb der Headerleiste

  • Landmark “Main”

Suchparameter-Eingabebereich: (Seitentitel, Aktionsbuttons, Suchparameter-Elemente, Button “Suchparameter Hinzufügen”, Button “suche Starten”)

  • Landmark “Region“
  • Beschriftung “Suchparameter-Bereich”

Suchergebnis-Anzeigebereich: (Tabs, Tabellen-Einstellungen, Inhaltsbereich: Tabelle)

  • Landmark “Region”
  • Beschriftung “Suchergebnisse”

Überschrift-Ebenen

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