UI-Justiz

Pfadnavigation

Die Pfadnavigation ermöglicht es Nutzenden in tieferen Detailseiten immer nachvollziehen zu können, was die übergeordneten Seiten sind.

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

#1258; #1734

Aufbau

  1. Link-Liste
  2. Pfeilgrafik
  3. Nicht interaktive Anzeige

Verhalten

Es wird immer die Objektstruktur (Vererbung/Einordnung) und nicht die Navigationsstruktur (welche Masken wurden geklickt) dargestellt. Der Aufbau als Link-Liste ermöglicht es gleichzeitig diese übergeordneten Bereiche direkt anzusteuern.

Das letzte Element stellt immer die aktuelle Seite dar und ist nicht interaktiv. Es wird immer der Text “[Aktuell geöffnete Seite]” angezeigt.

Ausnahme: Auf Modul-Unterseiten, wo im Seitentitel noch der Name der vorher geöffneten Seite (übergeordnetes Objekt) in Anführungsstrichen angehängt wird, wird dieser Anhang in der Pfadnavigation weggelassen, um Dopplung von Information zu vermeiden.

Responsives Verhalten

Einzelne Links sowie die Liste der Links werden im Normalfall einzeilig dargestellt. Bei nicht ausreichendem Platz wird die Pfadnavigation von vorne her gekürzt dargestellt. Dabei werden nur Elemente angezeigt, die vollständig zu sehen sind. Die anderen Links werden zu einem Button mit der Textbeschriftung “...” zusammengefasst, der ein Popup Menü mit den weiteren Einträgen öffnet, dieser hat die Tooltipbeschreibung: “Weitere Einträge”.

Reicht der Platz nicht aus, um den Text der aktuell geöffneten Seite vollständig darzustellen, so wird der Text am Ende mit “...” abgekürzt. Der vollständige Seitentitel ist im darunterliegenden Formular- bzw Seitentitel sichtbar. Bei Maus-Hover über den abgeschnittenen Titel der aktuellen Seite in der Pfadnavigation wird ein Tooltip mit der kompletten Bezeichnung angezeigt.

Ladezustand

Während Inhalte des Breadcrumbs noch nicht vollständig geladen sind, wird an Stelle des Pfades eine Ladeanimation angezeigt.

In der responsiven Version wird an Stelle des gesamten Pfades (umfasst sowohl den zusammengefassten Eintrag “...”, als auch die danach gelisteten Pfadeinträge) die Ladeanimation mit entsprechendem Tooltip angezeigt. Erst, wenn die Inhalte des gesamten Pfades vollständig geladen wurden, wird die Ladeanimation den “...”-Button und die restlichen Pfad-Einträge ersetzt. Vorher kann das Pop-Up-Menü nicht geöffnet werden.

Im darunterliegenden Formular wird außerdem ein Loadingspinner im Inhaltsbereich angezeigt, während die Formulardaten noch nicht vollständig geladen sind (Details siehe Formulare: Verhalten von Formularinhalten im Ladezustand).

Zustände

Die Pfadnavigation innerhalb von Verfahren wird beim Scrollen auf dunkel Blau dargestellt.

Barrierefreiheit

Für die Screenreaderausgabe muss die Pfadnavigation als Navigationsregion mit der Beschriftung “Objektpfad” definiert werden.

Die Pfeilgrafik zwischen den Links muss als Layoutgrafik definiert sein.

Der Alternativtext der Ladeanimation, welcher bei Fokuserhalt oder Mouse-hover als Tooltip angezeigt wird, lautet “Pfad wird geladen”.

Bedienung

Tastaturbedienung

  • Siehe Link: Tastaturbedienung
  • Siehe Pop-up Menü: Tastaturbedienung
  • Fokussetzung nach Aufruf einer neuen Seite via Link oder Pop-Up-Menü-Eintrag siehe Standardokussetzung des entsprechenden Seitentyps.
  • Enter- oder Leertaste bei fokussierter Ladeanimation löst keine Aktion aus.

Mausbedienung

  • Siehe Link: Mausbedienung
  • Siehe Pop-up Menü: Mausbedienung
  • Fokussetzung nach Aufruf einer neuen Seite via Link oder Pop-Up-Menü-Eintrag siehe Standardokussetzung des entsprechenden Seitentyps.
  • Bei Klick mit linker Maustaste auf die Ladeanimation passiert nichts, außer dass diese fokussiert wird.

Weitere Themen: