Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:
Listen bestehen immer aus einem Inhaltsbereich und der darüberliegenden Sortierfunktion. Wie auch bei Tabellen, können sich oberhalb von Listen außerdem Such- und Filtermöglichkeiten befinden, mit denen die Anzahl der angezeigten Inhalte reduziert werden kann (siehe Suchfeld und Filter).
Die Tabreihenfolge ist:
Jede Liste trägt eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche die Liste inhaltlich beschreibt. Die sichtbare Beschriftung kann sein:
Der Text “[Anzahl] Einträge” oberhalb der Liste ist verpflichtend zu verwenden, wenn sich Such- oder Filtermöglichkeiten über der Liste befinden. Falls die Anzahl 0 oder eine beliebige Zahl über 1 ist, wird das Wort “Einträge” verwendet. Falls die Anzahl genau 1 ist, wird statt “Einträge” das Wort “Eintrag” verwendet. Die [Anzahl] der Einträge ist als H3 zu kennzeichnen (visuell und semantisch).
Listen dürfen nur außerhalb von Formularen verwendet werden und dienen beispielsweise dem Wechsel zwischen Objektdetailformularen im Seitentyp “Unterseite eines Moduls: Formular mit Schnellnavigationssidebar”.
Soll innerhalb von Formularen eine Auflistung von Unterobjekten angezeigt werden, so sind dafür Tabellen oder ggf. Karten zu verwenden.
Wenn das Laden von Listeninhalten länger dauert, so wird anstelle der Liste ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichkeiten über der Liste, der Text “Anzahl Einträge” sowie die Buttons zur Listensortierung werden noch nicht angezeigt, solange die Liste 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 “Liste 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 Listeninhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Liste wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.
Nach vollständigem Laden der Listeninhalte wird der Text “Suche, Filter, Sortierfunktion 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 Liste vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Listeninhalte ersetzt. Auch die Such und Filtermöglichkeiten über der Liste, der Text “Anzahl Einträge” sowie die Buttons zur Listensortierung 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, Sortierfunktion der Liste). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen der Liste nicht versetzt.
Wenn eine Liste 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 Sortiermöglichkeiten werden in diesem Fall ausgeblendet, da keine Interaktion mit dem Inhalt möglich ist.
Abgrenzung: Die Such-, Filter- und Sortierfunktionen werden nur dann ausgeblendet, wenn die Liste 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 unten Verhalten von Listeninhalten beim Durchsuchen & Filtern)
Die Sortierfunktion besteht aus zwei Elementen. Das erste steuert das Sortierkriterium, das zweite die Sortierrichtung.
Es handelt sich bei der Funktion um ein Einfach-Auswahlfeld (Single select picker). Visuell kommt die reduzierte Version des Auswahlfeldes zum Einsatz. Im Element wird der Text “Sortierung: [Parameter]” angezeigt. Im Dropdown-Menü sind die möglichen sortierbaren Kriterien sowie das aktuell ausgewählte Sortierkriterium erkennbar.
Standardmäßig werden Listen immer nach der primären Information alphabetisch aufsteigend sortiert (siehe unten Verhalten des Inhaltsbereichs (Listenelemente)). Die zur Auswahl stehenden weiteren Sortierkriterien sind fachlich je nach Maske vom jeweiligen Teilprojekt zu definieren.
Der Wert, nach dem die Liste sortiert ist, muss immer im Listenelement sichtbar sein. Wird also nach einem anderen Kriterium als nach der primären Information sortiert, so wird eine sekundäre Information in jedem Listeneintrag sichtbar, die diesen Wert enthält.
Beispiel: Eine Liste von Personen wird nach “Geburtstag” sortiert: Die Primäre Information in der Liste bleibt “Name, Vorname”, die sekundäre ist das Geburtsdatum der Person.
Ist die Liste paginiert (siehe Paginierung) und der Nutzer befindet sich aktuell nicht auf Seite 1 und der Nutzer ändert das Sortierkriterium im Auswahlfeld oder ändert die Sortierrichtung (aufsteigend/absteigend), so wird dadurch automatisch wieder auf Seite 1 gewechselt. Wird in der Auswahlliste das bereits selektierte Sortierkriterium ausgewählt, so bleibt nach Schließen der Ausklappliste die aktuell geöffnete Seite geöffnet und es wird nicht auf Seite 1 zurück gewechselt.
Der zweite tertiäre Button, welcher nur ein Pfeil-Icon enthält, zeigt die Sortierungsrichtung an:
Wird er geklickt, so dreht sich die Sortierrichtung in die entgegengesetzte Richtung um und das Pfeilicon wird entsprechend um 180° gedreht. Die Beschriftung für diesen Sekundären Button gibt die Aktion an, die bei Klicken des Buttons ausgeführt wird:
Falls nicht anders definiert ist standarmäßig das Sortierkriterium “Alphabetisch aufsteigend” aktiviert.
Um eine Listenzeile besonders hervorzuheben, kann der Status, der z. B. als Badge in einem Listenelement angezeigt wird, zusätzlich in Form eines Highlight-Streifens am linken Rand des Tabellenelements hervorgehoben werden.
Wichtig ist: Diese Hervorhebung am Rand darf nur als zusätzliche grafische Hervorhebung und nicht als alleiniges informationstragendes Element verwendet werden.
Es kann zwischen sechs 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 Hauptiinformation durch das Label vermittelt wird (Beispiel: 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; esseidenn die primäre Bezeichnung beginnt ebenfalls mit “A”).
Listeneinträge können folgende Elemente beinhalten (diese Elementen werden vom Screenreader in der hier aufgeführten Reihenfolge ausgegeben) :
Es kann nur Grafik oder Badge verwendet werden. Beides gemeinsam ist nicht möglich.
Die Grafik bei fehlenden Zugriffsrechten kann auch angezeigt werden, wenn ein Badge vorkommt.
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 54 Pixel. Wenn keine Sekundäre Information vorhanden ist, sind alle Elemente pro Eintrag (Bildmarke, Status, Text, Weitere-Aktionen-Button) vertikal zentriert zueinander ausgerichtet. Sobald eine sekundäre Information vorhanden ist, sind alle Elemente (Bildmarke, Status, Text, Weitere-Aktionen-Button) top-aligned.
Primäre Information und Badge werden in der Regel nebeneinander dargestellt. Mindestbreite der Primären Information sind 160 Pixel. Falls diese bei einem längeren Badge-Text nicht mehr erreicht werden kann, so wird der Badge-Inhalt mehrzeilig.
Ab einer Listenbreiten unter 320 Pixel bzw. sobald die primäre Information die 160px Mindestbreite trotz mehrzeiligem Badge nicht mehr erreichen kann, werden primärer Eintragstext und Status-Badge nicht mehr nebeneinander, sondern untereinander dargestellt.
Wenn Nutzende einen Listeneintrag auswählen, so wird auf der rechten Bildschirmhälfte das entsprechende Formular geöffnet und der geöffnete Listeneintrag wird in der Liste links als selektiert dargestellt.
Falls im rechten Bildschirmbereich ein Formular geöffnet ist, welches ungespeicherte Änderungen enthält und Nutzende wählen in der Schnellnavigations-Sidebar einen anderen Listeneintrag aus, so erscheint eine Sicherheitsabfrage, in der abgefragt wird, ob die Änderungen verworfen werden sollen (siehe Modaldialog: Modaldialoge vom Typ Sicherheitsabfrage). Wird die Meldung bestätigt, werden die Änderungen verworfen, das Formular wird geschlossen und durch das neue soeben ausgewählte Formular ersetzt.
Wird in der Sicherheitsabfrage auf “Abbrechen” gedrückt, so bleibt das Formular mit den ungespeicherten Änderungen geöffnet.
(Details zur Interaktion zwischen Sidebar und Formular siehe Auf-/Zuklappbare Schnellnavigation (Sidebar))
Falls bei Neuanlage eines Objekts ein Seitentyp mit Schnellnavigations-Sidebar verwendet wird, so wird das Neue Objekt auch in der Liste in der Sidebar dargestellt.
Dabei wird das Neu-Listenelement an oberster Stelle der Liste positioniert. Falls die Liste Trennblöcke enthält (siehe unten Verhalten Listen-Trennblöcke (als Liste umgesetzt)), so wird das Neu-Listenelement während der Anlage noch über dem ersten Trennblock positioniert. Die Objektbezeichnung lautet “Neue/r/s [Objekttyp]”. Beispiele:
Nach fertig ausgeführter Anlage wird das Formular geschlossen und der Nutzer wird wieder auf die Übersichtstabelle (ohne Schnellnavigations-Sidebar) zurückgeleitet. Ein Bestätigungsbanner informiert über die erfolgreich durchgeführte Anlage.
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 einem Listeneintrag 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 Liste 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.
Wird die Liste in einem Formular angezeigt, so wird der Weitere-Aktionen-Button im Listenelement nur dann visuell angezeigt, wenn mehr als die Aktion “Im neuen Tab öffnen” möglich ist.
Zur weiteren Untergliederung von Listen können Trennblöcke zwischen den einzelnen Einträgen eingezogen werden. Beispiele:
Jeder Trennblock enthält:
Trennblöcke sind nur dann zu verwenden, wenn die Kategorien fix sind und kein Listeneintrag zu zwei Kategorien gleichzeitig gehören kann. Bei Sortierung der Liste bleiben die Blöcke fix bestehen und die Sortierung wirkt sich nur auf die Einträge innerhalb der Blöcke aus. Blockinhalte werden also nie (auch nicht durch Umsortierung) durchmischt. Auch die Reihenfolge der Blöcke selbst bleibt konstant.
Im, über der Liste stehenden Text “[Anzahl] Einträge”, werden nur die wirklichen Listeneinträge gezählt. Die Trennblöcke (Kategorien) sind zwar Teil der Liste, werden aber nicht als Einträge mitgezählt.
Wenn die Liste ab einer gewissen Anzahl von Einträgen paginiert wird und Kategorie-Blöcke sich dadurch über mehrere Seiten erstrecken, dann ändert sich die Betitelung dieser Trennblöcke in:
“[Trennparameter] (Einträge [Anzahl von]–[Anzahl bis] von [Gesamtanzahl])”. Das “–” sollte von Screenreadern als “bis” ausgelesen werden. Auf der folgenden Seite, auf der die Inhalte eines Trennblocks fortgesetzt werden, wird der Trennblock als erster Eintrag erneut wiederholt.
Trennblöcke, die sich ausschließlich auf einer Seite befinden, behalten die Standard-Betitelung (siehe oben Verhalten Listen-Trennblöcke (als Liste umgesetzt)).
Der Trennblock-Text (Titel der Kategorie und Anzahl Einträge) wird jeweils mit Fokuserhalt des ersten enthaltenen Listenelements mit ausgelesen. Je nach Navigationsrichtung, kann es das erste oder das letzte Element eines Trennblocks sein.
Wenn ein Trennblock keine Einträge enthält, so wird im Regelfall ein Leer-Eintrag innerhalb mit der Beschriftung “Keine Einträge vorhanden” angezeigt. Falls es fachlich gewünscht ist, dass leere Trennblöcke statt dessen komplett ausgeblendet werden, so kann dies in Userstories beschrieben werden.
Beim Scrollen der Liste bleibt der Trennblock, zu dem der oberste sichtbare Eintrag gehört, sticky am oberen Listenrand stehen, während die dazugehörigen Einträge scrollbar bleiben. Bei Erreichen des nächsten Blocks, wird dieser dann aus dem sichtbaren Bereich heraus geschoben und durch den folgenden Trennblock ersetzt.
Ausnahme: Bei einer Fensterhöhe von unter 400px bleiben die Trennblöcke nicht mehr sticky stehen.
Der Listenfooter mit Paginierung erscheint, sobald in einer Liste eine bestimme Eintragsanzahl überschritten wird.
Der Listenfooter ist im Regelfall sticky und somit (sofern vorhanden) immer am Ende des Listenbereichs sichtbar. Ab einer Listenhöhe unter 400px ist die Paginierungsfußzeile nicht mehr sticky, scrollt mit der Gesamtliste mit und ist unter dem jeweils letzten Listeneintrag positioniert.
Details siehe Paginierung.
Über Suche (siehe Suchfeld) und Filter (siehe Filter) können die Inhalte von Listen reduziert werden, so dass Nutzende schnell den gewünschten Eintrag finden (siehe Suchen & Filtern).
Die Summe aller gesetzten Filter und Suchbegriffe definiert die Ergebnismenge in der Liste und der Text “[Anzahl] Einträge” wird nach jeder Änderung entsprechend aktualisiert.
Über das über der Liste liegende Suchfeld, können die Inhalte der Liste reduziert werden. Vom jeweiligen Modul ist zu definieren, welche Attribute durchsucht werden können (siehe Suchen & Filtern).
Fangen Nutzende bei fokussiertem Suchfeld an, zu tippen, so wird der Inhalt der Liste auf diesen Wert hin gefiltert. Listeneinträge, die den eingegebenen Wert nicht enthalten, werden ausgeblendet und die Liste wird bei wachsender Zeichenzahl entsprechend kürzer. 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 von 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden (statt Ausführen der Aktion bei jedem Tastendruck).
Wird kein Ergebnis gefunden, so wird den Nutzenden der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” angezeigt.
Falls die Serverabfrage für die Suche länger dauert (über 2 Sekunden), wird ein Ladezustand (loading spinner) an Stelle des ersten Listenelements angezeigt, bis Suchergebnisse vorhanden sind.
Über die über der Liste liegenden Filter können die Inhalte der Liste reduziert werden.
Wird ein existierender Filter geändert, gelöscht oder ein neuer hinzugefügt, so wird der Inhalt der Liste auf diesen Wert hin gefiltert. Listeneinträge, die den/die eingegebenen Wert/e nicht enthalten, werden ausgeblendet und die Liste wird entsprechend kürzer.
Wird kein Ergebnis gefunden, so wird den Nutzenden der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” angezeigt.
Falls die Serverabfrage für die Aktualisierung der Trefferliste länger dauert, wird ein Ladezustand (loading spinner) an Stelle des ersten Listeneintrages angezeigt, bis Suchergebnisse vorhanden sind.
Bestätigungsbanner informieren Nutzende nach Rückkehr in eine Datenübersicht mit Liste über den erfolgreichen Abschluss einer Aktion mit einem Hauptobjekt.
Details zu Verhalten und Bedienung siehe Erfolgsmeldungen (Synchrone Meldungen).
Die Breite der Liste passt sich in der horizontalen an den im jeweiligen Seiten- oder Formullarlayout verfügbaren Platz an. (siehe Seitenaufbau)
Die Sortierfunktion (bestehend aus den zwei oben genannten Elementen) ist immer rechtsbündig zum gesamten Listenelement angeordnet. Die maximale Breite ist die Gesamtbreite der Liste. Reicht der horizontale Platz nicht aus, um das gesamte Sortierparameter anzuzeigen, so wird dieses am Ende mit “...” abgekürzt. Im Auswahl-Dropdown ist nach wie vor der gesamte Text sichtbar, da Inhalte hier mehrzeilig werden.
Falls über der Liste zusätzlich die Anzahl der enthaltenen Einträge dargestellt wird, so kann diese bei ausreichend Platz neben den Sortierfunktionen platziert sein (Rechtsbündig zur Liste). Sobald die Liste unter 400 Pixel breit ist, werden die Elemente untereinander angeordnet. Die Anzahl der Einträge wird dann über den Sortiereinstellungen, nicht mehr daneben, angezeigt.
Die Tabreihenfolge ist:
Jede Liste trägt eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche die Liste inhaltlich beschreibt. Die sichtbare Beschriftung kann sein:
Der Text “[Anzahl] Einträge” oberhalb der Liste ist immer verpflichtend anzuzeigen (in Formuaren oder Hauptseiten, mit oder ohne Such- und Filtermöglichkeiten).
Falls die Anzahl 0 oder eine beliebige Zahl über 1 ist, wird das Wort “Einträge” verwendet. Falls die Anzahl genau 1 ist, wird statt “Einträge” das Wort “Eintrag” verwendet.
Der Text “[Anzahl] Einträge” entspricht visuell dem Schrifttyp “Subhead”. Die semantische Überschriftenauszeichnung variiert je nach Seitentyp (siehe entsprechender Seitenaufbau).
Mit der Listenelement-Hervorhebung ist keine Interaktion möglich.
Mit der Listenelement-Trennblöcken ist keine Interaktion möglich.
Für die Tastaturbedienung des Listen-Footer siehe Paginierung.
Für die Tastatur des Bestätigungsbanners siehe Erfolgsmeldungen (Synchrone Meldungen).
Klick mit linker Maustaste fokussiert den Ladezustand.
Klick mit linker Maustaste fokussiert den Leer-Eintrag.
Mit der Listenelement-Hervorhebung ist keine Interaktion möglich.
Mit der Listenelement-Trennblöcken ist keine Interaktion möglich.
Für die Mausbedienung des Listen-Footer siehe Paginierung.
Für die Mausbedienung des Bestätigungsbanners siehe Erfolgsmeldungen (Synchrone Meldungen).