Google ist bekannt für seine einfache Startseite mit einer breiten Suchleiste in der Mitte. Da es sich um eine Website für die Suche handelt, ist es sinnvoll, die Aufmerksamkeit der Benutzer gleich darauf zu lenken. Auch wenn Ihre Website Ihre Suchfunktionen nicht ganz so zentral darstellen muss, ist es wichtig, eine offensichtliche und attraktive Suchleiste zu haben, die für Kunden leicht zu finden und zu verwenden ist.

Lassen Sie uns die Gestaltung einer Suchleiste mit CSS und HTML mit einem Schritt-für-Schritt-Tutorial aufschlüsseln, mit dem Sie einen eleganten, klaren Look erhalten, der Ihre Kunden begeistert.

So gestalten Sie eine Suchleiste mit CSS & HTML

Die Erstellung einer Suchleiste muss nicht kompliziert sein – und auch nicht ausschließlich Ihrem Programmierteam überlassen werden. Es reichen sogar schon geringe Programmierkenntnisse dafür. Führen Sie unsere Schritte aus, um Ihre Suchleiste zu konfigurieren. Sobald Sie die Grundlagen beherrschen, können Sie die Funktionen nach Belieben ausprobieren und die Suchleiste so anpassen, dass sie Ihren Vorstellungen entspricht.

Erster Schritt: Konfigurieren Sie den HTML-Code

Durch die Einrichtung des HTML-Codes, können Sie mit der Grundlage für Ihre Suchfunktion beginnen. Kopieren Sie einfach denunten stehenden Text und fügen Sie ihn in den Code Ihrer Website ein. Wenn wir den Code analysieren, lassen sich diese wichtigen Bestandteile identifizieren:

• Wrapper – Sie sind die „Umhüllung" der Suchleiste. Wrapper werden für Webseiten-Elemente häufig verwendet, da diese dadurch vom Rest der Seite getrennt bleiben. Sie können also ganz einfach bearbeitet oder gelöscht werden, ohne dass dadurch andere Elemente durcheinanderkommen.
• Suchsymbol – Gestalten Sie die Suche ein wenig raffinierter, indem Sie dieses Symbol oder das Löschen-Symbol verwenden, das Sie in der vierten Zeile des Codes sehen. Je nach Stil Ihrer Website finden Sie viele Lupen- oder Pfeil-Symbole zur kostenlosen oder Premium-Nutzung.
• Eingabe – Dies ist der entscheidende Teil des Leitfadens, da Sie in diesem Eingabe-Abschnitt Ihre Stilelemente hinzufügen werden.

Mithilfe des Codes können Sie Ihre Such- und Löschen-Symbole erstellen, diese werden aber noch nicht so auf der Website platziert oder angeordnet, dass Ihre Suchleiste einheitlich aussieht. Indem Sie Ihrem Wrapper Anweisungen geben, stellen Sie sicher, dass sich Ihre Symbole und die Suchleiste nebeneinander befinden. Dieser Schritt stellt auch sicher, dass Ihre Suchleiste lang genug ist, damit Kunden ihre gesamte Anfrage eingeben können, ohne dass diese in der Mitte abgeschnitten wird.

Dritter Schritt: Gestaltung der Symbole

Nun kommt der Teil, in dem Sie Ihre Such- und Löschen-Symbole mit der Suchleiste selbst ausrichten. Achten Sie darauf, dass sie genau passen, damit die Symbolgrafik nicht zum Teil über der Suchleiste liegt oder zu weit weg ist. Probieren Sie also ruhig die Abmessungen für oben, rechts und die Breite ein wenig aus.

Sie werden feststellen, dass das Löschen-Symbol ein paar zusätzliche Codezeilen enthält, die beim Suchsymbol fehlen. Das liegt daran, dass das Löschen-Symbol nicht immer sichtbar sein soll, da dies die Kunden verwirren könnte. Es sollte stattdessen erst erscheinen, wenn die Kunden etwas in Ihr Suchfeld eingegeben haben, damit sie die Maus darüber bewegen und das Textfeld löschen können, wenn sie möchten.

Vierter Schritt: Gestaltung der Eingabe

