Tapez « veste » sur la plupart des boutiques de mode et vous obtenez plusieurs centaines de résultats. Personne ne les fait défiler. Le client affine : sa taille, une couleur, un budget. S'il n'y parvient pas en quelques clics, il reformule sa requête, ou il part.

Les filtres sont donc la deuxième moitié de la recherche. Ils reçoivent pourtant beaucoup moins d'attention que la pertinence du moteur : on les configure une fois, souvent à partir de la liste des attributs disponibles, et on n'y revient plus. Cet article rassemble les règles qui comptent, de la logique de calcul jusqu'au pouce de l'utilisateur sur mobile.

Filtre ou facette : la différence

Les deux mots sont souvent employés l'un pour l'autre. La distinction est pourtant utile.

Un filtre restreint une liste selon un critère : « prix inférieur à 50 € », « en stock ». Il peut exister indépendamment des résultats affichés.

Une facette est un filtre dont les valeurs sont calculées à partir des résultats en cours. Sur la requête « chaussures de trail », la facette Marque ne propose que les marques présentes dans ces résultats, chacune avec le nombre de produits correspondants. Elle décrit ce qui est à l'écran, et elle change avec la requête.

Une facette répond à la question « qu'y a-t-il dans ces résultats ? », là où un filtre figé répond à « qu'y a-t-il dans la boutique ? ». Sur une page de résultats de recherche, c'est la première question qui intéresse le client.

Neuf règles pour des filtres qui aident à choisir

1

Proposer des facettes qui dépendent des résultats

Un panneau identique sur toutes les recherches finit par proposer des critères hors sujet. Les facettes doivent refléter les produits renvoyés par la requête, et les critères affichés doivent avoir du sens pour la famille de produits concernée.

Exemple
Sur « sac à dos randonnée », proposer la contenance et le poids. Sur « robe d'été », la longueur et la matière. Pas l'inverse.
Approche : calculer les valeurs de chaque facette sur les résultats de la requête, et masquer une facette quand elle n'a qu'une seule valeur : elle ne permet de rien départager.
2

Afficher le nombre de produits par valeur

Le compteur à côté de chaque valeur dit au client ce qu'il va obtenir avant de cliquer. Il évite surtout le pire scénario : cocher une option et tomber sur une page vide.

Approche : afficher le compteur, le recalculer à chaque sélection, et ne jamais proposer une valeur qui mène à zéro résultat dans le contexte actuel.
3

Ordonner les facettes et leurs valeurs

Les deux ou trois premières facettes concentrent l'essentiel des clics. La catégorie, la taille et le prix arrivent généralement avant la matière ou le pays de fabrication. À l'intérieur d'une facette, l'ordre dépend de la nature des valeurs.

Exemple
Marques triées par nombre de produits. Tailles dans leur ordre naturel (XS, S, M, L, XL), jamais par ordre alphabétique. Prix du moins cher au plus cher.
Approche : placer en haut les facettes que vos clients utilisent le plus (vos données de navigation le disent), replier les autres, et limiter les longues listes à quelques valeurs avec un lien « voir plus ».
4

Regrouper les valeurs proches

Un catalogue alimenté par plusieurs fournisseurs accumule les variantes d'écriture. Le client se retrouve devant « Bleu », « bleu marine », « Navy » et « Marine » comme s'il s'agissait de quatre couleurs différentes. C'est le regroupement des valeurs, que l'on appelle aussi bucketing.

Exemple
Couleurs ramenées à une douzaine de teintes de base. Pointures harmonisées sur un seul système. Prix découpés en tranches qui suivent la répartition réelle du catalogue, plutôt que des paliers ronds où une seule tranche contient 80 % des produits.
Approche : normaliser les valeurs à la source, dans le catalogue, plutôt que dans l'affichage. Un curseur de prix complète bien des tranches prédéfinies, il ne les remplace pas.
5

OU à l'intérieur d'une facette, ET entre les facettes

Cocher « rouge » puis « bleu » signifie « rouge ou bleu » : le client élargit son choix. Ajouter ensuite « taille 38 » signifie « et en taille 38 » : il le resserre. Une logique inversée produit des résultats qui semblent absurdes, et une liste vide dès la deuxième couleur cochée.

Approche : cases à cocher multiples combinées en OU au sein d'une facette, combinaison en ET entre facettes. Pour les facettes à choix exclusif (une seule catégorie à la fois, par exemple), utiliser des liens ou des boutons radio, pour que le comportement soit lisible.
6

Rendre les sélections visibles et réversibles

Après trois ou quatre sélections, le client ne sait plus forcément pourquoi il ne voit que six produits. Les filtres actifs doivent rester visibles au-dessus des résultats, et chacun doit pouvoir être retiré sans tout recommencer.

