HOW TO: Onsite Search Usability-Guidelines für ein beispielloses Sucherlebnis

Aktualisiert am 16.01.2023
Lesezeit ca. Min.

Die Onsite Suchfunktion zählt zu den zentralen Funktionen jedes renommierten Online-Shops und entspricht dem wichtigsten Sprachkanal zu Kunden. Hinter einer Suchfunktion stecken nicht nur intelligente Algorithmen, sondern auch eine Vielfalt an Usability-Entscheidungen, die über Erfolg bzw. Misserfolg im Kampf um Kunden entscheiden.

Im Folgenden findest du Best Practices der wichtigsten Kriterien, übersichtlich aufgeteilt in vier Kategorien.

Darstellung des Suchfeldes

Bereits Design und Form der Suchfunktion beeinflussen das Verhalten der User. Ein gut gestaltetes Suchfeld inklusive eines durchdachten Platzhaltertextes setzt daher bereits vor der ersten Eingabe die richtigen Erwartungen und optimiert das Handling.

Design und Form der Suchfunktion

Aus mehreren Usertests geht hervor: je präsenter das Suchfeld auf der Website platziert ist, desto eher fühlen sich User dazu ermutigt, mit der Suche zu interagieren. Die Gestaltung des Suchfelds hängt dabei maßgeblich von den folgenden drei Faktoren ab:

  • Position: Das Suchfeld kann für eine dezente Darstellung etwa auf Höhe der Navigation oder für eine prominente Darstellung mittig im Header platziert werden.
  • Stil: Der Stil des Suchfeldes kann von mehreren Elementen wie beispielsweise Rahmen, Farbe, Schriftart und -größe, Icons etc. beeinflusst werden.
  • Größe: Die Größe der Suchfunktion spiegelt die bevorzugte Variante der Produktfindung wider.

Präsente Darstellung der Suchanfrage

Im Durchschnitt verändern User drei- bis fünfmal die ursprüngliche Suchanfrage, um das gewünschte Ergebnis zu erreichen. Wird die Suchanfrage beim Suchvorgang im Suchfeld gelöscht, zwingt man den User, bei jeder Iteration die Suchanfrage völlig neu einzugeben, was die Dauer des gesamten Such-Zyklus deutlich verlängert. Zusätzlich wird die redundante Eingabe eines Suchbegriffes innerhalb eines kurzen Zeitraums von Usern als sehr störend empfunden.

Platzhaltertexte im Suchfeld

Für den Fall, dass Usern weder der Name noch die Kategorie des gesuchten Produktes bekannt ist, sollte die Suchfunktion auf die Eingabe von alternativen Lösungsansätzen hinweisen. Einen bewährten Weg stellen statische Platzhaltertexte im Suchfeld (“Suche nach Produkten, Marken, Kategorien oder Themen”) dar.

Gestaltung einer Bereichsauswahl

Für Händler mit einem umfangreichen und vielfältigen Produktkatalog kann eine Bereichsauswahl die Genauigkeit der Suche erhöhen. Dabei sollte sich die Bereichsauswahl  visuell dem Suchfeld unterordnen, aber möglichst nahe neben dem Suchfeld platziert werden. In der Umsetzung hat sich ein Drop-down-Menü zur Selektion der Bereichsauswahl bewährt.

Filter und Sortierung bei erneuter Suchanfrage löschen

Das Suchergebnis wird meist durch das Aktivieren von Filtern oder das Ändern der Sortierung beeinflusst. Dabei kann es vorkommen, dass User sich in eine Sackgasse manövrieren und mit der Ergebnismenge nicht zufrieden sind. Beim erneuten Absenden der Suchanfrage sollte daher der Ausgangszustand wiederhergestellt werden.

Autocomplete

Die Autocomplete-Funktion ist ein essentieller Bestandteil einer guten Suchfunktion und ein entscheidender Faktor für eine optimal geführte Customer Journey. Das Ziel muss sein, User ab der ersten Interaktion mit der Suchfunktion an die Hand zu nehmen. Eine gute Umsetzung unterstützt User im Rahmen einer Vorauswahl von häufigen Suchbegriffen und Produkten, hilft bei der Vermeidung von Rechtschreibfehlern und bietet erste Inspirationen zu Produkten.

Unterstütze User mit Keyword-basierten Suchvorschlägen

Die Möglichkeit, innerhalb der Autocomplete-Funktion aus einer Liste von potenziellen Suchbegriffen zu wählen, zählt mittlerweile zum Goldstandard eines jeden Online-Shops. Hierbei ist es wichtig, zwischen Suchvorschlägen (führen zu einem Produktlisting) und Produktvorschlägen (führen direkt auf eine Produktdetailseite) zu unterscheiden. Sind Suchvorschläge nicht verfügbar, fehlt den Usern Unterstützung und Inspiration bei der Formulierung der Suchanfrage. Manche User fühlen sich unsicher, wenn sie bei Eingabe der Anfrage nicht sofort durch bekannte Stichwortvorschläge unterstützt werden.

