7 Best Practices für das Design und die Platzierung von Suchfeldern
Das Suchfeld ist eines der wichtigsten Elemente einer Website. Unabhängig davon, welche Art von Unternehmen Sie haben, ist ein gut gestaltetes Suchfeld unerlässlich, damit Besucher leicht finden können, wonach sie suchen. Das bedeutet nicht, dass es ausreicht, einfach eine Suchfunktion hinzuzufügen, ohne darüber nachzudenken, wie sie aussieht.
Sie müssen die Funktionalität, die Benutzerfreundlichkeit, die Ästhetik und sogar die Platzierung des Suchfelds berücksichtigen. Dies alles, damit Sie die Benutzererfahrung auf Ihrer Website verbessern können, was sogar zu höheren Conversions führen kann.
Was müssen Sie also tun, wenn Sie ein Suchfeld entwerfen? Obwohl die genauen Empfehlungen je nach Ihren Bedürfnissen und Zielen subjektiv sein können, gibt es einige allgemeine Tipps, die für verschiedene Arten von Websites funktionieren könnten. Hier sind einige der Best Practices für das Design und die Platzierung von Suchfeldern:
1 Machen Sie es auffällig
Die erste und wichtigste Regel bei der Gestaltung des Suchfelds ist, es leicht wahrnehmbar zu machen. Möglicherweise sind Sie zu sehr auf die Designästhetik konzentriert, um ein Suchfeld zu erstellen, das sich in den Rest der Website einfügt. Denken Sie jedoch daran, dass Sie ein Suchfeld für Personen hinzufügen, die etwas auf Ihrer Website finden möchten. Sie nach dem Suchfeld suchen zu lassen, ist nicht sinnvoll und kann sich sogar negativ auf ihre Erfahrung auswirken.
Dies bedeutet nicht, dass Sie bei der Ästhetik insgesamt Kompromisse eingehen müssen. Lassen Sie sich ein Design einfallen, das sich hervorragend von Ihrem bestehenden Website-Design abhebt und dennoch prominent genug ist, damit die Leute es bemerken. Die Box sollte also groß, aber nicht zu groß sein, damit sie zu viel Platz auf der Seite einnimmt. Und die Farbe sollte kontrastierend und dennoch komplementär zu den übrigen auf der Seite verwendeten Farben sein.
Das Suchfeld „Best Buy” ist ein gutes Beispiel, da sich das Weiß vom Blau der Seite abhebt und sich dennoch an den anderen im Seitendesign verwendeten Farben ausrichtet. Die Größe des Suchfelds ist nicht zu groß und dennoch auffällig genug, damit die Leute es sofort bemerken, sobald sie die Seite betreten.
2 Markieren Sie die Senden-Schaltfläche
Wie bereits erwähnt, besteht der ganze Zweck eines Suchfelds darin, den Website-Besuchern die Arbeit zu erleichtern. Vermeiden Sie es, die Dinge mit winzigen Submit-Buttons zu verkomplizieren, auf die sich die Benutzer konzentrieren müssen, um sie anzuklicken. Die Hervorhebung der Senden-Schaltfläche verbessert die Sichtbarkeit des Suchfelds selbst und macht es Benutzern auch leichter, darauf zu klicken.
Ob Sie ein Lupensymbol verwenden oder „Senden” in der Senden-Schaltfläche buchstabieren, liegt bei Ihnen. Konzentrieren Sie sich jedoch auf die Größe und Farbe der Schaltfläche, um sicherzustellen, dass die Benutzer sie nach der Eingabe problemlos finden können Machen Sie ihnen klar, was sie tun müssen, nachdem sie eingegeben haben, wonach sie suchen.
Einige Websites gehen sogar so weit, dass Besucher nur das Lupensymbol verwenden, um nach etwas zu suchen. Dies kann sich wie im Fall von Levi’s Strauss als großer Vorteil für die Website-Ästhetik erweisen. Dies ist jedoch kein optimales Designbeispiel für ein Suchfeld.
Das sieht zwar gestalterisch gut aus, kann aber für Besucher unpraktisch sein, da sie warten müssen, bis das Suchfeld geladen ist, nachdem sie auf das Lupensymbol geklickt haben. Es kann frustrierend sein, besonders wenn Sie von einem Ort aus auf die Website zugreifen, an dem die Verbindung langsam ist. Anstatt es separat zu laden, ist es möglicherweise besser, das Suchfeld an derselben Stelle zu erweitern, an der sich die Lupe befindet.
Wenn der Platz begrenzt ist, aber die Suche wichtig ist, kann es schön sein, sie in die obere Navigation einzufügen. Genau das hat Shralpin auf ihrer mobilen Website getan.
Xero Shoes hingegen hat überhaupt keinen Senden-Button. Besucher müssen ein Schlüsselwort in das Suchfeld eingeben und dann die Eingabetaste drücken, um auf der Website nach etwas zu suchen. Jetzt denken Sie vielleicht, dass es nicht so schlimm ist, einfach die Eingabetaste zu drücken, um die Suche zu starten, aber was ist mit den restlichen Besuchern? Einige von ihnen suchen möglicherweise speziell nach dem Senden-Button und haben möglicherweise Schwierigkeiten, eine Suche mit dieser Art von Design durchzuführen.
Der Submit-Button von Amazon ist in Orange ziemlich prominent, während der Rest des Suchfelds in Weiß gehalten ist. Die Farbe des Senden-Buttons kontrastiert auch mit der dunkleren Farbe des Website-Headers. Obwohl sie also nur ein Lupensymbol als Absenden-Button verwenden, ist es im Gegensatz zum Levi’s-Beispiel immer noch gut sichtbar. Stellen Sie sicher, dass das Symbol gepolstert ist, da dies die Sichtbarkeit erhöht.
3 Platzieren Sie es dort, wo die Benutzer am wahrscheinlichsten hinsehen
Es gibt eine anhaltende Debatte darüber, wo das Suchfeld am besten auf einer Website platziert werden kann. Wenn Sie sich jedoch einige der beliebtesten Websites ansehen, werden Sie feststellen, dass die Suchfelder häufig oben in der Mitte oder oben rechts auf der Seite platziert sind. Das geht aus der von SLI Systems veröffentlichten Studie hervor. Die Analyse ergab, dass 54 % der Einzelhändler das Suchfeld oben rechts platzieren, 30 % in der Mitte und nur 16 % links.
Das bedeutet, dass Besucher erwarten, das Suchfeld oben rechts auf Ihrer Website zu finden. Wenn Sie es an einer unerwarteten Stelle platzieren, müssen Benutzer möglicherweise zusätzliche Anstrengungen unternehmen, um das Suchfeld zu finden. Trotzdem ist es immer noch eine gute Idee, die Besucheraktivität mit einer Heatmap oder einem Eye-Tracking-Tool zu untersuchen. Dies hilft Ihnen zu erkennen, wo sie am wahrscheinlichsten suchen, und hilft Ihnen zu verstehen, wo Sie das Suchfeld auf Ihrer Website platzieren sollten.
Egal, ob Sie sich für links, rechts oder mittig entscheiden; Stellen Sie sicher, dass es sich weiter oben auf der Seite befindet, da Besucher hier laut einer Eye-Tracking-Studie der NN Group mit größerer Wahrscheinlichkeit zuerst scannen. Es wäre gut, wenn Sie einen A/B-Test mit verschiedenen Suchfeldplatzierungen durchführen und dann bestimmen welche Position scheint für Sie am besten zu funktionieren.
Hier ist ein Beispiel für ein Suchfeld auf der rechten Seite der Seite von Get Plus Followers.
Das Suchfeld von eBay befindet sich in der Mitte der Seite, wo es gut sichtbar ist und eines der ersten Dinge ist, die den Besuchern der Website auffallen.
4 Kombinieren Sie die automatische Vervollständigung mit Grafiken
Ihre Website gehört möglicherweise zu den 62,5 %, die die Funktion zur automatischen Vervollständigung in ihrem Suchfeld verwenden. Um einen Wettbewerbsvorteil zu erzielen, können Sie die Funktion weiter verbessern, indem Sie Bildvorschauen des Produkts zusammen mit den Vorschlägen zur automatischen Vervollständigung in Ihre Suchfunktion einfügen. Dies liegt daran, dass derzeit nur 28,2 % der teilnehmenden Websites diese Funktion implementieren.
Um weiter für die automatische Vervollständigung mit Grafiken zu plädieren, sollten Sie sich den Fall von LED Hut ansehen. Nach dem Hinzufügen von Bildvorschauen zu seinen Vorschlägen zur automatischen Vervollständigung gelang es dem LED-Beleuchtungsanbieter, seine Such-Conversion-Rate um 200 % zu steigern. So sieht es aus, wenn Sie dem Suchvorschlag Bildvorschauen hinzufügen.
5 Vermeiden Sie es, das Suchfeld zu isolieren oder zu überfüllen
Der erste Punkt erwähnte, wie wichtig es ist, das Suchfeld hervorzuheben. Das bedeutet, dass Sie vermeiden sollten, die umgebenden Bereiche mit Symbolen oder anderen Elementen zu überladen, die Besucher vom Suchfeld ablenken könnten. Das Suchfeld muss priorisiert und fokussiert werden. Vermeiden Sie es gleichzeitig, dies zu übertreiben, da Sie am Ende das Suchfeld so isolieren könnten, dass es schwierig zu finden ist.
Das Suchfeld von Snow and Rock ist ein gutes Beispiel für ein gut gestaltetes Suchfeld. Wie Sie im Bild unten sehen können, gibt es nicht zu viele Elemente, die den Bereich überfüllen, in dem es platziert ist. Aber Sie können es immer noch in der linken Mitte der Seite sehen und es ist nicht an einer Stelle platziert, an der Benutzer es schwer haben werden, es zu finden. Der Submit-Button steht auch im Kontrast zu den restlichen Farben auf der Website, wodurch er auffällt.
6 Entscheiden Sie sich für ein erweiterbares Suchfeld
Wenn Sie nach Möglichkeiten suchen, Platz zu sparen und gleichzeitig das Suchfeld für Benutzer hervorzuheben, können Sie sich für ein wachsendes Suchfeld entscheiden. Dies ist eine ideale Wahl für Websites, auf denen die Suche nicht unbedingt erforderlich ist, Sie den Benutzern aber dennoch die Möglichkeit geben möchten, nach etwas zu suchen. Anstatt nur ein Lupensymbol hinzuzufügen, fügen Sie daneben ein kleines Suchfeld hinzu, das als visueller Hinweis für Website-Besucher dient. Wenn ein Benutzer auf das Feld klickt, wird das Feld erweitert und Benutzer können den benötigten Begriff eingeben.
Hier ist ein gutes Beispiel von Net-a-Porter. Wenn Sie sich die obere rechte Seite der Website ansehen, sehen Sie, dass das Suchfeld sichtbar, aber nicht zu groß ist. Es gibt ein Lupensymbol, mit dem Benutzer erkennen können, dass es sich um eine Suchoption handelt.
Sobald Sie jedoch auf das Feld klicken, wird das Suchfeld erweitert, damit Sie Ihren erforderlichen Suchbegriff eingeben können. Diese Kombination aus Ästhetik und Benutzerfreundlichkeit eignet sich hervorragend für eine Website, die viele Elemente auf der Startseite enthalten muss, da sie Ihnen hilft, Platz zu sparen, ohne die Sichtbarkeit des Suchfelds zu beeinträchtigen.
7 Erwägen Sie das Hinzufügen eines Dropdown-Menüs
Das Suchfeld ist für Personen vorhanden, die bereits eine Vorstellung davon haben, wonach sie suchen. Aber was ist mit denen, die sich nicht sicher sind, wonach sie suchen? Möglicherweise haben Sie eine Funktion zum automatischen Vervollständigen von Vorschlägen, aber das Hinzufügen einer Dropdown-Funktion direkt neben dem Suchfeld kann für einige Websites eine gute Idee sein. Es gibt den Benutzern einen Orientierungssinn und gibt ihnen Hinweise darauf, wonach sie suchen müssen.
Diese Taktik erwies sich als Erfolg für Casa Mineira, ein in Brasilien ansässiges Immobilienunternehmen. In einer auf der Website durchgeführten Fallstudie trug das Ersetzen des Standardsuchfelds durch Dropdown-Menüs dazu bei, mehr Leads zu generieren. Tatsächlich führte die Variation zu 57,25 % mehr Leads als zuvor.
Der Grund, warum diese Variante so gut abgeschnitten hat, liegt darin, dass den Besuchern ein klarer Handlungspfad gegeben wurde und sie schnell finden konnten, was sie suchten. Beim bisherigen Design mussten sich die Besucher sicher sein, was genau sie suchen. Um die Besucher besser zu führen, entschieden sie sich daher, eine Vielzahl von Orten und Arten von Unterkünften abzudecken.
Beachten Sie jedoch, dass diese Option möglicherweise nicht für alle Arten von Websites geeignet ist. Ein E-Commerce-Shop ist beispielsweise möglicherweise nicht in der Lage, die Suche für Besucher mit dieser Technik funktionaler zu gestalten. Aber für Immobilienunternehmen und dienstleistungsbezogene Unternehmen könnte eine Dropdown-Suchfunktion die perfekte Lösung sein.
Endeffekt
Mithilfe von Beispielen und Tipps haben Sie jetzt ein besseres Verständnis für das Design und die Platzierung von Suchfeldern. Was haben Sie daraus gelernt? Vielleicht ist Ihnen aufgefallen, wie viel Wert auf die Hervorhebung und Sichtbarkeit des Suchfelds gelegt wird. Das bedeutet, dass Farbkontrast, Ästhetik und Größe des Suchfelds einige der wichtigsten Aspekte sind.
Ihr Fokus sollte auf der Kombination von Funktionalität und Ästhetik liegen, was möglicherweise nicht einfach umzusetzen ist. Der beste Rat, den Sie erhalten können, ist die Durchführung von A/B-Tests für verschiedene Designs und Positionen, wie in den vorherigen Punkten erwähnt. Haben Sie Fragen zum Design von Suchfeldern? Fühlen Sie sich frei, unten einen Kommentar zu hinterlassen.