Filter für Datenstrukturen

Verwendung

Beispielhafter Screenshot einer geöffneten Filter- und Such-Komponente

Datenmengen in Tabellen oder Data Grids erhalten optional eine Such- und Filter-Komponente, mit der Nutzende Inhalte und deren Darstellung nach ihren Wünschen anpassen können.

Filter können in nahezu allen Arten von strukturierten Inhalten verwendet werden, so zum Beispiel um in einer Übersicht aller Dienstleistungen nach Lebenslagen zu filtern und damit die angezeigten Treffer auf das Benötigte zu reduzieren.

Der Suchen- & Filtern-Bereich ist vom Inhalt abgegrenzt und legt sich als Modal Drawer über die zu filternde Seite. Suchbegriff, Filterfacetten und gespeicherte Vorlagen häufiger Suchen werden so in einem einheitlichen Panel zusammengeführt.

Aufbau

Das Filter-Panel besteht aus einem Modal Drawer als Container, der von links in den Viewport hineingleitet. Er setzt sich aus drei klar getrennten Bereichen zusammen: Kopf, Filterbereich und Fußzeile.

Modal Drawer: Übergeordneter Container, schiebt sich von links ein.
Kopfbereich: Feste Überschrift und Schließen-Button.
Filterbereich: Scrollbarer Bereich mit den Filterfacetten.
Fußzeile: Aktionsbuttons zum Anwenden, Löschen und Speichern.

Modal Drawer

Der Drawer füllt die Viewport-Höhe abzüglich des definierten Innenabstands (padding) so weit wie möglich aus.
Die maximale Höhe ist nicht begrenzt: Übersteigt der Inhalt die Höhe des Viewports, wächst der Drawer nach unten aus dem sichtbaren Bereich heraus und wird durch Scrollen des Panels erreichbar.
Beim Scrollen innerhalb des Drawers bleibt ausschließlich der Kopfbereich sticky, unter anderem damit der Schließen-Button unmittelbar erreichbar bleibt; Filterbereich und Fußzeile scrollen mit dem Inhalt.
Der Seitenhintergrund wird durch ein Overlay abgedunkelt. Ein Klick in diesen Bereich schließt den Drawer, ohne die im Filterbereich getroffene Auswahl anzuwenden.

Kopfbereich

Der Kopfbereich ist in allen Anwendungsfällen identisch und enthält keine variablen Elemente.

Die Überschrift lautet immer „Suchen & Filtern“, unabhängig vom fachlichen Kontext.
Ein Schließen-Button (X) befindet sich am rechten oberen Rand und schließt den Modal Drawer, ohne die getroffene Auswahl anzuwenden.
Alternativ kann der Drawer über die Taste ESC oder per Klick auf den abgedunkelten Hintergrund geschlossen werden, auch hier ohne Anwendung der Auswahl.
Der Kopfbereich ist sticky positioniert und bleibt beim Scrollen im sichtbaren Bereich.

Filterbereich

Der Filterbereich nimmt die eigentlichen Filterfacetten auf. Welche Facetten erscheinen und in welcher Form, hängt vom jeweiligen Anwendungsfall ab und wird in der Maskenspezifikation festgelegt. Die genannten Komponenten sind lediglich Empfehlungen, bei Bedarf können auch andere Formularelemente genutzt werden, sofern sie für die jeweilige Filterfacette sinnvoll sind. Typischerweise kommen folgende Komponenten zum Einsatz:

Input Text: Freitextsuche über Listeneinträge.
Checkbox(en): Additive Mehrfachauswahl, z. B. Status oder Dienstleistungstypen.
Radiobuttons: Exklusive Einfachauswahl, z. B. für vordefinierte Zeiträume.
Datepicker: Konkrete Datumsangaben oder Datumsbereiche.

Fußzeile

Die Fußzeile enthält alle Aktions-Buttons und ist in ihrer Struktur festgelegt:

Löschen: Sekundärer Button, erste Zeile, links; steht neben „Speichern“.
Speichern: Sekundärer Button, erste Zeile, rechts; steht neben „Löschen“.
Filter anwenden: Primärer Button, zweite Zeile, volle Breite; steht alleine.

Wie der Filter funktioniert

Der Ablauf von der Auslösung bis zur sichtbaren Filterung folgt einem festen Muster:

Trigger-Button „Suchen & Filtern“ betätigen. Der Button befindet sich über der zu filternden Objektliste. Ein Klick öffnet den Modal Drawer mit den für diesen Kontext vorgesehenen Filterfacetten.
Auswahl treffen oder Suchbegriff eingeben. Die Nutzenden wählen Optionen in den Filterfacetten aus oder tragen einen Suchbegriff in das Textfeld ein. Der Suchbegriff wirkt als Volltextfilter über die gefilterten Objekte.
„Filter anwenden“ betätigen. Der Primärbutton in der Fußzeile bestätigt die Auswahl. Erst danach wird die gefilterte Ansicht geladen – es handelt sich um ein Batch-Filtermodell, keine Echtzeitfilterung, bei der die Auswirkung von Filtern live angezeigt würde.
Modal schließt sich, aktive Filter werden angezeigt. Der Drawer schließt sich und unterhalb des Trigger-Buttons werden die aktiven Filter als Tags sichtbar.