Wenn der Wrapper eingerichtet ist und die Symbole am richtigen Platz sind, ist es Zeit für die Erstellung der Suchleiste. Hier können Sie Ihrer Kreativität freien Lauf lassen. Im Code unten finden Sie Beispielfarben. Am besten wählen Sie jedoch Farben, die zu Ihrer Website-Farbpalette passen, um sicherzugehen, dass die Suchleiste für Kunden sichtbar ist.

Im ersten Teil des Codes geht es darum, einen Rahmen zu erstellen. Wie Sie sehen können, ist das Beispiel grau, aber auch das lässt sich leicht ändern. Wir haben zudem die Breite auf 100 % eingestellt, sodass der gesamte Wrapper ausgefüllt wäre. Das mag zu breit erscheinen, selbst für etwas so Wichtiges wie Ihre Suchleiste – es ist aber viel einfacher, die Größe eines Wrappers anzupassen, als später die Suchleiste zu ändern.

Die nächste Eigenschaft nennt sichPadding. Der Code berücksichtigt die Innenabstände zwischen den Seiten, einschließlich oben und unten. Berücksichtigen Sie hierbei die größeren Zahlen für das rechte und linke Padding (23 bzw. 30). Das Padding auf der rechten und linken Seite muss groß genug sein, um alle Icons bequem einzufassen. Wählen Sie größere oder komplizierte Icons, müssen Sie diese Maße möglicherweise anpassen.

Für den Umriss haben wir den Wert auf 0 gesetzt, da einige Browser automatisch einen leuchtenden Umriss hinzufügen, andere wiederum nicht. Der Einfachheit halber haben wir diese Möglichkeit ganz ausgeschlossen. Wir haben außerdem einen hellgrauen Hintergrund zu dieser Beispiel-Suchleiste hinzugefügt, damit sie so neutral wie möglich wird.

Fünfter Schritt: Zusätzliche Gestaltung

Eine der besten Möglichkeiten, die Aufmerksamkeit des Nutzers auf die Suchleiste zu lenken, besteht darin, sie so zu konfigurieren, dass sie sich verändert, wenn der Benutzer mit der Maus über sie fährt. Dies kommt auch Personen mit Sehbehinderung entgegen, wenn sich etwa die Farbe bei Berührung mit derMaus verändert. Während sich die Maus über der Leiste befindet, ändert sich die Farbe des Rahmens und wird blau, während der Hintergrund weiß wird.

Sechster Schritt: Konfigurieren des Löschen-Symbols

Wie wir bereits ein paar Schritte zuvor erwähnt haben, sollte das Löschen-Symbol nicht dauerhaft in Ihrer Suchleiste zu sehen sein. Es kann für Kunden verwirrend sein, wenn sie es bereits sehen, bevor sie etwas eingegeben haben, und Sie sollten den Suchprozess so einfach und unkompliziert wie möglich gestalten.

Durch diesen Code wird das Löschen-Symbol nur angezeigt, wenn der Text bereits in die Suchleiste eingegeben wurde. Außerdem kann das Löschen-Symbol so seine Funktion erfüllen und jeden beliebigen Text löschen, wenn es angeklickt wird. Im Gegensatz zum vorherigen Code, der in HTML geschrieben war, ist der folgende Code in JavaScript verfasst.

Ihre Suchleiste ist fertig

Das war's! Mit diesen einfachen sechs Schritten haben Sie eine funktionierende Suchleiste, die zum Thema und Design Ihrer Website passt. Natürlich ist eine vorhandene Suchleiste aber noch nicht die Antwort auf alles. Jetzt müssen Sie dafür sorgen, dass die Suchleiste auch tatsächlich funktioniert, und das erfordert eine ganze Menge mehr Know-how in der Programmierwelt.

So verbessern Suchleisten das Erlebnis

Anstatt Suchleisten in letzter Minute hinzuzufügen, lernen immer mehr Unternehmen auf die harte Tour, dass Kunden von ihnen erwarten, Suchleisten zu priorisieren. Ihre Kunden sind sehr beschäftigt – sie möchten nicht auf altmodische Art und Weise auf jeder Seite suchen, um herauszufinden, ob Sie das Produkt oder die Dienstleistung anbieten, die sie suchen.

Genauso wenig möchten sie sich mit Suchleisten herumschlagen, die auf eine Seite mit null Ergebnissen führen. Oder, schlimmer noch: auf endlos viele Seiten mit völlig irrelevanten Beiträgen. Kunden eine einfache Frage stellen können und eine ergiebige, informative Antwort erhalten.

