Búsqueda Avanzada en Apps Web: Filtros y Facetas UX
Cómo implementar un sistema de búsqueda avanzada con filtros en tu aplicación web a medida
Tu aplicación gestiona miles de registros --productos, expedientes, propiedades, ofertas de empleo-- y el cuadro de búsqueda básico ya no da más de sí. Los usuarios quieren acotar con precisión. Quieren respuestas en milisegundos. Y cuando no las obtienen, se van.
No es una suposición: según Baymard Institute (2024), el 42 % de los sitios con catálogos amplios pierden conversiones porque su filtrado es confuso o lento. En mi experiencia, la búsqueda avanzada con filtros y facetas no es un "nice to have". Es la función que decide si un usuario encuentra lo que busca o abandona tu aplicación por la competencia.
Vamos a desglosar la arquitectura, las tecnologías y los patrones de UX que hacen que esto funcione de verdad.
Filtros, facetas y búsqueda full-text: qué es cada cosa
Tres conceptos que se mezclan constantemente en las reuniones de producto. Conviene separarlos antes de tomar decisiones técnicas:
- Búsqueda full-text: el usuario escribe texto libre y el sistema localiza coincidencias en campos como título, descripción o contenido. Por debajo, hay tokenización, stemming y gestión de sinónimos. Es la caja de búsqueda clásica.
- Filtros: restricciones binarias sobre atributos estructurados. "Precio entre 100 y 500 euros." "Estado = activo." "Fecha posterior al 1 de enero de 2026." Piensa en cláusulas WHERE de toda la vida.
- Facetas: una capa por encima de los filtros que muestra cuántos resultados hay en cada categoría antes de hacer clic. "Color: rojo (34), azul (12), verde (8)." Las facetas guían la exploración y evitan el frustrante "0 resultados".
Un buen sistema de búsqueda avanzada combina las tres piezas: el usuario escribe un término, el motor devuelve resultados relevantes y, junto a ellos, las facetas calculadas dinámicamente invitan a refinar con un clic. Cuando funciona bien, parece magia. Cuando no, parece un formulario de los noventa.
Arquitectura de un motor de búsqueda interno: las piezas fundamentales
La arquitectura típica se divide en tres capas. Nada revolucionario, pero saltarse una garantiza dolor.
1. Capa de indexación. Los datos de tu base relacional (PostgreSQL, MySQL) se indexan en un motor de búsqueda especializado. Este proceso puede ejecutarse en tiempo real (mediante eventos o triggers) o por lotes (un cron cada pocos minutos). La indexación transforma registros en documentos optimizados: campos analizados para texto libre, campos sin analizar para filtros exactos.
2. Capa de consulta. El usuario lanza una búsqueda, la aplicación construye una query combinando texto libre con filtros activos, y el motor devuelve documentos ordenados por relevancia junto con las agregaciones (facetas). Una capa de consulta decente incluye:
- Corrección ortográfica (el clásico "did you mean").
- Autocompletado con sugerencias basadas en el índice.
- Relevancia ponderada: el título pesa más que la descripción, un campo "destacado" sube posiciones.
3. Capa de presentación. Aquí es donde el usuario interactúa: resultados, facetas laterales, filtros aplicados como chips eliminables. Cada clic en una faceta recalcula resultados y contadores sin recargar la página. Si recarga, ya perdiste.
Tecnologías recomendadas para cada escenario
La elección del motor depende de tres variables: volumen de datos, complejidad de las consultas y presupuesto de infraestructura. No hay una respuesta universal, pero sí trade-offs claros.
Elasticsearch. El estándar de facto. Soporta full-text en español con analizadores específicos (stemmer castellano, filtro de stop words), facetas mediante agregaciones, autocompletado con suggesters y escalado horizontal. Es la opción más potente, pero requiere un clúster dedicado y conocimiento operativo. En mi experiencia, merece la pena a partir de 100.000 documentos o cuando las consultas son complejas.
OpenSearch. Fork open source de Elasticsearch con funcionalidad casi idéntica. Disponible como servicio gestionado en AWS. Si tu proyecto ya vive en infraestructura Amazon, ahorra conversaciones con el equipo de seguridad.
Meilisearch. Motor ligero, fácil de desplegar, rendimiento excelente en catálogos de tamaño medio (hasta varios millones de documentos). Ofrece facetas, filtros, typo-tolerance y ordenación personalizada con una API sencilla. Tiempos de respuesta por debajo de 50 ms en la mayoría de casos. Es la opción que recomiendo cuando quieres búsqueda potente sin montar un departamento de Elasticsearch.
Apache Solr. Maduro, estable, integrado de serie en plataformas como Drupal a través del módulo Search API Solr. Si la aplicación ya corre sobre Drupal, Solr es la opción natural: facetas, filtros y full-text configurables desde la interfaz de administración.
PostgreSQL full-text search. Para volúmenes moderados (menos de 50.000 registros) y requisitos de filtrado sencillos, PostgreSQL ofrece búsqueda full-text nativa con ts_vector, ts_query y GIN indexes. Evitas añadir un componente externo. La trampa: las facetas requieren queries de agregación adicionales que pueden penalizar rendimiento. Funciona hasta que deja de funcionar.
Diseño UX de filtros y facetas: patrones que funcionan
La tecnología resuelve el "cómo buscar". La interfaz determina si alguien realmente usa esa capacidad. Estos patrones tienen respaldo en investigación de usabilidad, no son opiniones.
Facetas en panel lateral con contadores. Opciones de filtrado a la izquierda (en escritorio) con número de resultados entre paréntesis. Los contadores se actualizan dinámicamente: si el usuario selecciona "Color: rojo", las facetas de talla muestran solo tallas disponibles en rojo. Este comportamiento --facetado cruzado-- evita combinaciones que devuelvan cero resultados. Nielsen Norman Group (2023) encontró que los contadores de facetas reducen las búsquedas fallidas en un 38 %.
Filtros aplicados como chips visibles. Cada filtro activo aparece como etiqueta con una "X" para eliminarlo. El usuario siempre sabe qué restricciones tiene activas. En móvil, donde las facetas se ocultan tras un botón "Filtrar", este patrón pasa de útil a imprescindible.
Rangos con slider para valores numéricos. Precio, superficie, antigüedad: un slider doble (mínimo-máximo) es más intuitivo que dos campos de texto. Incluir inputs numéricos al lado para los que prefieren teclear un valor exacto. Parece un detalle menor, pero reduce la fricción.
Búsqueda dentro de las facetas. Cuando una faceta tiene más de 15-20 opciones (ciudades, marcas), añadir un campo de búsqueda interno dentro del desplegable. Listar las primeras 7-10 opciones y permitir buscar el resto. Sin esto, el usuario hace scroll hasta perder la paciencia.
Ordenación explícita. Separar la ordenación (por relevancia, precio, fecha) de los filtros. No es un filtro: es un criterio de presentación. Colocarla junto al contador de resultados: "234 resultados, ordenados por relevancia". Simple, claro, eficaz.
Rendimiento: cómo mantener la respuesta por debajo de 200 ms
Un sistema de búsqueda lento es un sistema muerto. Google estableció los 200 ms como referencia de tiempo de respuesta percibido; por encima, la sensación de inmediatez desaparece. Técnicas que ayudan:
- Debounce en autocompletado. No lanzar petición con cada pulsación de tecla. Esperar 250-300 ms desde la última pulsación antes de enviar la query. Reduce carga en el motor y evita resultados parpadeantes.
- Caché de consultas frecuentes. Las búsquedas más habituales se cachean en memoria (Redis, Varnish) con un TTL de minutos. Un e-commerce puede cachear las facetas de la página principal de cada categoría. Esfuerzo mínimo, impacto máximo.
- Índices optimizados. Indexar solo campos necesarios para búsqueda y filtrado. Un campo de texto largo que nadie busca no debería estar en el índice. Configurar el mapping de Elasticsearch o el schema de Solr con precisión ahorra memoria y acelera consultas.
- Paginación con cursor. Olvidar OFFSET para páginas profundas. Usar search_after en Elasticsearch o cursores en la API mantiene tiempos constantes independientemente de la página.
- Precalcular facetas pesadas. Si una agregación es costosa (rangos de precio dinámicos, por ejemplo), ejecutarla en background y servirla desde caché. No hace falta recalcularla en cada petición.
Búsqueda en móvil y particularidades del español
En pantallas pequeñas, las facetas migran a un panel desplegable (bottom sheet o modal) activado por un botón "Filtros" prominente con un badge del número de filtros activos. Dentro del panel, acordeones colapsables. Para aplicaciones con tráfico móvil superior al 60 % --que es lo habitual en España según datos del INE de 2025--, priorizar la experiencia móvil desde el diseño inicial no es opcional.
El español tiene sus particularidades y el motor de búsqueda debe gestionarlas. Normalización de acentos ("camión" = "camion" mediante filtros asciifolding). Stemming castellano para que "viviendas" y "vivienda" compartan resultados. Un diccionario de sinónimos regionales ("piso" / "apartamento"). Eliminación de stop words. Configurar correctamente el analizador de texto en español es uno de los pasos más importantes y, curiosamente, uno de los que más se ignoran en proyectos a medida. He visto aplicaciones con Elasticsearch perfectamente afinado en inglés que devuelven basura en español por un analizador mal configurado.
Métricas para evaluar si tu búsqueda funciona
Implementar la búsqueda es el principio. Medir su rendimiento es lo que permite mejorarla de verdad:
- Tasa de búsqueda con clic (search CTR): porcentaje de búsquedas que terminan con el usuario haciendo clic en un resultado. Un CTR por debajo del 40 % indica problemas de relevancia. Punto.
- Búsquedas sin resultados: registrar las queries que devuelven cero resultados. Son oportunidades disfrazadas para añadir sinónimos, corregir datos o ampliar el catálogo.
- Tiempo hasta el primer clic: cuántos segundos pasan entre que el usuario ve los resultados y hace clic. Menos de 5 segundos sugiere buena relevancia.
- Uso de facetas: qué facetas se usan más y cuáles se ignoran. Las facetas ignoradas ocupan espacio visual sin aportar valor. Elimínalas o reubícalas.
- Refinamientos por sesión: cuántas veces un usuario modifica los filtros antes de encontrar lo que busca. Más de 3-4 refinamientos sugiere que el sistema no ayuda a acotar bien.
Elasticsearch tiene un módulo de analytics incorporado; en otros motores, un sistema de logging con ELK o un servicio como Amplitude cubre esa función.
Cuándo la búsqueda necesita desarrollo a medida
Los CMS y plataformas estándar incluyen módulos de búsqueda genéricos que cubren lo básico. Pero la búsqueda avanzada requiere desarrollo a medida cuando:
- Los datos provienen de múltiples fuentes (base de datos, APIs externas, ficheros).
- Las reglas de negocio afectan a la relevancia (priorizar productos con margen, destacar contenido patrocinado, penalizar registros antiguos).
- La aplicación maneja volúmenes grandes con requisitos de latencia estrictos.
- Las facetas son dinámicas y cambian según el contexto del usuario (rol, ubicación, historial).
En estos escenarios, la búsqueda deja de ser un componente y se convierte en una pieza central de la arquitectura. Diseñarla bien desde el principio ahorra meses de parches posteriores --y los parches en sistemas de búsqueda son particularmente dolorosos, porque cada cambio en el índice afecta a toda la aplicación--. Si tu proyecto necesita un sistema de búsqueda que se adapte a la lógica de tu negocio, hablemos sobre cómo plantearlo.