Was ist der Unterschied zwischen Filter und Sortierung?

Ein Filter entfernt Produkte, die ein Kriterium nicht erfüllen, aus der Liste. Die Sortierung entfernt kein Produkt, sie ändert nur die Reihenfolge. Beide sollten eigene Steuerelemente sein.

Was bedeutet facettierte Suche?

Die facettierte Suche (faceted search) bietet für jede Eigenschaft des Inhalts einen eigenen Filter. In einem Modeshop können das Kategorie, Preis, Größe und Farbe sein. Der Nutzer kombiniert diese Filter und grenzt die Liste ein.

Sollen Filter sofort oder per Button angewendet werden?

Lädt die Liste in unter einer Sekunde neu und überfliegen die Nutzer das Angebot, funktioniert sofortiges Anwenden gut. Ist die Website zeitweise langsam oder ist der Nutzer am Handy, ist ein Button Anwenden sicherer.

Filter und Sortierung gestalten: Produktfilter

Q: Wie sollte die Standardsortierung aussehen?

Die Standardsortierung sollte auf dem ersten Screen zeigen, wie breit das Sortiment ist. Nehmen Sie die Reihenfolge nach Meistverkauft als Grundlage und verteilen Sie jede wichtige Produktart auf die ersten Plätze. Ich nenne diese Sortierung Empfohlen.

Filter oder Facette?

Kathryn Whitenton von NN/g trennt in einem Text von 2014 zwei Begriffe. Ein Filter ist jedes Werkzeug, das aus einer großen Inhaltsmenge entfernt, was ein Kriterium nicht erfüllt. Die facettierte Suche (faceted search) bietet dagegen für jede Eigenschaft des Inhalts einen eigenen Filter.

In einem Modeshop baue ich diese Facetten aus Kategorie, Preis, Größe und Farbe.

Laut Whitenton ist der Unterschied eine Frage des Grades. Facetten sind in sehr großen Mengen flexibler und zeigen auch, was die Menge enthält. Sie sind aber teuer in Gestaltung und Pflege, weil Sie für jede Facette bei jedem alten und neuen Produkt Daten pflegen müssen.

Ihre Empfehlung, die ich am meisten mag: Stellen Sie vor der Investition sicher, dass Ihre Nutzer Facetten wirklich brauchen. In einer Kategorie mit zwanzig Produkten reicht oft ein einfacher Filter.

Arten von Filtern

Am häufigsten sehe ich bei Produktfiltern zwei Steuerelemente: Werte aus einer Liste wie Kategorie und Größe und Bereiche wie den Preis. Manchmal kommt ein einzelner Schalter hinzu, etwa „nur verfügbare“.

Bei Werten aus einer Liste ist die wichtigste Regel, in einer Gruppe mehrere Optionen zuzulassen. Laut einem Text von Iva Olah (Baymard) von 2024 lassen 15 % der Websites im E-Commerce-Benchmark des Instituts das nicht zu. Dort schalten Nutzer Optionen einzeln ein und aus und müssen sich die Ergebnisse merken.

Olahs Logik ist einfach: zwischen Gruppen „und“, innerhalb einer Gruppe „oder“. Wählt man Jacke und über 150 €, kommen Produkte, die beides erfüllen. Wählt man S und M, steht jedes Produkt in der Liste, das es in einer dieser Größen gibt.

Zeigen Sie die Optionen als Kontrollkästchen, damit Nutzer verstehen, dass sie mehrere wählen können.

Schreiben Sie neben die Optionen, wie viele Produkte mit dieser Auswahl übrig bleiben. Katie Sherwin von NN/g sagt in einem Text von 2016, dass diese Zahlen vor Suchen ohne Ergebnis schützen. Im Beispiel unten macht das die Klammer neben jeder Option.

Live-Beispiel: eine Liste mit zwölf Produkten

Die Liste unten habe ich für diese Seite gebaut. Die Filter arbeiten innerhalb einer Gruppe mit „oder“, zwischen Gruppen mit „und“. Nach jeder Auswahl aktualisiert sich die Ergebniszahl und wird dem Screenreader gemeldet.

Filtern und sortieren

Eine Modeliste mit zwölf erfundenen Produkten. Wählen Sie Kategorie, Preis und Größe; Ihre Auswahl erscheint oben als Chip, jeder lässt sich mit einem Klick entfernen. Wählen Sie Jacke und unter 75 € zusammen, sehen Sie den Screen ohne Ergebnis. Auf dem Handy liegen die Filter hinter dem Button Filtern.

Achten Sie im Beispiel auf zwei Dinge. Wählen Sie Jacke, steht neben „unter 75 €“ (0), Sie kennen das Ergebnis also vor der Wahl. Wählen Sie es trotzdem, leert sich die Liste, und es steht da, wie viele Produkte zurückkommen, wenn Sie welchen Filter entfernen.

Zeigen Sie die aktiven Filter