Approche : une puce par filtre actif avec une croix pour le retirer, et un bouton « Réinitialiser » pour revenir à la liste complète.
7

Conserver les sélections quand on trie ou qu'on navigue

Changer le tri, charger la page suivante ou revenir en arrière depuis une fiche produit ne doit pas effacer les filtres. C'est l'un des irritants les plus fréquents : le client consulte un article, revient, et retrouve la liste complète.

Approche : appliquer le tri sur les résultats déjà filtrés, et garder l'état des filtres dans l'URL pour qu'il survive au bouton retour et à un partage de lien.
8

Repenser le panneau pour le mobile

Une colonne latérale n'a pas sa place sur un écran de téléphone. Le panneau devient un volet qui s'ouvre depuis un bouton « Filtres » visible en permanence, et qui se referme sur les résultats mis à jour. Les cases à cocher et les puces doivent rester faciles à toucher : les recommandations d'Apple et de Google fixent une cible tactile minimale de 44 pt et de 48 dp.

Approche : un bouton qui affiche le nombre de filtres actifs, un volet en bas d'écran, et un bouton de validation qui annonce le résultat (« Voir 37 produits ») pour éviter de recharger la liste à chaque case cochée. Plus de détails dans notre article sur la recherche mobile.
9

Ne pas oublier l'accessibilité

Des filtres construits avec de simples éléments cliquables sont inutilisables au clavier et muets pour un lecteur d'écran. Les pastilles de couleur sans nom posent le même problème aux personnes daltoniennes.

Approche : de vraies cases à cocher et de vrais boutons, un libellé texte sur chaque valeur (y compris les couleurs), un focus clavier visible, et une annonce du nouveau nombre de résultats via une zone aria-live après chaque sélection.

Les facettes commencent dans les données produit

Aucune interface ne compense un catalogue incomplet. Une facette Couleur n'est fiable que si chaque produit a une couleur renseignée, dans un vocabulaire cohérent. Un produit sans attribut disparaît dès que le client filtre, même s'il correspondait parfaitement à sa recherche.

Si votre catalogue passe par Google Merchant Center, les attributs color, size, material ou product_type sont ceux qui alimentent les facettes. Notre article Merchant Center et moteur de recherche détaille lesquels compter et comment les auditer, et celui sur les fiches produit couvre la normalisation des valeurs.

Un contrôle simple : prenez votre facette la plus utilisée et additionnez les compteurs de ses valeurs sur une requête large. Si le total est très inférieur au nombre de résultats, une partie du catalogue n'a pas l'attribut.

Mesurer l'usage des filtres

Trois indicateurs suffisent pour savoir si vos filtres travaillent.

Le taux d'usage. La part des recherches suivies d'au moins un filtre. Un taux très faible sur un grand catalogue signale souvent des facettes peu pertinentes ou mal placées.

Les facettes réellement cliquées. Elles indiquent l'ordre à adopter, et celles que l'on peut replier ou retirer.

Les impasses. Les combinaisons de filtres après lesquelles le client abandonne ou relance une recherche. Elles révèlent des trous dans le catalogue ou des valeurs mal regroupées.

Ces données se collectent avec un événement dédié dans Google Analytics 4. La méthode d'extraction est décrite dans notre guide pour analyser les requêtes de recherche dans GA4.

Des facettes calculées sur chaque recherche, sans développement

Vectail installe une recherche propulsée par Google Vertex AI avec filtres par catégorie, marque et prix, compteurs inclus. Une ligne de code à ajouter, sans plugin.

Démarrer gratuitement - 14 jours sans CB

Notre position

Dans le widget Vectail, les facettes Catégorie et Marque sont calculées par Google Vertex AI sur les résultats de chaque requête, avec le nombre de produits par valeur. Le prix se filtre par fourchette. Plusieurs valeurs d'une même facette se combinent en OU, les facettes entre elles en ET. Les filtres actifs s'affichent en puces au-dessus des résultats, et sur mobile le panneau s'ouvre en volet depuis un bouton qui indique le nombre de filtres sélectionnés. Vous choisissez dans le tableau de bord quels filtres afficher.

Si vous ne deviez retenir qu'une règle, ce serait la deuxième : ne jamais laisser un client cliquer sur une option qui mène à une page vide. C'est la plus simple à vérifier, et celle que vos clients remarquent le plus vite. Les recherches qui aboutissent malgré tout à une page vide relèvent d'un autre chantier, traité dans notre guide sur les pages zéro résultat.

Sources

  1. Cibles tactiles : Apple Human Interface Guidelines (44 pt) et Google Material Design (48 dp).
Retour au blog