Was ist zu beachten?
Woraus bestehen die Daten?
Bei der Entwicklung von Filtern ist es wichtig, die zugrunde liegende Datenstruktur genau zu kennen. Es muss unterschieden werden zwischen Informationen in Form von Zeichenketten, booleschen Werten oder Informationen, die an einen bestimmten Zeitraum oder ein bestimmtes Datum gebunden sind. Ebenso gibt es numerische Werte, Textinhalte sowie quantitative und qualitative Daten - jeder dieser Datentypen erfordert spezifische Selektionsoptionen.
Alle Datenpunkte spiegeln
Es ist darauf zu achten, dass die Filterdaten auf der Filtereingabeseite auch auf der Filterergebnisseite sichtbar sind. Wird z.B. ein Filter für Status angeboten, so ist davon auszugehen, dass auf der Ergebnisseite der Status als Identifikator und Ergebnisdarstellung benötigt wird. Die eindeutige Zuordnung ist also auf beiden Seiten erforderlich. Zusätzliche Informationen auf der Ergebnisseite sind für einen zweiten Schritt vorzusehen, z.B. durch 3 Punkte oder als Akkordeon.
Prioritäten der Nutzer verstehen
Nehmen Sie sich etwas Zeit, um die Reihenfolge festzulegen, in der Ihre Filter angezeigt werden sollen. Auch wenn es am besten ist, alle potenziellen Eigenschaften Ihrer Daten abzubilden, haben sie in den Augen Ihrer Nutzer nicht alle den gleichen Nutzwert. Welche Felder werden am häufigsten angeschaut und geändert? Diese stark frequentierten Eigenschaften verdienen einen schnelleren Zugriff und eine höhere Sichtbarkeit in Ihrer Filterkomponente.
Beachten Sie auch, dass der letzte Punkt sowohl für die Priorisierung Ihrer Eigenschaften als auch für die Priorisierung der darin verschachtelten Werte gilt. Dies hängt nun stark davon ab, wie viele Werte Sie anzeigen müssen. Bei weniger Werten müssen Sie bei der Entscheidung, welcher Wert an erster Stelle steht, sehr praktisch vorgehen. Bei einer größeren Anzahl von Werten ist es besser, eine einfache alphabetische Reihenfolge zu implementieren.
Bild: Statusmeldungen sind besser nach Dringlichkeit geordnet, während Ortslisten in alphabetischer Reihenfolge leichter zu durchsuchen sind.
Wissen, wann es genug ist
Prüfen Sie, wo Filter überflüssig sind. Wenn Sie Ihren Benutzern erweiterte Filter für eine Liste mit 100 Einträgen anbieten, kann dies Ihre Benutzeroberfläche unnötig kompliziert machen. Stellen Sie sicher, dass die Tiefe Ihrer Filter die Tiefe und den Umfang der Daten selbst widerspiegelt.
Systemperformance und Filteranwendung
Die Systemperformance ist von zentraler Bedeutung, da sie bestimmt, ob Filter unmittelbar nach der Eingabe einzeln angewendet werden können oder ob ein zentral platzierter „Anwenden“-Button erforderlich ist, der alle ausgewählten Filter gleichzeitig auf die Ergebnisse anwendet.
Anatomie eines Filters
- Der Bezeichner (identifier) ist die angestrebte Eigenschaft oder Kategorie
- Der Wert (value) ist der spezifische Wert
- der gesuchten Eigenschaft (Grenzwert, bestimmtes Datum)
- Die Abhängigkeit (relative) ist die beabsichtigte Beziehung
- zwischen Bezeichner und Wert (größer als, zwischen Wert x und Wert y) oder zwischen Variablen (und/oder)
Die Kombination aus Bezeichner + Relativwert + Wert erzeugt eine Variable (auch bekannt als Bedingung oder Kriterium)
Die Auswahl der Abhängigkeiten (relative) liegt oft nicht in der Hand des Benutzers und muss daher vom System, d.h. von Ihnen, mit Bedacht vorgegeben werden. Die Abhängigkeiten (relative) werden manchmal in Form von voreingestellten Optionen verpackt, die, wenn sie gut durchdacht sind, Ihren Benutzern viel Zeit ersparen können.
Beispiel: Dieser Toggl bietet beispielsweise mehrere voreingestellte Optionen für die Auswahl des Datumsbereichs. Anfang und End Datum oder This Month, Last Month ...
Andernfalls, wenn der Nutzende diese Granularität benötigen, können die Abhängigkeiten (relatives) auch in der Benutzeroberfläche zur Verfügung gestellt werden, um sie nach Belieben zu optimieren. Auf erweiterte Filter gehen wir weiter unten noch näher ein.
Platzierung
Hinsichtlich der Positionierung Ihrer Filterkomponente, also wo sie auf der Seite platziert werden soll, haben Sie grundsätzlich drei Möglichkeiten. Sie kann entweder als linke vertikale Seitenleiste, direkt inline mit dem Inhalt oder als horizontale Filterleiste platziert werden. Die Entscheidung hängt von Ihrem Kontext und Ihren Anforderungen an die Skalierbarkeit ab.
Sidebar Filter
Kontext-Ebene: 🔴 Niedrig (Global: bezieht sich auf die gesamte Seite)
Skalierbarkeit: 🟢 Hoch
Die linke Seitenleiste ist in Bezug auf den Platzbedarf besser skalierbar. Sie können eine größere Anzahl von Werten in erweiterbaren Abschnitten unterbringen, die vertikal skaliert werden können.
Diese Anordnung hat jedoch zur Folge, dass die Filter die Seite als Ganzes beeinflussen. Sie müssen sicherstellen, dass jedes Element auf der Seite tatsächlich von den Filteroptionen betroffen ist, da dies sonst zu Verwirrung führen kann.
Inline Filter
Kontext-Ebene: 🟢 Hoch (auf Komponentenebene verknüpft)
Skalierbarkeit: 🔴 Niedrig
Filter können auf Komponentenebene verwendet werden. Angenommen, Sie haben ein Dashboard, das aus verschiedenen Diagrammen, Grafiken und Tabellen mit unterschiedlichen Datenstrukturen besteht, dann können Sie nicht global filtern. Die filternde Komponente muss kontextsensitiv sein.
Sie können sich auch dafür entscheiden, einige globale Filter auf Seitenebene zu belassen und kleinere Filtermechanismen direkt auf der Seite bereitzustellen. Der Nachteil ist, dass der Platz schnell knapp werden kann. Man muss sich auf das Wesentliche beschränken.
Filter bar
Kontext-Ebene: 🟡 Hybrid (kann die gesamte Seite oder nur einen Abschnitt betreffen)
Skalierbarkeit:🟡 Mittel
Eine Filterleiste kann über bestimmten Teilen der Seite platziert werden, um zu verdeutlichen, dass nur diese Elemente die Filtereingabe widerspiegeln. Dies ist eine gute Option für Seiten, die aus Abschnitten mit unterschiedlichen Datenstrukturen bestehen, für die eine globale Filterung nicht funktionieren würde. Es sollte darauf geachtet werden, dass maximal eine Zeile mit 7 bis 9 Filterelementen verwendet wird.
Die horizontale Leiste ist etwas weniger skalierbar, da sie auf die Seitenbreite beschränkt ist. Dies bedeutet, dass der Benutzer über Dropdown-Menüs navigieren muss.
Der Richtige Zeitpunkt um Daten abzurufen?
Woher wissen Sie, wann Sie die Daten abrufen können? Das hängt von der Datenmenge, der Leistungsfähigkeit Ihres Systems und den Erwartungen der Nutzer ab.
Live-Filterung
Eine Möglichkeit besteht darin, Ergebnisse sofort abzurufen. Sobald der Nutzer eine Auswahl trifft, werden die Daten aktualisiert und die gefilterten Ergebnisse angezeigt. Dies wird für weniger wichtige Interaktionen erwartet, wie z.B. die Auswahl aus einer kleinen Liste von Filtern. Bei Filtern mit mehreren Auswahlmöglichkeiten oder komplexeren Eingaben kann eine zusätzliche Verzögerung erforderlich sein, z. B. durch einen sekundären Auslöser. Dies ist ein kritischer Punkt, da es sonst schnell zu Verwirrung und Desorientierung kommt. Das Ändern und Laden von Inhalten bezieht sich nur auf den Ergebnisbereich und sollte nicht dazu führen, dass die gesamte Website neu geladen werden muss.
Leistungsfähigkeit für das System: 🔴 Hoch (Auslösen ohne Verzögerung)
Filterelemente: 🔴 Niedrig (kleine Datensätze)
Per-filter
Die Zwischenlösung besteht darin, die Filter nacheinander anzuwenden. Wenn Sie dem Benutzer die Möglichkeit geben, seine Auswahl aus einem Dropdown-Menü mit mehreren Optionen zu treffen, kann er suchen, blättern und auswählen, was er benötigt, ohne dass die Ergebnisse automatisch aktualisiert werden. Wenn der Benutzer mit dem Identifikator fertig ist, kann er die Ergebnisse auslösen. Dies kann entweder durch Anklicken und Schließen des Dropdown-Menüs oder durch Anklicken der Schaltfläche "Übernehmen" erfolgen.
Leistungsfähigkeit für das System: 🟡 Gering (Auslösen erst auf Knopfdruck)
Filterelemente: 🟡 Mittel (jede interkation erfodert die eingabe des Nutzers)
Batch-filtering
Eine dritte Möglichkeit besteht darin, die Ergebnisse nur einmal aufzurufen. Der Benutzer würde durch die verschiedenen Dropdown-Listen navigieren, suchen und scrollen, und erst nachdem er alle gewünschten Filter eingegeben hat, würde er auf eine globale Schaltfläche "Anwenden" klicken. Diese Methode eignet sich am besten für sehr große Datensätze oder Anwendungen mit geringer Performance. Ladezeiten und Verzögerungen werden hier in Kauf genommen und der Benutzer behält den Überblick.
Leistungsfähigkeit für das System: 🟢 Gering (Auslösung nur auf Knopfdruck)
Filterelemente: 🟢 Viele (große Datensätze und Filterabhängigkeiten möglich nur ein Knopfdruck)
Beispiele und Patterns für die Umsetzung
Sidbar mit erweiterbaren Sections
Erweiterbare Abschnitte sind eine gute Wahl für eine Filter-Sidebar. Sie können einige Elemente standardmäßig sichtbar machen und einen "Alle anzeigen"-Mechanismus anbieten. Dies erhöht die Auffindbarkeit, und wenn Sie Ihre Werte gut genug priorisiert haben, ersparen Sie Ihren Nutzern wertvolle Klicks, da sie sich nicht durch verschachtelte Ebenen wühlen müssen.
Sie haben auch die Möglichkeit, die Schaltfläche "Übernehmen" sowohl auf der Ebene des Abschnitts als auch auf der obersten Ebene zu platzieren, je nachdem, welche Art der Abfrage Ihr System unterstützt.
Die doppelte Belegung von erweiterbaren Abschnitten und die zusätzliche Auslösung von Datenabrufen für Ergebnisse zur Desynchronisierung und Ablenkung des Benutzers, der die Filtereinstellungen in diesem Moment vornimmt.
Dropdown-Menüs
Bei Filtern, die in einer oberen Leiste angeordnet sind, müssen Sie die Dropdown-Menüs verwenden, um zusätzliche Optionen anzuzeigen. Achten Sie darauf, dass die Art der Eingabe der Art der Daten entspricht.
- Optionsfelder vs. Kontrollkästchen
Wann sollte eine einzelne Option und wann eine Mehrfachauswahl angeboten werden? - Boolesche Werte benötigen kein Dropdown-Menü
Richtig/Falsch-Filter können ein einfaches Kontrollkästchen oder eine Umschaltfunktion sein. - Bieten Sie einen Suchmechanismus an
Für Dropdown-Menüs mit einer großen Anzahl von Werten
☝️Aktivieren Sie Autofokus!
Wenn Sie die Suche einbeziehen, stellen Sie sicher, dass der Benutzer sofort mit der Eingabe beginnen kann, sobald er auf das Dropdown-Menü oder den ausklappbaren Bereich geklickt hat.
Filtern von tabellarischen Ansichten
Bei der Erstellung von Filtern für eine Tabellenschnittstelle besteht eine effektive Methode zur Entwicklung von Filtern für eine Tabellenansicht darin, den Mechanismus direkt auf einer Ebene pro Spalte einzubetten. Auf diese Weise erhalten Sie den größtmöglichen Kontext für Ihre Benutzer, da sich die Ergebnisse direkt unter der Eingabe ändern.
Additive Drops
Wenn Ihre Filter additiv sein sollen (erinnern Sie sich an die Abhängigkeiten? Das ist der Fall, wenn wir das System bitten, eine Variable zu einer anderen zu addieren und alles auszuschließen, was nicht dem kombinierten Filter entspricht), dann sind Drops oder Pills eine gute Möglichkeit, dies zu vermitteln.
Normalerweise sind diese Variablen bereits vorhanden, so dass die Benutzer sie aus einem oder mehreren Dropdown-Menüs auswählen können, und sie sollten leicht zu entfernen sein.
Interaktion "Alles löschen"
Unabhängig davon, für welches Modell Sie sich entscheiden, das für Ihre Daten und Benutzer am besten geeignet ist, vergessen Sie nicht, eine leicht zugängliche "Alle löschen"-Option vorzusehen. Die Option "Alles löschen" sollte sowohl auf der Ebene der einzelnen Filter als auch auf globaler Ebene verfügbar sein. Für den Benutzer ist die Schaltfläche "Alle löschen" auch eine Erinnerung an die Anwendung der Filter.
Darstellung der Ergebnisse
Redundanz berücksichtigen
Bei der Bereitstellung von Feedback im Zusammenhang mit der Filterung sollte Redundanz in Kauf genommen werden. Nach der Anwendung sind die Filterauswahlen wahrscheinlich in ihren Drop-Down-Menüs oder erweiterbaren Abschnitten versteckt. Sie müssen sie sichtbarer machen. Andernfalls kann der Benutzer leicht vergessen, dass er überhaupt Filter ausgewählt hat.
Kurz gesagt, Sie brauchen drei Dinge:
- Sichtbarkeit der aktiven Filter in ihrem ursprünglichen Kontext (innerhalb des Menüs)
- Anzeige der Filter, in denen eine Auswahl verschachtelt ist (kleine numerische Markierung, fetter Text, Hintergrundfarbe)
- Anzeige in einem eigenen Abschnitt "Angewandte Filter" (wenn Sie neugierig sind, finden Sie hier weitere Informationen)
Nummer eins ist eine Selbstverständlichkeit: Behalten Sie einfach den Status der Filter bei.
Nummer zwei ist, auf hohem Niveau daran zu erinnern, wo Benutzer eine Auswahl getroffen haben. Sie können die Beschriftung fett machen und eine numerische Gesamtanzeige hinzufügen, z.B. "(3)" daneben. In diesem Fall sollten Sie sich für eine Höchstzahl entscheiden, die in diesem Indikator angezeigt werden soll. Wenn es möglich ist, 10.000 Artikel auszuwählen, sollten Sie die Beschriftung auf ein Format wie (1K+) kürzen, um Platz zu sparen.
Nummer drei ist der Punkt, an dem es schwierig wird. Was ist, wenn es einen Mehrfachauswahlfilter gibt und der Platz nicht ausreicht, um alle aufzulisten? Das ist eine berechtigte Frage.
In der Zusammenfassung müssen Sie entscheiden, wie viel Platz Sie für jeden Filter einplanen. Sie können 'Aristoteles, Sokrates, Platon, Epikur' auflisten und entscheiden, dass 40 Zeichen das Maximum sind. Oder Sie geben "Autoren (4)" an und lassen den Benutzer die Auswahlliste erneut öffnen, wenn er seine Auswahl noch einmal sehen möchte.
Wenn es möglich ist, dass die angewendeten Filter den verfügbaren Platz überschreiten, müssen Sie den Seitenumbruch planen. Es ist üblich, die angewendeten Filter auf 2 oder sogar 3 Zeilen umbrechen zu lassen. Mehr als das? Dann sollten Sie einen Mechanismus in Betracht ziehen, mit dem Sie mehr oder weniger Filter einblenden können, um zu vermeiden, dass das Scrollen der Seite unangenehm wird.
Kommen wir nun zur Positionierung der Zusammenfassung:
Wenn sich die Filter in einer Sidebar befinden, können Sie die Zusammenfassung der angewandten Filter am oberen Rand der Seitenleiste anzeigen (achten Sie darauf, dass die Zusammenfassung fixiert ist und über einen eigenen Bildlauf verfügt, falls sie zu lang wird!)
Oder wiederholen Sie sie, indem Sie sie oben auf der Seite einfügen
Wenn sich die Filter in einer horizontalen Leiste befinden,
die Übersicht der angewandten Filter unterhalb der Leiste über den Listenelementen anzeigen
Bei Inline-Filtern wäre eine Zusammenfassung überflüssig. Wenn Filter inline sind, sind sie bereits stark kontextualisiert und in der Regel kleiner im Umfang. Eine Zusammenfassung ist nicht notwendig.
Anzeige der Anzahl der Ergebnisse
Ein weiteres Schlüsselelement für die Vermittlung von Feedback ist die Anzeige der Anzahl der Ergebnisse (siehe mehr über Ergebnisse in der Such-UX). Auf diese Weise erhalten die Nutzer eine Rückmeldung darüber, wie effektiv ihre Eingabe war, um die Ergebnisliste zu reduzieren und Zeit zu sparen.