Search y Filtering UX

El campo de busqueda debe ocupar ancho generoso (min 320px en desktop) con icono de lupa a la izquierda y un placeholder que muestre un ejemplo concreto ("Busca AirPods Pro, RTX 4070...") en lugar de un genérico "Buscar". El ejemplo real enseña al usuario que puede buscar y sube el uso de search hasta 30%.

Las sugerencias deben aparecer en menos de 200ms tras cada pulsación y nunca superar 8 resultados para no saturar la vista ni el scroll. Agrupa por tipo (productos, categorías, marcas) y muestra thumbnail + precio cuando aplique para que el usuario decida sin abrir la página.

Una busqueda sin resultados nunca debe terminar en una pantalla vacia. Ofrece corrección de typos, productos similares ("Quizá buscabas...") y un bloque de busquedas populares para que el usuario reencauce su sesión en vez de abandonar. Baymard reporta que el 27% de los sitios falla en este punto.

Cada filtro aplicado se materializa en un chip con su etiqueta y una "x" individual, agrupados sobre los resultados junto a un "Limpiar todo". Si los filtros solo viven dentro de un panel cerrado, el usuario pierde de vista que su lista esta acotada y desconfia del conteo.

Las opciones de sort deben adaptarse al dominio: una tienda ofrece "Más vendidos", "Precio", "Mejor valorados"; un feed de tareas ofrece "Vencimiento", "Prioridad", "Asignado". Listas genéricas de "A-Z / Z-A" obligan al usuario a mapear su intención a algo que no le sirve.

Resalta la coincidencia (negrita o fondo amarillo suave) dentro de cada resultado para que el ojo confirme en milisegundos por que aparece ese item. Sin highlight el usuario relee cada línea entera buscando su query, lo que sube el tiempo de escaneo notablemente.

Al enfocar el campo vacio, muestra las últimas busquedas del usuario y, en herramientas profesionales, las busquedas guardadas con nombre. Esto convierte tareas repetitivas (revisar "Pedidos pendientes > $10k") en un click en lugar de reconstruir filtros cada sesión.

En pantallas pequeñas, los filtros viven en un bottom sheet que sube desde abajo con un botón primario "Aplicar (N)" fijo y un "Reiniciar" secundario. Evita sidebars colapsados o filtros que aplican en cada toque, que disparan recargas constantes y frustran al pulgar.