Filter- und Sortiersystem

Was macht Filter- und Sortiersystem?

Zweck

Das Filter- und Sortiersystem bietet eine Methodik zur Gestaltung von Discovery-Schnittstellen, die Benutzern helfen, große Datensätze oder Produktkataloge zu durchsuchen. Während die technische Implementierung die Logik übernimmt, definiert dieses System die räumliche Komposition und visuellen Affordanzen der Discovery-Tools. Es stellt sicher, dass Benutzer ihre Ansicht einfach verfeinern, ihren aktuellen Filterstatus verstehen und zwischen Priorisierungsmodi (Sortieren) wechseln können, ohne den Kontext zu verlieren oder überfordert zu werden.

Anwendungsfälle

• Gestalten der Sidebar oder Top-Bar-Discovery-Ebene für E-Commerce-Seiten.
• Organisieren komplexer Suchergebnisseiten (SERPs) für Verzeichnisse oder Ressourcen-Hubs.
• Implementieren von „Discovery Drawern“ für mobile-first-Anwendungsoberflächen.
• Erstellen facettierter Navigation für inhaltsreiche Dokumentationen oder Blog-Archive.

Wann NICHT verwenden

• Kleine Datensätze (<12 Elemente): Wenn alle Inhalte in eine einzige Ansicht passen, führt das Hinzufügen von Filtern und Sortieren zu unnötigem Interaktionsaufwand.
• Ein-Pfad-Workflows: Wenn der Benutzer einer linearen Sequenz folgen soll, anstatt einen Katalog zu durchsuchen.
• Rohe Datentabellen: Wenn Benutzer wahrscheinlich browser-eigene „Finden“-Funktionen oder erweiterte Tabellenwerkzeuge verwenden (obwohl eine grobe Sortierung dennoch hilfreich sein kann).

Eingaben

1. Facetteninventar: Eine Liste aller Attribute, nach denen Benutzer filtern können (z. B. Größe, Farbe, Bewertung, Preis).
2. Prioritätsranking: Welche Facetten „Primär“ (von 80 % der Benutzer verwendet) und welche „Sekundär“ (Nischenspezifikationen) sind.
3. Steuerungstypen: Zuordnung von Datentypen zu UI-Steuerelementen (z. B. Kontrollkästchen für Mehrfachauswahl, Bereichsschieberegler für Preis).
4. Layout-Kontext: Der verfügbare horizontale und vertikale Raum (aus dem responsive-grid-system).

Ausgaben

1. Discovery-Layout-Blaupause: Definierte Platzierung für die Filterleiste (Sidebar vs. Top-Bar) und das Ergebnisraster.
2. Facettenkomponenten-Spezifikation: Visuelles Design für Kontrollkästchen, Farbfelder und Bereichseingaben im Discovery-Kontext.
3. Zustandskarte: Visuelle Behandlung für aktive Filter (Chips/Pillen), Ladezustände (Skelette) und leere Zustände.
4. Responsive-Strategie: Ein Plan, wie Filter vom Desktop (z. B. Sidebar) auf Mobilgeräte (z. B. Bottom-Drawer) transformiert werden.

Arbeitsablauf

1. Auswahl des primären Layout-Musters

Wählen Sie eine räumliche Anordnung basierend auf der Anzahl der Facetten:

• Sidebar (links/rechts): Am besten für 5+ Facetten. Bietet hohe Sichtbarkeit und dauerhaften Zugriff auf Discovery-Tools.
• Horizontale Top-Bar: Am besten für 1–4 Facetten. Maximiert die Breite für Ergebnisse, kann aber überladen wirken, wenn später weitere Facetten hinzugefügt werden.
• Overlay/Drawer: Am besten für mobile oder „saubere“ Desktop-Oberflächen, bei denen Discovery eine sekundäre Aufgabe ist.

2. Definition der visuellen Hierarchie der Facetten

Wenden Sie die Prinzipien des visual-hierarchy-system auf die Filterliste an:

• Gruppenüberschriften: Verwenden Sie fette, prägnante Titel (z. B. Kategorie, Marke).
• Steuerelementgrößen: Stellen Sie sicher, dass Kontrollkästchen und Textlinks ausreichend vertikalen Rhythmus haben (normalerweise --space-s Abstand).
• Standardmäßig erweitert vs. eingeklappt: Erweitern Sie die 3 am häufigsten verwendeten Facetten; klappen Sie die übrigen ein, um vertikalen Platz zu sparen.

3. Gestaltung des „Aktiver Zustand“-Systems

Benutzer müssen jederzeit wissen, welche Filter angewendet sind:

• Zusammenfassung (Pillen/Chips): Platzieren Sie eine horizontale Liste der aktiven Filter oberhalb der Ergebnisse oder oben in der Sidebar.
• Alle löschen: Bieten Sie eine einzelne, prominente Aktion, um die gesamte Ansicht zurückzusetzen.
• Visuelles Feedback: Der Ergebniscontainer sollte anzeigen, dass er „aktualisiert“ wird (z. B. 20 % Deckkraft oder ein Skelettbildschirm), wenn ein Filter umgeschaltet wird.

