Search Results Page

Inmediatamente después de buscar, el usuario necesita confirmar que el sistema entendió lo que pidió y cuántos resultados hay. El término debe quedar persistido en el input (no borrarse al enviar) y el conteo debe aparecer sobre la lista ("142 resultados para zapatos rojos"). Ese conteo debe anunciarse a lectores de pantalla con role="status" o aria-live="polite" para cumplir WCAG 4.1.3 Status Messages. Borrar la query es fricción gratuita: el usuario que quiere refinar tiene que volver a teclear todo.

Una página con solo "No se encontraron resultados" es la peor respuesta posible: fuerza al usuario a reinventar su estrategia o abandonar. La página de 0 resultados debe actuar como asistente: mostrar la query que falló, sugerir la corrección más probable, ofrecer categorías relacionadas o productos populares, y si aplica, contacto directo. Los "search tips" genéricos casi nunca funcionan porque el usuario rara vez los lee o aplica; las rutas accionables (un botón "Ver todas las categorías", una corrección clicable) sí.

El primer vistazo determina si el usuario cree que el sitio tiene lo que busca, y suele juzgar con solo los primeros productos. Un default "Precio: menor a mayor" coloca lo más barato y de baja gama primero y oculta la amplitud del catálogo; "Más vendido" repite las mismas SKUs. La relevancia de diversidad asegura que los primeros resultados representen las subcategorías relevantes del catálogo, de modo que cualquier tipo con peso significativo en la lista aparezca arriba. El dropdown de orden sigue disponible para quien quiera ordenar por precio explícitamente.

Los filtros aplicados deben verse al mismo tiempo que los resultados (sidebar o barra superior) para que el usuario no pierda de vista qué tiene activo. Cada filtro activo se muestra como un chip eliminable con su "×", y al quitarlo la lista y el conteo se actualizan en vivo sin recarga completa. Las listas largas de opciones (más de ~8 ítems) deben colapsarse con un "ver más" para no saturar. Esconder los filtros en un modal separado rompe el contexto: al aplicar desaparecen y el usuario no recuerda qué está filtrando.

El usuario no debe adivinar por qué aparece un resultado. Nombre + imagen no basta: hace falta un fragmento de la descripción donde aparezca el término buscado (o su sinónimo) resaltado, dentro de su contexto. Esto reduce el "pogo-sticking", entrar y salir de fichas solo para verificar relevancia, y aumenta la confianza en el buscador. Es el patrón estándar de los motores de búsqueda web aplicado al catálogo: el snippet con el término en negrita responde la pregunta "¿por qué esto?" antes de hacer click.

Una parte significativa de las queries trae al menos un error de tipeo, sobre todo en mobile. Si el motor es literal, esos usuarios obtienen 0 resultados sin razón real. El sistema debe corregir ortografía automáticamente (mostrando "Resultados para zapatos, buscaste zapaos"), soportar sinónimos del dominio y aplicar stemming para que "correr" encuentre "running", "corredor", "carrera". La regla de oro: una diferencia léxica nunca debe producir un cero cuando el catálogo sí tiene el producto. Mostrar el banner de corrección, con opción de buscar el término literal, mantiene al usuario informado y en control.

La paginación clásica exige acción explícita cada pocos ítems y se percibe lenta. El scroll infinito impide recordar dónde estaba un resultado, inutiliza el botón de regreso y bloquea el footer; es especialmente dañino en búsqueda y mobile, donde la página crece sin fin y no se puede compartir ni volver a un conjunto concreto. "Load more" es el mejor equilibrio: mantiene el estado en la URL (?page=2), permite volver al punto exacto y sigue siendo voluntario. El botón debe indicar cuántos ítems carga ("Cargar 24 más") y conservar el footer accesible.

Cuando el usuario abre un resultado, lo revisa y regresa, debe aparecer exactamente donde estaba. Si vuelve al tope, tiene que redescubrir su posición, en mobile eso puede ser decenas de scrolls, y muchos abandonan por ello. Se logra guardando el scrollY (y el estado de paginación/filtros) antes de navegar y restaurándolo al montar el listado de regreso, o apoyándose en la restauración nativa del navegador cuando la URL y el DOM son estables. Un flash sutil sobre el ítem recién visitado ayuda a reorientar la mirada sin ser intrusivo.