8 fragmentos de CSS y JavaScript para hacer que el campo de búsqueda sea atractivo

El campo de búsqueda es en gran medida una parte utilitaria de su sitio web promedio. Pero eso no significa que deba ignorarse. Todo lo contrario.

La búsqueda proporciona a los usuarios una forma sencilla de encontrar lo que están buscando y puede ser invaluable en sitios con mucho contenido. Por lo tanto, vale la pena tomarse un tiempo extra para asegurarse de que su área de búsqueda sea atractiva, notable y fácil de usar.

Con eso en mente, aquí hay una colección de fragmentos que llevan el humilde campo de búsqueda a un nivel superior. Van desde simples mejoras estéticas de CSS hasta UI con infusión de JS que ayudan a crear una experiencia más inmersiva.

Icono Morphing

La animación de transformación es siempre un placer. Aquí tenemos el icono de lupa omnipresente que, cuando se hace clic, se transforma en una barra de búsqueda completa. Al hacer clic en la “X”, todo vuelve al punto de partida. Esta podría ser una buena solución para pantallas más pequeñas, ya que simplemente puede guardar el campo cuando no esté en uso.

Solo pasa el mouse y busca

Este ejemplo ofrece una funcionalidad similar a la anterior, pero con una diferencia importante. En lugar de tener que hacer clic para revelar el campo de búsqueda, un usuario solo necesita pasar el cursor sobre el icono. Esto puede ser algo relativamente pequeño, pero podría proporcionar un impulso cuando se trata de usabilidad. Una vez más, una opción potencialmente sólida para espacios reducidos.

Los Scrollers también necesitan buscar

En los dispositivos móviles, los usuarios pueden realizar muchos desplazamientos. Pero si no pueden encontrar lo que están buscando, a menudo significa que tendrán que volver al encabezado del sitio para realizar una búsqueda. Aquí tenemos una barra de búsqueda “adhesiva” que se adjuntará a la parte superior de la pantalla a medida que se desplaza hacia abajo en la página. Esta práctica característica puede hacer la vida mucho más fácil para los usuarios.

Una pantalla llena de material

El diseño de materiales de Google se está utilizando bastante en estos días. Por lo tanto, es natural que el lenguaje de diseño se aplique a la búsqueda también. También es bueno que, una vez que se hace clic, este campo de búsqueda ocupa toda la pantalla. Esto permite a los usuarios centrarse únicamente en su búsqueda y, con un poco de trabajo, los diseñadores podrían agregar otra información relacionada a la pantalla.

Búsqueda personalizada simple

Puede haber ocasiones en que los usuarios quieran buscar solo áreas específicas de su sitio. Si bien una búsqueda personalizada no es exactamente un concepto nuevo, no siempre ha sido un proceso visualmente atractivo. Eso es lo que hace que esta demostración de campo de búsqueda personalizada sea tan elegante. Tiene una serie de íconos, cada uno de los cuales representa un área diferente donde se puede realizar una búsqueda (más útiles consejos sobre herramientas). El usuario simplemente hace clic en el área que desea buscar, ¡fácil!

Animación de contexto

Proporcionar contexto visual durante una búsqueda ayuda a asegurar a los usuarios que están en el camino correcto. Este fragmento utiliza AJAX para cambiar el color de fondo y agregar información textual a medida que el usuario realiza una búsqueda.

Transparencia

¿Cómo se crea un área de búsqueda que se destaque sin sobresalir como un pulgar dolorido? Usar algo de transparencia es una forma de hacerlo. Aquí tenemos un campo de búsqueda translúcido que se encuentra en la parte superior de una imagen de pantalla completa. Sin embargo, el borde blanco es fuerte, y eso crea un agradable efecto visual sin adelantar a la página.

Búsqueda múltiple

Para los sitios que permiten a los usuarios buscar más de un conjunto de datos, este ejemplo puede ser bastante útil. Aprovecha jQuery para permitir al usuario cambiar entre diferentes campos de búsqueda, colocando así toda la funcionalidad de búsqueda en un solo lugar.

El final resulto

Los campos de búsqueda pueden desempeñar un papel vital para mantener a los usuarios en su sitio web. Y los ejemplos anteriores son prueba de que puede proporcionar algunas mejoras útiles sin mucho esfuerzo adicional. Por lo tanto, si ha descuidado prestar mucha atención cuando se trata del aspecto y la funcionalidad de la función de búsqueda de su sitio, esto le dará un excelente lugar para comenzar.