Design der Autocomplete-Funktion

In zahlreichen User-Tests haben sich eine Reihe von Best Practices ergeben, die bei der Gestaltung berücksichtigt werden sollten, um User bestmöglich zu guiden.

  • Halte die Menge an Suchvorschlägen überschaubar: Die Anzahl der dargestellten Suchvorschläge für Desktop sollte bewusst limitiert werden. Eine zu große Auswahl (mehr als zehn) an möglichen Suchvorschlägen wirkt für den User abschreckend.
  • Nutze Labels zur besseren Abgrenzung und Lesbarkeit: Füge der Autocomplete-Funktion klärende Bezeichnungen hinzu, um zwischen den verschiedenen Suchhilfen wie Suchvorschlägen, Produktvorschlägen, Kategorien oder Trending Results zu unterscheiden.
  • Hebe die aktuell gewählte Auswahl hervor: Gib Usern ein klares visuelles Feedback in der Autocomplete-Funktion, welcher Vorschlag aktuell aktiv ist.

Einschränkung auf Suche in Kategorien

Im Vergleich zur Suche eines Begriffes im gesamten Produktkatalog kann die Vorauswahl auf eine gewisse Kategorie zu besseren und relevanteren Ergebnissen führen. Frauen möchten bei einer Suche nach “Schuhen” auch nur Damenschuhe als Ergebnisse erhalten und demnach Herren- und Kinderschuhe im Vorhinein ausschließen.

Trennung von Suchvorschlägen und Produkten

Gruppiere beide Varianten in unterschiedliche Sektionen in der Autocomplete-Funktion mit eigenem Header und biete eine klare visuelle Differenzierung. Vor allem auf mobilen Endgeräten gilt die Empfehlung, Suchvorschläge gegenüber Produktvorschlägen zu priorisieren. Auf Desktop hingegen existiert mehr Spielraum hinsichtlich Gestaltung und Anordnung.

onsite search best practices Screenshot Delife

Redundante und irrelevante Suchvorschläge vermeiden

Redundante Begriffe führen zu einer schlechten Nutzererfahrung, da User entweder zu wiederholten Eingaben gezwungen werden, relevante Suchvorschläge nicht wahrnehmen oder direkt auf die Navigation zurückgreifen.

  • “Dead Ends”: “Dead Ends” beschreiben sowohl Vorschläge, die das exakt selbe Ergebnis liefern, das gerade angezeigt wird, als auch vorgeschlagene Begriffe, die zu einer “No-Result” Seite führen. “Dead Ends” treten meist dann auf, wenn Suchvorschläge rein auf dem Suchverhalten vergangener User basieren oder der zugrundeliegende Produktkatalog/Datenfeed nicht regelmäßig aktualisiert wird.
  • Semantisch repetitiv: Viele Webseiten bieten Suchvorschläge mit der grundsätzlich selben Bedeutung, welche sich nur durch nominale Unterschiede (wie Singular/Plural, mit oder ohne Satzzeichen, Großschreibung, Symbole) oder Synonyme abgrenzen und daher immer dasselbe Ergebnis liefern.

Um die Qualität der Suchvorschläge zu steigern, sollten zusätzliche Faktoren wie die Ergebnismenge oder Conversion Rate in die Generierung miteinbezogen werden – immer unter der Berücksichtigung, dass diese Faktoren regelmäßig aktualisiert werden.

Schnelle Darstellung der Such- und Produktvorschläge

Die Optimierung von Scripts und deren Ladegeschwindigkeit ist in den meisten Fällen eine rein technische Herausforderung. Es gilt der Grundsatz: je schneller, desto besser. Die Antwortzeit sollte 100 Millisekunden in full response nicht überschreiten. Auch wenn die Ladezeit der Autocomplete-Funktion immer variieren wird, muss das Ziel sein, dem User ein konsistentes Verhalten zu bieten.

Suchergebnisseite

Während Suchlogik und Autocomplete-Funktion maßgeblich die Qualität der Suchergebnisse beeinflussen, bestimmt die Struktur einer Suchergebnisseite, ob Nutzer mit der Ergebnismenge auch wirklich umgehen können. User interagieren in den verschiedensten Phasen der Customer Journey mit der Suchfunktion. Gerade in frühen Phasen des Kaufentscheidungsprozesses benötigt der Nutzer die Möglichkeit, Suchergebnisse zu sortieren und zu filtern, um zum gewünschten Produkt zu gelangen.

