Filtros en la tienda online: cómo acotar el catálogo

Un buen filtro de tienda deja marcar varias opciones del mismo grupo, aplica la elección al ritmo de quien filtra y muestra en todo momento lo que está activo. Los tres puntos todavía fallan en tiendas grandes. En las pruebas del Baymard Institute (en inglés), el 15% de las tiendas no acepta dos opciones del mismo grupo. Otro 28% no muestra un resumen de los filtros aplicados (Baymard (en inglés)).

Para qué sirve el filtro

El filtro es la herramienta de quien ya tiene delante una lista larga y quiere solo lo que cumple sus criterios. El NN/g (en inglés) separa dos papeles. El filtro saca de la lista lo que no cumple una condición. La faceta sugiere categorías y atributos en los que la persona quizá ni había pensado, y así convierte la búsqueda en navegación.

Los controles son simples a propósito: casillas y menús con etiquetas en lenguaje común. Con ellos, cualquier cliente arma una consulta compleja sin saber lógica booleana (NN/g (en inglés)). Eso sirve a quien ya sabe lo que quiere. Para comparar las últimas opciones, el camino es otro, y está en el texto sobre tabla comparativa.

Varias opciones del mismo grupo

Quien busca vaqueros azules o negros necesita marcar los dos colores a la vez. Cuando la tienda acepta solo uno, filtra por azul, memoriza lo que le gustó, desmarca, filtra por negro e intenta recordarlo todo al final. El Baymard (en inglés) describe ese recorrido en nueve pasos y cuenta que hubo participantes que abandonaron productos que les servían.

La regla que el cliente espera tiene dos partes:

Entre grupos distintos, vale la “y”. Color negro y marca X muestra solo lo que es negro y de la marca X.
Dentro del mismo grupo, vale la “o”. Marca X y marca Y muestra lo que es de una o de la otra.

El mismo artículo pide casillas de verificación para las opciones, porque el formato ya avisa que se puede marcar más de una. En las pruebas era común aplicar cinco o seis filtros, y hubo quien llegó a diez (Baymard (en inglés)).

Aplicar al momento o esperar al botón

Hay dos formas de aplicar. En la interactiva, la lista cambia con cada clic. En la de lote, la persona marca todo y confirma con un botón. El NN/g (en inglés) liga la elección a dos preguntas: qué pretende la persona y qué tan rápido responde el sitio.

Quien explora gana con la interactiva, porque cada resultado le da una idea para el siguiente filtro. Quien llega con varios criterios, como talla, color y largo, se cansa de que la página se recargue con cada marca. Cuando el sitio puede ir lento, el lote ahorra espera, y por eso el NN/g lo recomienda en el móvil.

Hay un punto intermedio. El sistema espera a que la persona deje de moverse por la zona de filtros y solo entonces actualiza, tras uno o dos segundos sin actividad (NN/g (en inglés)). Mientras tanto, un indicador de progreso confirma que el clic llegó. Oscurecer toda la lista durante el cambio evita que cada miniatura parpadee por su cuenta.

Adónde va la página después

Tras aplicar, la página puede volver arriba o quedarse donde estaba. Volver arriba en mitad de la elección saca a la persona de su sitio y puede hacer que el siguiente clic caiga en la opción equivocada. Quedarse quieta también falla cuando quedan pocos artículos y la zona junto a los filtros aparece vacía. El NN/g (en inglés) muestra un caso así, en el que la pantalla vacía parecía carga o falta de resultados.

El criterio es el mismo de la sección anterior. Mientras la persona sigue tocando los filtros, la página no se mueve. Cuando termina, llevarla arriba muestra lo que cambió.

Mostrar lo que está activo

El resumen de filtros aplicados resuelve tres problemas que el Baymard (en inglés) vio en las pruebas. Sin él, falta la confirmación inmediata de que el filtro entró. Falta una forma rápida de quitarlo. Y falta contexto para la lista, como un título que dice dónde está la persona.

El tercero es el más caro. Quien olvida un filtro activo puede creer que la tienda no tiene el producto, cuando bastaba con quitar una condición. El mismo artículo cita filtros que entran sin que la persona los elija, como un atajo de la portada a “sillones de hasta 300 dólares” que llega con tres condiciones ya marcadas.

Algunos cuidados ayudan:

cada elemento del resumen tiene una “x” grande para quitarlo y hay un botón para borrar todo;
mostrar solo el número, como “Filtros (3)”, no basta, porque obliga a abrir el panel para saber cuáles son;
en tiendas de producto técnico, el nombre del grupo acompaña a la opción: “Ancho: 90 cm” dice más que “90 cm”.

Según el Baymard (en inglés), el 72% de las tiendas evaluadas ya muestra ese resumen en escritorio. La que no lo hace desentona con lo que el cliente encuentra en el resto de la web.

En el móvil

La pantalla pequeña quita lo que hacía funcionar el filtro en el ordenador: ver los controles y la lista a la vez. Muchos sitios mandan los filtros a otra pantalla, y la persona va y vuelve para saber si la elección funcionó. El NN/g (en inglés) defiende un panel que se desliza sobre la lista, con el total de resultados fijo arriba y parte de la lista visible al fondo.

El mismo texto pide una palabra en el botón, como “Filtrar”, en lugar de un icono de líneas y círculos que no todo el mundo reconoce. Para el resumen de filtros, el Baymard (en inglés) acepta una fila con desplazamiento lateral, siempre que el último elemento aparezca cortado por la mitad. Ese corte es lo que avisa de que hay más a la derecha.

Lo que me llevo de mi trabajo

Entre febrero y septiembre de 2022 fui diseñador sénior de UX en Newfold Digital, donde creé un sistema para buscar y filtrar dominios que simplificó la elección del usuario. Esa experiencia está en mi perfil completo. No tengo un número medido de ese trabajo para mostrar aquí.

La otra lección viene del caso de Le Biscuit, una tienda con miles de productos de hogar y estilo de vida, montada sobre un sistema de diseño ligado a sus esquemas de contenido. Para mí, un buen filtro empieza antes de la pantalla. Si el ancho del producto no existe como campo en la ficha del catálogo, no hay nada que filtrar. El Baymard (en inglés) hace una advertencia parecida: con el catálogo mal categorizado, ni la mejor lógica de filtros salva la lista.

Dónde difieren las fuentes

El artículo del NN/g sobre el panel en el móvil (en inglés), de 2015, trata como ideal ver la lista cambiar en cuanto la persona marca una opción. El texto del NN/g sobre cuándo aplicar (en inglés), de 2016, recomienda el botón de aplicar en el móvil, incluso con el panel. Las dos lecturas se encuentran en la velocidad. La respuesta instantánea favorece actualizar al momento, y la red lenta favorece el lote.

El error común: dejar que la lista quede en cero sin aviso

El desliz más frecuente es la combinación de filtros que no devuelve nada y no explica por qué. El NN/g (en inglés) recuerda que las facetas suelen mostrar cuántos artículos hay en cada opción, lo que evita el resultado cero antes del clic. Junto con el resumen de filtros activos, la persona ve qué recortó y deshace el exceso. Para cuando la búsqueda por texto no encuentra nada, mira el texto sobre búsqueda en la tienda.