UX de la búsqueda interna: caja, autocompletado, resultados y búsquedas sin respuesta

Cuando auditamos una tienda online, una de las primeras cosas que pedimos es la lista de lo que la gente escribe en su buscador. Es casi un ejercicio de humildad. En una ferretería online con la que trabajamos, la búsqueda más frecuente era «tacos», y el catálogo los llamaba «anclajes». Cientos de personas al mes escribían exactamente lo que querían comprar y el buscador les respondía «No se han encontrado resultados».

La búsqueda interna es la conversación más directa que tu web tiene con quien la visita. En la navegación, la persona interpreta tu estructura; en el buscador, te dice con sus propias palabras qué necesita. Si la web responde bien, el camino hasta el producto o la información se acorta muchísimo. Si responde mal, esa persona, que venía con una intención clarísima, se marcha a buscarlo a otro sitio.

En esta guía repasamos cómo diseñamos la búsqueda interna en el estudio: cuándo merece la pena, cómo debe ser la caja, qué hace un buen autocompletado, cómo se organiza la página de resultados, qué hacer cuando no hay coincidencias y cómo medir todo para mejorarlo mes a mes.

01Cuándo merece la pena un buscador interno

La búsqueda no sustituye a una buena arquitectura de la información; la complementa. Hay personas que prefieren navegar por categorías y otras que van directas a la caja de búsqueda, sobre todo cuando saben exactamente lo que quieren o cuando el menú no usa sus palabras.

En nuestra experiencia, un buscador interno aporta valor claro en estos casos:

• →Catálogos con más de unas decenas de productos, sobre todo si tienen referencias, marcas o modelos.
• →Blogs y bibliotecas de contenido con muchos artículos, donde el menú no puede listar todo.
• →Webs de documentación, ayuda o preguntas frecuentes.
• →Portales con inventario cambiante, como inmobiliarias o concesionarios, donde la búsqueda suele combinarse con filtros.

En una web corporativa de seis u ocho páginas, en cambio, el buscador suele sobrar: el menú lo resuelve mejor y deja la cabecera más limpia.

02La caja de búsqueda: visible, amplia y reconocible

Si la búsqueda es importante en tu web, la caja tiene que verse. Un icono de lupa solitario funciona en móvil, donde el espacio manda, pero en escritorio un campo de texto visible invita mucho más a usarlo. Las pautas de Nielsen Norman Group recomiendan que el campo tenga ancho suficiente para unos 27 caracteres, de forma que la mayoría de consultas quepan sin cortarse y la persona pueda revisar lo que ha escrito.

Lo que funciona en la caja:

• →Posición esperada: arriba, en la cabecera, normalmente en el centro o a la derecha. Es donde la gente la busca por costumbre (lo que se conoce como ley de Jakob).
• →Un texto de ejemplo útil en el placeholder: «Busca por producto, marca o referencia» orienta más que «Buscar...».
• →Botón con lupa y envío también con la tecla Intro.
• →La consulta se mantiene en la caja al llegar a resultados, para poder corregirla sin reescribir.
• →En móvil, el campo se abre a pantalla completa con el teclado ya desplegado y un botón claro para cerrar.

Búsqueda accesible desde el marcado

El HTML actual incluye el elemento search, que marca la zona como región de búsqueda para los lectores de pantalla. Junto a una etiqueta real (aunque sea visualmente oculta) y el tipo de campo adecuado, la caja queda accesible y en móvil muestra el teclado con la tecla de buscar:

<search>
  <form action="/buscar" method="get">
    <label for="q" class="visually-hidden">Buscar en la tienda</label>
    <input id="q" name="q" type="search" autocomplete="off"
           placeholder="Busca por producto, marca o referencia" />
    <button type="submit">Buscar</button>
  </form>
</search>

Si el navegador no reconoce el elemento todavía, se puede añadir role="search" al formulario y el resultado es equivalente. Usar el parámetro q en la URL tiene además una ventaja práctica: las herramientas de analítica lo detectan solas.

03Autocompletado y sugerencias que ahorran tecleo

El desplegable que aparece mientras escribes es donde una buena búsqueda empieza a marcar la diferencia. Ayuda a escribir menos, corrige sobre la marcha y, sobre todo, enseña a la persona cómo llama tu web a las cosas.

Qué mostrar en el desplegable

Un buen panel de sugerencias suele combinar varios bloques, en este orden de prioridad:

1. 01Consultas completas que terminan lo que se está escribiendo, con la parte coincidente diferenciada visualmente.
2. 02Categorías relevantes, para quien prefiere navegar una vez sabe por dónde ir.
3. 03Resultados directos (productos o artículos) con miniatura, nombre y precio si aplica.
4. 04Búsquedas recientes de esa persona, cuando el campo aún está vacío.

Entre seis y diez sugerencias en total suele ser un buen equilibrio: suficientes para acertar, pocas para leerlas de un vistazo. Y todo tiene que manejarse con teclado, con flechas para recorrer las opciones, Intro para elegir y Escape para cerrar.

Rapidez y tolerancia

Las sugerencias tienen que aparecer casi al instante, a partir del segundo o tercer carácter. Los motores especializados responden en milisegundos; si la búsqueda depende de una base de datos lenta, conviene esperar unos 150-300 ms desde la última pulsación antes de lanzar la consulta, para no saturar el servidor ni hacer parpadear la lista.

04Resultados que se entienden de un vistazo

La página de resultados es una página más de tu web y merece el mismo diseño cuidado. Esto es lo que debería tener:

