Filter & Sorting UI

Filter & Sorting UI bezeichnet die Designmuster für Benutzeroberflächen, die Nutzern erlauben, große Datensätze durch Kriterienauswahl (Filter) und Reihenfolgebestimmung (Sortierung) zu strukturieren.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Filterfunktion, Sortierfunktion, Facetten-Filter, Ergebnis-Einschränkung

Was ist Filter & Sorting UI?

Wenn Datensätze zu groß werden, um vollständig durchgelesen zu werden, brauchen Nutzer Werkzeuge, um den relevanten Ausschnitt zu finden. Filter und Sortierung sind die beiden fundamentalen Mechanismen: Filter schränken ein (welche Elemente erscheinen überhaupt?), Sortierung ordnet an (in welcher Reihenfolge erscheinen sie?). Beide Mechanismen können und sollten kombiniert werden — aber jedes hat eigene Design-Anforderungen.

Erklärung

Sidebar-Filter (Desktop)

Der Sidebar-Filter ist das Standard-Muster für Desktop-E-Commerce und Katalog-Anwendungen. Eine vertikale Panel-Sektion links der Ergebnisliste enthält alle verfügbaren Filterdimensionen als expandierbare Akkordeons.

Stärken:

• Permanente Sichtbarkeit aller Filteroptionen ohne Navigation
• Viel Platz für viele Dimensionen und Werte
• Änderungen sind sofort sichtbar (bei Instant-Update-Verhalten)

Design-Details:

• Expandierte Akkordeons: Standard-offen für wichtige Dimensionen (Kategorie, Preis), Standard-geschlossen für sekundäre
• Jede Filterzeile: Checkbox + Label + Anzahl der Ergebnisse bei diesem Wert (z. B. "Nike (247)")
• Aktive Filter: Visuell unterschieden (blau/eingefärbt), Löschen-Button pro Filter
• "Alle Filter löschen"-Link oben im Panel
• Bei Instant-Update: Spinner/Loading-Indikator in der Ergebnisliste während Filterung rechnet

Chip-Filter

Chip-Filter (auch Tag-Filter) zeigen Filteroptionen als klickbare Pill/Chips horizontal über der Ergebnisliste. Aktive Chips wechseln die Darstellung (gefüllt, eingefärbt), inaktive sind outlined.

Stärken:

• Platzsparend für wenige Filterwerte pro Dimension
• Flache, leicht scanbare Darstellung
• Gut für Mehrfachauswahl (mehrere Chips gleichzeitig aktiv)

Einschränkungen:

• Nicht geeignet für viele Werte (über 8–10 Chips werden unübersichtlich)
• Kein Platz für Zähler wie beim Sidebar-Filter
• Overflow-Handling auf Mobile nötig (horizontales Scrollen oder "Mehr"-Dropdown)

Google Flights nutzt Chip-Filter für Flugoptionen (Direkt, 1 Zwischenstopp, Beliebig), da die Anzahl der Optionen begrenzt und klar definiert ist.

Sort-Dropdown

Die Sortierungsoption ist typischerweise ein Dropdown-Select rechts über der Ergebnisliste. Standard-Optionen umfassen: Relevanz, Neueste zuerst, Preis aufsteigend/absteigend, Bestseller, Bewertung.

Design-Details:

• Label "Sortieren nach:" + Dropdown oder nur Dropdown mit Standardwert sichtbar
• Bei aktiver Nicht-Standard-Sortierung: Visueller Hinweis ("Sortiert nach: Preis aufsteigend")
• Auf Mobile: Sortierung und Filter oft im selben Modal/Sheet zusammengefasst

Relevanz als Standard: Für Suchbasierte Listen ist "Relevanz" der richtige Standard. Für rein kategorische Listen ohne Suche ist "Neueste zuerst" oder eine redaktionell kuratierte Reihenfolge oft besser.

Mobile Filter Sheet

Auf Mobile gibt es nicht genug Platz für einen permanenten Sidebar-Filter. Das bewährte Muster ist ein Bottom Sheet (oder Modal), das über einen "Filtern & Sortieren"-Button geöffnet wird.

Typen:

• Einstufiger Sheet: Alle Filter in einem langen scrollbaren Sheet
• Zweistufiger Sheet: Erster Sheet zeigt Dimensionen (Preis, Marke, Farbe), Klick öffnet zweiten Sheet für Werte der gewählten Dimension
• Vollbild-Filter: Bei sehr vielen Filteroptionen wird die Filterauswahl als eigene Seite behandelt (zurück-navigierbar)

