Die Produktsuche auf Mobilgeräten:

Tipps für eine benutzerfreundliche Gestaltung von Suchfeld und Suggest-Funktion

Michael Wolf
Michael Wolf

Michael Wolf unterstützt als Geschäftsführer der Hamburger E-Commerce-Agentur TUDOCK seit zwölf Jahren mittelständische und große Händler bei der Analyse, Konzeption, Umsetzung, Entwicklung und dem Betrieb von Online-Shops und Marktplätzen. Neben der Produktsuche gehören das Produktdatenmanagement, das agile Projektmanagement und das Shopsystem Magento zu seinen Spezialgebieten. Seine Erfahrung teilt er auch in Vorträgen und Fachartikeln.
Magazins.

Mehr von diesem AutorArtikel als PDF laden

Für den E-Commerce hat die Recherche von Produktinformationen auf Mobilgeräten in den letzten Jahren enorm an Bedeutung gewonnen, auch eine Zunahme der Kaufabschlüsse ist zu beobachten. Erste Anlaufstelle im Online-Shop ist häufig die Suchfunktion, wobei der Nutzer auf dem Weg zum passenden Ergebnis zunächst die Sucheingabe per Smartphone & Co. bewältigen muss. Wie Shopbetreiber Online-Käufer bei der Sucheingabe unterstützen können, zeigt der Beitrag von Michael Wolf.

Navigation und Suche im Online-Shop

Shopbetreiber bieten Online-Käufern meist drei Möglichkeiten, um das Sortiment zu erkunden oder zu einem bestimmten Produkt zu finden:

  • Die Produktempfehlung mit Teasern und Kampagnen
  • Die Navigation über das Menü mit Kategorie und Unterkategorien, üblicherweise gegliedert nach Sortiment (Damen > Shirts und Blusen), Anwendungszweck (Innenbeleuchtung > Küche) oder Anlass (Ostern > Geschenke unter 25 EUR)
  • Den Einstieg über die Produktsuche

Während Shopbesucher sich von Teasern inspirieren lassen und das Kategoriemenü gerne verwenden, um zu stöbern, steckt hinter der Eingabe einer Suchanfrage besonders häufig eine gezielte Kaufabsicht. Dabei gewinnt die Suchfunktion an Bedeutung, je größer und heterogener das Sortiment ist. Amazon, bekannt für das immense Produktangebot, erhebt die Suche zur primären Navigationsoption, indem der Shop die Aufmerksamkeit des Nutzers durch ein besonders großes und zentral positioniertes Suchfeld auf die Produktsuche fokussiert. Steuert ein Online-Käufer eine Artikeldetailseite mit dem Smartphone an, fehlt das Kategoriemenü hier sogar gänzlich, während die Suche über das Lupensymbol im Header weiterhin präsent ist.

Doch auch in kleineren Shops hat die Suchfunktion an Bedeutung gewonnen, seit Google und Amazon zu Selbstverständlichkeiten bei der Kaufvorbereitung geworden sind; für die Produktrecherche finden mobile Endgeräte beim Online- und Offline-Shopping zunehmend Verwendung.

Info

38 % von gut 1.000 im April 2016 befragten Amerikanern starten ihren Online-Einkauf bei Amazon, 35 % benutzen eine Suchmaschine und 21 % besuchen zuerst eine Hersteller- oder andere Shop-Seite. Als Argument für den Start bei Amazon nennen 54 % die guten Suchmöglichkeiten („great search capabilities“).
Quelle: PowerReviews: „Mapping the Path to Purchase“ (2016)

Nicht nur bei Amazon prangt daher das Suchfeld auf der mobilen Startseite an Top-Position. Die Suche bietet bei wenig Display-Platz direkten und schnellen Zugriff auf das Sortiment – wohingegen der Nutzer das Menü beim Aufruf des Shops häufig erst ausklappen muss. Doch welche Voraussetzungen sollten erfüllt sein, damit Anwendern die Suche im Online-Shop möglichst leichtfällt?

Die Produktsuche benutzerfreundlich machen

