Diseñando la caja de búsqueda perfecta

Una caja de búsqueda es un elemento de interacción que a primera vista puede parecer muy sencillo: una caja con un botón, nada más, pero como todo elemento de interacción éste también tiene su complejidad.

Imagen de Nick Babich

En el caso de una caja de búsqueda ha varios factores que pueden convertir la experiencia de usuario de un producto digital y la percepción de éste en excelente, buena, regular o mala: el autocompletado, la elección del icono, si ponemos texto o no, y cómo ponemos el campo de texto. No podemos olvidar que la búsqueda es una de las interacciones esenciales para que los usuarios terminen lo que han venido a hacer a nuestro producto digital, ya sea comprar un determinado producto, buscar una información o una oferta de trabajo.

¿Cómo diseñar la caja de búsqueda perfecta?

Son dos los elementos básicos que componen una caja de búsqueda:

• Campo de texto en el que se introduce la búsqueda
• Botón de búsqueda

A partir de aquí surgen muchas preguntas: ¿cómo pongo el campo de texto de la búsqueda con respecto al resto de la interfaz? ¿en qué posición? ¿qué símbolo de búsqueda uso para el botón? ¿añado un texto explicativo?

Para solucionar todas estas dudas nada mejor que una lista de buenas prácticas como la que ha preparado Nick Babich al respecto:

• Usa como icono de búsqueda una lupa: la lupa se ha convertido en el icono universal de las búsquedas y es reconocido por casi todos los usuarios por su uso en productos digitales de uso extendido como Gmail, Twitter o Facebook.
• Destaca el campo de texto de la búsqueda: suele ser un error habitual de usabilidad que el campo de texto no destaque del resto del interfaz de búsqueda. Si el usuario no ve claramente el campo, no podrá buscar lo que quiere y por lo tanto se frustrará al no poder hacerlo.
• Da un botón de búsqueda: en muchas interfaces de usuario de productos digitales se unifica el campo de búsqueda y el botón, lo cual es un error de usabilidad ya que es más difícil de hacer clic en él. Lo mejor es hacer un botón separado para que el usuario pueda hacer clic cómodamente en un dispositivo móvil y además dar la posibilidad de buscar cuando se pulsa “Intro” sin tener que hacer clic.
• Pon la caja de búsqueda en todas las páginas: los usuarios pueden querer buscar en cualquier momento, por lo que lo mejor es que la caja de búsqueda esté disponible en todas las páginas para que los usuarios la pueden usar en cualquier momento.
• Simplifica la caja de búsqueda: la búsqueda, cuanto más simple, mejor. Es por ello que está bien implementar operadores de búsqueda, pero no de una manera explícita y visible sino implementados en la propia búsqueda, porque los usuarios avanzados sabrán usar los operadores lógicos y, a aquellos que no, no se les introduce un nivel de complejidad mayor que les frustre al usar la interfaz.
• Coloca la búsqueda donde tus usuarios esperan que esté: según un estudio con usuarios, la mayoría de los usuarios espera que la búsqueda esté en la esquina superior derecha y en la esquina superior izquierda, es decir al lado del logo o justo debajo de él.
• Tamaño adecuado del campo de texto: uno de los errores más habituales al diseñar es hacer el campo de texto de la búsqueda demasiado pequeño. El tamaño adecuado del campo de búsqueda debe de ser de unos 27 caracteres.
• Usar un mecanismo de autocompletado: para mejorar la usabilidad de la búsqueda es necesario introducir un buen autocompletado, es decir, uno que ayude a encontrar al usuario lo que busca y que no le muestre más de 10 elementos y le sea útil. Si no es así, lo mejor es que no lo introduzcas, porque un mal autocompletado puede estropear la experiencia de búsqueda y la UX en un producto digital.
• Sugiere a los usuarios lo que pueden buscar en tu sitio: si eres un sitio especializado en un determinado producto o temática, puedes hacer una sugerencia a los usuarios sobre lo que pueden buscar en él. Nick Babich toma como ejemplo el caso de IMDB.

La búsqueda es algo esencial en cualquier producto digital basado en contenido, ya sea un e-commerce, un medio de comunicación o un repositorio de información, por lo que mejorando la experiencia de usuario de ésta se mejora la percepción que tienen los usuarios de nuestro producto digital.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.