Die Suchfunktion entspricht dabei einer Filterung der gesamten Grundmenge der hinterlegten Daten auf einen eingegebenen Freitext. Damit bilden Filterung und Suchfunktion eine Einheit, d. h. wird die Suchfunktion verwendet, werden angewendete Filter ebenso berücksichtigt.

Wenn die Möglichkeit der Mehrfachauswahl bei einer Tabelle gegeben ist, dann lassen sich Filter nicht nur beschränkt auf die Auswahl anwenden, sondern gelten immer für die gesamte Datenmenge.
Bei der Verwendung mehrerer Filterelemente werden diese immer additiv auf die Grundmenge der Daten angewendet.
Bei paginierten Tabellen beginnt die Anzeige der Ergebnismenge nach Filterung und Suche immer auf Seite 1.
Filter können prinzipienbedingt keine Pflichtfelder enthalten und haben keine Fehler-Zustände. Hilfe-, Info- oder Fehlertexte an den Filterelementen sind nicht vorgesehen; für Hinweise sollen dauerhaft sichtbare Texte verwendet werden.

Schlägt das Laden der gefilterten Ansicht fehl, dann gilt die allgemeine Fehler-Behandlung der Anwendung (z. B. Fehlermeldung im Inhaltsbereich); der Filter definiert hierfür keinen eigenen Zustand. Ein Lade-Zustand des Filterbereichs (sog. Skeleton-Screen) ist derzeit nicht vorgesehen, da die Filterfacetten mit dem Öffnen des Modal Drawers unmittelbar zur Verfügung stehen; eine Anzeige während des Ladens der gefilterten Ergebnisliste richtet sich nach dem Lade-Konzept der jeweiligen Inhaltskomponente (Tabelle, Data Grid, Kachelliste).

Aktive Filter anzeigen

Nach dem Anwenden der Filter werden die aktiven Einstellungen als Tags unter dem Trigger-Button dargestellt.

Diese Tags zeigen ausschließlich die Werte des Filters, nicht die Namen der Filterfacetten. Wählt man zum Beispiel bei der Facette „Zeitraum“ die Option „Letzte 7 Tage“, dann lautet das Tag nicht „Zeitraum: Letzte 7 Tage“, sondern „Letzte 7 Tage“. Da die Nutzenden die Einstellung selbst vorgenommen haben, reicht der Wert als Kontext aus.

Bei Gruppen von Checkboxen können dementsprechend mehrere Tags gleichzeitig erscheinen. Die (Höchst-)Menge der anzeigbaren Tags ist abhängig von der Applikationslogik, das Design System kann hier keine Vorgaben machen.

Jedes Tag besitzt einen Schließen-Iconbutton rechts neben dem Label. Damit kann dieser einzelne Filter direkt entfernt werden, ohne den Modal Drawer mit dem Filter-Panel erneut zu öffnen.

Auf kleineren Breakpoints wird auf die Darstellung einzelner Filter-Tags verzichtet, da der Platz unterhalb des Trigger-Buttons begrenzt ist. Die Anzahl der aktuell aktiven Filter wird weiterhin im Zähler direkt im Trigger-Button anzeigt und signalisiert so, dass eine Filterung aktiv ist.

Löschen

Der Sekundärbutton „Löschen“ entfernt alle aktiven Filter ohne weitere Nachfrage und schließt den Modal Drawer. Die Filter-Tags unterhalb des Trigger-Buttons werden entfernt und die ursprünglichen Daten werden wieder ungefiltert angezeigt.

Button-Zustände

„Löschen“ und „Speichern“ sind nicht immer aktiv. Ihr Zustand reagiert darauf, ob im Panel bereits eine Auswahl getroffen wurde, unabhängig davon, ob die Filter schon angewandt wurden.

Ist kein Filter ausgewählt (Panel leer oder unverändert geöffnet), sind beide Buttons deaktiviert. Ein Klick auf „Löschen“ ist damit von vornherein ausgeschlossen, statt lediglich folgenlos zu bleiben.
Sobald mindestens eine Filteroption im Panel ausgewählt ist, werden beide Buttons aktiv.
„Filter anwenden“ ist dann deaktiviert, wenn eine Anwendung keine Auswirkungen auf die dargestellte Datenmenge hätte.

Auslöser für die Aktivierung ist die Auswahl im Panel, nicht das Anwenden der Filter. Wählen Nutzende eine Checkbox aus und klicken dann auf „Löschen“, dann werden die soeben getroffenen Auswahlen verworfen, auch wenn noch kein „Filter anwenden“ stattgefunden hat.

Filtervorlagen speichern

Mit dem Sekundärbutton „Speichern“ können häufig genutzte Filterkombinationen als persönliche Filtervorlage gespeichert werden.

