Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:
#407; #1313; #1339; #1407; #1560; #1561; #1562; #1563; #1788; #2058
Oberhalb von Baumstrukturen können sich außerdem Such- und Filtermöglichkeiten befinden, mit denen die Anzahl der angezeigten Inhalte reduziert werden kann.
(siehe Suchfeld und Filter)
(“Such- und Filterergebnisanzeige” in der Baumstruktur siehe unten Verhalten Such- und Filterergebnisanzeige bei Baumstrukturen)
Je nach fachlicher Anforderung können Nutzende auch zwischen verschiedenen Ansichten (z. B. Baum-, Listen- oder tabellarischer Ansicht) wechseln.
Der Text “[Anzahl] Einträge” oberhalb der Baumstruktur ist immer verpflichtend anzuzeigen (in Formuaren oder Hauptseiten, mit oder ohne Such- und Filtermöglichkeiten).
Falls genau ein Eintrag vorhanden ist, wird das Wort “Eintrag” statt “Einträge verwendet.
Der Text “[Anzahl] Einträge” entspricht visuell dem Schrifttyp “Subhead”. Die semantische Überschriftenauszeichnung variiert je nach Seitentyp (siehe entsprechender Seitenaufbau).
Die [Anzahl] der Einträge ist als H3 zu kennzeichnen (visuell und semantisch).
Wird eine Baustruktur zur Darstellung verwendet, so schließt dies einen Paginierungs-Footer aus. Es werden immer alle Elemente auf einer Seite dargestellt.
Über die Funktion können alle in der Baumstruktur enthaltenen Elemente auf einmal auf- bzw. zugeklappt werden.
Standardmäßig ist beim Öffnen einer Seite mit Baumstruktur (falls nicht abweichend in Userstories definiert) die oberste Ebene aufgeklappt und alle darunterliegenden Baumelemente sind zugeklappt (siehe Beispiel).
Solange nicht alle Einträge im Baum aufgeklappt sind, wird die Funktion “Alles aufklappen” angezeigt. Sobald alle Einträge aufgeklappt wurden (entweder manuell oder durch Ausführen der Aktion “Alles aufklappen”), wird der Button geändert in “Alles zuklappen”. Es ändern sich entsprechend Buttontext und Icon.
Enthält eine Baumstruktur auf-/zuklappbare Zwischenkategorie-Trennblöcke, so verhalten sich diese identisch: sie werden mit Ausführen der Aktion “Alle auf-/zuklappen” ebenfalls geöffnet geschlossen.
Nach Ausführen der Aktion (egal ob aufklappen oder zuklappen) verbleibt der Tastaturfokus auf dem Button.
Bei Baumstrukturen in der Listenansicht werden die einzelnen Baumelemente untereinander in Form einer Liste dargestellt. Dabei werden Ebenenverknüpfungen und beziehungen durch Verbindungslinien und Einrückungen dargestellt. Im folgenden werden Darstellung und Bedienung folgender Unterthemen beschrieben:
Jede Baumstruktur trägt eine visuell nicht sichtbare programmatische Beschriftung. Die programmatische Beschriftung sollte inhaltlich identisch sein mit der visuell auf der Seite angezeigten Überschrift der Baumstruktur. Diese kann sein:
Wenn innerhalb einer Baumstruktur Bildmarken verwendet werden, dann sollte dies nach Möglichkeit einheitlich für alle Elemente dieser Baumstruktur gelten. Gleiches gilt für die Sekundäre Information: Es kann entweder ein Text oder Status-Badge oder garkeine Sekundäre Information verwendet werden. Dies sollte dann möglichst einheitlich für alle Elemente der Baumstrtuktur gelten.
Baumelemente mit Gültigkeitszeitraum, die zum aktuellen Tagesdatum noch nicht gültig sind, werden als inaktiv dargestellt. Inaktive Elemente können ebenfalls fokussiert/geöffnet sowie aus- und eingeklappt werden. Der “Weitere-Aktionen-Button” bleibt weiterhin aktiv.
Innerhalb einer Ebene sind die Baumeinträge entweder nach primärer oder nach sekundärer Information alphabetisch aufsteigend sortiert. Falls in Userstories nicht abweichend definiert, wird nach primärer Information sortiert.
Das Weitere-Aktionen-Menü zu einem Eintrag (Aufrufbar entweder über Linksklick auf Weitere-Aktionen-Button, falls vorhanden, oder über Rechtsklick auf Baumeintrag oder über Kontextmenü-Taste oder Shift+F10) kann beliebig viele weitere Aktionen zu dem Baumeintrag enthalten. Wo sinnvoll wird zusätzlich zu den fachlich zu definierenden Aktionen (erwähnt in Userstory) auch die Aktion “In neuem Tab öffnen” als erster Eintrag hinzugefügt.
Wird die Baumstruktur in einer Schnellnavigations-Sidebar angezeigt, so wird der Weitere-Aktionen-Button nicht angezeigt. Außdem wird die Zahl der durch Öffnen des Pop-Up-Menüs (via Kontextmenü-Taste/Rechtsklick oder Shift+F10) verfügbaren Aktionen hier eingeschränkt: Fachliche Aktionen werden ausgeblendet und nur die Aktion “In neuem Tab öffnen” bleibt (wo sinnvoll) weiter verfügbar. Im Fall, dass keine Aktion im Pop-Up-Menü verfügbar ist, wird nach Öffnen ein deaktivierter Pop-Up-Menü-Eintrag mit dem Text “Keine Aktion verfügbar.” angezeigt.
Der Hoverstate unterscheidet sich, ob auf dem gesamten Element oder einem der einzelnen Buttons gehovert wird. Bei Hover auf den Einzelbuttons innerhalb des Listenelements bezieht sich die graue Hoverfläche nur auf die Klickfäche des jeweiligen Elements.
Ein farbiger Streifen am linken Rand des Baumelements kann verwendet werden, um Elemente mit einem bestimmten Status oder Objekttyp visuell hervorzuheben.
Wichtig ist: Diese Hervorhebung am Rand darf nur als zusätzliche grafische Hervorhebung und nicht als alleiniges informationstragendes Element verwendet werden. Der Status bzw. Objekttyp muss also über die primäre oder sekundäre Information im Element ablesbar sein.
Es kann zwischen zwei verschiedenen Hervorhebungen unterschieden werden:
Vollflächig farbig
Gestreift farbig
Die Farbe/Graustufe ist beliebig aus dem Katalog der GeFa-Farben wählbar. Wenn möglich ist der Farbkontrast von 4,5:1 zu erfüllen. Dies ist allerdings nicht verplichtend, da die Hauptinformation durch das Label vermittelt wird (Beispiel: Status Auskunftssperre = gelb).
Der Status-Badge wird vor der primären Information (Name der Person) platziert und wird auch vorher ausgelesen. Der Auskunftssperre-Badge ändert jedoch nichts daran, dass sich das Element anhand seiner Primären Bezeichnung [Nachname, Vorname] in die Sortierung einfügt. Auch kann der Eintrag nur mit einer Zeichenkette angesprungen werden, welche mit dem Anfangsbuchstaben der primären Information beginnt (nicht mit “A” für Auskuntssperre; anseidenn die primäre Bezeichnung beginnt ebenfalls mit “A”).
Linien zeigen jeweils die Objektverbindungen an. Der Beginn jeder Linie ist in der Horizonalen zentriert zum Auf-/Zuklappen-Pfeil des übergeordneten Baumelements. Der Endpunkt jeder Linie ist in der Vertikalen zentriert zum Auf-/Zuklappen-Pfeil des untergeordneten Baumelements.
Wenn die Baumstruktur in der Breite insgesamt über 512 Pixel Platz einnimmt, so ist jede Ebene um 64px eingerückt.
Bei einer Gesamtbreite der Baumstruktur unter 512 Pixel wird die Einrückung auf 48 Pixel pro Ebene reduziert.
Es können auch Ebenen übersprungen werden. Es ist wichtig, dass die Einrückung visuell auch der in den Stellendetails angegebenen Ebene entspricht. Alle Organisationseinheiten befinden sich beispielsweise immer auf der untersten Ebene und sind somit in einer Spalte genau untereinander angeordnet, unabhängig davon, wie viele Abteilungen sich zwischen oberster und unterster Stelle befinden.
(Im Beispiel rechts: Wachtmeisterei ist direkt an das LG Musterstadt angehängt, befindet sich jedoch trotzdem auf unterster Ebene.)
Baumelemente, die nicht einer Stelle auf der direkt übergeordneten Ebene zugeordnet sind, werden aus der alphabetischen Sortierung ausgenommen und werden immer zuerst (vor allen anderen Elementen auf der gleichen Ebene) Platziert, so dass deren übergeordnete Stelle klar erkennbar ist (Im Beispiel unten siehe Wachtmeisterei).
Dies ist abhängig von den fachlichen Besonderheiten des jeweiligen Moduls (Bildmarken ja/nein; Stellen verschiedener Typen auf einer Ebene ja/nein, ...)
Baumstrukturen im Modul Personenverwaltung werden beispielsweise so ausgerichtet, dass alle Personen-Icons untereinander dargestellt sind, unabhängig davon, ob ein Baumelement aus-/einklappbar ist. Es bleibt also ein Weißraum zwischen Element-Anfang und Bildmarken-Anfang.
Bei Baumstrukturen im Modul Gerichtsverwaltung wird auf allen Abteilungsebenen ein Weißraum eingehalten (Platzhalter für Element aus/einklappbar), wenn Elemente noch keine Unterstellen enthalten. Alle Elemente auf unterster Ebene behalten keinen Weißraum, da diese grundsätzlich nie aus/einklappbar sind und somit automatisch immer alignt sind.
Wird eine Baumstruktur innerhalb der Schnellnavigations-Sidebar dargestellt, so werden die “Weitere Aktionen”-Buttons am Ende jedes Elementes ausgeblendet.
Außerdem wird die Zahl der durch Öffnen des Pop-Up-Menüs (via Kontextmenü-Taste/Rechtsklick oder Shift+F10) verfügbaren Aktionen hier eingeschränkt: Fachliche Aktionen werden ausgeblendet und nur die Aktion “In neuem Tab öffnen” bleibt (wo sinnvoll) weiter verfügbar. Im Fall, dass keine Aktion im Pop-Up-Menü verfügbar ist, wird nach Öffnen ein deaktivierter Pop-Up-Menü-Eintrag mit dem Text “Keine Aktion verfügbar.” angezeigt.
Durch die Ausblendung des Buttons wird die minimale Breite, die Baumelemente auf unterster Ebene einnehmen dürfen, bevor die Baumstruktur nicht weiter skalliert wird und vertikales Scrollen aktiv wird, reduziert (Details siehe Responsives Verhalten von Baumelementen).
Ansonsten ist das responsive Verhalten, die Definitionen zu Ebenen-Einrückungen, sowie Tastatus- und Mausbedienung gleichbleibend.
Das Baumelement, welches im Formular auf der rechten Seite gerade geöffnet ist, wird im Zustand “Aktiv” angezeigt.
Falls bei Neuanlage eines Objekts ein Seitentyp mit Schnellnavigations-Sidebar verwendet wird, so wird das Neue Objekt auch in der Baumstruktur in der Sidebar dargestellt. Position in der Sidebar:
Falls die Objektposition noch nicht definiert ist, wird das neue Objekt an oberster Stelle der Liste (Ebene 1) ohne Verknüpfung zu anderen Objekten dargestellt.
Falls beim Öffnen des Neuanlageformulars die Objektposition bereits näher bestimmt ist (Beispielsweise, wenn in der Gerichtsverwaltung über das Weitere-Aktionen-Menü einer Abteilung die Funktion “Untergeordnete Abteilung anlegen” ausgeführt wird), wird so wird das Objekt mit der Bezeichnung “Neue/r/s [Objekttyp]” an erster Stelle der definierten Ebene (unabhängig von der ansonsten in der Ebene definierten alphabetischen Sortierung) dargestellt.
Wird im Neuanlageformular ein Formularfeld befüllt bzw. geändert, welches die Objektposition in der Baumstruktur näher bestimmt bzw. ändert, so wird das Objekt mit der Bezeichnung “Neue/r/s [Objekttyp]” dadurch nicht umpositioniert. Erst nach Ausführen der Aktion “Anlegen” findet die Umpositionierung statt.
Gleiches Verhalten gillt auch, wenn eine Baumstruktur zusätzliche Trennblöcke enthält (siehe unten Zusätzliche Unterkategorie-Trennblöcke):
Das Neuanlage-Baumelement wird bei noch unbekannter Position während der Anlage über dem ersten Trennblock positioniert und technisch auf Ebene 1 der Baumstruktur gesetzt.
Eine Umpositionierung während des Befüllen des Neuanlage-Formulars findet nicht statt, erst wenn die Aktion “Anlegen ausgeführt wird.
Nach fertig ausgeführter Anlage wird das Formular geschlossen und der Nutzer wird wieder auf die Urspungs-Baumansicht (ohne Schnellnavigations-Sidebar) zurückgeleitet. Das Objekt (Primäre, Sekundäre Information und ggf. Bildmarke) ist entsprechend geupdatet und mit einem orangenen Punkt markiert (Detailbeschreibung siehe oben Verhalten Baumelement Listen-Baum). Falls sich das neu angelegte Objekt nicht im sichtbaren Bereich befindet, so werden alle Baumelemente geöffnet, bis die entsprechende Ebene sichtbar ist und es wird (falls nicht bereits sichtbar) das Objekt in den sichtbaren Bereich gescrollt.
Für die Umpositionierung des Objektes in der Sidebar gilt:
Wird ein Formularfeldinhalt geändert, welcher die Objektposition in der Baumstruktur verändert, so wird die Umpositionierung in der Sidebar erst dann ausgeführt, wenn im Formular die Aktion “Speichern” ausgeführt wurde.
Nach Ausführen der Aktion “Speichern” bleibt das Formular geöffnet und der Speichern-Button wird inaktiv (siehe Formular: Verhalten von Formular-Footer (Fußzeile)).
Zur weiteren Untergliederung von Baumstruktur-Listen können Trennblöcke eingezogen werden. Diese können ausschließlich auf oberster Ebene vorkommen.
Beispiel: Verfahrensbeteiligte werden in “Klagende Partei, “Beklagte Partei” und “Weitere Beteiligte” unterteilt.
Einem Trennblock untergeordnete Baumelemente werden um 40px eingerückt (unabhängig von der Gesamtbreite der Baumstruktur).
Jeder Trennblock ist folgendermaßen betitelt: “[Trennparameter] ([Anzahl] Einträge)”. Dabei wird nur die Anzahl der Einträge des jeweiligen Blocks genannt. Der Kategorie-Titel (Trennparameter) sollte möglichst kurz sein (1 bis max. 2 Wörter). Falls ein längerer Titel nicht vermeidbar ist, bricht dieser um.
Falls genau ein Eintrag vorhanden ist, wird das Wort “Eintrag” statt “Einträge verwendet.
Alle Trennblöcke sind auf-/zuklappbar. Standardmäßig sind beim Öffnen der Seite alle Blöcke aufgeklappt.
Falls über der Baumstruktur das Element “[Anzahl] Einträge” angezeigt wird, so werden die Trennblöcke bei der Anzahl nicht mitgezählt.
Bei Baumstukturen (mit oder ohne zusätzliche Trennblöcke) wird keine Paginierung verwendet.
Wird die Funktion “Alle auf-/zuklappen” ausgeführt, so gilt dies ebenfalls für die Unterkategorie-Trennblöcke.
Über Suche (siehe Suchfeld) und Filter (siehe Filter) können die Inhalte von Baumstrukturen reduziert werden, so dass Nutzende schnell den gewünschten Eintrag finden (siehe auch allgemeine Definitionen zu Such- & Filterlogik)
Die Summe aller gesetzten Filter und Suchbegriffe definiert die Ergebnismenge in der Baumstruktur und der Text “[Anzahl] Einträge” wird nach jeder Änderung entsprechend aktualisiert.
Vom jeweiligen Modul ist zu definieren, welche Attribute durchsucht werden können (siehe Suchen & Filtern). Im Modul Beteiligtenverwaltung wird in der Regel nur die primäre Information (Name) durchsucht. Im Modul Gerichtsverwaltung können primäre- und sekundäre Information (Stellenbezeichnung, Ebenenbezeichnung, Stellen-Nr.) durchsucht werden.
Fangen Nutzende bei fokussiertem Suchfeld an, zu tippen so wird der Inhalt der Baumstruktur auf den Wert hin gefiltert. Baumelemente die den eingegebenen Wert nicht enthalten, werden ausgeblendet und die Liste wird bei wachsender Zeichenzahl entsprechend kürzer.
Objektbeziehungen zwischen den noch übrig gebliebenen Elementen werden, falls vorhanden, weiterhin dargestellt. Alle Einträge werden als aufgeklappt dargestellt. Der Auf-/Zuklappen-Button von Elternobjekten wird ausgeblendet, wenn keines der Kindelemente mit dem Suchbegriff übereinstimmen. Entsprechend wird der Zustand “Aufgeklappt/Zuklappt” nicht von Screenreadern ausgegeben.
Der gefundene Suchbegriff wird in der Ergebnisliste mit blauer Hinterlegung markiert (bei selektierten Einträgen invertiert). Zwischen jeder Wertänderungen und der entsprechenden Aktualisierung der Trefferliste besteht eine Verzögerung 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden (statt Ausführen der Aktion bei jedem Tastendruck). Details zur Suchlogik und Markierungen in der Baumstruktur, siehe Komponent “Suchfeld”.
Enthält eine Baumstruktur Unterkategorie-Trennblöcke, so bleiben diese immer stehen, auch wenn keine enthaltenen Einträge den Suchbegriff beinhalten. Es wird dann im Trennblock der Leerzustand mit dem Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” angezeigt und im Trennblock-Titel wird “0 Einträge” angezeigt. Dieser ist fokussierbar (Zustände und Tastaturbedienung siehe unten Verhalten Leerzustand). Vom Screenreader wird das Leer-Element als deaktiviertes Baumelement ausgegeben.
Das identische Verhalten gilt, wenn die Inhalte eines Filtercontainers geändert werden und die Aktion “Anwenden” ausgeführt wird.
Falls die Serverabfrage für die Aktualisierung der Trefferliste nach Eingabe eines Suchbegriffes oder Ändern/Löschen/Hinzufügen eines Filters länger dauert (über 2 Sekunden), wird ein Ladezustand (loading spinner) an Stelle der Baumstruktur angezeigt, bis Suchergebnisse vorhanden sind. Der Alternativtext des Symbols, der vom Screenreader ausgegeben wird lautet “Ergebnisse werden geladen”. Das Ladesymbol wird vom Screenreader automatisch ausgegeben, ohne dass der Systemfokus auf die Grafik gezogen wird.
Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Einträge”. Außerdem wird der darunterliegende Text “[Anzahl] Einträge” entsprechend aktualisiert.
Werden keine Treffer gefunden, so wird die komplette Baumstruktur inklusive des “Alle auf-/zuklappen”-Buttons ausgeblendet und stattdessen wird der Text “Kein Treffer für diese Such- und Filterkriterien gefunden” angezeigt.
Wenn das Laden von Listen-Baumstrukturen länger dauert, so wird anstelle der Baumstruktur ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichketen über der Baumstruktur, das Element “Anzahl Einträge” sowie der Button “Alle auf-/zuklappen” werden noch nicht angezeigt, solange die Baumstruktur noch nicht vollständig geladen ist.
Der Ladezustand ist im Code als Überschrift der Hierarchiestufe gekennzeichnet, die der Text “[Anzahl] Einträge” im jeweiligen Seitenlayout hätte, damit die Inhaltsstruktur der Seite auch beim Laden konsistent bleibt (in der Regel H2 oder H3, je nach Seitentyp).
Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Baumstruktur wird geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird. Der Alternativtext wird automatisch vom Screenreader ausgegeben, auch wenn sich der Fokus nicht auf dem Icon befindet. Allerdings wird er, um Audionoise zu vermeiden, erst dann ausgegeben, wenn 2 Sekunden nach Öffnen der Seite die Bauminhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Baumstruktur wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.
Nach vollständigem Laden der Baumstruktur-Inhalte wird der Text “Suche, Filter, Alles auf-/zuklappen-Funktion und [Anzahl] Einträge geladen” vom Screenreader ausgegeben. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.
Sobald die Daten in der Baumstruktur vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Baum-Inhalte ersetzt. Auch Such- und Filtermöglichkeiten über der Baumstruktur, das Element “Anzahl Einträge” sowie der “Alle auf-/zuklappen-Button komme in diesem Moment dazu. Falls der Tastaturfokus in diesem Moment auf dem Ladezustand lag, wird er dann auf das erste neu hinzugekommene interaktive Element gelegt (Suchfeld falls vorhanden; falls kein Suchfeld vorhanden erstes Element in Filterreihe; falls keine Filterreihe vorhanden, Auf-/Zuklappen-Funktion über der Baumstruktur). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen der Baumstruktur nicht versetzt.
Wenn eine Baumstruktur keinerlei Inhalt auf Datenbankebene hat, wird nur ein Eintrag mit dem Inhalt “Keine Einträge vorhanden” angezeigt. Der Eintrag ist fokussierbar, um den Inhalt wahrnehmen zu können.
Die Such-, Filter- und “Alle auf-/zuklappen”-Funktion werden in diesem Fall ausgeblendet, da keine Interaktion mit dem Inhalt möglich ist.
Hinweis: Die Such-, Filter- und Auf-/Zuklappen-Funktionalität werden nur dann ausgeblendet, wenn die Baumstruktur aus Datenbanksicht keine Einträge anzeigt. Wenn ein Nutzer aber durch einen Filter oder eine Suche eine leere Liste erhält, dann sollten die Optionen und die Liste weiterhin sichtbar sein und der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” wird anstelle des ersten Eintrages gezeigt. (Details siehe Suchen & Filtern)
Wenn bei Baumstrukturen mit Unterkategorie-Trennblöcken nur eine einzelne Kategorie keine Einträge enthält, so wird innerhalb ebenfalls der Leerzustand mit dem Text “Keine Einträge vorhanden.” angezeigt. Die grauen Linien oben und unten am Leer-Block werden in diesem Fall ausgeblendet. Der Block ist weiterhin fokussierbar. Vom Screenreader wird das Leer-Element innerhalb einer Unterkategorie als deaktiviertes Baumelement ausgegeben.
Bestätigungsbanner informieren Nutzende nach Rückkehr in eine Datenübersicht mit Baumstruktur über den erfolgreichen Abschluss einer Aktion mit einem Hauptobjekt.
Details zu Verhalten und Bedienung siehe Erfolgsmeldungen (Synchrone Meldungen).
Bei Baumstrukturen in der Baumansicht werden die einzelnen Baumelemente untereinander dargestellt als Baum- bzw. Wurzeldiagramm dargestellt. Dabei sind die Ebenen als “Stockwerke” der Struktur sichtbar und darauf sind die Baumelemente entsprechend platziert und durch Linien mit ihren Elternelementen verknüpft. Im folgenden werden Darstellung und Bedienung folgender Unterthemen beschrieben:
Jede Baumstruktur trägt eine visuell nicht sichtbare programmatische Beschriftung. Die programmatische Beschriftung sollte inhaltlich identisch sein mit der visuell auf der Seite angezeigten Überschrift der Baumstruktur. Diese kann sein:
Die Ebenen-Übersicht ergmöglicht es Nutzenden die Ebeneninformationen zu sehen und zu bearbeiten. Je nach fachlicher Anforderung sind pro Ebene verschiedene Aktionen möglich, welche über ein Weitere-Aktionen-Menü erreicht werden können.
Die Ebenenstruktur ist als Liste umgesetzt. Jeder Listeneintrag besteht aus folgenden Elementen:
Die Reihenfolge der angezeigten Ebenen ergibt sich aus den jeweils in den Ebenendetails angegebenen übergeordneten Ebenen jeder Ebene. Es wird nicht alphabetisch sortiert und es kann auch keine Umsortierung durch Nutzende stattfinden.
Beispiel Behördenstruktur (Modul GRVW):
Im Initialzustand sind 3 Ebenen angelegt: “Justizbehörde”, “Abteilungen” und “Organisationseinheiten”. Die erste und letzte Ebene können nicht bearbeitet oder gelöscht werden und bleiben immer an erster/letzter Stelle. Es können beliebig viele Abteilungs-Ebenenen hinzugefügt und wieder gelöscht werden. Es muss jedoch mindestens eine Abteilungsebene erhalten bleiben. Ebenenaktionen:
Noch vom Fachteam zu entscheiden: Nicht verfügbare Ebenenaktionen werden disabled dargestellt (oder komplett ausgeblendet).
Jeder Baumeintrag besteht aus folgenden Elementen:
Baumelemente mit Gültigkeitszeitraum, die zum aktuellen Tagesdatum noch nicht gültig sind, werden als inaktiv dargestellt. Inaktive Elemente können ebenfalls fokussiert/geöffnet sowie aus- und eingeklappt werden. Der “Weitere-Aktionen-Button” bleibt weiterhin aktiv.
Das Weitere-Aktionen-Menü zu einem Eintrag (Aufrufbar entweder über Linksklick auf Weitere-Aktionen-Button, falls vorhanden, oder über Rechtsklick auf Baumeintrag oder über Kontextmenü-Taste oder Shift+F10) kann beliebig viele weitere Aktionen zu dem Baumeintrag enthalten. Wo sinnvoll wird zusätzlich zu den fachlich zu definierenden Aktionen (erwähnt in Userstory) auch die Aktion “In neuem Tab öffnen” als erster Eintrag hinzugefügt.
Wird die Baumstruktur in einer Schnellnavigations-Sidebar angezeigt, so wird der Weitere-Aktionen-Button nicht angezeigt. Außdem wird die Zahl der durch Öffnen des Pop-Up-Menüs (via Kontextmenü-Taste/Rechtsklick oder Shift+F10) verfügbaren Aktionen hier eingeschränkt: Fachliche Aktionen werden ausgeblendet und nur die Aktion “In neuem Tab öffnen” bleibt (wo sinnvoll) weiter verfügbar. Im Fall, dass keine Aktion im Pop-Up-Menü verfügbar ist, wird nach Öffnen ein deaktivierter Pop-Up-Menü-Eintrag mit dem Text “Keine Aktion verfügbar.” angezeigt.
Geschwisterelemente auf einer Ebene sind entweder nach primärer oder nach sekundärer Information alphabetisch aufsteigend sortiert. Falls in Userstories nicht abweichend definiert, wird nach primärer Information sortiert (von links nach rechts).
Ausnahme: Baumeinträge, deren Eltern-Element sich nicht auf der direkt darüberliegenden Ebene, sondern auf einer höheren Ebene befinden, werden innerhalb einer Ebene immer ganz rechts angeordnet und aus der Standardsortierung ausgenommen (je höher das Eltern-Element, umso weiter rechts wird das Element platziert). Wenn zwei oder mehr Kindelemente einem Elternelement auf der gleichen höhergelegenen Ebenene zugeordnet sind, werden diese wiederum nach oben genanntem Standard sortiert.
Eltern-Kind-Beziehungen sind mit Linien dargestellt. Diese verbinden jeweils den aufgeklappten Eltern-Knoten mit jedem einzelnen Kindelement, unabhängig davon, ob die Kindelemente auf der direkt untergeordneten oder tiefer gelegenen Ebenen platziert sind. Wenn eine Zwischenebene keine Baumelemente enthält, so erstrecken sich die Verbindungslinien über diese leere Ebene hinweg. Der Abstand, der für die Platzierung eines Zwischenelements erforderlich wäre, wird trotzdem eingehalten. Somit wird erreicht, dass sich die Verbindungslinien verschiedener Baumelemente niemals überlagern oder kreuzen.
In der Standardansicht beim initialen Öffnen der Seite wird das Element auf erster Ebene aufgeklappt, alle anderen Baumelemente zugeklappt dargestellt.
Die neben der Baumstruktur dargestellte Ebenenstruktur kann optional als Shortcut zum Sprung in die Baumelement einer bestimmten Ebene genutzt werden (siehe oben Verhalten Ebenenstruktur). Ist eine der Ebenen fokussiert, so kann von dort mit dem Fokus auf das erste sichtbare Element auf der Ebene gesprungen werden. Falls die Ebene kein Baumelement enthält oder keines aktuell sichtbar (ausgeklappt) ist, wird beim Sprung in die Baumstruktur das nächste Element der darüberliegenden Ebene fokussiert. Ist keine Ebenenstruktur sichtbar (zum Beispiel in der Schnellnavigations-Sidebar), so wird beim Sprung in die Baumstruktur immer das erste bzw. ein ggf. vorher bereits fokussiertes Baumelement fokussiert.
Ein farbiger Streifen am oberen Rand des Baumelements kann verwendet werden, um Elemente mit einem bestimmten Status oder Objekttyp visuell hervorzuheben.
Wichtig ist: Diese Hervorhebung am Rand darf nur als zusätzliche grafische Hervorhebung und nicht als alleiniges informationstragendes Element verwendet werden. Der Status bzw. Objekttyp muss also über die primäre oder sekundäre Information im Element (als Text oder Badge) oder die Ebenenbeschriftung ablesbar sein. Wird ein Badge verwendet, so wird dieser an die primäre Information angehängt und mit dieser vom Screenreader ausgelesen. Anwendungsbeispiel:
Es kann zwischen zwei verschiedenen Hervorhebungen unterschieden werden:
Die Farbe/Graustufe ist beliebig aus dem Katalog der GeFa-Farben wählbar. Wenn möglich ist der Farbkontrast von 4,5:1 zu erfüllen. Dies ist allerdings nicht verplichtend, da die Hauptinformation durch die textuelle Information im Primären/Sekundären Text, einem enthaltenen Badge oder der Ebenenbeschriftung vermittelt wird.
Bei Baumelementen im Status “Neu” wird die Hervorhebung nur angezeigt, wenn sie durch die Ebeneninformation definiert ist.
(Komplette Übersicht der Baumelement-Zustände mit- und ohne Hervorhebung siehe unten Zustände)
Wird eine Baumstruktur in der Schnellnavigations-Sidebar angezeigt (nach Öffnen des Detailformulars eines Baumelements), so wird die Ebenennavigation ausgeblendet und nur die Baumelemente sowie ihre Verknüpfungen bleiben sichtbar. Die Ebenen-Gitterstruktur im Hintergrund wird weiterhin angezeigt.
Der Weitere-Aktionen-Button pro Baumelement wird bei Darstellung in der Schnellnavigations-Sidebar ausgeblendet. Die Funktion “Öffnen des Aktionsmenüs” bleibt jedoch weiterhin (via Kontextmenü-Taste/Rechtsklick oder Shift+F10) verfügbar. Ggf wird die Anzahl der verfügbaren Optionen einggeschränkt (siehe oben Verhalten Baumelemente Baum-Baum).
Über Suche (siehe Suchfeld) und Filter (siehe Filter) können die Inhalte von Baumstrukturen reduziert werden, so dass Nutzende schnell den gewünschten Eintrag finden (siehe Suchen und Filtern).
Die Summe aller gesetzten Filter und Suchbegriffe definiert die Ergebnismenge in der Baumstruktur und der Text “[Anzahl] Einträge” wird nach jeder Änderung entsprechend aktualisiert.
Vom jeweiligen Modul ist zu definieren, welche Attribute durchsucht werden können (siehe Suchen und Filtern). Beispiel: Im Modul Gerichtsverwaltung können beispielsweise primäre- und sekundäre Information eines Baumelements (Stellenbezeichnung und -Nummer) durchsucht werden.
Werden keine Treffer gefunden, so wird die komplette Baumstruktur inklusive der Ebenenstruktur und des “Alle auf-/zuklappen”-Buttons ausgeblendet und stattdessen wird der Text “Kein Treffer für diese Such- und Filterkriterien gefunden” angezeigt.
Wenn das Laden von Baum-Baumstrukturen länger dauert, so wird anstelle der Baumstruktur ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichkeiten über der Baumstruktur, das Element “Anzahl Einträge” sowie der Button “Alle auf-/zuklappen” werden noch nicht angezeigt, solange die Baumstruktur noch nicht vollständig geladen ist.
Der Ladezustand ist im Code als Überschrift der Hierarchiestufe gekennzeichnet, die der Text “[Anzahl] Einträge” im jeweiligen Seitenlayout hätte, damit die Inhaltsstruktur der Seite auch beim Laden konsistent bleibt (in der Regel H2 oder H3, je nach Seitentyp).
Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Baumstruktur wird geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird. Der Alternativtext wird automatisch vom Screenreader ausgegeben, auch wenn sich der Fokus nicht auf dem Icon befindet. Allerdings wird er, um Audionoise zu vermeiden, erst dann ausgegeben, wenn 2 Sekunden nach Öffnen der Seite die Bauminhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Baumstruktur wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.
Nach vollständigem Laden der Baumstruktur-Inhalte wird der Text “Suche, Filter, Alles auf-/zuklappen-Funktion und [Anzahl] Einträge geladen” vom Screenreader ausgegeben. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.
Sobald die Daten in der Baumstruktur vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Baum-Inhalte ersetzt. Auch Such- und Filtermöglichkeiten über der Baumstruktur, das Element “Anzahl Einträge” sowie der “Alle auf-/zuklappen-Button komme in diesem Moment dazu. Falls der Tastaturfokus in diesem Moment auf dem Ladezustand lag, wird er dann auf das erste neu hinzugekommene interaktive Element gelegt (Suchfeld falls vorhanden; falls kein Suchfeld vorhanden erstes Element in Filterreihe; falls keine Filterreihe vorhanden, Auf-/Zuklappen-Funktion über der Baumstruktur). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen der Baumstruktur nicht versetzt.
Wenn eine Baumstruktur keinerlei Inhalt auf Datenbankebene hat, wird nur ein Eintrag mit dem Inhalt “Keine Einträge vorhanden” angezeigt. Der Eintrag ist fokussierbar, um den Inhalt wahrnehmen zu können.
Die Such-, Filter- und “Alle auf-/zuklappen”-Funktion sowie der Hinweistext “Diese Ansicht ist nicht für die Nutzung mit Screenreadern optimiert.” werden in diesem Fall ausgeblendet.
Hinweis: Die Such-, Filter- und Auf-/Zuklappen-Funktionalität werden nur dann ausgeblendet, wenn die Baumstruktur aus Datenbanksicht keine Einträge anzeigt. Wenn ein Nutzer aber durch einen Filter oder eine Suche eine leere Baumstruktur erhält, dann sollten die Optionen und die Liste weiterhin sichtbar sein und der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” wird anstelle des ersten Eintrages gezeigt. (Details siehe Suchen und Filtern).
Bestätigungsbanner informieren Nutzende nach Rückkehr in eine Datenübersicht mit Baumstruktur über den erfolgreichen Abschluss einer Aktion mit einem Hauptobjekt.
Details zu Verhalten und Bedienung siehe Erfolgsmeldungen (Synchrone Meldungen).
Der “Alle auf-/zuklappen”-Button ist immer rechtsbündig oberhalb des ersten Baumelements platziert. Sobald die Baumstruktur insgesamt unter 400px breit ist, wird aus dem Button mit Text und Icon ein reiner Icon-Button.
Die einzelnen Baumelemente füllen jeweils den kompletten verfügbaren Platz von der entsprechenden Ebeneneinrückung links bis zum Ende des für die Baumstruktur verfügbaren Bereichs rechts.
Bei kleiner werdendem Platz, werden die Baumelemente entsprechend kürzer.
Bei Baumelement-Breiten über 640 Pixeln sind primäre und sekundäre Information nebeneinander angeordnet. Dabei bleibt ein Abstand von 24 Pixeln zwischen beiden Elementen. Die Verteilung des restlichen verfügbaren Platzes ist:
Bei Primärinformationen mit Bildmarke, wird diese ausgenommen und der restliche Platz wird wie folgt verteilt:
Unterschreiten die Elemente auf unterster Ebene im Baum (egal ob aufgeklappt & sichtbar oder zugeklappt & unsichtbar) die Breite von 640 Pixeln, so werden Primäre und sekundäre Information nicht mehr nebeneinander, sondern untereinander dargestellt.
Die minimale Breite eines einzelnen Baumeintrags ist:
Die minimale Breite eines einzelnen Baumeintrags bei Darstellung in der Schnellnavigations-Sidebar, wo der Weitere-Aktionen-Button ausgeblendet wird:
Erreichen die Elemente auf unterster Ebene im Baum diese Breiten (egal ob aufgeklappt & sichtbar oder zugeklappt & unsichtbar), so wird die gesamte Baumstruktur nicht weiter kleiner skalliert, sondern wird in der horizontalen scrollbar. Die Scrollbar befindet sich sticky an der unteren Kante der Baumstruktur. (Scroll-Bedienung mit Tastatur siehe Tastaturbedienung)
Die Höhe jedes einzelnen Listeneintrags passt sich an die Länge der primären und sekundären Informationen an. Beide brechen bei Bedarf um und werden mehrzeilig. Die minimale Höhe eines Eintrags sind 64 Pixel.
Bei Elementbreiten über 640 Pixel sind alle Elemente im Baumeintrag vertikal zentriert zueinander ausgerichtet. Sobald diese Breite unterschritten wird und die sekundäre Information sich unter der primären platziert, sind alle Elemente top-aligned.
Wenn die Baumstruktur breiter wird als im in der Ebenenstruktur, verfügbaren Platz darstellbar, so wird sie in der Horizontalen scrollbar. Wird der Fokus mit Hilfe der Tastaturbedienung verschoben, so wird das neu fokussierte Baumelement automatisch in den sichtbaren Bereich gescrollt.
Jedes Baumelement hat eine fixe Größe von 180 Pixeln in der Breite und 96 Pixeln in der Höhe (bei Darstellung in der Schnellnavigations-Sidebar nur 134 Pixel Breite, durch Ausblenden des Aktionsbuttons). Die primäre Information kann innerhalb dieser Größe maximal zweizeilig, die sekundäre nur einzeilig dargestellt werden. Wenn einer der beiden Inhalte länger wird, als mit diesem Platz darstellbar, dann wird am Ende jeweils mit “...” abgekürzt.
Baumelemente werden vertikal immer auf der Ebene platziert, zu der sie fachlich zugeordnet sind. Dabei muss sich ein Kindelement nicht immer auf der direkt dem Elternelement untergeordneten Ebene befinden, sondern kann auch auf einer tieferen Ebene positioniert sein.
Baumelemente mit dem selben Elternelement sind innerhalb einer Ebene nebeneinander positioniert.
Zwischen Kindelementen aber auch anderen Eltern-Kind-Gruppen bleibt ein Abstand von je 16 Pixeln bestehen. Dieser wird auch über alle Ebenen hinweg eingehalten, so dass sich Eltern-Kind Gruppen, welche nicht in einer direkten Beziehung zueinander stehen und nur über ein gemeinsames Elternobjekt miteinander verknüpft sind, nie übereinander angeordnet sein können.
Elternelemente werden zentriert zu der Gesamtheit aller sichtbaren (aufgeklappten) untergeordneten Baumelementen positioniert.
Wenn die Baumstruktur breiter wird als im verfügbaren Platz darstellbar, so wird sie in der Horizontalen scrollbar. Wird der Fokus mit Hilfe der Tastaturbedienung verschoben, so wird das neu fokussierte Baumelement automatisch in der sichtbaren Bereich gescrollt.
Bei Öffnen der Maske mit Schnellnavigations-Sidebar muss der selektierte Baumeintrag im sichtbaren Bereich liegen.
Die Tabreihenfolge ist:
Die [Anzahl] der Einträge ist als H3 zu kennzeichnen (visuell und semantisch).
Der Tooltip des Elements enthält dann den Buttontext:
Bei fokussiertem Baumelement gibt der Screenreader mit aus:
Immer:
Bei fokussiertem Baumelment, welches gerade neu angelegt wird (Neuanlageformular geöffnet) gibt der Screenreader aus:
Diese Hervorhebung wird vom Screenreader nicht ausgegeben, da das informationstragende Element die primäre oder sekundäre Information im Element ist.
Die Hierarchieebene in der Screenreaderausgabe sollte sich technisch an den logischen Ebenen orientieren, d.h., alle direkt untergeordneten Einträge eines Eintrags der Ebene 1 werden als Hierarchiebene 2 ausgelesen, auch wenn sie sich optisch und fachlich ggf. auf einer weiter unterliegenden Ebene befinden. Die fachliche Ebene ist für Screenradernutzende anhand der Sekundären Information erkennbar (Beschreibung siehe Verhalten Baumelement Listen-Baum bei Sekundäre Information)
Beim Auslesen eines Trennblocks gibt der Screenreader mit aus:
Der Tooltip des Weitere-Aktionen-Button lautet “Weitere Aktionen zu [Ebenenbezeichung]”. Der Button wird von Screenreadern nicht ausgelesen.
Vom Screenreader wird das Leer-Element innerhalb einer Unterkategorie als deaktiviertes Baumelement ausgegeben.
Bei fokussiertem Baumelement gibt der Screenreader mit aus:
Bei fokussiertem Baumelment, welches gerade neu angelegt wird (Neuanlageformular geöffnet) gibt der Screenreader aus:
Sobald einer der beiden Texte (primäre oder sekundäre Information) nicht mehr vollständig dargestellt wird, erhält das Element einen Tooltip, welcher die gesamte Beschriftung im Format “[Primärer Text] – [Sekundärer Text]” enthält.
Die Hervorhebung selbst wird vom Screenreader nicht ausgegeben, da das informationstragende Element die primäre oder sekundäre Information im Baumelement bzw. der Ebenenbeschriftung ist.
Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Einträge”. Außerdem wird der darunterliegende Text “[Anzahl] Einträge” entsprechend aktualisiert.
Für die Tastaturbedienung der “Alle auf-/zuklappen” Funktion siehe Button.
Mit Baumelement-Hervorhebungen ist keine Interaktion möglich.
Für Tastaturbedienung Such- und Filterergebnisanzeige bei Baumstrukturen siehe Suchfeld, Filter: Filterreihe, Filter: Filter-Container und Verhalten Leerzustand.
Leerzustand einer Unterkategorie siehe Verhalten Baumelement Listen-Baum. Ausnahme: Eintrag ist nicht aktivierbar per Enter oder Leertaste. Bei Zeichenketteneingabe wird der Text des Leereintrags nicht durchsucht. Bei Öffnen des Kontextmenüs wird immer ein Menü mit dem Inhalt “Keine Aktion verfügbar” angezeigt.
Für Tastaturbedienung des Bestätigungsbanners siehe Erfolgsmeldungen (Synchrone Meldungen).
Darstellung in der Schnellnavigations-Sidebar siehe Verhalten Baumelemente Baum-Baum.
Für Tastaturbedienung des Bestätigungsbanners siehe Tabelle.
Für die Mausbedienung der “Alle auf-/zuklappen” Funktion siehe Button.