Kathryn Reeves (Baymard) empfiehlt in einem Text von 2020 (aktualisiert 2026), eine Zusammenfassung der aktiven Filter über der Liste zu zeigen. Bei 28 % der getesteten Websites fehlt eine solche Zusammenfassung.

Fehlt sie, ist der Nutzer nicht sicher, ob der Filter gegriffen hat, und weiß nicht, warum er diese Produkte sieht. Um einen Filter zu entfernen, muss er das Panel wieder öffnen und suchen.

Laut Reeves ist das Problem mobil größer, weil der Nutzer das Filterpanel erneut öffnen muss, um seine Auswahl zu sehen. Auch auf dem Desktop übersieht man eine Auswahl unten in einer langen Seitenleiste. Filter, die das System selbst anwendet, werden durch die Zusammenfassung ebenfalls sichtbar.

Jeder Filter in der Zusammenfassung sollte sich per Klick entfernen lassen, daneben gehört ein Link „Alle entfernen“. Ein Zähler „Filter (3)“ allein reicht nicht, weil er nicht sagt, welche drei es sind.

Verschieben Sie die gewählte Option im Panel auch nicht. In den Daten von Reeves lassen 97 % der getesteten Websites die gewählte Option an ihrem alten Platz.

Ergebniszahl und null Ergebnisse

Die Gesamtzahl der Ergebnisse sollte jederzeit sichtbar sein. Whitentons Text zur mobilen Facettensuche von 2015 verlangt das ausdrücklich: Auch wenn der Nutzer durch eine lange Filterliste scrollt, bleibt die Gesamtzahl sichtbar.

Die Zahl muss auch Screenreader-Nutzer erreichen. Das verlangt das Kriterium 4.1.3 Statusmeldungen der Stufe AA in WCAG 2.2. Eines der Beispiele des W3C für dieses Kriterium ist genau das: der Text „5 results returned“, der nach einer Suche erscheint.

Ich schreibe die Ergebniszahl in einen Bereich mit role="status". Der Fokus bleibt, wo er ist, und der Screenreader liest die Zahl trotzdem vor.

Null Ergebnisse dürfen keine Sackgasse sein. Sagen Sie, welcher Filter die Liste geleert hat, und bieten Sie an, ihn mit einem Klick zu entfernen. Den Text für diesen Screen beschreibe ich im Muster leerer Zustand.

Null Ergebnisse aus dem Suchfeld sind ein anderes Problem. Um Tippfehler aufzufangen und Vorschläge zu machen, schauen Sie ins Muster zu Suche und Autovervollständigung.

Sofort anwenden oder Button „Anwenden“?

Sherwin unterscheidet zwei Wege. Beim sofortigen Anwenden lädt die Liste nach jeder Auswahl neu. Beim gesammelten Anwenden wählt der Nutzer mehrere Filter, und die Liste lädt am Ende einmal neu.

Sofort anwenden

Nach jeder Auswahl lädt die Liste neu.

Passt zu: Nutzern, die noch nicht wissen, worauf sie achten, und Optionen überfliegen.

Bedingung: Die Antwort kommt in unter einer Sekunde.

Button „Anwenden“

Der Nutzer wählt mehrere Filter, die Liste lädt am Ende einmal neu.

Passt zu: Nutzern mit klarem Kriterium, Websites, die zeitweise langsam sind, und Mobilgeräten.

Risiko: Die Kombination der Auswahl kann null Ergebnisse liefern.

Was Sie wählen, hängt von der Absicht des Nutzers und vom Tempo der Website ab. Laut Sherwin fühlt sich sofortiges Anwenden nur gut an, wenn die Antwort in unter einer Sekunde kommt.

Flackert die Liste bei jeder Auswahl, lenkt das ab. Für diesen Fall empfiehlt der Text, den Ergebnisbereich abzublenden und einen Fortschrittsindikator zu zeigen.

Sherwin beschreibt auch einen Mittelweg. Sie setzen einen Button „Anwenden“, und wählt der Nutzer ein bis zwei Sekunden lang nichts Neues, werden die Filter von selbst angewendet. Während des Wartens ist wieder ein Fortschrittsindikator zu sehen.

Auch das Springen an den Anfang der Liste, nachdem ein Filter angewendet wurde, braucht Sorgfalt. Laut Sherwin kann der Nutzer dabei die Orientierung verlieren. Wählt er gerade noch aus, steigt außerdem die Gefahr, die falsche Kategorie anzuklicken.

Das Filterpanel auf dem Handy

Auf dem Handy passen Filter nicht neben die Liste, sie kommen hinter einen Button. Whitenton empfiehlt statt Filterseiten im Vollbild, die den Nutzer von den Ergebnissen trennen, ein Panel, das von rechts aufgeht.

Ist das Panel offen, bleibt ein Teil der Ergebnisse dahinter sichtbar. Der Nutzer sieht, wie seine Auswahl die Liste verändert.

Derselbe Text sagt, dass ein Wort wie „Filtern“ auf dem Button verständlicher ist als ein Icon. Ich schreibe die Zahl der aktiven Filter mit auf den Button: „Filtern (2)“.