„Speichern“ klicken. Der Modal Drawer wechselt seinen Inhalt und bietet ein Namensfeld für die Vorlage an.
Vorlage benennen und bestätigen. Nutzende vergeben einen sprechenden Namen und speichern die Vorlage ab.
Icon-Button erscheint. Neben dem Trigger-Button erscheint ein Bookmark-Icon-Button, über den gespeicherte Vorlagen künftig schnell angewendet werden können.

Filtervorlagen werden je Benutzerkonto gespeichert, nicht je Profil; Nutzende können eigene, für ihre Arbeit passende Vorlagen anlegen.

Keine Ergebnisse nach dem Filtern

Liefert eine Filterabfrage keine Treffer, dann zeigt die jeweilige Inhaltskomponente einen Empty State an. Da der Filter mit unterschiedlichen Inhaltstypen zusammenarbeitet (Tabellen, Kacheln, Data Grids), unterscheidet sich die genaue Darstellung je nach Komponente. Gemeinsam ist allen Varianten die kursive Microcopy, die den Grund der leeren Ansicht benennt, zum Beispiel:

„Es wurden keine Einträge gefunden, die den gewählten Filterkriterien entsprechen.“

– oder sinngemäß, angepasst an den jeweiligen Objekttyp. Ergibt die additive Filterung in Kombination mit einem Suchbegriff eine leere Menge, dann lehnt sich der Hinweistext, sofern die Konzeption keinen abweichenden Wortlaut definiert, an folgende Formulierung an:

„Zu Ihrer Suche konnte kein [Element der Grundmenge] ermittelt werden, bitte überprüfen Sie den eingegebenen Suchbegriff. Eventuell werden Suchergebnisse aufgrund eines gesetzten Filters nicht angezeigt. Um alle Suchergebnisse anzuzeigen, entfernen oder ändern Sie bitte die gesetzten Filter.“

Tabellen, Data Grids: Kursive Microcopy innerhalb des Tabellenbereichs, siehe Data Grid → „Data Grid ohne Einträge“.
Kachelseiten: Kursive Microcopy, ergänzt durch eine kontextuelle Illustration, sofern der Seitenbereich ausreichend Platz bietet und eine passende Illustration im Stil des Design Systems vorliegt.
Andere Listentypen: Mindestens kursive Microcopy; eine Illustration ist optional, je nach verfügbarem Raum.

Eine komponentenübergreifende Vereinheitlichung der Empty States ist geplant und wird an dieser Stelle ergänzt, sobald sie verfügbar ist.

Konfigurationsmöglichkeiten

Das Design System gibt Orientierungspunkte vor, welche Filterfacetten existieren und wie sie benannt werden, damit es keine mehrfachen, inkonsistenten Varianten für denselben Zweck gibt (z. B. vier Anwendungen mit vier verschiedenen Zeitangabe-Facetten).

Reihenfolge der Filterfacetten

Die Reihenfolge der Facetten im Filterbereich ist weitgehend frei – mit einer wichtigen Ausnahme: Das Textfeld für den Suchbegriff kommt immer als erste Facette. Der Name des Panels „Suchen & Filtern“ spiegelt diese Reihenfolge wider und schafft Konsistenz über alle Anwendungsfälle hinweg.

Suchbegriff (Input Text) – fest, immer zuerst.
Zeitraum (Beispiel, Gruppe von Radiobuttons) – wählt man hier einen individuellen Zeitraum, wird dieser über ein zusätzliches Datepicker-Facettenpaar „von–bis“ abgebildet; das Facettenpaar und seine initialen Werte werden in der jeweiligen Maskenspezifikation festgelegt.
Status (Beispiel, Checkbox-Group) – Vorgangsstatus → (Aktion erforderlich), (Zurückgezogen), (Abgeschlossen), …
Vollmachtsstatus → (Ausstehend), (Aktiv)
… (n) weitere Facetten, z. B. Dienstleistungen (Gruppe von Checkboxen, potenziell lang)

Empfehlungen zur Reihenfolge weiterer Facetten

An bestehenden Filtern orientieren.: Wenn die Mehrheit der vorhandenen Filter-Panels mit Zeitangaben beginnt, sollte das neue Panel das ebenfalls tun. Konsistenz erleichtert den Nutzenden die Orientierung.
Lange Facetten weiter unten platzieren.: Facetten, die potenziell sehr viele Einträge enthalten (z. B. eine Gruppe von Checkboxen für Dienstleistungstypen), sollten weiter unten stehen, damit kürzere Facetten direkt sichtbar sind und andere Facetten nicht aus dem Viewport gedrängt werden.
Häufig genutzte Facetten oben platzieren.: Was die meisten Nutzenden mt hoher Wahrscheinlichkeit zuerst ausfüllen, sollte auch oben stehen, um den Scroll-Aufwand zu reduzieren.

Do’s and Dont’s

So:

In Filtern sind alle Felder immer optional.
Filter-Elemente können inaktiv dargestellt werden, wenn sie in der zu filternden Datenmenge keinen Treffer ergeben würden.

So nicht:

Tooltips sind in der Filterkomponente nicht erlaubt, stattdessen müssen sämtliche Beschriftungen sinnbildend betextet werden.