Filtros y facetas en tiendas online: cómo diseñar un catálogo donde se encuentra rápido

En una tienda de muebles con la que trabajamos, el filtro más usado no era el color ni el precio, que eran los que el equipo había puesto arriba del todo. Era «ancho máximo». Tiene toda la lógica cuando lo piensas: quien busca un aparador sabe exactamente cuántos centímetros tiene libres en el salón. Hasta entonces ese dato estaba escondido en la descripción de cada ficha, y la gente abría producto tras producto para comprobarlo.

Los filtros son la herramienta que convierte un catálogo grande en una conversación útil. Cada clic responde a una pregunta del tipo «de todo esto, ¿qué me sirve a mí?». Cuando están bien elegidos y bien diseñados, la persona pasa de cientos de productos a una docena que encajan en pocos segundos. Cuando no, el catálogo se convierte en un pasillo infinito.

En esta guía te cuento cómo diseñamos filtros y facetas en el estudio: cómo elegir qué atributos filtrar, qué tipo de control usar para cada uno, cómo resolver la diferencia entre escritorio y móvil, cómo mostrar los filtros aplicados y cómo evitar que tantas combinaciones acaben afectando al posicionamiento de la tienda.

01Filtros y facetas: de qué hablamos

Un filtro es cualquier criterio que reduce un listado. La navegación por facetas es un sistema de filtros combinables, cada uno basado en un atributo del producto, que además indica cuántos resultados hay para cada valor. «Color: azul (24), negro (31), blanco (12)» es una faceta.

Las facetas funcionan tanto en las páginas de categoría como en la página de resultados de búsqueda. En el segundo caso son el complemento natural de un buen buscador interno, del que hablamos en la guía de búsqueda interna: la búsqueda acota por intención y los filtros afinan.

Conviene separar también los filtros de la ordenación. Ordenar por precio o por novedad cambia el orden de los mismos productos; filtrar cambia cuáles aparecen. Visualmente deben ser dos controles distintos, aunque estén cerca.

02Qué filtrar: elegir las facetas que ayudan a decidir

La tentación es convertir cada campo de la base de datos en un filtro. El resultado es una columna larguísima de opciones que nadie recorre. Lo que funciona es partir de cómo decide la gente en cada categoría.

Tres fuentes para encontrar las facetas buenas

• →Las búsquedas internas. Si mucha gente escribe «mesa extensible» o «vestido largo», ahí hay una faceta esperando.
• →Las preguntas al equipo de ventas o de atención al cliente. Lo que más preguntan («¿cabe en 80 cm?», «¿es apto para lavavajillas?») suele ser lo que más filtran.
• →La observación. En una sesión de prueba, pide a alguien que encuentre un producto concreto y fíjate en qué criterios menciona en voz alta.

Facetas específicas por categoría

Las facetas generales (precio, marca, disponibilidad, valoración) sirven en casi todas las categorías. Pero el gran salto de calidad está en las específicas: talla de pie y tipo de pisada en zapatillas de running, potencia y tipo de casquillo en iluminación, número de plazas y tipo de tapicería en sofás. Esa información tiene que existir como datos estructurados del producto, no solo en la descripción; por eso el trabajo de filtros empieza muchas veces ordenando el catálogo.

03El control adecuado para cada tipo de faceta

Cada tipo de atributo pide un control distinto. Elegir bien hace que filtrar sea casi intuitivo.

Listas largas sin agobiar

Cuando una faceta tiene muchos valores, como las marcas, conviene mostrar los cinco o seis más frecuentes y un «Ver todas» que despliegue el resto. A partir de unos quince valores, un pequeño buscador dentro de la faceta ayuda mucho. Ordenar los valores por popularidad o alfabéticamente depende del caso: las marcas, alfabéticas; los tipos de producto, por relevancia; las tallas, siempre en su orden natural.

Los rangos, con números de verdad

El deslizador de precio es bonito pero impreciso, sobre todo con el dedo. Combinarlo con dos campos numéricos donde escribir el mínimo y el máximo resuelve las dos formas de usarlo. Y si el rango es amplio, unas franjas predefinidas («Menos de 50 €», «50 a 100 €») son a menudo lo más rápido.

04Cómo se muestran los filtros en escritorio y en móvil

En escritorio hay dos disposiciones habituales: la columna lateral izquierda, que admite muchas facetas y se lee de arriba abajo, y la barra horizontal sobre los resultados, con desplegables. La columna funciona mejor en catálogos con muchas facetas; la barra, en catálogos con pocas facetas y donde se quiere dar todo el ancho a las imágenes.

En móvil el planteamiento cambia por completo. Lo que mejor funciona en nuestros proyectos:

1. 01Un botón «Filtrar» fijo y visible junto a «Ordenar», normalmente bajo la cabecera o anclado al pie de la pantalla, al alcance del pulgar (lo detallamos en la guía de UX móvil y zona del pulgar).
2. 02Un panel a pantalla completa o una hoja inferior con las facetas plegadas y las más usadas abiertas.
3. 03Selección por lotes: se marcan varios valores sin que la página se recargue debajo.
4. 04Un botón de aplicar con el recuento: «Ver 38 productos». Ese número es la mejor ayuda para decidir si conviene afinar más.
5. 05Un «Borrar» claro en el propio panel, para empezar de nuevo.
6. 06Atajos rápidos fuera del panel: dos o tres filtros muy usados como píldoras deslizables encima del listado.

