7 mejores prácticas en el diseño y ubicación de cuadros de búsqueda
El cuadro de búsqueda es uno de los elementos más importantes de un sitio web. Independientemente del tipo de negocio que tenga, tener un cuadro de búsqueda bien diseñado es esencial para que los visitantes puedan encontrar fácilmente lo que buscan. Esto no significa que sea suficiente simplemente agregar una función de búsqueda sin siquiera pensar en cómo se ve.
Deberá considerar la funcionalidad, la facilidad de uso, la estética e incluso la ubicación del cuadro de búsqueda. Todo esto es para que pueda mejorar la experiencia del usuario en su sitio web, lo que incluso puede conducir a un aumento de las conversiones.
Entonces, ¿qué tienes que hacer al diseñar un cuadro de búsqueda? Aunque las recomendaciones exactas pueden ser subjetivas según sus necesidades y objetivos, hay algunos consejos generales que podrían funcionar para diferentes tipos de sitios web. Estas son algunas de las mejores prácticas en el diseño y la ubicación de los cuadros de búsqueda:
1 Hazlo prominente
La primera y más importante regla en el diseño del cuadro de búsqueda es hacer que sea fácilmente perceptible. Es posible que esté demasiado centrado en la estética del diseño para crear un cuadro de búsqueda que se mezcle con el resto del sitio web. Pero es importante recordar que está agregando un cuadro de búsqueda para las personas que desean encontrar algo en su sitio web. Hacer que busquen el cuadro de búsqueda no tendrá sentido e incluso podría tener un impacto negativo en su experiencia.
Esto no significa que tengas que comprometer la estética por completo. Cree un diseño que se vea muy bien en comparación con el diseño de su sitio web existente y, al mismo tiempo, sea lo suficientemente prominente como para que las personas lo noten. Por lo tanto, el tamaño del cuadro debe ser grande, pero no demasiado grande para que ocupe demasiado espacio en la página. Y el color debe contrastar y aun así complementar al resto de los colores utilizados en la página.
El cuadro de búsqueda de Best Buy es un buen ejemplo, ya que el blanco contrasta con el azul de la página mientras se alinea con los otros colores utilizados en el diseño de la página. El tamaño del cuadro de búsqueda no es demasiado grande y sigue siendo lo suficientemente prominente como para que las personas lo noten de inmediato una vez que ingresan a la página.
2 Resalte el botón Enviar
Como se mencionó anteriormente, el propósito de un cuadro de búsqueda es facilitar las cosas a los visitantes del sitio. Evite complicar demasiado las cosas con botones de envío minúsculos en los que los usuarios deben concentrarse para hacer clic. Hacer que el botón de enviar se destaque mejora la visibilidad del cuadro de búsqueda y también facilita que los usuarios hagan clic en él.
Depende de usted si elige usar un ícono de lupa o deletrear "Enviar" en el botón Enviar. Sin embargo, concéntrese en el tamaño y el color del botón para asegurarse de que los usuarios no tengan problemas para encontrarlo después de escribir el campo de búsqueda. Déjales claro lo que tienen que hacer después de que escriban lo que están buscando.
Algunos sitios web incluso van tan lejos como para poner solo el ícono de la lupa para que los visitantes busquen algo. Esto puede resultar de gran beneficio para la estética del sitio web, como en el caso de Levi’s Strauss. Pero este no es un ejemplo óptimo de diseño de cuadro de búsqueda.
Si bien esto se ve bien en términos de diseño, puede ser un inconveniente para los visitantes, ya que tienen que esperar a que se cargue el cuadro de búsqueda después de hacer clic en el ícono de la lupa. Puede ser frustrante, especialmente si accede al sitio desde un lugar donde la conexión es lenta. En lugar de que se cargue por separado, sería mejor que el cuadro de búsqueda se expandiera en el mismo lugar donde se coloca la lupa.
Cuando tiene un espacio limitado, pero la búsqueda es importante, puede ser bueno que se mezcle con la navegación superior. Esto es exactamente lo que hizo shralpin en su sitio móvil.
Xero Shoes, por otro lado, no tiene ningún botón de envío. Los visitantes deberán ingresar una palabra clave en el campo de búsqueda y luego presionar Intro para buscar algo dentro del sitio. Ahora puede pensar que no es tan malo simplemente presionar la tecla Intro para iniciar la búsqueda, pero ¿qué pasa con el resto de los visitantes? Algunos de ellos pueden estar buscando específicamente el botón de enviar y pueden tener dificultades para realizar la búsqueda con este tipo de diseño.
El botón de envío de Amazon es bastante prominente en naranja, mientras que el resto del cuadro de búsqueda está en blanco. El color del botón de envío también contrasta con el color más oscuro del encabezado del sitio web. Entonces, aunque solo usan un ícono de lupa como botón de envío, todavía es visible de manera prominente a diferencia del ejemplo de Levi’s. Asegúrese de que el ícono esté acolchado, ya que esto aumentará la visibilidad.
3 Colóquelo donde sea más probable que los usuarios miren
Hay un debate en curso sobre el mejor lugar para colocar el cuadro de búsqueda en un sitio web. Pero si observa algunos de los sitios web más populares, notará que los cuadros de búsqueda a menudo se colocan hacia el centro superior o la parte superior derecha de la página. Así lo demuestra el estudio publicado por SLI Systems. El análisis encontró que el 54% de los minoristas colocan el cuadro de búsqueda en la parte superior derecha, el 30% en el centro y solo el 16% en la izquierda.
Esto significa que los visitantes pueden esperar encontrar el cuadro de búsqueda en la parte superior derecha de su sitio web. Si lo coloca en un lugar inesperado, es posible que los usuarios deban esforzarse más para encontrar el cuadro de búsqueda. A pesar de esto, sigue siendo una buena idea estudiar la actividad de los visitantes utilizando un mapa de calor o una herramienta de seguimiento ocular. Esto lo ayudará a identificar dónde es más probable que busquen, ayudándolo a comprender dónde debe colocar el cuadro de búsqueda en su sitio.
Independientemente de si elige izquierda, derecha o centro; asegúrese de que esté en la parte superior de la página, ya que es donde es más probable que los visitantes escaneen primero según un estudio de seguimiento ocular de NN Group. Le haría bien realizar una prueba A/B en diferentes ubicaciones de cuadros de búsqueda y luego determinar qué posición parece funcionar mejor para usted.
Este es un ejemplo de un cuadro de búsqueda colocado en el lado derecho de la página de Get Plus Followers.
La ubicación del cuadro de búsqueda de EBay está en el centro de la página, donde es visible de manera prominente y una de las primeras cosas que los visitantes notarán sobre el sitio web.
4 Combinar Autocompletar con Gráficos
Su sitio web puede estar entre el 62,5% que utiliza la función de autocompletar en su cuadro de búsqueda. Para obtener una ventaja competitiva, puede mejorar aún más la función agregando vistas previas de imágenes del producto junto con las sugerencias de autocompletar en su función de búsqueda. Esto se debe a que solo el 28,2% de los sitios web participantes están implementando esta función actualmente.
Para hacer un caso más para autocompletar con gráficos, es posible que desee echar un vistazo al caso de LED Hut. Después de agregar vistas previas de imágenes a sus sugerencias de autocompletar, el proveedor de iluminación LED logró aumentar su tasa de conversión de búsqueda en un 200%. Así es como se verá cuando agregue vistas previas de imágenes a la sugerencia de búsqueda.
5 Evite aislar o abarrotar el cuadro de búsqueda
El primer punto mencionó lo importante que es destacar el cuadro de búsqueda. Esto significa que debe evitar abarrotar las áreas circundantes con íconos u otros elementos que puedan distraer a los visitantes del cuadro de búsqueda. El cuadro de búsqueda debe priorizarse y centrarse. Al mismo tiempo, evite exagerar, ya que podría terminar aislando el cuadro de búsqueda hasta el punto de dificultar su búsqueda.
El cuadro de búsqueda de Snow and Rock es un buen ejemplo de un cuadro de búsqueda bien diseñado. Como puede ver en la imagen a continuación, no hay demasiados elementos que abarroten el área donde se coloca. Pero aún puede verlo hacia el centro-izquierda de la página y no está ubicado en un lugar que los usuarios tengan dificultades para encontrar. El botón de enviar también contrasta con el resto de los colores en el sitio web, lo que lo hace resaltar.
6 Opte por un cuadro de búsqueda desplegable
Cuando busca formas de ahorrar espacio y al mismo tiempo hacer que el cuadro de búsqueda destaque para los usuarios, puede optar por un cuadro de búsqueda en crecimiento. Esta es una opción ideal para sitios web en los que la búsqueda puede no ser demasiado esencial, pero aún desea brindarles a los usuarios la opción de buscar algo. En lugar de agregar solo un ícono de lupa, agregará un pequeño cuadro de búsqueda al lado para que actúe como una pista visual para los visitantes del sitio. Cuando un usuario hace clic en el campo, el cuadro se expandirá y permitirá a los usuarios ingresar el término que necesitan.
Aquí hay un buen ejemplo de Net-a-Porter. Si observa la parte superior derecha del sitio web, verá que el cuadro de búsqueda es visible pero no demasiado grande. Hay un ícono de lupa para que los usuarios identifiquen que es una opción de búsqueda.
Pero una vez que hace clic en el campo, el cuadro de búsqueda se expande para que escriba el término de búsqueda requerido. Esta combinación de estética y usabilidad es excelente para un sitio web que necesita incluir muchos elementos en la página de inicio, ya que le ayuda a ahorrar espacio sin comprometer la visibilidad del cuadro de búsqueda.
El cuadro de búsqueda existe para las personas que ya tienen alguna idea de lo que están buscando. Pero ¿qué pasa con aquellos que no están muy seguros de lo que están buscando? Es posible que tenga una función de sugerencia de autocompletar, pero agregar una función desplegable justo al lado del cuadro de búsqueda puede ser una buena idea para algunos sitios web. Da a los usuarios un sentido de dirección y les da pistas sobre qué buscar.
Esta táctica resultó ser un éxito para Casa Mineira, una empresa de bienes raíces con sede en Brasil. En un estudio de caso realizado en el sitio web, reemplazar el cuadro de búsqueda estándar con menús desplegables ayudó a generar más clientes potenciales. De hecho, la variación resultó en un 57,25 % más de clientes potenciales que antes.
La razón por la que esta variación funcionó tan bien es porque a los visitantes se les dio un camino de acción claro y pudieron encontrar rápidamente lo que estaban buscando. En el diseño anterior, los visitantes tenían que estar seguros de lo que buscaban exactamente. Entonces, para guiar mejor a los visitantes, decidieron cubrir una amplia variedad de ubicaciones y tipos de alojamiento.
Pero es importante recordar que esta opción podría no ser la mejor para todos los tipos de sitios web. Una tienda de comercio electrónico, por ejemplo, podría no ser capaz de hacer que la búsqueda sea más funcional para los visitantes que utilizan esta técnica. Pero para las empresas inmobiliarias y las empresas relacionadas con los servicios, una función de búsqueda desplegable podría ser la solución perfecta.
Línea de fondo
Ahora comprende mejor el diseño y la ubicación de los cuadros de búsqueda con la ayuda de ejemplos y sugerencias. Entonces, ¿qué has aprendido de esto? Es posible que haya notado el énfasis puesto en la prominencia y la visibilidad del cuadro de búsqueda. Esto significa que el contraste de colores, la estética y el tamaño del cuadro de búsqueda son algunos de los aspectos más importantes.
Su enfoque debe estar en la combinación de funcionalidad y estética, lo que puede no ser fácil de ejecutar. El mejor consejo que puede obtener es realizar pruebas A/B en varios diseños y posiciones como se mencionó en los puntos anteriores. ¿Tienes alguna pregunta sobre el diseño del cuadro de búsqueda? Siéntase libre de dejar un comentario más abajo.