Buenas prácticas UX: diseñando el buscador perfecto

Podría resultar lógico pensar que un buscador no necesita un diseño específico ya que consta tan solo de dos elementos simples. Sin embargo, en productos digitales con mucho contenido, el campo de búsqueda suele ser el elemento de diseño más utilizado.

Cuando los usuarios navegan por sitios relativamente complejos, buscarán inmediatamente un campo de búsqueda para llegar a su destino de manera fluida y sin problemas. Por lo tanto el diseño de un buscador se convierte en una pieza fundamental para la correcta usabilidad de nuestros productos digitales.

Buenas prácticas

Cómo bien explica el artículo Design a Perfect Search Box, algunas de las buenas prácticas que se deben tener en cuenta a la hora de diseñar un buscador son:

Incluir el icono Lupa en el campo de búsqueda

Hay algunos iconos que son reconocidos universalmente por los usuarios. El ícono de lupa es uno de ellos. Por tanto, es más que recomendable incluirlo siempre dentro del campo de búsqueda. Además, es conveniente una iconografía sencilla en trazos. Aumentar la simplicidad acelerará el reconocimiento del icono.

Mostrar el campo de búsqueda de forma destacada

Si la búsqueda es una funcionalidad importante para el producto digital, ésta debe mostrarse de manera destacada, para facilitar a los usuarios la rápida identificación de esta función. Es importante mantener este campo desplegado desde el inicio. Incluir una micro interacción que lo despliegue sólo aumentaría el costo de la interacción.

Añadir un botón al campo de búsqueda

Un botón de búsqueda ayuda a los usuarios a reconocer que hay un paso adicional para activar la acción de búsqueda, incluso si deciden hacerlo pulsando Enter. También será recomendable ajustar el tamaño del botón y que éste sea lo suficientemente grande para facilitar su pulsado sin requerir de excesiva precisión.

Incluir el buscador a lo largo de todas las páginas

De esta manera garantizamos que los usuarios puedan realizar cualquier búsqueda desde cualquier punto de la navegación.

Simplificar el diseño del buscador

Será preciso asegurarse de un planteamiento sencillo. Mostrar las opciones de búsqueda avanzada de forma predeterminada añade carga cognitiva y podría confundir a los usuarios. Será por tanto aconsejable crear un desplegable o apartado para acceder a las opciones de búsqueda avanzada.

Emplazar el buscador donde los usuarios esperan encontrarlo

Lo más favorable para una usabilidad eficaz será incluir el buscador donde los usuarios esperan encontrarlo. En base a los modelos mentales de los usuarios, y a la forma que tienen de escanear los sitios web (la conocida lectura escalonada en forma de F), resulta recomendable añadir el campo de búsqueda en el área superior derecha o superior central de la interface.

Adecuar el tamaño del campo

Diseñar campos de búsqueda demasiado cortos suele ser un error común entre los diseñadores. En estos campos los usuarios pueden escribir consultas largas, pero solo una parte del texto será visible y eso es signo de una mala usabilidad, ya que no podrán revisar ni editar su consulta fácilmente. De hecho, cuando el campo de búsqueda tiene un número limitado de caracteres visibles, los usuarios se ven obligados a introducir consultas cortas e imprecisas, porque las consultas más largas serían difíciles e incómodas de leer. Una regla general que ofrece buenos rendimientos es establecer el campo de texto para 27 caracteres. De esta manera se cubre el 90% de las consultas.

Implementar sugerencias de autocompletado

Estas sugerencias de autocompletado ayudan a los usuarios a encontrar una consulta adecuada. Este mecanismo no se trata de acelerar el proceso de búsqueda, sino de guiar al usuario y ayudarlo a construir su consulta. Para que estos procesos de sugerencias sean efectivos, habrá que tener en cuenta lo siguiente:

• Asegurarse de que las sugerencias son útiles. Las sugerencias mal diseñadas pueden confundir y distraer a los usuarios.
• Proporcionar sugerencias de autocompletado lo más rápido posible. Así proporcionamos un valor inmediato y se reduce el esfuerzo de introducción de datos por parte de los usuarios.
• Acotar las sugerencias a un máximo de 10 para no abrumar en la cantidad de resultados, y eliminar el exceso de carga cognitiva.
• Resaltar las diferencias entre la consulta introducida y las sugerencias propuestas por el buscador.

Hacer uso del placeholder para orientar al usuario

También es muy útil aprovechar el placeholder en el campo de búsqueda para informar a los usuarios acerca de las acciones que pueden realizarse a través del buscador. Aunque hay que tener en cuenta que esta orientación no deberá de contener demasiadas palabras para así reducir la carga cognitiva.