Ein Suchfeld ist eines der wichtigsten Elemente, das in fast jedem Website-Design enthalten ist. Während die Erstellung dieses kleinen Elements manchmal zu einem Nachdenken wird, gibt es keinen Grund, warum das Suchfeld nicht so schön gestaltet werden sollte wie der Rest einer Website.
Das Design eines Suchfelds sollte dem Rest der Website entsprechen, funktional und einfach zu verwenden sein und an einem für den Benutzer offensichtlichen Ort platziert werden. Heute werfen wir einen Blick auf einige großartige Suchfelder und einige Tools, die Ihnen bei Ihrem Entwurf helfen.
Benötigt Ihre Site ein Suchfeld?
Die einfache Antwort lautet ja. Wenn Ihre Website eine erhebliche Menge an Inhalten enthält - denken Sie mehr als eine Teaser- oder Splash-Seite -, ist ein Suchfeld ein Muss.
Ein Suchfeld erleichtert Benutzern das Auffinden von Inhalten. Außerdem können Sie Informationen darüber sammeln, was Nutzer auf Ihrer Website suchen möchten und zu denen sie gelangen möchten, beispielsweise Produktinformationen, die Verwendung von Keywords und die Wünsche und Bedürfnisse der Nutzer.
Andererseits können Websites, die als Teaser- oder Splash-Seite fungieren, auch ohne die Verwendung einer Suchfunktion funktionieren. Im Allgemeinen denken Sie vielleicht, dass Websites mit einer Seite in diese Kategorie fallen, aber dies hängt wirklich von der Größe, dem Umfang und dem Design ab. Einzelseitige Websites mit viel Inhalt durch die Verwendung von Elementen wie Parallax-Scrolling könnten von der Suchfunktion profitieren.
Suchfunktion
Eine der größten Fragen bei der Suche ist: Was soll es tun? Dies mag als naheliegende Frage und Antwort erscheinen, wie Suchfunktionen von Website zu Website variieren können. Nutzer können unterschiedliche Erwartungen hinsichtlich der Funktionsweise der Suche haben, je nach Inhalt der Website.
Einfache Suche: Die gebräuchlichste Art der Website-Suche ist eine Box, die einen Ort enthält, an dem Sie eingeben können, wonach Sie suchen, und eine Suchfunktion. oder? einreichen? Taste. (Wir verwenden diese Art der Suche hier auf der Design Shack-Site.) Häufig enthält die Box, was auf der Site durchsucht werden kann, z. B. Schlüsselwörter oder Artikelnummern.
Intelligente Suche: Google ist der führende Anbieter von intelligenten Suchanfragen, die bei der Suche nach Suchergebnissen basierend auf gängigen Suchbegriffen und der Relevanz für die Website helfen.
Gefilterte Suche: Websites, die gefilterte Suche verwenden, geben dem Benutzer Optionen an, nach was oder wo innerhalb der Website nach etwas gesucht werden soll. Amazon ist ein Paradebeispiel für die Verwendung der gefilterten Suche. In der oberen Leiste können Sie die gesamte Site nach einem Artikel durchsuchen oder auf eine bestimmte Produktkategorie eingrenzen. (Amazon verwendet auch eine intelligente Suche, die zeigt, dass Sie nicht auf eine Suchfunktion beschränkt sind.)
Suchfeldplatzierung
Es gibt einen guten Grund, warum bei fast jeder besuchten Website oben ein Suchfeld angezeigt wird. Dort erwarten die Benutzer es.
Eine Analyse von Site Search Today ergab, dass sich unter den 50 größten Einzelhändlern in den USA ein Suchfeld oben auf der Seite befindet. Von diesen hatten 54 Prozent ein Suchfeld oben rechts, 30 Prozent oben in der Mitte und 16 Prozent oben links auf der Seite. Die Ergebnisse waren in einer Studie mit britischen Einzelhändlern ähnlich, wobei ein großer Vorbehalt bestand. Die Suche befindet sich häufiger in der oberen Mitte des Standortes, gefolgt von rechts oben.
Die Platzierung, die Sie vermeiden sollten, befindet sich irgendwo unterhalb der Bildlaufleiste oder am unteren Rand der Website. (Das heißt, es sei denn, Sie enthalten ein Suchfeld an beiden Orten.) Designer sollten es auch vermeiden, das Suchfeld im Navigationsmenü oder in einer Symbolleiste auszublenden.
Such-IDs
Suchwerkzeuge sollten leicht zu identifizieren und zu verwenden sein. Wenn Benutzer das Tool nicht finden können, kann dies zu Frustration führen oder dazu führen, dass ein Benutzer Ihre Website verlässt.
Übliche Suchbezeichnungen sind ein Feld mit der Wortsuche oder eine Lupe neben einem Eingabefeld. Das ist es. Beim Entwerfen einer Suche ist eine dieser Optionen die beste Wahl.
Und vergessen Sie nicht die Aktionstaste. Genau wie bei den Such-IDs sollte auch die Schaltfläche zum Ausführen der tatsächlichen Suche einfach sein. Verwenden Sie ein Wort wie "Suchen". oder? finden. ?Gehen? ist eine andere akzeptable Option.
Suche nach Design-Tipps
Bei der Erstellung eines Suchfelds (oder vieler anderer allgemeiner Benutzeroberflächenelemente) ist die Einfachheit der Schlüssel. Ein Suchfeld erfordert mehrere Dinge: ein Eingabefeld, einen Titel, eine Aktionsschaltfläche und Anweisungen.
Beim Entwerfen eines Suchfelds sollte sich das Design auf ein Feld konzentrieren. Klingt einfach, richtig? Beachten Sie, dass das Feld groß genug sein muss, um gängige Suchbegriffe einzugeben (und anzuzeigen), die für Ihre Website relevant sind, und Text enthält, der groß genug ist, um ihn in einer einfachen Schrift zu lesen. Halten Sie sich fern von extrem kleinen Schriften, Neuheiten oder Skripten.
Machen Sie klar, dass Sie suchen. Kennzeichnen Sie Ihre Suchfunktion als solche, entweder mit einem Titel neben oder über dem Feld oder mit Text innerhalb des Felds, das die Benutzer dazu auffordert, die Site hier zu suchen.
Stellen Sie sicher, dass die Benutzer wissen, wie die Suche verwendet wird. Fügen Sie einfache Anweisungen in das Suchfeld ein, die ihnen sagen, was sie mit dem Tool finden können. (Stellen Sie jedoch sicher, dass der Beispieltext nicht mehr angezeigt wird, wenn der Benutzer das Kästchen anklickt, um das Feld einzugeben oder zu aktivieren.) Fügen Sie schließlich eine eindeutige Aktionsschaltfläche für die Übermittlung der Suche hinzu.
Suchwerkzeuge und Ressourcen
Google-Suchmaschine
Sie können die Google-Suche zu Ihrer Website mit einem einfachen Tool hinzufügen, das für die grundlegenden Funktionen kostenlos ist und an Ihr Website-Design angepasst werden kann. Google bietet außerdem ein kostenpflichtiges Suchtool mit zusätzlichen Extras, darunter mehr Designoptionen, für 100 US-Dollar pro Jahr.
Sucheingabe mit Vorschlag
Diese einfache Box wird als Adobe Photoshop-Datei geliefert, die Sie etwas anpassen können, um Ihr Suchfelddesign zu beschleunigen. Die mehrstufige Vektordatei wird mit einer automatischen Vorschlagsfunktion geliefert und kostet nur $ 2 von Creative Market.
Suchleiste Dropdown
Diese einfache Suchleistendatei verwendet ein einfaches Suchformat mit einer Dropdown-Liste für Menüoptionen.Die Photoshop-Datei kann mit angemessener Gutschrift kostenlos heruntergeladen werden.
Erweiterbares Suchfeld
Wenn Sie wissen möchten, wie Sie Ihr Suchfeld codieren, sehen Sie sich diese erweiterbare Option an, die in CodePen verfügbar ist.
CSS3 Form Pack
Wenn Sie nicht ganz sicher sind, nach welchem Stil des Suchfelds Sie suchen, enthält das CSS3 Form Pack sechs Suchformularstile. Die Lizenz für das gesamte Paket beträgt $ 4 für eine schöne Sammlung von Leckereien.
So erstellen Sie ein Suchformular
Wenn Sie aus dem Code aufbauen, haben Sie auch eine große Kontrolle über Ihr Suchfeld. SpeckyBoy Design bietet ein hervorragendes Beispiel für einfachen Code für ein sauberes Suchfeld, das für fast jeden, der über grundlegende Codierkenntnisse verfügt, leicht zu verstehen ist.
Fazit
Ein tolles Suchfeld ist zwar nicht der lustigste Teil des Designprozesses, aber es ist oft ein wesentlicher Bestandteil Ihrer Website. Denken Sie beim Erstellen eines Suchfelds zuerst an den Benutzer und dann an das Gesamtdesign.
Suchfelder können Ihrer Website großartige Funktionen hinzufügen und dabei großartig aussehen. Entscheiden Sie sich für eine Box, die zum Gesamtthema Ihrer Website passt und sich darin einfügt, ohne sie jedoch insgesamt zu verbergen.
Wenn Sie noch mehr Suchfelder sehen möchten, besuchen Sie die Design Shack-Galerie.
Bildquelle: Suchfeld von Jamie Syke.