Darstellung

Meist besteht ein Filter aus Dropdown-Elementen, Eingabefeldern und Chips. Diese geben die Datenattribute wieder, nach denen Nutzende filtern können.

Filterbox

Hat ein Filter verschiedene unterschiedliche Kategorien, die auch durch unterschiedliche Komponenten dargestellt werden, empfehlen wir diese in einer Filterbox zu vereinen. 

• Die Filterbox kann unterschiedlich gelayoutet werden, je nach Anzahl und Art der Filteroptionen.
• Die Filterbox wird mit einer weissen Hintergrundfläche und einem langen Schatten dargestellt.
• Die Filterbox wird direkt über der Resultatsanzeige im Layout platziert.
• Folgt die Filterbox direkt nach dem farbigen Seitenkopf, wird die farbige Hintergrundfläche bis zur Hälfte der Filterbox verlängert.

Filter im Inhalt

Besteht ein Filter ausschliesslich aus Eingabefeldern und Dropdown-Elementen, kann dieser ähnlich einem Formular direkt im Inhalt gelayoutet werden.

Die Filterbox wird direkt über der Resultatsanzeige im Layout platziert.

Filter als Dialog

Ist die Anzahl der Filterkategorien zu gross, um ins Layout integriert zu werden, stellen wir den Filter als Dialogfenster dar. Im Layout ist dann ein Button platziert, der das Dialogfenster öffnet.

Verhalten

Filter auslösen

Filterbalken können unmittelbar auf eine Aktion folgend filtern (Live) oder nach Bestätigung über einen Button (Batch).

Den Batch-Filter setzen wir dann ein, wenn Nutzende mehrere Filterkategorien kombinieren, um eine für ihn sinnvolle Anzeige zu erhalten. Ausserdem sind Batch-Filter bei geringer Datenperformance zu bevorzugen.

Den Live-Filter setzen wir bevorzugt dann ein, wenn Nutzende mit wenigen Interaktionen zum gewünschten Resultat gelangen können. Nutzende können so schnell Ergebnisanzeigen untereinander vergleichen und weiteren Filteraktionen besser abwägen.

Zurücksetzen

Nutzende sollen in folgenden Fällen die Möglichkeit haben, alle gesetzten Filterattribute mit einem Klick zurückzusetzen:

• Bei umfangreichen Filtern für Kategorien, die oft in Kombination verwendet werden
• Bei Filtern in Dialogfenstern

Dabei werden alle Filter wieder auf den initialen Status zurückgesetzt.

Ein Beispiel ist der Newsfilter auf zh.ch.

Verwendung

Die Elemente Filter und Suche dienen dazu, grosse Datensätze oder Listen einzugrenzen oder zu durchsuchen. Sie schränken ein Suchergebnis, eine Tabelle oder eine Liste auf wenige Elemente ein. Sie können vor oder nach der Anzeige der Daten von Nutzenden eingestellt werden.

Für Filter und Suche gibt es heute keine definitive Vorgabe. Die genaue Form ist abhängig vom Einsatzort und der zu filternden oder durchsuchenden Inhalte. Die Filter- oder Suchoptionen sollen, so weit möglich, mit den bestehenden Formularelementen wie Auswahllisten (z.B. Dropdown), Datumseingaben oder Eingabefeldern abgebildet werden.

Folgende Filter und Suchen dienen als Beispiele von Umsetzungen:

Einfache Selektion

Diese Filter verwenden wir, wenn Nutzende nur jeweils ein Attribut auswählen können (Radio), um die Resultatsanzeige zu beeinflussen.

Multiselektion

Sollen Nutzende mehrere Attribute einer Kategorie gleichzeitig auswählen können, setzen wir die Multiselektion ein. Sie wird meist durch Checkboxen, Checkbox-Listen oder Tags dargestellt.

Kategorienfilter

Eine Kategorie ist ein Set aus Filterattributen. Zum Beispiel «Grösse» mit den Attributen «20 cm», «30 cm». In einem Kategorienfilter können Nutzende aus mehreren solchen Kategorien filtern.

Code