Antworten statt Links

Die Zeit Ihrer Kunden wertzuschätzen ist eine der besten Möglichkeiten, sich ihren Respekt und ihre Markentreue zu verdienen. Mit intelligenten Suchmaschinen bieten Sie Ihren Benutzern konkrete Produkte, Dienstleistungen oder Antworten anstelle einer Ergebnisseite voller Hyperlinks mit Deskriptoren, die aus einem Satz bestehen. Ihre Kunden müssen keine Ratespiele mit Ihrer Website spielen, sondern können direkt auf ein Produkt klicken, das ihren Bedürfnissen am besten entspricht, und so unmittelbar auf die Seite gelangen.

Sie müssen sich nicht mehr anhand der vagen Beschreibung fragen, ob dieser Link die richtigen Informationen liefert, nur um dann auf den Zurück-Button zu klicken und erneut durch die Ergebnisse zu scrollen. Wenn Sie Ihre Produkte direkt anzeigen, können Sie zudem ganz einfach wichtige Aspekte beifügen, wie etwa den Preis, Materialien, Farben, Bewertungen, ein Bild und die Option, ein Produkt direkt von der Suchseite zum Warenkorb eines Kunden hinzuzufügen.

Sprache auf natürliche Art

Eine leistungsstarke Funktion von Suchtools ist die Verarbeitung natürlicher Sprache. So können Benutzer Fragen auf eine Art und Weise stellen, mit der sie sich wohlfühlen, anstatt sich die richtige Kombination von Schlüsselwörtern ausdenken zu müssen, um zu finden, was sie brauchen. Die Verarbeitung natürlicher Sprache ist eine weitere Möglichkeit, die Suche durch Ihre Website-Inhalte einfacher und zugänglicher zu gestalten.

So sollte beispielsweise das Wort „beste" so interpretiert werden, dass Produkte oder Dienstleistungen angezeigt werden sollen, die mit mindestens vier von fünf Sternen bewertet wurden. Eine Suchfunktion mit natürlicher Sprachverarbeitung versteht, wie dieser Filter auf Suchergebnisse angewendet werden muss, anstatt einfach Beiträge oder Produkte anzuzeigen, die das Wort „beste" im Namen oder in der Beschreibung enthalten.

Ein weiteres gutes Beispiel ist die Interpretation von Modifikatoren. Wir neigen dazu, viele Modifikatoren oder Qualifikatoren zu verwenden, um unsere Aussagen in natürlicher menschlicher Sprache einzugrenzen. Personen nennen zum Beispiel ihren Standort oder einen Produkttyp oder möchten wissen, ob eine Filiale gerade geöffnet hat. Bei Suchmaschinen, die keine natürliche Sprache verwenden, müssen viele zusätzliche Wörter analysiert werden, was unter Umständen zu einer Reihe irrelevanter Ergebnisse führt.

Geben Sie Ihren Kunden ihre Selbstständigkeit zurück

Kunden möchten die Antworten auf ihre Fragen lieber über Ihre Website finden, anstatt den Kundenservice kontaktieren zu müssen. Je nachdem, welche Art von Support Sie anbieten, müssen Kunden unter Umständen endlos in einer Warteschleife am Telefon auf etwas warten, das sie auch schnell und einfach online hätten erledigen können.

Wenn Kunden nicht finden, wonach sie suchen, lenken sie ihre Aufmerksamkeit wahrscheinlich in andere Richtungen und gelangen somit zur Konkurrenz, um ihre Antworten online zu finden, anstatt jemanden kontaktieren zu müssen. Ein E-Mail-Support braucht oft Tage für eine Antwort. Der Support über einen Live-Chat kommt dem Finden von Informationen online am nächsten, aber selbst dann sind Benutzer durch den KI-Bot, mit dem sie chatten, eingeschränkt oder sie möchten außerhalb der normalen Geschäftszeiten Informationen erhalten.

Mit einer leistungsstarken, intelligenten Suchmaschine bieten Sie Ihren Kunden die Möglichkeit, ihre Probleme selbst zu lösen und die benötigten Informationen zu finden, ohne jemand anderen einbeziehen zu müssen. Auch hier gilt: Die Zeit Ihrer Kunden zu respektieren, ist eine fantastische Möglichkeit, sie an Ihre Marke zu binden.

Sparen Sie Geld beim Support