Aplicar al instante o con botón

En escritorio, aplicar cada filtro al momento resulta natural si la respuesta es rápida y la página no salta. Conviene que la interacción se sienta inmediata; como referencia, Google considera buena una respuesta a la interacción (INP) de 200 ms o menos. Si filtrar tarda más porque el catálogo es enorme, mostrar el recuento previsto y aplicar con botón da más sensación de control.

05Filtros aplicados, recuentos y combinaciones sin salida

Una vez aplicados, los filtros tienen que verse. Sobre los resultados, una fila de etiquetas o chips («Azul ×», «Talla M ×», «Hasta 80 € ×») muestra qué se está viendo y permite quitar cada uno con un toque, más un enlace de «Borrar todo». Así nadie se pregunta por qué solo ve tres productos.

Los recuentos junto a cada valor son el otro gran aliado. Además de informar, permiten algo muy útil: atenuar o esconder los valores que dejarían el listado vacío. Es la forma más amable de que una combinación de filtros nunca termine en una página sin productos.

Y cuando aun así se llega a cero, por ejemplo con un rango de precio muy estrecho, la pantalla vacía tiene que ofrecer la salida: «Ningún sofá cumple todos estos filtros. Prueba a quitar "Hasta 400 €"», con ese filtro listo para eliminar.

Filtros accesibles y bien construidos

Un sistema de filtros es, en el fondo, un formulario, y debería construirse como tal. Cada faceta agrupa sus opciones con un fieldset y un legend, cada casilla tiene su label, y el número de resultados se anuncia a los lectores de pantalla cuando cambia:

<fieldset>
  <legend>Material</legend>
  <label><input type="checkbox" name="material" value="roble" /> Roble (18)</label>
  <label><input type="checkbox" name="material" value="nogal" /> Nogal (7)</label>
  <label><input type="checkbox" name="material" value="lacado" /> Lacado (12)</label>
</fieldset>
<p aria-live="polite" id="recuento">37 productos</p>

Con esta base, el teclado funciona sin trabajo extra, las facetas se pueden plegar con un botón que indique su estado (aria-expanded) y los objetivos táctiles tienen tamaño suficiente: WCAG 2.2 pide un mínimo de 24×24 píxeles, y en móvil solemos trabajar con filas de al menos 44 píxeles de alto para que marcar una casilla sea cómodo.

06Facetas y SEO: muchas combinaciones, pocas indexadas

Aquí aparece una cuestión técnica que conviene decidir pronto. Si cada combinación de filtros genera una URL distinta y rastreable, una tienda con unas pocas facetas puede producir miles de páginas casi iguales. Google acaba gastando su tiempo de rastreo en ellas y las páginas que importan pierden protagonismo. Google Search Central tiene documentación específica sobre cómo gestionar la navegación por facetas, y la idea de fondo es sencilla: deja rastrear lo que aporta y frena lo que no.

Cómo lo resolvemos habitualmente:

• →Combinaciones con demanda de búsqueda, como «sofás cama» o «zapatillas de running de mujer», se convierten en páginas indexables con URL limpia, título y texto propios.
• →El resto de combinaciones usan parámetros en la URL y se marcan como no indexables o se bloquea su rastreo, según el volumen.
• →Las URLs mantienen el estado de los filtros, para que se puedan compartir, guardar y volver atrás sin perder la selección.
• →El orden de los parámetros es siempre el mismo, para que «color=azul&talla=m» y «talla=m&color=azul» no sean dos páginas.

07Medir qué filtros se usan y ajustar cada temporada

Un sistema de filtros mejora mucho con datos. Basta con registrar en la analítica un evento cada vez que alguien aplica un filtro, con la faceta y el valor como parámetros, para responder preguntas muy útiles al cabo de unas semanas:

• →¿Qué facetas se usan más en cada categoría? Esas deberían estar arriba y abiertas.
• →¿Cuáles casi nadie toca? Pueden plegarse, moverse abajo o desaparecer.
• →¿Qué combinaciones llevan a una compra? Son candidatas a convertirse en páginas propias, con su texto y su URL.
• →¿Cuántas sesiones terminan en un listado vacío tras filtrar? Si son muchas, faltan recuentos o falta producto en alguna franja.
• →¿Se filtra más en móvil o en escritorio? Las diferencias suelen sorprender y ayudan a decidir qué atajos poner fuera del panel.

Con ese seguimiento, una revisión breve al cambiar de temporada o al ampliar el catálogo mantiene los filtros al día. En moda, por ejemplo, «manga corta» sube en primavera y «abrigo» en otoño; reordenar las facetas según la época es un gesto pequeño que la gente agradece sin saber por qué.

08Un catálogo que se recorre con gusto

Un buen sistema de filtros transmite algo muy valioso en una tienda: que entiendes lo que tu cliente busca. Las facetas correctas, en el orden correcto y con los controles adecuados, hacen que cada clic acerque a la persona a su producto, y le ahorran ese cansancio que provoca un exceso de opciones que tan bien explica la carga cognitiva.

En SIMA diseñamos y desarrollamos tiendas online donde el catálogo se piensa desde los datos hasta la última casilla, dentro de nuestros proyectos de diseño web y experiencia digital. Si tu tienda tiene buenos productos que cuesta encontrar, escríbenos y vemos juntos cómo ordenarlos.