
Das Suchfeld ist ein nützlicher Bestandteil Ihrer durchschnittlichen Website. Das heißt aber nicht, dass es ignoriert werden sollte. Andererseits.
Die Suche bietet Benutzern eine einfache Möglichkeit, das Gesuchte zu finden, und kann auf Websites mit vielen Inhalten von unschätzbarem Wert sein. Es lohnt sich also, sich die zusätzliche Zeit zu nehmen, um sicherzustellen, dass Ihr Suchbereich attraktiv, bemerkenswert und benutzerfreundlich ist.
In diesem Sinne finden Sie hier eine Sammlung von Ausschnitten, die das bescheidene Suchfeld auf die nächste Ebene heben. Sie reichen von einfachen ästhetischen CSS-Verbesserungen bis zu JS-infundierten Benutzeroberflächen, die zu einer umfassenderen Erfahrung beitragen.
Morphing-Symbol
Transformationsanimation ist immer ein Vergnügen. Hier haben wir das allgegenwärtige Lupensymbol, das sich beim Klicken in eine vollständige Suchleiste verwandelt. Durch Klicken auf das “X” wird alles zum Startpunkt zurückgebracht. Dies könnte eine gute Lösung für kleinere Bildschirme sein, da Sie das Feld einfach speichern können, wenn es nicht verwendet wird.
Einfach mit der Maus darüber fahren und suchen
Dieses Beispiel bietet ähnliche Funktionen wie das vorherige, jedoch mit einem wichtigen Unterschied. Anstatt klicken zu müssen, um das Suchfeld anzuzeigen, muss der Benutzer nur mit der Maus über das Symbol fahren. Dies mag relativ klein sein, könnte aber die Benutzerfreundlichkeit verbessern. Wieder eine potenziell solide Option für enge Räume.
Scroller müssen auch suchen
Auf Mobilgeräten können Benutzer viele Reisen unternehmen. Wenn sie jedoch nicht finden können, wonach sie suchen, bedeutet dies häufig, dass sie zum Site-Header zurückkehren müssen, um eine Suche durchzuführen. Hier haben wir eine “klebrige” Suchleiste, die am oberen Bildschirmrand angehängt wird, wenn Sie die Seite nach unten scrollen. Diese praktische Funktion kann den Benutzern das Leben erheblich erleichtern.
Ein Bildschirm voller Material
Das Materialdesign von Google wird heutzutage häufig verwendet. Daher ist es selbstverständlich, dass die Designsprache auch für die Suche gilt. Es ist auch schön, dass dieses Suchfeld nach dem Klicken den gesamten Bildschirm einnimmt. Auf diese Weise können sich Benutzer ausschließlich auf ihre Suche konzentrieren, und mit ein wenig Arbeit können Designer dem Bildschirm weitere verwandte Informationen hinzufügen.
Einfache benutzerdefinierte Suche
Es kann vorkommen, dass Benutzer nur bestimmte Bereiche Ihrer Website durchsuchen möchten. Eine benutzerdefinierte Suche ist zwar kein neues Konzept, aber nicht immer ein visuell ansprechender Prozess. Das macht diese benutzerdefinierte Suchfeld-Demo so stilvoll. Es verfügt über eine Reihe von Symbolen, von denen jedes einen anderen Bereich darstellt, in dem eine Suche durchgeführt werden kann (nützlichere QuickInfos). Der Benutzer klickt einfach auf den Bereich, nach dem er suchen möchte, ganz einfach!
Kontextanimation
Durch die Bereitstellung eines visuellen Kontexts während einer Suche wird sichergestellt, dass Benutzer auf dem richtigen Weg sind. Dieses Snippet verwendet AJAX, um die Hintergrundfarbe zu ändern und Textinformationen hinzuzufügen, während der Benutzer sucht.
Transparenz
Wie erstellen Sie einen Suchbereich, der hervorsticht, ohne wie ein schmerzender Daumen hervorzustechen? Die Verwendung von Transparenz ist eine Möglichkeit, dies zu tun. Hier haben wir ein durchscheinendes Suchfeld oben in einem Vollbild. Der weiße Rand ist jedoch stark, und dies erzeugt einen schönen visuellen Effekt, ohne die Seite zu überholen.
Mehrfachsuche
Für Websites, auf denen Benutzer mehr als einen Datensatz durchsuchen können, kann dieses Beispiel sehr nützlich sein. Nutzen Sie jQuery, um dem Benutzer das Wechseln zwischen verschiedenen Suchfeldern zu ermöglichen und so alle Suchfunktionen an einem Ort zu platzieren.
Das Ende stellte sich heraus
Suchfelder können eine wichtige Rolle dabei spielen, Benutzer auf Ihrer Website zu halten. Die obigen Beispiele sind ein Beweis dafür, dass Sie ohne großen Aufwand einige nützliche Verbesserungen erzielen können. Wenn Sie es also versäumt haben, genau auf das Erscheinungsbild der Suchfunktion Ihrer Website zu achten, ist dies ein guter Ausgangspunkt.