Der Vorteil: Wenn Kunden weniger Support benötigen, kann Ihr Unternehmen unter Umständen viel Geld sparen. Sie können eindeutig erkennen, dass etwas schiefläuft, wenn Kunden laufend anrufen oder E-Mails senden, um grundlegende Fragen zu stellen, die Sie bereits in einem FAQ-Beitrag beantwortet haben, oder um Transaktionen durchzuführen, die auf Ihrer Website verfügbar sind.

Sie geben wahrscheinlich viel Geld für den stundenlangen Support durch Kundenservice-Mitarbeiter aus, den die Kunden längst selbst hätten erledigen können. Mit den richtigen Suchtools können Kunden ihre eigenen Antworten finden und Ihr Unternehmen kann Gemeinkosten einsparen.

Es wird natürlich immer Kunden geben, die unter besonderen Umständen den persönlichen Kontakt brauchen, um durch einen Prozess geführt zu werden oder Antworten auf komplizierte Fragen zu erhalten. Letzten Endes können Sie nicht alle Eventualitäten berücksichtigen. Wenn Sie aber alle Benutzer aussortieren, die einfache Probleme selbst online lösen können, sparen Sie die Zeit Ihrer Kundenservice-Mitarbeiter für jene Kunden, die wirklich ihre Aufmerksamkeit benötigen.

Machen Sie die Angelegenheit persönlich

Im digitalen Zeitalter, in dem Online-Benutzer mehrere Profile haben, haben sich Kunden an Personalisierung gewöhnt. Amazon hat das Ganze auf die nächste Stufe gehoben und bietet Vorschläge auf der Grundlage früherer Suchanfragen, die erscheinen, sobald sich Nutzer bei der Website anmelden.

Ihr Unternehmen ist vielleicht nicht Amazon, aber wenn Sie erfolgreich sein und die Conversion Rate ankurbeln möchten, müssen Sie Ihren Benutzern Personalisierung bieten. Die Optimierung Ihrer Website zur Maximierung des Traffic und der Conversion Rate ist schließlich das oberste Ziel eines jeden Unternehmens.

Kunden sind mit ihrem Einkaufserlebnis zufriedener, wenn die Umgebung personalisiert ist. Neben einem Warenkorb steht die Begrüßung von Kunden mit ihren Vornamen ganz oben auf der Liste. Das Speichern des Bestell- und Suchverlaufs ist eine großartige Möglichkeit, Ihren Kunden zu zeigen, dass sich Ihr Unternehmen bemüht und ihre Suche verbessern möchte.

Für Kunden, die erneuerbare oder Verbrauchsprodukte kaufen, ist es äußerst praktisch, einfach ihre vorherigen Bestellungen durchzugehen und den gleichen Kauf erneut zu tätigen, anstatt mühsam durch Ihre Website zu navigieren, um genau das gleiche Produkt zu finden.

Das Speichern von Such- und Kaufverläufen kann auch bei vorgeschlagenen Ergebnissen und Funktionen zur Autovervollstädigung hilfreich sein. Wenn Sie wissen, dass ein Kunde in der Vergangenheit Katzenfutter gekauft hat, kann Ihre Suchleiste den Ausdruck „Katzenstreu" schon nach nur wenigen Buchstaben automatisch vervollständigen. Oder sie kann intelligent vorhersagen, dass der Benutzer nach „Katzenstreu" suchen wollte, wenn dieser aus Versehen „Katzenstrue" eingegeben hat.

Fazit

Wenn Sie lernen, wie Sie Ihre eigene Suchleiste individuell gestalten können, ist das nur der Anfang, um den Bedürfnissen Ihrer Kunden gerecht zu werden. Der nächste Schritt besteht in der Nutzung einer Plattform, mit der Sie Ihrer internen Suchmaschine die Verarbeitung natürlicher Sprache ermöglichen können, damit Ihre Kunden immer genau das finden, was sie suchen – egal, wie sie ihre Fragen stellen.

Kontaktieren Sie uns noch heute und erfahren Sie mehr darüber, wie effektive Tools für die Website-Suche Ihre Kunden-Conversion und den Traffic auf Ihrer Website ankurbeln können.

Quellen

1. How To Create a Search Bar | W3 Schools
2. Styling a Search Bar | CSS | Mike Dane
3. Create a Search Bar using HTML and CSS | Geeks for Geeks/