coastdigitalgroup/coastai-skills

Suchoberflächen-System

Zweck

Das Suchoberflächen-System bietet eine Methodik zur Gestaltung eines kohärenten, leistungsstarken Entdeckungserlebnisses. Während sich internal-search-optimization auf die „Wachstums“- und Logikseite konzentriert, definiert dieses System die Design-Patterns und räumliche Ergonomie der Such-UI. Es stellt sicher, dass Benutzer den Sucheinstiegspunkt sofort finden, mühelos damit interagieren (auch auf Mobilgeräten) und Ergebnisse so verarbeiten können, dass die kognitive Belastung minimiert und die „Informationsspur“ maximiert wird.

Anwendungsfälle

• Gestaltung der Sucheinstiegspunkte in globalen Kopfzeilen oder persistenten Werkzeugleisten.
• Erstellen der „Befehlszentrale“ oder des „Omnibox“-Erlebnisses für SaaS-Anwendungen.
• Strukturieren von E-Commerce-„Visueller Suche“ und Autocomplete-Dropdowns.
• Gestaltung von dichten Suchergebnisseiten (SERPs) für Dokumentationen oder Kataloge.
• Implementieren von „Vollbild-Suche“-Overlays für mobile First-Designs.

Wann NICHT verwendet werden sollte

• Statische Landing Pages: Wenn der Inhalt fest ist und Entdeckung kein primäres Ziel ist.
• Mikro-Websites (<20 Seiten): Wenn eine robuste Navigation und Breadcrumbs für die Auffindbarkeit ausreichen.
• Rein relationale Dashboards: Wenn Daten ausschließlich über definierte Filter und Registerkarten anstatt über Freitextsuche abgerufen werden.

Eingaben

1. Nutzerintentionsprofil: Sucht der Benutzer nach einer bestimmten SKU (Präzision) oder erkundet er ein Thema (Entdeckung)?
2. Katalogdichte: Wie viele Elemente gibt es im System und wie vielfältig sind die Metadaten?
3. Primäres Gerät: Wird die Suche hauptsächlich auf Mobilgeräten (Touch) oder Desktop (Tastatur) verwendet?
4. Vorhandene Systeme: Farbsysteme, Abstandstoken und Typografieskalen (aus fluid-spacing-system und fluid-typography-system).

Ausgaben

1. Suchauslöser-Spezifikation: Visuelle Definitionen für die Suchleiste (statisch, erweiterbar oder nur-Symbol).
2. Autocomplete-Anatomie: Gestaltung des Vorschlags-Dropdowns, einschließlich Kategorien, Bilder und Tastaturzustände.
3. SERP-Layout-Blueprint: Räumliche Organisation der Ergebnisseite, die Metadatendichte und Lesbarkeit ausbalanciert.
4. Mobile Interaktionskarte: Ein Plan dafür, wie die Suche von einem Kopfzeilensymbol zu einer Vollbild-Fokusschnittstelle übergeht.

Arbeitsablauf

1. Das Suchauslöser-Pattern definieren

Wählen Sie einen Auslöser basierend auf seiner Bedeutung für die Nutzerreise:

• Die persistente Leiste: Immer sichtbar, kontrastreiches Eingabefeld. Am besten für E-Commerce oder suchprimäre Websites.
• Das erweiterbare Eingabefeld: Beginnt als Symbol oder kleine Leiste und erweitert sich beim Klicken. Am besten für Websites, auf denen die Suche der Navigation untergeordnet ist.
• Der „Command + K“-Auslöser: Ein subtiler Hinweis oder ein Symbol, das ein Modal öffnet. Am besten für Power-User-SaaS-Tools oder Dokumentationen.

2. Das Autocomplete (Sofort)-Erlebnis gestalten

Reduzieren Sie die „Distanz zum Ergebnis“, indem Sie sofortiges Feedback geben:

• Kategorisierung: Gruppieren Sie Ergebnisse nach Typ (z. B. Produkte, Artikel, Hilfe).
• Rich-Metadaten: Fügen Sie kleine Vorschaubilder, Preise oder Statusabzeichen im Dropdown ein.
• Fokussierter Zustand: Verwenden Sie interactive-state-system, um die aktuell ausgewählte Vorschlag für Tastaturnutzer klar hervorzuheben.
• ARIA-Pattern: Modellieren Sie die Eingabe/Listenfeld-Beziehung nach dem ARIA-APG-Combobox-Pattern (role="combobox" mit aria-expanded, aria-controls und aria-activedescendant, das auf das hervorgehobene role="option" zeigt), anstatt ein benutzerdefiniertes Interaktionsmodell zu erfinden.

3. Die Ergebnisseiten-Hierarchie (SERP) festlegen

Wenden Sie visual-hierarchy-system auf die Suchergebnisse an:

• Der „Abfrage-Echo“: Zeigen Sie den Suchbegriff des Benutzers prominent an, um den Kontext zu bestätigen.
• Ergebniskarten: Verwenden Sie card-ui-system, um das Ergebnisformat zu standardisieren.
• Metadaten-Gewichtung: Stellen Sie sicher, dass Titel am prominentesten sind, gefolgt vom „Snippet“ (dem Teil des Inhalts, der mit der Abfrage übereinstimmt).

4. Die mobile Erkennungsschicht aufbauen

Suche auf Mobilgeräten ist ein eigener Modus, kein Widget:

• Der Moduswechsel: Tippen auf die Suche sollte ein Vollbild-Overlay öffnen, um Hintergrundablenkungen zu entfernen.
• Auto-Fokus: Fokussieren Sie die Eingabe automatisch und lösen Sie die Tastatur aus.
• Die „Daumen-Zonen“-Aktion: Platzieren Sie eine „Löschen“- und „Abbrechen“-Schaltfläche in Reichweite (mind. 44x44px).

5. Lade- und Leerzustände definieren

• Skelett-Ergebnisse: Verwenden Sie skeleton-state-system, um die Layout-Stabilität während des Ladens von Ergebnissen zu wahren.
• Intelligente Keine-Ergebnisse: Verwenden Sie empty-state-system, um alternative Wege zu bieten, wenn keine genauen Übereinstimmungen gefunden werden.

Entscheidungsregeln

• Die Sichtbarkeitsregel: Wenn die Suche von >30% Ihrer Zielgruppe verwendet wird, muss es sich um eine persistente, vollbreite Leiste auf dem Desktop handeln.
• Das „Drei-Wort“-Minimum: Beginnen Sie nicht mit der Anzeige von Autovervollständigungsvorschlägen, bevor der Benutzer mindestens 3 Zeichen eingegeben hat (um visuelles Springen zu verhindern).
• Die Ergebnisbegrenzung: Begrenzen Sie Autocomplete-Vorschläge auf 5–8 Elemente. Wenn mehr vorhanden sind, geben Sie einen Link „Alle Ergebnisse für '...' anzeigen“.
• Informationsspur: Heben Sie die übereinstimmenden Begriffe im Suchergebnis-Snippet fett hervor, damit Benutzer schnell nach Relevanz scannen können.

Einschränkungen

• Barrierefreiheit: Das Sucheingabefeld muss ein sichtbares Label (oder aria-label) haben. Tastaturnutzer müssen in der Lage sein, die Autocomplete-Liste mit Pfeiltasten zu navigieren, mit Enter auszuwählen und mit Escape zu schließen, ohne ihre eingegebene Abfrage zu verlieren. Alle interaktiven Ziele (Löschschaltfläche, Vorschlagszeilen) müssen die WCAG 2.2 Mindestzielgröße von 24x24px (2.5.8) erfüllen.
• Responsivität: Autocomplete-Dropdowns dürfen niemals die Viewport-Breite überschreiten.
• Kontrast: Die Hervorhebung von übereinstimmendem Text muss die WCAG-AA-Kontrastverhältnisse erfüllen (normalerweise durch eine Hintergrundfarbverschiebung oder Fettschrift).

Häufige Fehlermuster

• Die „versteckte Suche“: Benutzer dazu zwingen, nach einem Lupensymbol zu suchen, wenn die Suche die primäre Art der Navigation ist.
• Das „abgekoppelte“ Dropdown: Autocomplete-Menüs, die nicht der Breite oder Ausrichtung der Eingabe entsprechen und so ein visuelles „Schweben“ erzeugen.
• Tastaturfalle: Benutzern nicht erlauben, das Such-Overlay oder Dropdown mit der Escape-Taste zu verlassen.
• Sackgassen-Ergebnisse: Den Suchbegriff im Eingabefeld auf der Ergebnisseite nicht beibehalten, sodass der Benutzer ihn erneut eingeben muss, wenn er verfeinern möchte.

Validierungskriterien

• Der Sucheinstiegspunkt ist innerhalb von 2 Sekunden nach dem Scannen der Seite sichtbar.
• Das Autocomplete-Dropdown enthält wo angemessen Rich-Metadaten (Bilder/Beschriftungen).
• Die Tastaturnavigation (Pfeiltasten, Enter, Escape) ist für die Suche vollständig definiert und folgt dem ARIA-APG-Combobox-Pattern.
• Die Mobilsuche öffnet einen Vollbildmodus mit sofortigem Tastaturfokus.
• Die Suchergebnisseite gibt die Abfrage wieder und hebt übereinstimmende Begriffe hervor.
• Skelett-Zustände werden für das Laden von Ergebnissen verwendet.
• Alle interaktiven Elemente erfüllen die Mindestgröße von 44x44px für Touch-Ziele.