Bietet die Suchergebnisseite zu wenig Information zu den dargestellten Produkten, wird der User häufig zum sogenannten “Pogo-Sticking” (dem Hin- und Herspringen zwischen Suchergebnisseite und Produktdetailseite) gezwungen, was ein sowohl zeitaufwändiges als auch frustrierendes Erlebnis darstellt. Neben dem Layout sind auch Sortier- und Filterlogiken elementar für ein ausgewogenes Sucherlebnis und sollten im Rahmen einer durchdachten Digital-Strategie berücksichtigt werden.

Summe der Ergebnisse anzeigen

Die meisten User beurteilen die Qualität der Suchanfrage anhand der Anzahl der Ergebnisse, um anschließend zu entscheiden, ob die Ergebnisse noch weiter verfeinert werden müssen. Daher ist es besonders wichtig, die Anzahl der Ergebnisse auf den ersten Blick deutlich erkennbar zu machen.

Layout der Suchergebnisseite

Beim Layout kann auf zwei Varianten zurückgegriffen werden – Listenansicht vs. Rasteransicht. Die Performance der Suchergebnisse in einer Listenansicht versus einer Rasteransicht ist dabei maßgeblich abhängig von den darin dargestellten Produktgruppen:

  • Spec-driven Products: Hierzu zählen Produkte mit höherer Informationsdichte, bei welchen mehrere Merkmale ausschlaggebend für Auswahl und Selektion sind. Beispiele hierfür sind Produkte aus den Kategorien Elektronik, Haushaltsgeräte, B2B oder z. B. Werkzeug.
onsite search best practices Screenshot Fairtoner

Zur Darstellung von Produkten dieser Kategorie bietet eine Listenansicht den Vorteil, direkt mehr Information darzustellen und so eine Vergleichbarkeit der Produkte zu bieten, ohne jeweils zur Produktdetailseite wechseln zu müssen.

  • Visually-driven Products: Das Aussehen und die Ästhetik stehen hier im Vordergrund. Typisch sind Produkte aus den Bereichen Mode oder Home & Living. Bei visuellen Produkten zeigt sich eine Darstellung im Raster als vorteilhaft, da User in erster Linie das Produktbild im Fokus haben und erst danach das Produkt auf andere Attribute prüfen.
onsite search best practices Screenshot mavi

Im Falle eines gemischten Produktsortiments gilt die Prämisse, beide Ansichten umzusetzen und diese dynamisch auszuspielen bzw. dem User selbst die Möglichkeit eines View-Wechsels zu bieten.

Korrekte Variantendarstellung

Ein häufig auftauchender Use-Case in den Kategorien Mode oder Home & Living ist die Kombination von Suchbegriff mit bevorzugten Farben, Marken oder Materialien. Wird als Beispiel nach einem “weißen T-Shirt” gesucht, erwarten Nutzer im Suchergebnis auch “weiße T-Shirts”. Ist ein T-Shirt demnach in mehreren Farbvarianten verfügbar, sollte in der Ergebnismenge zuerst die passende Variante “weiß” angezeigt werden.

Facettierte Suche

Um 2021 ein zeitgemäßes Sucherlebnis zu gewährleisten, ist es nicht mehr ausreichend, statische Filteroptionen auf Kategorien oder Attribute wie Preis, Marke oder Verfügbarkeit zu beschränken. Alle verfügbaren Filter müssen aus der Suchanfrage des Users resultieren. Während normalerweise eine Kategorie gewählt werden muss, um passende Filter dargestellt zu bekommen, bietet eine facettierte Suche diese Filter ohne vorher getätigte Kategorieauswahl.

Der wichtigste Vorteil der facettierten Suche besteht nicht nur darin, dem User Klicks bis zum gewünschten Ergebnis zu ersparen, sondern Filter zu jenem Zeitpunkt zur Verfügung zu stellen, zu welchem diese auch wirklich kundenseitig benötigt werden.

Filterung von Zubehör-Produkten

Suchergebnisse werden oft mit Produktzubehör geflutet, wodurch es für den User je nach Ergebnismenge noch schwieriger wird, relevante Produkte ausfindig zu machen. Gerade bei einer Sortierung nach “günstige Produkte zuerst” muss zuerst durch eine Liste von nicht relevantem Produktzubehör gescrollt werden. Dem Nutzer sollte daher die Möglichkeit geboten werden, Produktzubehör aus den Suchergebnissen per Filteroption auszuschließen.

Suchlogik und Guidance

