Such-Design-Pattern

Such-Design-Pattern beschreibt die UX-Muster für Suchinterfaces, von Autovervollständigung über Filterfunktionen bis hin zur durchdachten Gestaltung von Null-Ergebnis-Zuständen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Search UX, Suchinterface, Findability Pattern, Information Retrieval UX

Was sind Such-Design-Patterns?

Suche ist nach Navigation die zweithäufigste Art, wie Nutzer Inhalte auf Websites und in Anwendungen finden. Während Navigation für bekannte Ziele geeignet ist ("Ich weiß, wo es ist"), ist Suche für unklare oder komplexe Informationsbedürfnisse unersetzlich. Jacob Nielsen hat in einer Studie gezeigt, dass Nutzer, die auf Suche angewiesen sind, um eine Aufgabe abzuschließen, sogenannte "Search-Dependent Users" sind, die bei schlechter Such-UX die Anwendung oft ganz verlassen.

Erklärung

Autocomplete (Autovervollständigung)

Autocomplete zeigt Vorschläge, während der Nutzer tippt. Es beschleunigt die Eingabe, reduziert Tippfehler und hilft Nutzern, die Suchterminologie des Systems zu lernen.

Typen von Autocomplete:

• Completion Suggestions: Vollständige Suchbegriffe ("Photosh…" → "Photoshop", "Photoshop Kurs", "Photoshop Tutorials")
• Entity Suggestions: Spezifische Objekte ("Berliner Philharmoniker" → Ergebnis-Karte direkt im Dropdown)
• Query Combinations: Kombination aus Begriff + Kategorien ("Nike Schuhe" → "Nike Schuhe | Herren", "Nike Schuhe | Sale")

Design-Anforderungen:

• Minimale Latenz: Vorschläge sollten innerhalb 100–200 ms erscheinen
• Maximal 5–8 Vorschläge (mehr überfordert visuell und kognitiv)
• Tastaturnavigation durch die Liste mit Pfeiltasten
• Visuelles Hervorheben des getippten Teilstrings in der Suggestion ("Photoshop")
• ESC schließt die Dropdown-Liste

Recent Searches (Letzte Suchanfragen)

Ohne Eingabe zeigt das Suchfeld die letzten Suchanfragen des Nutzers. Dies ist ein wichtiges Effizienz-Werkzeug: Wiederholte Suchen (sehr häufig in der Praxis) werden per Klick ohne erneutes Tippen ausgeführt.

Best Practices:

• Maximal 5 letzte Anfragen anzeigen
• Löschen-Option pro Eintrag ("×") und "Alle löschen"
• Visuell unterscheidbar von Autocomplete-Vorschlägen (z. B. Uhr-Icon statt Lupe-Icon)

Faceted Search (Facettierte Suche)

Faceted Search kombiniert Volltextsuche mit strukturierten Filtern, die sich auf die Suchergebnisse anpassen. Jede "Facette" ist eine Dimension (Kategorie, Preis, Marke, Bewertung), die Nutzer nach Belieben kombinieren können.

Das Besondere: Die verfügbaren Filterwerte und deren Anzahl aktualisieren sich dynamisch basierend auf den bereits aktiven Filtern. Wenn ich "Laptops" filtere, zeigt die Marken-Facette nur Laptop-Hersteller.

Dies ist das mächtigste Suchmuster für Kataloge mit strukturierten Daten (E-Commerce, Immobilien, Jobs).

Inline Suche vs. Dedizierte Suchseite

Inline-Suche: Ergebnisse erscheinen direkt im Dropdown unterhalb des Suchfelds, ohne Seitenwechsel. Ideal für schnelle Lookups (Nutzer sucht eine Person, ein Dokument, ein Produkt), wenn die Ergebnisliste kurz ist (unter 10 Treffer).

Dedizierte Suchseite: Bei komplexen Suchen mit vielen Treffern, Filtern und Sortieroptionen ist eine eigene Seite die richtige Wahl. URL wird mit Suchparametern beschrieben (?q=photoshop&category=tutorials&sort=relevanz), was Teilen und Speichern von Suchen ermöglicht.

Null Results (Keine Ergebnisse)

Der Null-Ergebnis-Zustand ist der kritischste Moment in der Such-UX. Ohne hilfreiche Reaktion verlässt der Nutzer die Anwendung. Gute Null-Results-Gestaltung enthält:

1. Wiederholung der Anfrage: "Keine Ergebnisse für 'Phothoshop'"
2. Tippfehler-Erkennung: "Meinst du 'Photoshop'?"
3. Erweiterte Suchoptionen: Suchbegriff aufteilen, andere Kategorien
4. Verwandte Inhalte: "Das könnte dich interessieren:" mit manuell kuratierten Vorschlägen
5. Filter-Reset-Button: "Filter entfernen und erneut suchen" wenn aktive Filter die Ergebnisse einschränken

Beispiele

1. Google Suche: Autovervollständigung mit Completion Suggestions und Entity Cards. Recent Searches ohne explizite Anzeige (in Browser-History integriert). Rechtschreibfehler-Korrektur mit "Meintest du:"-Vorschlag ist branchen-Standard.
2. Amazon Produktsuche: Faceted Search als Sidebar mit Kategorie, Marke, Preis, Kundenbewertung, Versand, Prime-Filter. Dynamische Aktualisierung aller Facetten. Das Goldstandard-Beispiel für E-Commerce-Suchfilter.
3. Airbnb Unterkunftssuche: Kombination aus Karten- und Listen-Interface mit Facetten (Preis, Unterkunftstyp, Ausstattung). Autocomplete für Ortseingabe nutzt Google Maps API mit Entity-Vorschlägen (Stadt, Bezirk, Sehenswürdigkeit).
4. Spotify Suche: Recent Searches ohne Eingabe, kategorisierte Ergebnisse (Tracks, Alben, Künstler, Podcasts) mit Instant Results direkt im Dropdown.
5. GitHub Code-Suche: Erweiterte Suchabfragen mit Operator-Syntax (language:python stars:>100 fork:true). Autocomplete für Operatoren und Repositorynamen. Das Muster richtet sich an technische Nutzer mit komplexen Anfragen.

In der Praxis (Figma-Umsetzung)

Suchfeld-Komponente:

1. Input: Höhe 44–48 px, links Lupe-Icon (20 px), optional rechts: X-Button zum Löschen
2. Zustand active mit sichtbarem Cursor und dropdown: visible
3. Dropdown: 100 % Breite des Inputs, Schatten 0 8px 24px rgba(0,0,0,0.15)

Autocomplete-Dropdown:

• Listenitem-Höhe: 48 px, Hover: Hintergrundfarbe #F5F5F5
• Icon Links (Kategorie-differenziert: Lupe für Suche, Uhr für Recent, Stern für Top)
• Text: Treffer-Hervorhebung des getippten Strings (Bold oder Primärfarbe)
• Max. Height: 340 px mit internem Scroll

Faceted-Search-Filter: In Figma als Sidebar-Komponente mit expandierbaren Akkordeons pro Facette. Checkbox-Liste für Mehrfachauswahl, Range-Slider für Preis. Aktive Filter als Chips über den Ergebnissen.

Vergleich & Abgrenzung

Suche vs. Filter: Suche ist für unbekannte oder komplexe Anfragen. Filter sind für bekannte Kategorien innerhalb eines definierten Datensatzes. Faceted Search kombiniert beide: Freitextsuche mit strukturierten Filteroptionen.

Globale Suche vs. Lokale Suche: Globale Suche durchsucht die gesamte Anwendung. Lokale Suche durchsucht nur den aktuellen Kontext (z. B. "In dieser Playlist suchen"). Beide können gleichzeitig existieren — globale im Header, lokale kontextuell.

Häufige Fragen (FAQ)

Soll die Suche auf Enter oder instant (bei jedem Tastendruck) ausführen? Für kurze Autocomplete-Vorschläge: Instant (mit Debounce 150–300 ms). Für die vollständige Suchergebnisseite: Erst bei Enter oder Click auf "Suchen"-Button. Instant-Suche auf der Ergebnisseite (Suche aktualisiert sich beim Tippen) ist möglich, erhöht aber die Server-Last stark.

Wie viele Suchergebnisse sollen pro Seite angezeigt werden? 10–25 Ergebnisse sind der Standard. Weniger erfordert mehr Seitennavigation, mehr überfordert die visuelle Verarbeitung. Für Bild-lastige Ergebnisse (E-Commerce-Grid) sind 16–24 üblich.

Verwandte Einträge

• Filter und Sorting UI — Ergebnislisten einschränken und sortieren
• Empty State Design — Null-Results-Zustände gestalten
• Pagination vs. Infinite Scroll — Ergebnislisten navigieren

Weiterführend

• Nielsen, J. (1997). Search and You May Find. Nielsen Norman Group.
• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• Morville, P. & Callender, J. (2010). Search Patterns. O'Reilly Media.
• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.