Sherwin empfiehlt mobil das gesammelte Anwenden, weil Seiten unterwegs oft langsam laden. Auf den Button, der das Panel schließt, schreibe ich die Ergebniszahl: „5 Produkte anzeigen“. So weiß der Nutzer vor dem Schließen, was er sehen wird.

Jedes Kontrollkästchen im Panel muss sich bequem mit dem Finger treffen lassen. Machen Sie die ganze Zeile klickbar und stellen Sie die Zeilen nicht zu eng. Die Maße beschreibe ich im Muster Tippbereich.

Sortieroptionen und Standard

Sortieren ist eine andere Aufgabe als Filtern: Es entfernt kein Produkt, es ändert nur die Reihenfolge. Mark Crowley (Baymard) nennt in einem Text von 2021 vier grundlegende Sortierungen: Preis, Nutzerbewertung, Meistverkauft und Neueste. 64 % der getesteten Desktop-Websites bieten diese vier nicht zusammen an.

Laut Crowley ist der Preis die einzige grundlegende Sortierung, die in beide Richtungen gehen muss. Bewertung und Neuheit können einseitig sein, weil Nutzer in den Tests fast nie nach dem am schlechtesten bewerteten Produkt suchten. Alphabetische Sortierung nutzten in den Tests auch nur sehr wenige.

Setzen Sie außerdem „Sortieren nach“ nicht als Option in die Auswahlliste, das verwirrt. In Crowleys Daten machen das 30 % der Websites.

Die Standardsortierung ist dagegen die am häufigsten übersehene Entscheidung. Reeves beschreibt in einem Text von 2021, dass Nutzer eine Kategorie nach den ersten paar Produkten beurteilen. Steht auf dem ersten Screen immer dieselbe Art Produkt, hält der Nutzer das Angebot für schmal und verlässt die Kategorie, womöglich sogar die Website.

Eine Standardsortierung nach Preis hinterlässt auch einen falschen Eindruck von der Preisspanne. 24 % der Desktop-Websites nutzen die Standardsortierung nicht, um die Bandbreite des Sortiments zu zeigen.

Reeves empfiehlt, die Reihenfolge nach Meistverkauft als Grundlage zu nehmen und jede Produktart, die mehr als 10 % der Liste ausmacht, unter die ersten 20 Produkte zu bringen. Mobil sinkt diese Zahl auf etwa 10.

Als Namen für diese Reihenfolge empfiehlt Reeves „Relevance“ oder „Featured“. Nutzen Sie nicht „Popular“, weil Testnutzer das für die Sortierung nach Meistverkauft hielten. Auf Deutsch nutze ich „Empfohlen“.

Im Beispiel oben verteilt „Empfohlen“ die vier Kategorien auf die ersten vier Karten. Denken Sie daran als ersten Schritt zur Produktdetailseite: Sieht der Nutzer auf dem ersten Screen nichts Passendes, kommt er dort nie an.

Meine Notiz

Bei einem Audit eines Shops probiere ich zuerst, in einer Gruppe zwei Optionen anzukreuzen. Dann versuche ich auf dem Handy, einen Filter zu entfernen. Diese zwei Versuche zeigen die meisten Probleme schon auf den ersten Blick.

Der häufigste Fehler, den ich sehe: Die Filter bleiben bei den Standardeinstellungen eines Such-Plugins. Optionen kommen in der Reihenfolge der Datenbank, Größen stehen als „XL, S, L, M“ da, Zahlen fehlen. Welche Filter in welcher Kategorie stehen, sollte das Produktteam entscheiden.

Auch nach der Standardsortierung frage ich eigens. Den meisten Teams ist nicht bewusst, dass das eine Entscheidung ist. Filter und Sortierung gehören zu den ersten Themen, die ich in einer Analyse der E-Commerce-UX anschaue.

Checkliste

Vor dem Launch prüfe ich eine Produktliste mit diesen Punkten. Wenn ich mir die Filter Ihres Shops ansehen soll: Das UX Audit deckt das ab.

In einer Gruppe lassen sich mehrere Optionen wählen; die Optionen sind Kontrollkästchen.
Zwischen Gruppen gilt „und“, innerhalb einer Gruppe „oder“.
Neben jeder Option steht, wie viele Produkte übrig bleiben.
Aktive Filter stehen als Chips über der Liste und lassen sich einzeln entfernen.
Es gibt „Alle entfernen“.
Die Gesamtzahl der Ergebnisse ist jederzeit sichtbar und wird dem Screenreader gemeldet.
Bei null Ergebnissen wird vorgeschlagen, welcher Filter entfernt werden kann.
Mobil ist der Filterbutton beschriftet und zeigt die Zahl der aktiven Filter.
Bei der Sortierung gibt es Preis, Bewertung, Meistverkauft und Neueste.
Die Standardsortierung zeigt auf dem ersten Screen die Bandbreite des Sortiments.