Eine gute Suchfunktion zeichnet sich durch einfache Bedienung (Usability) und hohe Ergebnisqualität aus. Entscheidend für die Bedienung ist zum einen die optische Gestaltung des Suchfelds, zum anderen aber auch der Funktionsumfang der Suche: Suchvorschläge, Rechtschreibkorrektur/Fehlertoleranz und passende Filter sind im mobilen Kontext für die Unterstützung des Nutzers besonders relevant.

Das Suchfeld

Wichtig ist, dass das Suchfeld durch Eingabefeld und Button auf den ersten Blick als solches erkennbar ist und keine Verwechslungsgefahr mit anderen Seitenelementen, speziell anderen Eingabeboxen, besteht. Das Suchfeld sollte auf der Startseite des Shops außerhalb des (eingeklappten) Hauptmenüs, aber trotzdem im primären Sichtfeld platziert und sofort benutzbar sein. Ein ausgegrauter Kurztext im Suchfeld (beispielsweise „Suchbegriff/Artikelnr. eingeben“) verdeutlicht dessen Funktion, muss aber verschwinden, wenn der Nutzer mit der Sucheingabe beginnt. Auf den Unterseiten des Shops hat der Content Vorrang, hier können Sie den Zugriff auf die Suche über die klar erkennbare Lupe im Header anbieten, üblich und somit erwartungskonform ist die Platzierung neben den Links zu Warenkorb und Kundenkonto. Dabei ist die optische Trennung des Suche-Icons zu weiteren Elementen wie dem Unternehmenslogo ratsam.

Auf der Nulltrefferseite sollten Sie zusätzlich zur Suche im Header das vollständige Suchfeld erneut im Hauptinhaltsbereich präsentieren, und zwar in direkter Nähe zur Nulltrefferbotschaft. Schließlich wollen Sie den Nutzer trotz seiner (vorerst) erfolglosen Suche zu einem weiteren Versuch, mindestens jedoch zum Verbleib im Shop animieren. Weitere Hilfestellungen können Suchtipps, Top-Suchbegriffe oder Hinweise auf Kategorien sein.

Achten Sie stets auf eine ausreichende Größe des Eingabefelds, auf Mobilgeräten sind 50 bis 80 Pixel Höhe für das Suchfeld und den Absende-Button ein guter Richtwert – damit der Klick auch mit dem Daumen gelingt. Das Auslösen der Suchanfrage sollte sowohl über den Absende-Button als auch über die Tastatur des Mobilgeräts möglich sein. Sorgen Sie außerdem dafür, dass die Autokorrekturfunktion bei der Sucheingabe deaktiviert ist; für den Umgang mit Tippfehlern und das Ausspielen relevanter Suchergebnisse trotz Abweichungen in der Schreibweise ist die Suchsoftware mit den Funktionen „Fehlertoleranz“ und „Synonyme“ zuständig. Verändert die Suche in solch einem Fall die Eingabe des Nutzers vor dem Suchlauf oder spielt nur ein Teilergebnis aus, gehört auf die Suchergebnisseite ein entsprechender Hinweis, mindestens jedoch die Information, wonach gesucht wurde.

Tipp

Wenn Sie möchten, dass Nutzer direkt von der Google-Suchergebnisseite Zugriff auf die Produktsuche Ihres Online-Shops haben, implementieren Sie das von Google vorgegebene Markup „SearchAction“ mit der Eigenschaft „potentialAction“ auf der Startseite Ihres Online-Shops. Mehr dazu unter einfach.st/gwmc8

Die Suggestfunktion: Inspiration und Unterstützung für den (mobilen) Nutzer