4. Festlegung der Sortier-Affordanzen

Unterscheiden Sie zwischen Inklusion (Filtern) und Priorisierung (Sortieren):

• Platzierung: Halten Sie die Sortierung oben rechts oder oben links im Ergebnisbereich, getrennt von den Filtern.
• Beschriftung: Verwenden Sie klare Beschriftungen wie „Sortieren nach: Preis (Niedrig zu Hoch)“ anstatt nur „Preis“.

5. Planung für mobile Discovery

• Der Discovery-Trigger: Verwenden Sie einen klebrigen Button (z. B. „Filter & Sortieren“) am unteren oder oberen Bildschirmrand.
• Das Drawer-Muster: Öffnen Sie Filter in einem Vollbild- oder Bottom-Drawer, um die Touch-Zielgröße zu maximieren.
• Sofort vs. Stapel: Entscheiden Sie, ob die mobile Ansicht sofort aktualisiert werden soll (Facetted) oder einen „Zeige X Ergebnisse“-Button zum Anwenden benötigt.

Entscheidungsregeln

• Die „80/20“-Regel: Zeigen Sie nur die obersten 5 Werte für eine bestimmte Facette an; verwenden Sie einen „Mehr anzeigen“-Link, um den Rest aufzudecken.
• Sidebar vs. Top-Bar: Wenn Ihre Facettenliste auf einem standardmäßigen Laptop-Bildschirm scrollen muss, verwenden Sie eine Sidebar. Wenn sie in eine Zeile passt, verwenden Sie eine Top-Bar.
• Auswahlpersistenz: Angewendete Filter müssen sichtbar bleiben, auch wenn sie aus der Sidebar herausgescrollt wurden (z. B. durch Verwendung einer klebrigen Chip-Leiste).
• Rückfall für leeren Zustand: Erlauben Sie niemals, dass eine Filterkombination zu einer Sackgasse führt; stellen Sie immer einen „Zurücksetzen“-Button oder alternative Vorschläge bereit.

Einschränkungen

• Barrierefreiheit: Alle Filtersteuerelemente müssen sichtbare Fokusringe haben und über die Tastatur bedienbar sein. Verwenden Sie aria-expanded für zusammenklappbare Facetten und aria-live="polite" für den Ergebnisanzahl/-container, damit Screenreader-Benutzer wissen, wann die Ergebnisse aktualisiert wurden.
• Responsivität: Filter müssen auf Mobilgeräten gestapelt oder in einen Drawer verschoben werden, um horizontalen Überlauf oder „Quetschen“ des Inhaltsrasters zu vermeiden. Bevorzugen Sie Container-Queries gegenüber Viewport-Breakpoints, wenn die Filterleiste in mehr als einem Layout-Kontext erscheinen kann (z. B. Sidebar vs. eingebettetes Widget).
• Kontrast: Stellen Sie sicher, dass aktive/ausgewählte Zustände (z. B. ein aktiviertes Kontrollkästchen oder ein blauer Chip) ein Kontrastverhältnis von 3:1 gegenüber dem Hintergrund erfüllen.

Häufige Fehlermuster

• Der „Mystery-Filter“: Benutzer können nicht erkennen, welche Filter aktiv sind, weil es keine zusammenfassende Chip-/Pillenleiste gibt.
• Die „Unendliche Sidebar“: Eine Sidebar, die so lang ist, dass sie zur Aufgabe wird, oft verursacht durch die Nichtverwendung von „Mehr anzeigen“ bei langen Listen.
• Mobile Überfüllung: Der Versuch, eine Desktop-Sidebar in eine mobile Ansicht zu quetschen, wodurch das Ergebnisraster unlesbar wird.
• Fehlendes „Angewendet“-Feedback: Umschalten eines Filters, ohne dass das Ergebnisraster visuell eine Änderung anzeigt (auch wenn die Änderung schnell ist).
• Die Sackgasse: Filtern bis auf null Elemente und keine Möglichkeit, zurückzugehen.

Validierungskriterien

• Es gibt eine klare Unterscheidung zwischen Filtern (Inklusion) und Sortieren (Priorisierung).
• Aktive Filter werden visuell zusammengefasst (z. B. Chips/Pillen).
• Die am häufigsten verwendeten Facetten sind standardmäßig erweitert; andere sind zusammenklappbar.
• Eine Aktion „Alle löschen“ oder „Zurücksetzen“ ist leicht zugänglich.
• Das System bietet ein mobilspezifisches Discovery-Muster (z. B. Drawer).
• Ladezustände (Skelette/Spinner) sind für den Fall definiert, dass die Ergebnisse aktualisiert werden.
• Alle Steuerelemente erfüllen die Mindestgrößen für Touch-Ziele (24x24px gemäß WCAG 2.2 SC 2.5.8, 44x44px bevorzugt) und die Anforderungen an die Tastaturzugänglichkeit.