¿Alguna vez has aterrizado en un sitio web buscando algo pero no sabes dónde encontrarlo?
Es posible que haya hojeado el menú y se haya desplazado un poco por la página, pero al final no pudo encontrar el producto/publicación/artículo exacto que tenía en mente. ¿Frustrante no?
En esta situación, probablemente harías dos cosas: abandonar el sitio o buscar a un amigo de confianza barra de búsqueda. Si elige quedarse cerca, la función de búsqueda correspondiente debe tomar su consulta y enviarlo a su destino. Problema resuelto.
No es una experiencia perfecta, pero es difícil de evitar para sitios más grandes que simplemente no pueden vincular a todo el contenido de la página de inicio.
Por lo tanto, al crear un sitio para un usuario, el diseño de la función de búsqueda debe ser intuitivo. Si los visitantes lo usan, significa que tienen la misión de hacer algo específico. Y como diseñadores, nuestro trabajo es ayudarlos a llegar allí. Nuestras elecciones de diseño pueden marcar la diferencia entre una buena o mala navegación, lo que se traduce en conversión o reflexión.
En esta guía, aprenderemos cómo crear la mejor barra de búsqueda para su sitio web. Al implementar estas pautas de diseño, ayudará a los usuarios a encontrar el contenido que desean de manera rápida y eficiente.
¿Tu sitio necesita una barra de búsqueda?
Antes de discutir las mejores prácticas, considere si su sitio se beneficiaría de la búsqueda interna del sitio.
Si bien no hay un «sí» o un «no» rotundo para activar la función de búsqueda, los sitios más grandes generalmente se beneficiarán de la búsqueda más que los más pequeños. Esto se debe a que es más probable que los usuarios confíen en el motor de búsqueda cuando se trata de una extensa navegación con un clic.
Además, si los usuarios llegan a su página de inicio con un contenido, categoría o producto específico en mente, es posible que prefieran escribirlo en lugar de confiar en la navegación de clics principal y secundaria.
Si aún no está seguro, puede agregar una función de búsqueda y realizar un seguimiento de la actividad del usuario para determinar si se está utilizando la barra de búsqueda (y, de ser así, si se está utilizando de manera efectiva) y luego decidir si desea mantenerla o eliminarla.
Prácticas recomendadas para el diseño de la barra de búsqueda
- Incluye un cuadro de texto y un botón de búsqueda.
- Colocar en la ubicación esperada.
- Incluir icono de búsqueda.
- Tamaño en consecuencia.
- Considere agregar texto alternativo.
- Considere agregar autocompletar.
- Ocultar opciones avanzadas.
- Diseño para dispositivos móviles.
Muchas veces, una búsqueda en el sitio es la última o la única opción del visitante cuando navega por un sitio, por lo que una mala experiencia de usuario puede marcar la diferencia entre mantenerlos interesados y enviarlos a la competencia. Debe mantener sus expectativas y comodidad en primer plano en su diseño. Así es como se hace:
1. Incluya un cuadro de texto y un botón de búsqueda.
La mayoría de las barras de búsqueda constan de dos elementos: un cuadro de búsqueda donde los usuarios ingresan sus consultas y un botón de búsqueda en el que los usuarios hacen clic para comenzar a buscar. Los elementos suelen colocarse horizontalmente junto a una línea, por ejemplo:
Es posible que vea diferentes variaciones de esta presentación de vez en cuando, pero la mayor parte se debe a su simplicidad y accesibilidad.
El cuadro de búsqueda debe ser solo eso, el cuadro. Puede tener algunas libertades de diseño, como agregar contraste de fondo, color o redondear las esquinas, pero el cuadro de texto debe ser un elemento de entrada de texto de una línea de texto de alto. Esto es fácil de reconocer para los usuarios.
En cuanto al botón de búsqueda, definitivamente considere agregarlo. Sirve como una señal visual para enviar una consulta, por lo que sin ella, los usuarios pueden confundirse. Coloque este botón a la derecha del campo de entrada ya que es una convención y lógica para aquellos que leen de izquierda a derecha. También escriba un texto de botón conciso: todo lo que necesita es la palabra «Buscar» o el ícono de la lupa.
Los visitantes también deberían poder iniciar una búsqueda haciendo clic en el botón de búsqueda o presionando ‘Enter’ / ‘Return’ / ‘Go’ cuando el cuadro de búsqueda está activo (es decir, el cursor de texto está activo en él).
Una iteración alternativa común en la barra de búsqueda clásica es el ícono de lupa que se expande a la barra de búsqueda completa y al botón cuando se hace clic. Aquí hay un ejemplo de Fondo Mundial para la Vida Silvestre:
Este diseño ahorra espacio en el sitio y puede parecer más limpio, pero utilícelo con cuidado. Puede ser difícil para algunos verlo, y esto aumenta el costo de las interacciones si los usuarios tienen que hacer clic nuevamente para enfocarse en el cuadro de texto después de que esté expuesto. Sin embargo, si el botón de búsqueda en la página se destaca lo suficiente en la página, este es un enfoque alternativo viable.
2. Colocar en el lugar previsto.
Los sitios que le permiten buscar en el sitio generalmente colocan una barra de búsqueda en la esquina superior derecha o en la parte superior central de la página web. Cada ubicación garantiza que la función de búsqueda sea visible y de fácil acceso para quienes la necesiten.
Algunos sitios pueden optar por colocar otros enlaces, menús o íconos en la esquina superior derecha; piense en las indicaciones de inicio de sesión, la configuración o los íconos del carrito de compras. En ese caso, puede deslizar la barra de búsqueda más hacia la izquierda para personalizarlos.
Sin embargo, abstente de colocar la barra de búsqueda solo en la parte inferior de la página u ocultarla del menú. Puede colocar una barra de búsqueda en el pie de página aparte de uno en la parte superior de la página, pero no deje a los usuarios buscando principalmente su función de búsqueda.
También es posible que los usuarios deseen buscar en otros sitios web además de su página de inicio. Colocar una barra de búsqueda en el encabezado de la mayoría de las páginas garantiza que los usuarios puedan hacerlo desde cualquier parte de su sitio.
Si la búsqueda es fundamental para la navegación en su sitio y espera que los usuarios naveguen principalmente a través de consultas de búsqueda, centre la barra de búsqueda en la página y colóquela debajo del encabezado para enfatizar más. Por ejemplo, esta configuración aparece en Base de conocimientos de HubSpot páginas, ya que esperamos que la mayoría de los usuarios reciban preguntas específicas que se puedan buscar.
3. Incluya un icono de búsqueda.
Los diseñadores usan íconos para transmitir visualmente lo que está haciendo un botón u otro elemento de la página. Los iconos ahorran espacio y se puede identificar más rápido que el texto. El ícono de la lupa es un símbolo de búsqueda común, por lo que le recomendamos que lo incluya en la interfaz.
Hay varias formas de agregar este icono a la barra de herramientas. Puedes ponerlo en el botón de búsqueda:
Puedes ponerlo en el cuadro de búsqueda:
O puede ponerlo en un botón que oculte / revele toda la barra de búsqueda, como vimos en nuestro ejemplo del Fondo Mundial para la Naturaleza. Aquí hay otro ejemplo de Widły.com:
Una nota más: si la lupa aparece fuera del cuadro de búsqueda, muchos usuarios asumen que es un botón, así que evite hacerlo si no se puede hacer clic en el ícono.
4. Tamaño en consecuencia.
El tamaño de la barra de búsqueda dependerá de su importancia en su sitio y de la longitud esperada de una consulta típica.
Si la búsqueda es su principal herramienta de navegación, aumente su tamaño y concéntrese en la carga de la página. La barra de encabezado debe alinearse con los otros elementos del encabezado: lo suficientemente grande como para verse en un escaneo visual de la página, pero no tan grande como para llamar la atención.
La longitud de la barra es otra elección de diseño importante. Por un lado, desea que el cuadro de texto sea lo suficientemente largo para mostrar más o todas las consultas escritas por el usuario, de modo que los usuarios puedan ver sus consultas y corregir cualquier error tipográfico. Por otro lado, la barra de búsqueda no debería robar espacio a otros elementos del encabezado.
Un buen lugar para comenzar es encontrar o estimar la longitud de la pregunta promedio en caracteres. ¿Los usuarios ingresan solo unas pocas palabras o hacen preguntas más largas? Si es lo último, probablemente querrá alargar el cuadro de búsqueda o configurarlo para que se expanda cuando se haga clic en él.
5. Considere agregar texto alternativo.
El texto de reemplazo aparece en el cuadro de búsqueda cuando el campo está desenfocado. Su propósito es lograr que el usuario actúe. El marcador de posición puede ser una sugerencia útil para los usuarios al mostrar consultas de muestra como «Prueba sombreros, jeans, bolsos…» o simplemente diciendo «Buscar…».
Si desea agregar un marcador de posición, el texto debe tener un tono más claro para distinguirlo de la consulta que está escribiendo y debe desaparecer cuando el usuario se enfoca en el campo o comienza a escribir.
6. Considere agregar autocompletar.
Autocompletar es otra forma de completar su búsqueda. Cuando un usuario escribe, la función de autocompletar muestra sugerencias en un menú debajo de la búsqueda. Las predicciones se pueden adaptar al contenido específico de su sitio para que los usuarios puedan estar seguros de que están encontrando el contenido que buscan.
No abrume a sus visitantes con sugerencias; aunque esto depende del tamaño de su sitio y de la cantidad de contenido indexado, normalmente de 1 a 10 es un buen rango.
Aquí hay un ejemplo de cómo habilitar la función de autocompletar PatagoniaBúsqueda en el sitio de comercio electrónico:
Permita a los usuarios hacer clic en una sugerencia o hacer que la interfaz sea más accesible, déjelos navegar hacia arriba y hacia abajo en la lista de sugerencias con las teclas de flecha y seleccione una opción con la tecla «Enter» / «Return».
7. Ocultar opciones avanzadas.
A menos que espere que su base de usuarios sea generalmente más avanzada tecnológicamente que el usuario promedio de Internet, casi siempre es mejor ocultar las opciones de búsqueda avanzada como categorías, filtros y coincidencia exacta. Esto mantiene la interfaz de usuario limpia y accesible.
Si necesita incluir opciones avanzadas, considere incluirlas en el menú oculto que aparece cuando selecciona la barra de búsqueda, o proporcione un enlace a la página «Búsqueda avanzada» cercana.
8. Diseño para un teléfono móvil.
El crecimiento de los teléfonos inteligentes y las tabletas ha influido en las mejores prácticas de interfaz de usuario en todo el mundo, incluidas las barras de búsqueda de sitios. Asegúrese de que el cuadro de búsqueda y el botón sean lo suficientemente grandes para verlos y seleccionarlos. W3C incluye dos pautas importantes para la accesibilidad:
- Asegúrese de que los objetivos táctiles tengan al menos 9 milímetros de alto y 9 milímetros de ancho.
- Asegúrese de que los objetivos táctiles cercanos al tamaño mínimo estén rodeados por una pequeña cantidad de espacio inactivo.
Estas pautas se aplican a todos los dispositivos con pantalla táctil, independientemente del tamaño de la pantalla.
Además, debido a la falta de espacio, en los dispositivos móviles es más aceptable ocultar toda la barra de búsqueda detrás del ícono de cristal de búsqueda y mostrarla al tocar el ícono. Nuevamente, este ícono debe ser perceptible; algunas pruebas de usuario son útiles para asegurar esto.
Guardar conversiones mediante la búsqueda
Diseñar una búsqueda en el sitio puede ser complicado ya que nosotros, como usuarios de Internet, tenemos muchas opciones para elegir con esta función. Lo más probable es que la mayoría de los sitios web que visitas hayan dominado su función de búsqueda y su diseño, por lo que el listón está bastante alto (juego de palabras). Diablos, incluso el sitio web más popular es literalmente una interfaz de búsqueda.
Por lo tanto, ante todo, la barra de búsqueda debe ser simple, obvia y fácil de usar. Si funciona bien, sus usuarios no lo pensarán. Mantendrás su confianza en tu sitio web y en tu negocio acercándolos a convertir o comprar.
