Un cuadro de búsqueda es una de las piezas esenciales que se incluye en casi todos los diseños de sitios web. Aunque a veces la creación de este pequeño elemento se convierte en una idea de último momento, no hay ninguna razón por la que el cuadro de búsqueda no deba diseñarse de forma tan hermosa como el resto de un sitio web.
El diseño de un cuadro de búsqueda debe reflejar el del resto del sitio, ser funcional y fácil de usar y ubicarse en una ubicación que sea obvia para los usuarios. Hoy, vamos a echar un vistazo a algunos grandes cuadros de búsqueda y algunas herramientas para ayudarle a través de su propio diseño.
¿Su sitio necesita un cuadro de búsqueda?
La respuesta simple es sí. Si su sitio incluye una cantidad significativa de contenido (piense más que en una página de presentación o de presentación), un cuadro de búsqueda es una necesidad.
Tener un cuadro de búsqueda facilita que los usuarios encuentren contenido. También puede ayudarlo a recopilar información sobre lo que los usuarios desean encontrar y para los que acudirán a su sitio, como información sobre productos, uso de palabras clave y deseos y necesidades de los usuarios.
Por otro lado, los sitios que funcionan como reclamo o página de inicio pueden estar bien sin la inclusión de una función de búsqueda. En general, podría pensar que los sitios web de una sola página se incluyen en esta categoría, pero realmente depende del tamaño, el alcance y el diseño. Los sitios web de una sola página con gran cantidad de contenido mediante el uso de elementos como el desplazamiento de paralaje podrían beneficiarse de la inclusión de la funcionalidad de búsqueda.
Funcionalidad de búsqueda
Una de las preguntas más importantes cuando se trata de buscar es: ¿qué debería hacer? Si bien esto puede parecer una pregunta y respuesta obvia, las funciones de búsqueda pueden variar de un sitio a otro. Los usuarios pueden tener diferentes expectativas sobre cómo funcionará la búsqueda también en función del contenido del sitio.
Búsqueda simple: El tipo más común de búsqueda de sitios web está diseñado en torno a un cuadro que incluye un lugar para escribir lo que está buscando y una búsqueda? o? enviar? botón. (Usamos ese tipo de búsqueda aquí en el sitio de Design Shack). A menudo, el cuadro incluirá lo que se puede buscar en el sitio, como palabras clave o números de artículos.
Búsqueda inteligente: Google es el líder en lo que respecta a la búsqueda inteligente, que ayuda a completar lo que busca en función de los términos de búsqueda populares y la relevancia para el sitio.
Búsqueda filtrada: Los sitios que utilizan la búsqueda filtrada, le dan al usuario opciones sobre qué o dónde buscar algo dentro del sitio. Amazon es un excelente ejemplo del uso de búsqueda filtrada. En la barra superior puede buscar un elemento en todo el sitio o reducirlo a una determinada categoría de producto. (Amazon también utiliza la búsqueda inteligente, lo que demuestra que no está limitado a un tipo de funcionalidad de búsqueda).
Ubicación del cuadro de búsqueda
Hay una buena razón por la que casi todos los sitios que visita tienen un cuadro de búsqueda en la parte superior de la pantalla. Ahí es donde los usuarios esperan que sea.
Un análisis realizado por Site Search Today mostró que de los 50 principales minoristas de Estados Unidos, todos tenían un cuadro de búsqueda ubicado en la parte superior de la página. De esos 54 por ciento tenía un cuadro de búsqueda ubicado en la parte superior derecha, 30 por ciento en la parte superior central y 16 por ciento en la parte superior izquierda de la página. Los resultados fueron similares en un estudio de minoristas del Reino Unido con una advertencia importante: la búsqueda se ubica más comúnmente en la parte superior central del sitio, seguida de la parte superior derecha.
La ubicación que debe evitar está en cualquier lugar debajo del desplazamiento o en la parte inferior del sitio. (Es decir, a menos que incluya un cuadro de búsqueda en ambas ubicaciones). Los diseñadores también deben evitar ocultar el cuadro de búsqueda dentro del menú de navegación o dentro de una barra de herramientas.
Identificadores de búsqueda
Las herramientas de búsqueda deben ser fáciles de identificar y usar. Si los usuarios no pueden encontrar la herramienta, puede causar frustración o hacer que un usuario abandone su sitio.
Los identificadores de búsqueda comunes son un cuadro con la búsqueda de palabras o una lupa junto a un cuadro de entrada. Eso es. Al diseñar la búsqueda, una de estas opciones es su mejor apuesta.
Y no te olvides del botón de acción. Al igual que los identificadores de búsqueda, el botón para ejecutar la búsqueda real también debe ser simple. Use una palabra como? Buscar? o? encontrar? ?¿Ir? Es otra opción aceptable.
Buscar consejos de diseño
Cuando se trata de crear un cuadro de búsqueda (o muchos otros elementos comunes de la interfaz de usuario), la simplicidad es clave. Un cuadro de búsqueda necesita varias cosas: un cuadro de entrada, título, botón de acción e instrucciones.
Al diseñar un cuadro de búsqueda, el diseño debe centrarse en un cuadro. Suena simple, ¿verdad? Tenga en cuenta que el cuadro debe ser lo suficientemente grande para escribir (y ver) los términos de búsqueda comunes relevantes para su sitio y contener texto lo suficientemente grande como para leer en un tipo de letra simple. Manténgase alejado de tipos de letra súper pequeños o novedosos o de escritura.
Deja claro que tienes búsqueda. Etiquete su funcionalidad de búsqueda como tal, ya sea con un título al lado o sobre el cuadro o con un texto dentro del cuadro que indique a los usuarios que "busquen en el sitio aquí".
Asegúrese de que los usuarios sepan cómo usar la búsqueda. Incluya instrucciones simples dentro del cuadro de búsqueda que les diga qué pueden encontrar usando la herramienta. (Pero asegúrese de que el texto de muestra desaparezca cuando el usuario haga clic para escribir o activar el cuadro). Finalmente, incluya un claro botón de llamada a la acción para el envío de búsquedas.
Buscar herramientas y recursos
Buscador de google
Puede agregar la búsqueda de Google a su sitio con una herramienta simple que es gratuita para las funciones básicas y se puede personalizar para que coincida con el diseño de su sitio. Google también tiene una herramienta de búsqueda paga que incluye algunos extras adicionales, incluyendo más opciones de diseño, por $ 100 por año.
Buscar entrada con sugerencia
Este cuadro simple se presenta como un archivo de Adobe Photoshop que puede personalizar de alguna manera para iniciar su diseño de cuadro de búsqueda. El archivo vectorial en capas viene completo con una función de sugerencia automática y solo cuesta $ 2 de Creative Market.
Barra de búsqueda desplegable
Este simple archivo de barra de búsqueda utiliza un formato de búsqueda simple con un menú desplegable para las opciones de menú.El archivo de Photoshop se puede descargar gratis con el crédito correspondiente.
Cuadro de búsqueda expandible
Si desea ver cómo codificar su cuadro de búsqueda, eche un vistazo a esta opción expandible disponible en CodePen.
Paquete de formularios CSS3
Si no está seguro del estilo de cuadro de búsqueda que busca, el paquete de formularios CSS3 incluye seis estilos de formulario de búsqueda. La licencia para todo el paquete es de $ 4 por una buena colección de golosinas.
Cómo construir un formulario de búsqueda
Al construir desde el código hacia arriba, también puede tener mucho control sobre su cuadro de búsqueda. SpeckyBoy Design tiene un gran ejemplo de código simple para un cuadro de búsqueda limpio que es fácil de seguir para casi cualquier persona con conocimientos básicos de codificación.
Conclusión
Si bien tener un gran cuadro de búsqueda puede no ser la parte más divertida del proceso de diseño, a menudo es una parte esencial de su sitio. Piense en el usuario primero al crear un cuadro de búsqueda y luego considere el diseño general.
Los cuadros de búsqueda pueden agregar una gran funcionalidad a su sitio mientras se ven geniales. Opte por un cuadro que coincida con el tema general de su sitio web y se mezcle, pero sin ocultarlo por completo.
Si desea ver más cuadros de búsqueda excelentes, eche un vistazo a la galería de Design Shack.
Fuente de la imagen: Cuadro de búsqueda por Jamie Syke.