Deutsch
Die Suchleiste besteht aus einem Input-Feld und einem Los-Knopf. Die Leiste in dem Demoshop von Luigi's Box ist auch mit der Autovervollständigung ausgestattet.
Einleitung
Die Suchfunktion ist das wichtigste Designelement auf inhaltslastigen Webseiten. Nutzer/innen verlassen sich auf die Suchfunktion, um das, was sie brauchen, auf einer relativ komplexen Seite zu finden.
Die Suchfunktion besteht aus zwei grundlegenden Elementen: Einem Input-Feld, mit dem Sie Text eingeben können und einem Los-Knopf. Obwohl Suchleisten ziemlich einfach aussehen, erfordert ihre Entwicklung viel Forschung und Aufwand.
Die Sache, die zwischen Ihnen und dem Erfolg steht, könnte etwas so einfaches wie das Design der Suchleiste auf Ihrer Webseite sein.
Wir haben mit unserem erfahrenen Produktteam gesprochen und geben Ihnen wertvolle Tipps für die Verbesserung Ihrer Seitensuchfunktion. Nachfolgend beschäftigen wir uns mit angewandten Methoden für das Design der UX und UI, zeigen Beispielwebseiten und stellen Softwaretools vor, die Ihnen helfen können, Ihre Seitensuche zu optimieren.
Was ist eine Suchleiste? Definition der Suchleiste
Eine Suchleiste ist ein Bestandteil der Benutzeroberfläche, in die Nutzer/innen Suchanfragen und relevante Suchbegriffe eingeben und Ergebnisse aus einer Datenbank, Webseite oder Anwendung abrufen können. Meist besteht sie aus einem Texteingabefeld und einer Schaltfläche, mit der eine Suche gestartet werden kann.
Warum eine Suchleiste wichtig ist
Stellen Sie sich vor, Sie besuchen einen Onlineshop für Sneakers und möchten ein ganz bestimmtes Modell kaufen. Würden Sie die gesamte Webseite durchsuchen, bis Sie das jeweilige Modell gefunden haben? Wahrscheinlich nicht. Stattdessen würden Sie den Modellnamen/Typ in das Suchfeld eintippen, auf Enter drücken und voilà: Sie haben das gefunden, wonach Sie suchen.
Aber was, wenn die Suchleiste nicht effektiv entwickelt wurde? Studien von Baymard haben gezeigt, dass 41 % aller E-Commerce-Seiten erhebliche Probleme mit ihren Suchtools aufweisen. Dies hebt die Bedeutung einer gut entwickelten Suchfunktion hervor, was beim Aufbau einer Webseite häufig übersehen wird, für ein reibungsloses Nutzererlebnis jedoch essentiell ist.
Das Design und die Funktionen der Suchleiste sind wichtige Faktoren, die zu dem Erfolg verschiedener E-Commerce-Webseiten beitragen. Sie helfen Nutzer/innen nicht nur, genau das zu finden, wonach sie suchen, sondern unterstützen sie auch, wenn sie nicht genau wissen, was sie brauchen.
Die Suchfunktion auf einer Webseite ist ein unterschätztes Designelement. Unserer Forschung zufolge:
2x
Menschen, die die Suche nutzen, kaufen mit einer zwei Mal höheren Wahrscheinlichkeit als diejenigen, die die Navigation nutzen.
50%
Die Suche kann bis zu 50 % der Umsätze in einem Onlineshop ausmachen.
73%
Onlineshops, mit einer für die Optimierung der Suche verantwortlichen Person, sehen einen Umsatzanstieg.
58%
58 % der Onlineshops sehen sich ihre Suchmetriken nur an und führen keine Handlungen durch.
Angewandte Methoden und Tipps für das Design Ihrer Suchleiste
Dieser Abschnitt erkundet angewandte Methoden für die Entwicklung einer robusten Webseiten-Suchleiste.
1. Design für mobile Geräte
Nutzer/innen von mobilen Geräten machen mehr als 50 % des weltweiten Webtraffics aus – und diese Zahl steigt jedes Jahr weiter an. Diese Statistik verdeutlicht, dass das beste Design einer Suchleiste mobile Geräte priorisiert.
Das UX-Design der Suchleiste sollte für einen mobilen Bildschirm entworfen werden. Die Suchleiste sollte gut sichtbar sein, und mit einer kleinen Daumenbewegung sollte auf sie zugegriffen werden können. Eine sogenannte “Sticky Search Bar”, die am oberen oder unteren Rand der Webseite immer sichtbar bleibt, selbst wenn Besucher/innen scrollen, eignen sich für mobile Geräte besonders gut.
2. Sichtbarkeit
Zwingen Sie Seitenbesucher/innen nicht dazu, nach dem Suchtool zu suchen. Manche Entwickler/innen machen den Fehler, die Suchoption in der Menüschaltfläche zu verstecken. Bei anderen ist das Suchfeld nicht sichtbar genug.
Es ist wichtig, das gesamte offene Textfeld anzuzeigen. Ist die Suchfunktion hinter einem Symbol versteckt, sinkt die Sichtbarkeit. Der Interaktionsaufwand nimmt dagegen zu.
Verwenden Sie ein Lupen-Symbol für die Suchleiste, damit diese erkennbar ist. Platzieren Sie die Suchtaste direkt daneben. Setzen Sie Kontrastfarben zum Hintergrund-Design Ihrer Webseite ein, um Ihr Suchtool herausstechen zu lassen.
Für mobile Geräte erzeugt eine Sticky Search Bar – eine „festgeklebte” Suchleiste – am oberen Bildschirmrand die besten Ergebnisse.
3. Gleichbleibendes Design
Stellen Sie sicher, dass das Suchtool auf Ihrer Webseite immer an die gleiche freie Stelle gesetzt wird.
Besucher/innen erwarten, dass die Suchleiste immer am gleichen Ort ist und gleich aussieht, wie auf der ersten Seite, die sie besucht haben. Wenn sie nicht konsistent ist, kann das zu Verwirrung führen und die Conversion Rates negativ beeinflussen.
4. Autovervollständigung
Manchmal wissen Ihre Nutzer/innen nicht, wonach sie genau suchen und manchmal wollen sie nicht lange Suchbegriffe eingeben.
Die Autovervollständigung ist eine kraftvolle Funktion der Suchleiste, die Nutzeranfragen voraussagt und Suchvorschläge anbietet, die auf der ursprünglichen Anfrage, dem Suchverlauf, der aktuellen Seite und mehr basieren.
Diese Funktion eröffnet diverse Gelegenheiten, wie Sie mit Webseitenbesucher/innen interagieren können. Eine einzelne Anfrage kann beispielsweise mehrere Suchergebnissen generieren, die zu dem Input passen, wie Produktkategorien und beliebte Marken, wodurch die Wahrscheinlichkeit einer Conversion steigt.
Die Autovervollständigung bietet rasches Feedback zu Nutzeranfragen
Sie versichert Kund/innen sofort, dass sie am richtigen Ort sind – nämlich Ihrem Onlineshop – und dass sie die richtigen Schritte unternehmen, um ihrem gewünschten Produkt näherzukommen – welches Sie anbieten und auf Lager haben. Oft wird die Autovervollständigung auch als Schnellnavigation verwendet, um direkt zu der richtigen Produktkategorie in Ihrem Kategorie-Gerüst zu gelangen. Hierbei spielt die Geschwindigkeit eine ausschlaggebende Rolle. Käufer/innen nutzen die Autovervollständigung auch, um einen kurzen Input für die Suche einzugeben. Danach starten sie eine vollständige Suche mit fortgeschrittenen Filtern und Sortieroptionen.
Michal Barla
CPO & Mitgründer, Luigi's Box
5. Ergebnisse mit Bildern
Die UI der Suchergebnisse ist äußerst wichtig. Das Anzeigen von Produktbildern kann zu mehr Verkäufen führen, da Menschen oft eine visuelle Vision davon haben, wonach sie suchen. Sehen sie ein dazu passendes Produktbild in den Suchergebnissen, erhöht dies die Chance, dass sie einen Kauf abschließen.
6. Platzhaltertext
Um Nutzer/innen die verschiedenen Arten von Suchanfragen, die sie machen können, verständlich zu machen, könnten Sie ein paar Suchbegriffe als Platzhalter in die Suchbox schreiben. Das ist besonders nützlich, wenn Nutzer/innen mit verschiedenen Parametern suchen können. Die Computersprache HTML5 macht es ganz einfach, einen Platzhaltertext in die Eingabefelder zu schreiben.
7. Keywords im Suchfeld erhalten
Nach einer durchgeführten Suchanfrage sollte ein Schlüsselwort im Suchfenster sichtbar bleiben. So können es Nutzer/innen bearbeiten, mehr zur ursprünglichen Anfrage hinzufügen oder damit ganz einfach eine weitere Suche starten. Dies verbessert das allgemeine Nutzererlebnis und verringert die Bounce Rate.
Sorgen Sie dafür, dass die Suchleiste sich an das Schlüsselwort von der letzten Anfrage erinnert und es anzeigt.
Das Schlüsselwort sollte in dem Suchfenster bleiben.
Angewandte Methoden und Tipps für die Such-UX in Ihrem Onlineshop
Das UX-Design der Suchleiste dreht sich nicht nur um die visuelle Ästhetik. Es hängt auch viel von der Funktionalität der Webseitensuche ab. Hier sind sechs technologie-bezogene Verbesserungen, die Sie in Betracht ziehen sollten, um das Design Ihrer Suchleiste zu verbessern.
1. Geschwindigkeit
Niemand hat Zeit, lange darauf zu warten, dass eine Webseite die Suchergebnisse lädt – besonders bei der Autovervollständigung.
Die Geschwindigkeit ist für das Nutzererlebnis essentiell und wenn Besucher/innen bei einem beliebigen Suchbegriff nicht sofort Ergebnisse erhalten, schließen sie das Fenster und kaufen bei einem Konkurrenten ein.
2. Trefferqualität
Der Nutzer bzw. die Nutzerin wird Schlüsselwörter nicht immer genau eingeben können. Es kommt zu Tippfehlern, einem fehlenden Suchziel oder -kontext, Synonymen etc. Der Algorithmus des Suchtools sollte komplex genug sein, um all diese Faktoren einzubinden; genau zu erkennen, wonach der Nutzer bzw. die Nutzerin sucht und ihm/ihr präzise Suchtreffer anzeigen.
Die Fähigkeit Ihres Suchtools, eine gute Trefferqualität zu erreichen, bestimmt, wie schnell Ihr Unternehmen wächst. Stellen Sie also sicher, dass Sie sich für ein qualitatives Suchtool entscheiden.
3. Sprachsuche
Die Sprachsuche ist eine praktische Methode für Nutzer/innen, Produkte zu finden – besonders auf mobilen Geräten.
Sie ist auch für Menschen mit Sonderbedürfnissen, die ihre Suchanfragen nicht eintippen können, einfacher.
Um sie gut kenntlich zu machen, sollten Sie für die Sprachsuche ein Mikrofon-Icon verwenden.
4. Dynamische Filter
Dynamische Filter erlauben es Kund/innen, sich eine Auswahl von Produkten anzusehen, ohne Tausende von Optionen durchsuchen zu müssen.
Mit dynamischen Filtern können Onlineshops das Onlineshopping noch angenehmer machen, da relevante Filteroptionen angezeigt werden, die auf jede Produktkategorie zugeschnitten sind. Beispielsweise können Käufer/innen Gitarren nach der Anzahl der Saiten filtern. Der gleiche Filter wird jedoch nicht bei Schlagzeugsets angezeigt.
Webseiten, die ihre Produktauflistungen und die Filterung optimieren, sehen oft eine vierfache Reduktion der Abwanderungsraten.
Dynamische Filter ändern sich abhängig vom Kontext.
5. Mobile Suchleiste
Da immer mehr Menschen online über ihre Smartphones einkaufen, sollten fortgeschrittene Suchoptionen nicht nur auf Computer-Nutzer/innen begrenzt sein.
Eine vollwertige Suchfunktion für mobile Versionen von Webseiten kann das Erlebnis aller Nutzertypen stark verbessern, da verschiedene Nutzererwartungen erfüllt werden. Fortgeschrittene Funktionen wie die Tippfehler-Korrektur, die Lemmatisierung oder das automatische Ausfüllen können einen großen Unterschied ausmachen und die Wahrscheinlichkeit erhöhen, dass Sie mehr Produkte verkaufen.
6. UX der Suchergebnisse
7. Personalisierung basierend auf dem Nutzerverhalten
Auch wenn die Customer Journey mit einer Suche beginnt, endet sie beim ersten Besuch nicht immer mit einem Kauf.
Mit einem fortgeschrittenen Suchtool wie Luigi’s Box können Sie die bisherigen Anfragen eines Besuchers bzw. einer Besucherin nutzen, um ein personalisiertes Sucherlebnis zu kreieren. Unser Algorithmus setzt Daten aus dem Suchverlauf ein, um den Suchvorgang zu optimieren. Ihre Nutzer/innen sehen somit die Produkte, die sie am ehesten kaufen würden.
Erhöhen Sie die Conversion Rate und den durchschnittlichen Bestellwert Ihres Onlineshops mit einer personalisierten Seitensuche – unterstützt von KI.
Bonus: Kreieren Sie besseren Content
Gute Inhalte sind wichtig. Ein guter Text kann Webseitenbesucher/innen überzeugen, Ihr Produkt zu kaufen. Stellen Sie auch sicher, dass alle Produkte detaillierte Beschreibungen haben, die alle essentiellen Funktionen enthalten.
Außerdem sollten Produktbilder in hoher Qualität und denselben Maßen vorliegen. Vergessen Sie auch nicht die Preisdetails und Größentabellen. Legen Sie viel Wert auf die Qualität und Vollständigkeit Ihrer Webseiteninhalte, da sie eine große Rolle bei dem Nutzererlebnis spielen.
5 Beispiele eines effektiven Suchleisten-Designs
In diesem Bereich sehen wir uns 5 E-Commerce-Seiten mit einem erstklassigen Suchleisten-Design an.
1. Škoda Auto
Der Onlineshop von Škoda Auto kann mühelos Anfragen zur Größe eines gewünschten Produkts bearbeiten. So ist es für das Suchtool ohne Probleme möglich, zum Beispiel 16 Zoll Karoq-Felgen zu finden.
Suche nach Karoq-Felgen in der Größe 16 Zoll im offiziellen Onlineshop von Škoda.
2. Acer
Der Acer-Shop bietet Kund/innen eine umfangreiche Suchleiste, die sofort ins Auge sticht. Durch Autovervollständigung werden beliebte Anfragen und Produkte sowie Produktvorschläge angezeigt, bevor Nutzer/innen ihre Anfragen eintippen können.
Suche mit Autovervollständigung und beliebten Anfragen im Onlineshop von Acer.
3. 11teamsports
Eine weitere Suchleiste mit sofortiger Autovervollständigung und Vorschlägen von beliebten Produkten und Anfragen. Geben Nutzer/innen den Begriff „Ars” ein, werden sofort Sets und Merchandise-Artikel des Arsenal-Fußballklubs angezeigt.
Die Autovervollständigung zeigt beliebte Produkte des Arseanl-Fußballclubs an.
4. Kik
Die separate Suchleiste der Kik-Webseite enthält einen Platzhaltertext, der Nutzer/innen zur Verwendung der Suche anregt, um ihre gewünschten Produkte zu finden.
Suche nach „Socken“ im Onlineshop von kik.de.
5. Bobcat
Die Suche von Bobcat bietet Autovervollständigung auf eine direkte und einfach verständliche Art. Sie enthält rotierende Anfragen, die Nutzer/innen Ideen für die Suche geben.
Die Suchleiste mit Autovervollständigung auf der Webseite von Bobcat Europa.
Die besten Suchleisten-Tools
1. Luigi’s Box
Luigi’s Box begann als eine Lösung für diverse Herausforderungen bei der Seitensuche im E-Commerce-Bereich. Im Laufe der Jahre hat es sich auf dem europäischen Markt als innovative Software für die Suche etabliert.
2. Algolia
Algolia wurde 2012 in Paris gegründet und öffnete schnell andere Standorte, u. a. in San Francisco. Es ist auf Entwickler/innen zugeschnitten und nimmt unter den in diesem Artikel enthaltenen Lösungen eine der stärksten Positionen im Bereich „Search as a Service“ ein.
3. Elasticsearch
Elasticsearch war im Jahr 2010 ursprünglich ein Nebenprojekt von Shay Banon. Später wurde es zum Hauptprodukt von Elastic, einem Unternehmen aus Amsterdam. Seither gilt es als einer der führenden Anbieter für Open-Source-Suchtechnologie.
4. SearchSpring
Searchspring wurde 2007 in Colorado Springs als Antwort auf die wachsende Nachfrage nach fortgeschrittenen Suchlösungen für E-Commerce gegründet. Seither hat es diverse Marken und Händler als Kundschaft dazugewonnen.
5. FactFinder
FactFinder hat Wurzeln in Deutschland und ist bereits seit den frühen 2000ern Teil der Branche für die E-Commerce-Suche. Auf dem europäischen Markt hat es aufgrund seiner robusten Such- und Navigationslösungen an Anerkennung gewonnen.
6. Klevu
Klevu kommt aus Finnland und wurde 2013 gegründet. Aufgrund des Schwerpunktes auf KI-gestützte Lösungen hat das Unternehmen seine Präsenz in Europa und Nordamerika immer weiter ausgebaut.
7. Doofinder
Doofinder wurde 2011 in Spanien gegründet und verfolgt das Ziel, das E-Commerce-Sucherlebnis für Unternehmen in Europa zu verbessern. Seither sind die Kundenbasis und Angebote des Unternehmens stetig gewachsen.
8. Loop54
Loop54 stammt aus Stockholm, Schweden und ist seit dem Jahr 2011 auf dem Markt. Mit Schwerpunkt auf KI-gestützte Lösungen sticht es vor allem im nördlichen E-Commerce-Markt heraus.
Fazit
Wenn alles richtig gemacht wird, kann das Design einer Webseitensuche zu einer höheren Conversion Rate führen und das Wachstum Ihres Unternehmens erheblich fördern. Achten Sie vor allem auf die kleinen Details. Denn gerade Designelemente können einen Unterschied zwischen einem positiven und negativen Nutzererlebnis ausmachen.
Das UX-Design der Suchleiste sollte vor allem für mobile Geräte tauglich sein und erfordert erstklassige Funktionen. Wählen Sie also ein zukunftsweisendes Suchtool mit einem schnellen Zugriff auf kräftige Funktionen wie der facettierten Suche, der personalisierten Suche, der Autovervollständigung und mehr.
Häufig gestellte Fragen
Warum sollte ich auf meiner Webseite eine Suchlösung haben?
Insgesamt haben 73 % der Onlineshops, die eine Suchmaschine als Standard implementiert haben, einen Anstieg der Umsätze gesehen. Eine Suchfunktion gibt Ihren Webseitenbesucher/innen erweiterte Möglichkeiten, die den Nutzer-Input und historische Daten nutzen, um präzise und personalisierte Produkttreffer anzuzeigen. Dadurch entsteht ein reibungsloses Shopping-Erlebnis, das die Bouncerate verringert, die durchschnittliche Sitzungszeit verbessert und die Conversions fördert.
Wie entwirft man eine gute Suchleiste?
Eine gut entwickelte Suchleiste sollte mobilfreundlich, sichtbar und über die gesamte Webseite hinweg gleich sein. Die Suchbox sollte schnell sein und kräftige Funktionen anbieten, wie die Autovervollständigung, die Facettensuche, die Sprachsuche, dynamische Filter, personalisierte Suchergebnisse und mehr. Konzentrieren Sie sich darauf, den Suchvorgang für den Nutzer/die Nutzerin so einfach wie möglich zu machen.
Kann ich meine eigene Suchleiste erstellen?
Es ist möglich, eine Suchleistungslösung für Ihre Webseite zu erstellen. Sie haben sogar mehrere Optionen. Beispielsweise können Sie öffentliche Bibliotheken, Open-Source-Technologien, Elasticsearch, Plugins etc. verwenden. Wenn Sie sich jedoch ein fortgeschrittenes, leistungsstarkes Suchtool mit diversen futuristischen Funktionen wünschen, ist Luigi’s Box eine gute Wahl.
