La caja de búsqueda (search box) es uno de los elementos más importantes de cualquier sitio web. Independientemente del tipo de web, tener una caja de búsqueda bien diseñada en el lugar correcto es esencial para que los visitantes puedan encontrar fácilmente lo que están buscando. No basta con simplemente añadirla: hay que pensar en cómo se ve y si es fácilmente localizable. Es necesario considerar varios aspectos: su funcionalidad, su usabilidad, el diseño gráfico y el lugar donde se sitúa la caja de búsqueda.
Todo esto ayudará a mejorar la experiencia de uso en nuestro sitio web y podrá resultar en un aumento del tiempo de visita y del número de conversiones. Estas son las mejores prácticas en el diseño y posición de las cajas de búsqueda:
1. Que esté bien visible
La primera regla, y quizás las más importante, es que el diseño de la caja de búsqueda la haga fácilmente reconocible. Es importante recordar que este elemento se añade para que la gente encuentre algo en nuestro sitio web. Si hacemos a los usuarios buscar dónde está la caja de búsqueda estaremos ejerciendo un impacto negativo en su experiencia.
Esto no significa que tengamos que “romper” nuestro diseño gráfico. Debemos de pensar en un diseño que, estando acorde a la línea general, sea lo suficientemente llamativo para que las personas se den cuenta de su existencia. El tamaño ha de ser grande, pero no enorme, de modo que no ocupe demasiado espacio en la página. Y el color debería contrastar y ser complementario al resto de colores utilizados en la página.
En este ejemplo se identifica claramente la caja de búsqueda por el color gris frente a un fondo blanco. El contraste es suficiente para resaltar la caja de búsqueda y el tamaño es adecuado además de no estorbar a otros elementos de la web. El botón sí es mejorable.
2. Resalta el botón de Buscar
Ya hemos dicho que el propósito fundamental de una caja de búsqueda es poner las cosas fáciles a los visitantes del sitio web. Por ello tenemos que evitar complicar su uso: poner botones de búsqueda minúsculos es una de esta malas prácticas. El botón para enviar la búsqueda ha de estar visible, resaltando además el elemento de búsqueda y haciendo más fácil al usuario hacer clic en él.
Podemos utilizar el icono de la lupa o bien escribir explícitamente Buscar o Enviar. Da lo mismo. Lo realmente importante es el tamaño y el color del botón para asegurarnos de que el usuario no tienen problemas para encontrarlo una vez que han escrito su búsqueda en el campo de texto. Debemos de dejar claro qué tienen que hacer una vez que han definido su búsqueda.
Algunas páginas webs solo ponen un icono de lupa. Puede ser muy estético pero no es un diseño óptimo. Tampoco la opción de pulsar el icono y que aparezca una nueva página donde se pueda buscar. Es mejor que, una vez clicado en la lupa, se expanda la caja de búsqueda en el punto donde se ha puesto el icono de búsqueda. Si no tenemos mucho sitio, la mejor opción es situarla en la navegación superior de la página.
Un ejemplo es la búsqueda en Amazon. Su botón de búsqueda es naranja y resalta sobre el resto de la web. Así que, aunque solo usa un icono de lupa para identificarlo, es bastante prominente.
3. Situala allí donde se espera
La gran mayoría de los sitios web disponen la caja de búsqueda en la parte superior de la página, bien en el centro, bien a la derecha. Esto significa que la gran mayoría de los visitantes esperan encontrar hay el elemento de búsqueda. Si lo situamos en cualquier otro lugar el usuario tendrá que hacer un esfuerzo extra para encontrarlo. ¿Dudas de qué sitio es el mejor? Realiza un heat map de tu web y localiza aquellos lugares que más se visualizan: ese es un buen sitio.
En este ejemplo de Media Markt la caja de búsqueda está bien visible en la parte superior de la página y es una de las primeras cosas en las que se fijan los visitantes.
4. Combina el autocompletado con las imágenes
En la actualidad una gran mayoría de los sitios web ya ofrecen una búsqueda con autocompletado. Pero aún podemos ir más allá y añadir, por ejemplo, previsualizaciones de productos., sugerencias, etc. En el ejemplo vemos como a medida que escribimos algo en la caja de búsqueda,a demás del autocompletado, aparecen productos con sus imágenes y descripciones.
En este otro caso en las sugerencias se ofrecen opciones para afinar también la categoría de productos.
5. Evita aislarla o rodearla de muchos elementos
Ya hemos insistido en que es adecuado hacer visible la caja de búsqueda. Esto significa que deberíamos evitar rodearla de iconos u otros elementos que puedan distraer la atención del usuario. Tenemos que priorizar la visualización de la caja de búsqueda. Al contrario, también debemos evitar aislarla por completo. Al fin y al cabo no es nada extraño como para que no se comunique con el resto de elementos de la página.
6. Opta por una caja de búsqueda expansible
Si quieres ahorrar espacio y hacer una caja de búsqueda bien visible, puedes optar por una caja de búsqueda expansible, es decir, que aumenta de tamaño. Es una opción ideal en sitios web donde la búsqueda no es muy esencial pero queremos ofrecer esa funcionalidad. En vez de añadir solo un icono de lupa, incluimos una pequeña caja de búsqueda. Cuando se hace clic sobre ella la caja se agranda para que los usuarios puedan introducir el texto.
Este ejemplo lo muestra claramente. En su estado normal ocupa poco espacio:
Pero en cuanto nos posicionamos en la caja de búsqueda se agranda, facilitando su uso.
7. Añade un menú desplegable de ayuda para indecisos o afinar las búsquedas
La caja de búsqueda existe para aquellas personas que saben qué quieren buscar. Pero, ¿para aquellos que no están seguros de lo que quieren encontrar? Podemos tener una búsqueda autocompletada pero es también adecuado tener uno o varios menús desplegables justo al lado de la caja de búsqueda. Con ello podemos dirigir y ayudar a ese tipo de usuarios indecisos, pero también hacer búsquedas más afinadas.
Pero esta táctica puede que no sea adecuada para todos los tipos de webs. Solo aquellas que tienen servicios o productos bien definidos y en pocas categorías deberían utilizarlo. No es adecuado para grandes tiendas electrónicas pero quizás sí para inmobiliarias, servicios empresariales, etc.
Un ejemplo es la web de Escapa Rural donde el buscador ofrece dos menús desplegables para poder afinar más la búsqueda.
