HOW TO: Onsite Search – Autocomplete (2/4)
Die Onsite Suchfunktion zählt zu den zentralen Funktionen einer E-Commerce Plattform und entspricht dem wichtigsten Sprachkanal zu Ihren Kunden. Hinter der, auf dem ersten Blick manchmal unscheinbaren, Suchfunktion steht nicht nur intelligente Technologie sondern auch eine Vielfalt an Logik- und Design-Entscheidungen, die über Erfolg, bzw. Misserfolg einer Suchfunktion entscheiden. Im Rahmen dieser vierteiligen Artikelreihe möchten wir Ihnen Guidelines und Konzepte an die Hand geben, um auch Ihre Nutzer mit einem genialen Sucherlebnis zu begeistern.
- Part 1 – Suchfeld
- Part 2 – Autocomplete
- Part 3 – Suchergebnis-Seite
- Part 4 – Suchlogik und Unterstützung
HOW TO: Onsite Search
Autocomplete (Part 2/4)
Im zweiten Teil der “HOW TO: Onsite Search“ Reihe beschäftigen wir uns mit dem Thema Autocomplete und Vorschlagsfunktion. Die Autocomplete ist ein essentieller Bestandteil einer guten Suchfunktion und entscheidender Faktor für eine bestmögliche Customer Experience. Dabei ist das Ziel in erster Linie nicht zwingend eine Beschleunigung des Suchprozesses, sondern die Nutzer in Ihrer Suche zu unterstützen und an die Hand zu nehmen. Eine gute Umsetzung unterstützt Nutzer bei der Auswahl der möglichen Suchbegriffe, hilft bei der Vermeidung von Rechtschreibfehler und bietet Inspiration im Rahmen der Customer Journey.
Die Autocomplete ist in den letzten Jahren ein fixer Bestandteil in der Optimierung geworden Aufgrund der massiven Einflüsse Google und Amazon haben Nutzer eine konkrete Vorstellung, wie diese funktionieren und gestaltet sein soll, deren Fähigkeiten zur effektiven Suche ist jedoch sehr schwach ausgeprägt. Laut einer Studie der Nielsen Norman Group ist nur etwa 1% der Nutzer in der Lage, ihre Suchstrategie anzupassen, um effektive Suchergebnisse zu erhalten. Eine gut durchdachte Autocomplete kann die Nutzer dabei effektiv unterstützen.
Da die Autocomplete einen direkten Einfluss auf die Art und Weise des Umgangs mit der Suchfunktion hat, richtet eine schlecht geplante Implementierung meist mehr Schaden als Nutzen an. Die Qualität und Relevanz der Vorschläge sollte daher ebenso ernst genommen werden wie die Qualität und Relevanz der Suchergebnisse selbst. Aus diesem Grund stellen wir Ihnen im Folgenden klare Guidelines zur Umsetzung einer Best-Practise Autocomplete vor.
Hinweis: Das Thema Autocomplete kann im Internet auch unter verschiedenen Synonymen wie Smart Suggest, Suggest-Funktion, Autosuggest, Query Suggestions, Flyout, Flapout usw. gefunden werden. Um den Leser nicht zu verwirren, verwenden wir im Folgenden einheitlich den Begriff Autocomplete.
1. Unterstützen Sie Ihre Nutzer mit keyword-basierten Suchvorschlägen
Die Möglichkeit innerhalb der Autocomplete aus einer Liste von potenziellen Suchbegriffen zu wählen zählt mittlerweile zu den “Golden Standards” und sollte in allen Online-Shops gegeben sein. Dabei ist es jedoch wichtig zwischen vorgeschlagenen Suchbegriffen → führen zu einem Produktlisting und vorgeschlagenen Produkten → führen direkt auf eine Produktdetailseite, zu unterscheiden. Sind diese Suchvorschläge nicht verfügbar fehlt den Nutzern Unterstützung bei der Formulierung Ihrer Suchanfrage. Manchen Nutzer fühlen sich unsicher, wenn Sie bei Eingabe Ihrer Suchanfrage nicht sofort durch bekannte Suchvorschläge unterstützt werden. In der Folge kann dies zu einem Abbruch der Suche und alternativ zur Verwendung der Navigation führen.
Der Fokus der Autocomplete sollte daher auch auf der prominenten Platzierung der Suchvorschläge liegen. Manche Online-Shops priorisieren die Darstellung von Produkt-, Kategorien- oder Marken-Vorschlägen, wodurch Suchvorschlägen der Fokus genommen wird.
Transfer aus der Praxis: Stellen Sie sich vor Sie gehen in eine Filiale und fragen Ihre Verkäuferin des Vertrauens nach einer “Winterjacke”. Dann möchten Sie auch zur richtigen Abteilung geführt werden und nicht direkt den “schwarzen Parka mit Fellkapuze in Größe M” oder nur Winterjacken der Marke XY präsentiert bekommen.
2. Design der Autocomplete
Grundsätzlich lässt sich sagen, dass es kein ultimatives Template zur Gestaltung einer Autocomplete gibt. In zahlreichen User-Tests haben sich jedoch eine Reihe von Best-Practices ergeben, die bei der Gestaltung berücksichtigt werden sollten, um Ihre User bestmöglich abzuholen.
- Halten Sie die Menge an Suchvorschlägen überschaubar
Die Anzahl der dargestellten Suchvorschläge für Desktop sollte bewusst limitiert werden. Eine zu große Auswahl an möglichen Suchvorschlägen wirkt für den Nutzer eher abschreckend. Die Anzahl sollte daher auf maximal 10 Vorschläge begrenzt werden.
Dasselbe gilt, aufgrund des begrenzten Platzangebotes, auch für mobile Endgeräte. Tipp: Mobile wählen Nutzer meist aus den ersten drei Suchvorschlägen!
- Gestalten Sie Ihre Autocomplete aus Nutzersicht
Ihre Nutzer sollten klar zwischen den Suchvorschlägen und zusätzlichen Datenpunkten unterscheiden können. Jeder alternative Datenpunkt, wie etwa die Kategoriesuche (“Suche X in Kategorie Y”) oder die Anzahl der Ergebnisse, sollte sich im Design (Schriftart, -farbe, etc.) von den Suchvorschlägen abheben.
- Nutzen Sie Labels zur besseren Abgrenzung und Lesbarkeit
Fügen Sie Ihrer Autocomplete klärende Bezeichnungen hinzu, um zwischen den verschiedenen Möglichkeiten, wie Suchvorschläge, Produktvorschläge, Kategorie oder Trending Results unterscheiden zu können.
Labels trennen klar zwischen Suchvorschlägen. passenden Produkten und Kategorien
- Heben Sie die aktuell gewählte Auswahl hervor
Geben Sie Ihren Nutzern ein klares visuelles Feedback, welcher Vorschlag aktuell aktiv ist, egal ob der Nutzer mit der Maus über diesen hovert, oder er mit der Tastatur durch die Ergebnisse navigiert.
Der aktuell ausgewählte Suchvorschlag wird durch dunklen Hintergrund klar hervorgehoben.
- Die geöffnete Autocomplete sollte sich vom Rest der Website abheben
Verdunkeln Sie den restlichen Teil der Website, wenn Suchfunktion und Autocomplete aktiv sind, um die Aufmerksamkeit der Nutzer bewusst auf die Suchfunktion zu legen.
3. Ergänzen Sie die Möglichkeit der Suche in Kategorien
Im Vergleich zur Suche eines Begriffes im gesamten Produktkatalog, kann die Vorauswahl auf eine gewisse Kategorie zu besseren und relevanten Ergebnissen führen. Als Frau möchten sie in den meisten Fällen bei einer Suche nach “Schuhen” auch nur Damenschuhe als Ergebnisse erhalten und demnach Herren- und Kinderschuhe im Vorhinein ausschließen. Um an dieser Stelle noch einmal auf Punkt 2 zurückzugreifen: Dem Nutzer soll zu jeder Zeit erkenntlich sein, dass es sich um eine Bereichssuche handelt. Daher sollte sich diese auch visuell von einer Suche des gesamten Produktkataloges abheben.
Die Möglichkeit der Bereichssuche wird vor allem gerne im Bereich Fashion genutzt (z.B.: Herren, Damen, Kinder) oder wenn dem Suchbegriff ein konkreter Nutzungskontext zugeordnet werden kann (z.B.: “Tücher” in “Heimtextilien”, “Küchenzubehör”).
4. Klare Trennung von Suchvorschlägen und Produktvorschlägen
Es ist wichtig in der Autocomplete eine klare Trennung zwischen Such- und Produktvorschlägen herzustellen, da es sich hierbei um unterschiedliche Funktionen handelt. Während der Klick auf einen Suchvorschlag den Nutzer auf ein Produktlisting basierend auf dem gewählten Suchbegriff leitet, führen Klicks auf Produktvorschläge hingegen direkt auf die jeweilige Produktdetailseite. Gruppieren Sie beide Varianten am besten in unterschiedliche Sektionen mit eigenem Header und bieten Sie Ihren Usern klare visuelle Unterscheidbarkeit. Vor allem auf mobilen Endgeräten sollten für 90% aller Anwendungsfälle Suchvorschläge gegenüber Produktvorschlägen priorisiert werden. Auf Desktop hingegen steht mehr Spielraum zur Gestaltung und Anordnung zur Verfügung. Auch über das Größenverhältnis und die Anordnung von Thumbnails sollte sich Gedanken gemacht werden. Produktbilder helfen dem User einen ersten Eindruck vom dargestellten Produkt zu gewinnen. Unverhältnismäßig groß definierte Produktbilder jedoch lenken die Aufmerksamkeit zu stark auf die vorgeschlagenen Produkte.
Der Nutzer kann auf den ersten Blick klar zwischen Such- und Produktvorschlägen unterscheiden.
Seien Sie sich also bewusst, dass der Nutzen von Suchvorschlägen deutlich höher ist, vor allem in den frühen Phasen des Kaufprozesses und berücksichtigen Sie dies in der Gestaltung der Autocomplete.
5. Nutzung der Tastatur zur Navigation
Was sich auf den ersten Blick banal anhört, ist ein nicht zu unterschätzender Faktor im Umgang mit der Autocomplete. Durch Google sind wir es gewohnt die Tastatur zur Navigation in der Autocomplete zu verwenden und stellen diese Anforderung daher auch an moderne Online-Shops. Neben der Navigation mittels Pfeiltasten gibt es ein paar einfache Grundsätze, die berücksichtigt werden sollten. Zum Beispiel sollte der erste Suchvorschlag nicht automatisch selektiert werden.
Wird ein Suchvorschlag selektiert, sollte dieser auch ins Suchfeld kopiert werden. Beginnt der Nutzer wieder zu tippen, so sollten die Zeichen an den neuen Suchtext angehängt werden, ohne dass der Nutzer zuerst wieder per Klick den Fokus auf das Suchfeld legen muss.
6. Vermeiden Sie redundante und irrelevante Suchvorschläge
Obwohl redundante und irrelevante Suchvorschläge wohl zu keinem Zeitpunkt beabsichtigt werden, treten diese sehr häufig auf. Benchmarks der größten Online-Shops in UK under der USA zeigten, dass etwa 30% der getesteten Online-Shops mit dieser Herausforderung beschäftigt sind. Unabhängig von der gewählten Methodik zur Erstellung der Suchvorschläge, führen redundante Begriffe zu einer schlechten Nutzererfahrung, da Nutzer entweder zu wiederholten Eingaben gezwungen werden, relevante Suchvorschläge nicht wahrnehmen oder Nutzer direkt auf die Navigation zurückgreifen. Die folgenden Liste soll Ihnen dabei helfen überflüssige Vorschläge zu identifizieren und zu vermeiden:- “Dead Ends”
- Semantisch Repetitiv
- Duplikate
7. Schnelle Darstellung der Such- und Produktvorschläge
Der Umgang mit der Suchfunktion und der Autocomplete kann für den Nutzer eine große Herausforderung darstellen, wenn das Ladeverhalten inkonsistent und zu langsam ist. Die Autocomplete sollte sofort auf Eingaben der Nutzer reagieren und passende Vorschläge liefern. Verzögerungen stellen ein frustrierendes Erlebnis für den Anwender dar.
Die Optimierung von Scripts & deren Ladegeschwindigkeit ist in den meisten Fällen eine rein technische Herausforderung. Es gilt die Netzwerklatenz zu senken, sowie weitere mögliche Störfaktoren, die Verzögerungen führen können, zu eliminieren. Dabei steht der Grundsatz – je schneller, desto besser. Die Antwortzeit sollte 500ms in full response nicht überschreiten. Auch wenn die Ladezeit der Autocomplete immer wieder etwas variieren wird, muss das Ziel sein, dem Nutzer ein konsistentes Verhalten zu bieten.
Gregor Sandberger
Gregor ist der Digital Marketing Specialist bei Findologic. Er sorgt für die Inbound-Leadgenerierung im Marketing um das Wachstum eines einzigartigen Produktes rund um Such- und Navigationstechnologie voranzutreiben.