Nicht immer ist es möglich, die passenden Ergebnisse zu liefern. Es wird vorkommen, dass der Händler das gewünschte Produkt nicht im Sortiment führt oder der Intent des Nutzers nicht korrekt erfasst wird. Der Fokus sollte daher auf einer benutzerfreundlichen Such-Iteration liegen, damit User auch im Falle einer vermeintlich fehlerhaften Anfrage die nötige Unterstützung erhalten. Hierzu zählt die Ausspielung alternativer Suchvorschläge, Fehlerkorrektur und der Umgang mit Suchanfragen, welche keine Ergebnisse liefern.

Autokorrektur von offensichtlichen Rechtschreibfehlern

Rechtschreibfehler treten im Eifer des Gefechts immer wieder auf. Den User im Falle einer klar fehlerhaften Schreibweise aufzufordern, die Suchanfrage zu verbessern, ist ein unnötiger Schritt. Vor allem, wenn die fehlerhafte Schreibweise zu einer leeren Ergebnismenge und daher auf eine “No-Result”-Seite führt.

Unabhängig des Anwendungsfalls trägt die Autokorrektur der Suchfunktion maßgeblich zu einer nahtlosen Sucherfahrung bei. Nutzer müssen ohne zusätzliche Interaktion automatisch zum gewünschten Ergebnis geführt werden. Essentiell hierbei ist, den User transparent zu führen, ihn über die Logiken im Hintergrund transparent zu informieren und somit direkt anzusprechen.

onsite search best practices Screenshot Riess-Ambiente

Bedeutung einer optimierten “No-result”-Seite

Nicht immer ist es möglich, für jeden Suchbegriff auch passende Ergebnisse darzustellen. Gerade in Fällen, wo keine Ergebnisse gefunden werden, hat es hohe Priorität, den User nicht im Stich zu lassen, sondern im besten Fall zu überraschen und neue Anreize zu setzen.

Was macht eine gute “No-result”-Seite demnach aus?

  • Alternative Suchvorschläge: Werden verwandte Suchvorschläge gefunden, sollten diese dem Nutzer auch angeboten werden. Eine Möglichkeit wäre z. B. die Darstellung des Suchvorschlags in Kombination mit enthaltenen Produkten, um dem User einen ersten Eindruck der Ergebnisse zu vermitteln.
  • Personalisierte Empfehlungen: Produktempfehlungen basierend auf dem bisherigen Browsing- und Einkaufsverhalten des Nutzers helfen dem User vielleicht nicht zwingend, das gesuchte Produkt zu finden, stellen aber ein wirksames Mittel dar, die Aufmerksamkeit auf interessante Inhalte zu lenken, um den potentiellen Kunden auf der Seite zu halten.
  • Kontaktmöglichkeit: Renommierte Online-Shops bieten mehrere Möglichkeiten zur Kontaktaufnahme, etwa Telefonsupport oder Live Chat.
  • Kategorie-Vorschläge und beliebte Produkte: Die Darstellung von Kategorien ist eine gute Option, User wieder zurück in die richtige Spur zu lenken. Idealerweise passen die vorgeschlagenen Kategorien zum eingegebenen Suchbegriff. Als letzte Alternative bietet sich auch eine Darstellung der beliebtesten Produkte an. Diese Inhalte weisen zwar keinerlei Relevanz in Verbindung mit dem Suchbegriff auf, motivieren den Nutzer aber, “Top Seller” oder “Best Rated Products” in Erwägung zu ziehen.

Saisonalität als zusätzlicher Ranking-Faktor

Einige Shops führen saisonabhängige Produkte, deren Relevanz immer auf einen abgesteckten Zeitraum beschränkt ist. Diese Saisonalität sollte daher auch in den Suchergebnissen berücksichtigt werden. Demnach sollten Produkte, die aktuell Saison haben, höher gerankt werden und umgekehrt Produkte mit geringerer saisonaler Relevanz niedriger ranken.

Weiterleitung auf Navigationsseiten bei generischen Suchanfragen

Wirf einen Blick auf die meistgesuchten Begriffe deiner User. Du wirst feststellen, dass User häufig mit einer generischen Suche nach Kategorien oder Marken die Journey beginnen. Die Anzahl der Ergebnisse variiert in den allermeisten Fällen zwischen der Nutzung der Suchfunktion und der Navigation über Kategorie- oder Markenseiten.

Im Fall einer exakten Übereinstimmung zwischen Suchbegriff und gegebener Kategorie oder gelisteter Marke sollte demnach direkt auf die optimierte Landingpage verlinkt werden, um zusätzlich von Vorteilen wie bildstarken Content-Welten, klarer Navigation durch die Sub-Kategorien oder kontextbezogenen Produktfiltern zu profitieren.

Weitere Artikel