Best Practice Mobile: Filter-Button immer prominent im Toolbar, zeige die Anzahl aktiver Filter als Badge ("Filtern (3)"). Am Ende des Sheets: "Ergebnisse anzeigen (247)"-Button.

Aktive Filter kommunizieren

Ein häufiger Usability-Fehler: Nutzer haben Filter gesetzt, sehen das Ergebnis, aber verstehen nicht mehr, warum es so aussieht. Aktive Filter müssen immer sichtbar sein:

• Chips/Tags über der Ergebnisliste, jeweils mit X zum Einzellöschen
• Gesamtanzahl aktiver Filter im Filter-Button auf Mobile
• "Alle Filter zurücksetzen"-Link wenn mindestens ein Filter aktiv ist

Beispiele

1. Amazon (Desktop): Klassisches Sidebar-Filter-Muster mit Akkordeons für Kategorie, Marke, Preis (Range-Slider), Kundenbewertung, Prime-Versand. Dynamische Zähler bei jedem Filterwert. Instant Update der Ergebnisliste.
2. Airbnb (Mobile): "Karte", "Filter", "Sortieren"-Buttons nebeneinander im Toolbar. Filter öffnet mehrstufigen Bottom Sheet. Aktive Filter als Zahl im Button: "Filter (4)". Sehr klares, viel kopiertes Muster.
3. Google Shopping: Chip-Filter für Preis-Ranges (Unter 25 €, 25–75 €, Über 75 €) kombiniert mit Dropdown-Sort. Hybrides Muster für schnelle, flache Filterung.
4. Zalando (Desktop + Mobile): Sidebar mit über 15 Filterdimensionen — Größe, Farbe, Marke, Preis, Material, Passform. Auf Mobile als vollständige Filter-Seite. Die Anzahl der aktiven Filter ist im Filter-Button-Label sichtbar.
5. LinkedIn Jobs-Suche: Chip-Filter für Erfahrungsniveau, Firmengröße, Vertragsart. Sofortige Aktualisierung der Jobanzeige beim Klicken. Sortierung (Neueste | Relevanz) als separates Element.

In der Praxis (Figma-Umsetzung)

Chip-Filter-Komponente:

1. Auto-Layout Horizontal, Height: 32 px, Padding: 8 × 16 px, Border-Radius: 16 px (Pill)
2. Varianten: state: inactive (Border, weißer Hintergrund) | state: active (Primärfarbe, weißer Text)
3. Optional X-Icon (12 px) rechts beim aktiven Zustand

Sidebar-Filter-Sektion: Akkordeon mit Header (Label + Expand/Collapse Icon) und Body (Checkbox-Liste). Auto-Layout Vertikal. Jede Zeile: Checkbox 16 px + Label + Zähler rechts (#999, kleinere Schrift).

Range-Slider für Preis: Figma hat keine nativen Slider-Komponenten. Baue einen Frame mit Linie, zwei Kreisen als Thumb, Inputs für Min/Max-Wert darunter. Interaktion in High-Fidelity-Prototypen: ProtoPie oder Figma Variables (begrenzt).

Mobile Filter Button: Sekundärer Button mit Filter-Icon + optionalem Badge-Counter. Badge: Kreis 18 × 18 px, Primärfarbe, weiße Zahl, Position: rechts-oben am Button, overlap.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Soll die Filterliste sofort aktualisieren oder erst nach "Anwenden"-Klick? Instant-Update (jede Filteränderung aktualisiert sofort die Ergebnisse) ist in der Regel besser für die Usability: Nutzer sehen unmittelbar die Auswirkung jeder Entscheidung. "Anwenden"-Button ist sinnvoll, wenn das Backend langsam ist (Filterkombinationen führen zu Wartezeiten >500ms) oder wenn die Filterauswahl komplex ist und Nutzer mehrere Änderungen auf einmal vornehmen möchten.

Wie viele Filter sollen standardmäßig aufgeklappt sein? Maximal 3–4 Dimensionen aufgeklappt. Die wichtigsten (meist Preis, Kategorie, Marke) sollten standardmäßig offen sein. Zu viele offene Akkordeons erzeugen zu langen initialen Scroll und überfordern.

Verwandte Einträge

• Such-Design-Pattern — Suche und Filter kombinieren
• Pagination vs. Infinite Scroll — Gefilterte Listen navigieren
• Card-Pattern — Darstellungsformat für Filterergebnisse

Weiterführend

• Morville, P. & Callender, J. (2010). Search Patterns. O'Reilly Media.
• Baymard Institute (2021). E-Commerce UX: Filtering & Sorting. baymard.com.
• Nielsen Norman Group (2018). Filters vs. Facets: Definitions. nngroup.com.
• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.