Autocomplete, Autosuggest und Instant Results liefern dem Nutzer bereits während der Sucheingabe Such- und Ergebnisvorschläge. Während Autocomplete eine Buchstabenkombination zu Suchvorschlägen direkt im Suchfeld vervollständigt (beispielsweise „hos“ zu „Hosenanzug“), präsentiert die Suggestfunktion Vorschläge in einem Fenster unter dem Suchfeld passend zur eingetippten Buchstabenkombination. Hierbei werden entweder die Ergänzungen oder aber die eingetippten Buchstaben optisch hervorgehoben, denn die Sucheingabe befindet sich nicht zwangsläufig am Zeilenanfang (siehe Abbildung 8). Eine Trennung zwischen Autocomplete und Autosuggest ist heutzutage kaum noch üblich, gemeinsam sind sie im mobilen Kontext zur Unterstützung des Nutzers sehr wertvoll und sollten zum Funktionsumfang jeder Produktsuche gehören. Instant Results hingegen zeigen im Vorschlagfenster der Suche konkrete Produkttreffer. Jedoch ist individuell für jeden Shop abzuwägen, ob der erhöhte Platzbedarf und Anspruch an die Performance aufgrund der Ladezeit für Bilddateien den Nutzen rechtfertigt. Bei Wahl einer Mischform empfiehlt es sich, Such- und Kategorievorschläge über Instant Results anzuzeigen.

Die Vorteile der Suggest-Funktion zur Navigationserleichterung und Benutzerführung liegen auf der Hand: Die Auswahl eines Suchvorschlags reduziert den Eingabeaufwand, der Nutzer spart Zeit und vermeidet Tippfehler. Außerdem sorgen die Vorschläge für Inspiration: Der Nutzer bekommt über das Vorschlagfenster der Suche einen Eindruck vom Sortiment, ohne eine einzige Seite öffnen zu müssen. So kann es gerade im mobilen Kontext interessant sein, den Online-Käufer schon im ersten Suchlauf mit spezifischen Suchvorschlägen auf eine Long-Tail-Anfrage hinzuweisen, um ihm das Verfeinern eines sehr umfangreichen Suchergebnisses zu ersparen.

Voraussetzungen für eine gute Usability sind, dass der Suggest zügig anspringt (Performance der Suche) und nur Suchvorschläge macht, die auch sinnvolle Produkttreffer generieren. Das heißt: keine Vorschläge, die zu ausverkauften Produkten oder auf die Nulltrefferseite führen!

Mehrstufiger Suggest

Einige Shops bieten dem mobilen Nutzer mithilfe des Suggests eine mehrstufige Suche an, ohne dass die Suche zwischendurch abgeschickt werden muss: Beginnt der Nutzer bei ebay.de mit der Sucheingabe, füllen Suche und Suchvorschläge das gesamte Browserfenster aus, wobei die Vorschläge aus Suchstichworten oder aber der Kombination von Stichwort und Suche in einer Kategorie bestehen können. Durch Antippen eines Vorschlags löst der Nutzer die Suche aus, neben dem Suchfeld ermöglicht der Link „Abbrechen“ jederzeit die Rückkehr zur ursprünglichen Seite. Klickt der Nutzer jedoch auf den Pfeil hinter einem Vorschlag, überträgt Ebay diesen ins Suchfenster, ohne die Suche auszuführen. Stattdessen kann der Nutzer den Vorschlag durch eine Eingabe ergänzen oder einen weiter spezifizierten Suchvorschlag auswählen.

Wenn Ihr Shop Content wie Ratgeberbeiträge, News oder Servicefunktionen bietet, haben Sie die Möglichkeit, diese ebenfalls im Suggest zu platzieren. Mobilgeräte werden besonders häufig für die kaufvorbereitende Informationsrecherche verwendet, helfen Sie hier mit.

Tipps zur Konfiguration des Suggests

Achten Sie darauf, dass die Vorschlagliste sichtbar und schnell zu erfassen ist. Präsentieren Sie ein ausreichend großes Vorschlagfenster mit genügend Abstand zwischen den Vorschlägen für die Auswahl per Fingerklick (Touch). Trennen Sie verschiedene Arten von Vorschlägen optisch und begrenzen Sie die Anzahl der Vorschläge auf ein sinnvolles Maß. Zur Übersichtlichkeit gehören auch die Normierung, also die Vereinheitlichung der Vorschläge auf die Singular- oder Pluralform, und der Ausschluss von Schreibvarianten.