• →La consulta visible y el número de resultados: «48 resultados para "lámpara de pie"».
• →Resultados ordenados por relevancia por defecto, con opción de ordenar por precio, novedad o valoración cuando tenga sentido.
• →Las coincidencias resaltadas en títulos y descripciones, para que se vea por qué aparece cada resultado.
• →Tipos de resultado separados si la web mezcla productos, artículos y páginas: pestañas o bloques con su recuento.
• →Filtros para acotar cuando hay muchos resultados. Es un tema con mucha miga y le dedicamos una guía propia sobre filtros y facetas.
• →Paginación o carga progresiva que conserve la posición al volver atrás desde un resultado.

Qué hace que un motor encuentre bien

Detrás de la interfaz hay decisiones de configuración que el diseño tiene que conocer. Esta tabla resume las que más pesan:

Shopify y WooCommerce cubren lo básico con su buscador nativo. Para catálogos grandes o necesidades más finas, solemos trabajar con motores como Algolia, Typesense o Meilisearch, que traen la mayoría de estas capacidades de serie.

05Búsquedas sin resultados: el momento de echar una mano

Siempre habrá consultas sin coincidencias. Lo que marca la diferencia es qué ocurre en esa pantalla. «No se han encontrado resultados» y nada más es un punto final; una buena página de resultados vacíos es un desvío amable.

Lo que funciona en estas páginas:

1. 01Repetir la consulta para que la persona compruebe lo que escribió.
2. 02Proponer una corrección si parece una errata: «¿Querías decir "mesa auxiliar"?».
3. 03Mostrar resultados parciales relajando la consulta (por ejemplo, ignorando una de las palabras) y explicándolo: «No hay resultados para "sofá cama gris 140", te mostramos sofás cama de 140 cm».
4. 04Ofrecer categorías populares o los productos más vendidos como punto de partida.
5. 05Abrir una vía humana: «¿No lo encuentras? Escríbenos y te ayudamos», con enlace a WhatsApp, chat o formulario.

El texto de esta pantalla merece especial cuidado. Los principios que contamos en UX writing aplican aquí al pie de la letra: tono tranquilo, información concreta y una acción clara.

06Búsqueda en lenguaje natural: cuándo sumar IA

Cada vez más gente escribe en los buscadores como habla: «algo para regalar a mi madre que le gusta la jardinería» o «piso con terraza cerca de la playa por menos de 300.000». Un buscador clásico, que compara palabras, se pierde con consultas así. La búsqueda semántica, que compara significados en lugar de palabras exactas mediante modelos de lenguaje, las entiende bastante mejor.

Varios de los motores que hemos citado ya permiten combinar los dos enfoques: coincidencia por palabras para referencias, marcas y nombres exactos, y coincidencia por significado para descripciones abiertas. En los proyectos donde lo hemos aplicado, la combinación funciona mejor que cualquiera de los dos por separado.

Antes de dar el paso, conviene hacerse tres preguntas:

• →¿Las consultas reales son descriptivas? Si la mayoría son nombres de producto o referencias, una buena configuración clásica con sinónimos rinde igual y es más sencilla.
• →¿El catálogo tiene descripciones ricas? La búsqueda semántica necesita texto con el que trabajar. Fichas con solo un nombre y un precio dan poco juego.
• →¿Quién revisa los resultados? La IA amplía lo que el buscador entiende, y el criterio humano decide qué resultados tienen sentido para el negocio. Revisar una muestra de consultas cada mes sigue siendo imprescindible.

Bien planteada, la IA convierte el buscador en algo parecido a un dependiente atento: entiende lo que le pides aunque no uses la palabra exacta. Si te interesa este terreno, lo tratamos dentro de nuestros proyectos de desarrollo web y apps con IA.

07Medir la búsqueda para mejorarla cada mes

La búsqueda interna es una fuente de investigación continua y casi gratuita. Cada consulta es una persona diciéndote qué esperaba encontrar.

En Google Analytics 4, la medición mejorada incluye las búsquedas en el sitio: detecta el término a partir de parámetros como q, s o search y lo registra en el evento view_search_results. Los motores especializados añaden sus propios paneles con consultas frecuentes, consultas sin resultados y clics por posición.

Las métricas que revisamos con nuestros clientes:

• →Porcentaje de sesiones que usan la búsqueda. Indica cuánto pesa en tu web.
• →Consultas más frecuentes. Si muchas apuntan a algo difícil de encontrar en el menú, quizá ese algo merece un lugar en la navegación.
• →Consultas sin resultados. La lista de tareas más directa: sinónimos, productos que faltan, contenidos por crear.
• →Tasa de salida desde resultados. Si la gente busca y se va, los resultados no están respondiendo.
• →Búsquedas refinadas. Si muchas personas reescriben la consulta, el autocompletado o la relevancia tienen margen de mejora.

Una revisión mensual de media hora con estas cinco cifras basta para que el buscador mejore de forma continua. Y de paso aprendes cómo habla tu público, algo que también sirve para nombrar categorías y escribir los textos de toda la web.

08Un buscador que escucha

Un buen buscador no se nota: escribes, aparece lo que buscabas y sigues con lo tuyo. Para llegar ahí hace falta diseño de interfaz, configuración técnica y, sobre todo, escuchar las palabras reales de la gente y ajustarlo con paciencia.

En SIMA diseñamos y desarrollamos tiendas online, portales y bibliotecas de contenido donde la búsqueda está pensada desde el principio, dentro de nuestros proyectos de diseño web y experiencia digital. Si tu web tiene un buscador que no termina de encontrar, escríbenos y revisamos juntos qué está buscando tu público.