Wie die Suche sollte der Suggest fehlertolerant agieren und die Vorschläge trotz abweichender Nutzereingaben in korrekter Schreibweise darstellen. Tabu für die Vorschlagliste sind neben Rechtschreibfehlern und Duplikaten auch Schimpfwörter. Kommunizieren Sie die Anzahl der zu erwartenden Treffer. Besonders wichtig: Informieren Sie den Nutzer über jede ausgeführte Aktion der Suche, teilen Sie ihm mit, für welchen Vorschlag er ein Ergebnis sieht.

Als Datengrundlage für den Suggest benötigen Sie strukturierte Produktdaten und gegebenenfalls Contentdaten. Ferner gilt es, zwischen zwei verschiedenen Ansätzen zu wählen:

  • Sucheingaben vorheriger Nutzer
  • Suchbegriffe, die im Index der Suche vorhanden sind

Im ersten Fall liefert der Suggest einen größeren Mehrwert, weil er mehr Begriffe abdeckt. Jedoch ist bei diesem Ansatz die Qualitätssicherung extrem wichtig: Liefert der Vorschlag ein Suchergebnis? Sonst hat er im Suggest nichts verloren. Enthält das Suchergebnis relevante Treffer? Im Hinblick auf die Relevanz ist Vorsicht insbesondere dann geboten, wenn die Suche auch Teiltreffer ausspielt (Ergebnis für „Jacke“ statt der gesuchten „Strickjacke“, also nur bedingte Relevanz, dafür Vermeidung eines Nulltreffers für die nicht im Sortiment befindliche Strickjacke). Da die Suche formal ein Ergebnis für die Suche nach „Strickjacke“ generiert, könnte es sein, dass die Suchanfrage „Strickjacke“ für die Buchstabenfolge „str“ automatisch in den Suggest übernommen wird – was natürlich nicht gewünscht ist, da keine hochrelevanten Produkttreffer vorhanden sind.

Falls Sie sich für Ansatz eins entscheiden, sollte Ihre Suchsoftware als Sortierkriterien für den Suggest folglich die Gewichtung nach Key Performance Indicators (KPIs) erlauben. Hierzu zählen beispielsweise die Click-Through-Rate und die Conversion-Rate. Ziel ist es, Vorschläge weiter oben beziehungsweise überhaupt nur zu listen, deren KPIs auf eine hohe Relevanz schließen lassen. Darüber hinaus ist es empfehlenswert, aktuelle Werbekampagnen und Suggest aufeinander abzustimmen sowie saisonale Trends zu berücksichtigen, von den Möglichkeiten der Personalisierung ganz zu schweigen. Basiert der Suggest auf den Sucheingaben vorheriger Nutzer, bilden sich saisonale Trends übrigens von allein ab, was bei Ansatz zwei nicht der Fall ist. Es gilt wie immer, Vor- und Nachteile sorgfältig abzuwägen. Und damit die Vorschläge nicht doch zu ausverkauften Produkten führen, sollten sie mindestens tagesaktuell sein.

Fazit

Die Produktsuche ist ein wichtiges Service- und Steuerungsinstrument im Online-Shop, das dem Kunden keineswegs negativ auffallen darf: Schlechte Usability stört und kann das Verlassen des Shops zur Folge haben; intuitive Bedienbarkeit bleibt unbemerkt, stattdessen stehen Ergebnisse im Vordergrund, die den Nutzer idealerweise zum Kauf führen. Im Rahmen der Customer Journey, welche sich mitunter über verschiedene Geräte und Einkaufskanäle hinweg erstreckt, können Suchfeld und Suggest in der mobilen Ansicht des Online-Shops eine erste Erfolg versprechende Anlaufstation bilden – oder auch nicht. Die geringe Displaygröße, langsamere Datenverbindungen, Konflikte zwischen Touchbereichen und der ausgeklappten Tastatur machen die benutzerfreundliche Gestaltung der Suche zu einer Herausforderung, deren Bewältigung letztendlich aber durch höhere Conversion-Raten belohnt wird (natürlich spielen dabei auch die anderen Bereiche der Suche wie Suchergebnisseite, Filter und die Ergebnisqualität eine entscheidende Rolle). In jedem Fall ist es ratsam, die Qualität der Suche nicht nur auf mobilen Endgeräten kritisch im Auge zu behalten!