Sur un site e-commerce, le passage du catalogue brut à la fiche produit transite presque toujours par les filtres. Quand cette étape fonctionne, le visiteur trouve rapidement, ajoute au panier et convertit. Quand elle dysfonctionne, il abandonne en silence et ne revient pas. Les analyses Baymard portant sur des milliers de sites e-commerce montrent que les filtres comptent parmi les composants les plus défaillants des sites moyens, alors qu’ils sont aussi parmi les plus déterminants pour la conversion.
La conception des filtres est devenue un sous-domaine du UX e-commerce à part entière, avec ses patterns, ses standards émergents et ses anti-patterns identifiés. Tour des règles qui s’imposent.
L’organisation des facettes
L’ordre dans lequel les filtres s’affichent influence directement leur usage. Quatre principes.
- Filtres les plus utilisés en haut : prix, marque, taille selon la catégorie. Identifiés par analytics, pas par préférence interne.
- Filtres catégoriels avant filtres descriptifs : type de produit avant couleur, par exemple.
- Maximum 8 à 10 filtres visibles par défaut, le reste replié dans « Plus de filtres ».
- Cohérence inter-catégories : les filtres communs (prix, marque) doivent toujours être à la même position.
Le filtre prix : le piège classique
Le filtre prix est souvent mal implémenté. Les sliders à deux poignées sont précis mais difficiles à manipuler sur mobile. Les fourchettes prédéfinies (0-50 €, 50-100 €) sont rapides mais limitent la souplesse. La meilleure pratique combine les deux : des fourchettes proposées par défaut, complétées par un input numérique pour la saisie précise. Ne jamais imposer un slider seul sur mobile.
L’instant search ou le bouton « Appliquer »
Deux écoles s’affrontent. L’instant search applique chaque filtre immédiatement, le bouton « Appliquer » attend une validation explicite avant de relancer la requête.
| Critère | Instant search | Bouton Appliquer |
|---|---|---|
| Sentiment de fluidité | Excellent | Plus contrôlé |
| Mobile | Risqué (rerender constant) | Plus adapté |
| Bases volumineuses | Difficile (latence) | Préférable |
| Sélections multiples | Moins ergonomique | Plus naturel |
Le compromis le plus efficace : instant search sur desktop avec base optimisée, bouton « Appliquer » sur mobile avec compteur de résultats à appliquer (« 24 résultats »).
Les valeurs sélectionnées : visibilité essentielle
Quand un utilisateur applique plusieurs filtres, il doit voir clairement lesquels sont actifs. Trois patterns valident cette visibilité.
Tags actifs en haut de page
Au-dessus des résultats, des chips affichent chaque filtre actif avec une croix pour le retirer. Pattern standard, attendu par les utilisateurs.
Compteur global
« 5 filtres appliqués » avec lien « Tout effacer ». Utile sur mobile où les chips prennent de la place.
Highlight dans la sidebar
Les valeurs sélectionnées sont visuellement marquées dans la sidebar (case cochée, fond coloré). Permet à l’utilisateur de voir où il en est sans scroll.
Filtres mobile : la grande différence
Sur mobile, la sidebar gauche n’est pas viable. Trois patterns dominent.
- Bottom sheet : le filtre s’ouvre en panneau bas de page, manipulable au pouce, avec compteur de résultats live et bouton « Voir les résultats ».
- Plein écran : pour les catalogues très filtrés (mode, automobile), les filtres prennent tout l’écran avec une barre d’action en bas.
- Filtres horizontaux scrollables : pour les filtres rapides (catégorie, taille), une rangée de chips scrollable en haut de la liste.
La combinaison filtres horizontaux pour le rapide + bottom sheet pour le détaillé est la signature des meilleurs sites mobiles e-commerce actuels.
Le compteur de résultats
Afficher en temps réel le nombre de résultats que renvoie la combinaison de filtres en cours est un détail qui change l’expérience. L’utilisateur sait s’il filtre trop ou pas assez avant même de valider, ce qui réduit les allers-retours et les no-results.
Sur mobile dans le bottom sheet, ce compteur devient le bouton de validation : « Voir les 87 résultats ». Pattern utilisé par ASOS, Sephora, Vinted et la majorité des leaders mobile.
Les anti-patterns à éviter
Trois erreurs reviennent en boucle. Multiplier les filtres au point de noyer l’utilisateur (plus de quinze visibles d’un coup). Ne pas afficher le nombre de résultats par valeur dans la sidebar, ce qui pousse à essayer aveuglément. Ne pas conserver les filtres dans l’URL, ce qui empêche le partage et l’historique de navigation. Ces trois points sont les premiers correctifs à apporter sur un site e-commerce moyen.
L’URL : un détail technique au fort impact UX
Chaque combinaison de filtres devrait produire une URL unique partageable. Cela permet à l’utilisateur de bookmarker une recherche précise, de la partager par message, et de revenir en arrière dans son historique.
Côté SEO, les URLs filtrées doivent être traitées avec discernement : les combinaisons les plus pertinentes (catégorie + marque) peuvent être indexables, les combinaisons trop fines doivent être en noindex pour éviter la dilution. Voir notre guide UX/UI et performances SEO.
Les filtres dynamiques contextuels
Sur les catalogues très diversifiés, les filtres pertinents varient selon la catégorie sélectionnée. Un filtre « Pointure » n’a de sens que pour les chaussures, pas pour les sacs. Les meilleurs sites adaptent dynamiquement la liste des filtres selon le contexte, ce qui réduit la charge cognitive et accélère la navigation.
Cette logique exige un travail de classification interne en amont, avec un mapping entre catégories produit et filtres applicables. L’investissement initial est important mais l’amélioration de l’expérience est mesurable et durable.
Mesurer l’efficacité des filtres
Trois métriques pour piloter.
- Taux d’utilisation des filtres par session : indique si le composant est repéré et utilisé.
- Filtres effectivement appliqués : révèle les valeurs ignorées qui peuvent être retirées.
- Taux de conversion post-filtrage : doit être supérieur à la moyenne du site, sinon le composant ne sert pas.
Combiner ces données avec des sessions enregistrées (via les outils d’analyse comportementale) permet de repérer les frustrations spécifiques.
Cas particulier : les filtres B2B
Sur un catalogue B2B, les filtres sont souvent plus techniques (références, normes, matériaux, dimensions précises). L’utilisateur attend une recherche-filtrage plus proche d’une base de données que d’une boutique grand public. Les composants restent les mêmes, mais l’organisation favorise les filtres très précis et accepte une densité plus élevée.
En résumé
Les filtres sont parmi les composants les plus déterminants de la conversion e-commerce, et parmi les plus mal traités sur les sites moyens. L’organisation par usage réel (analytics, pas préférence interne), la visibilité des sélections, l’instant search desktop avec bottom sheet mobile, le compteur de résultats temps réel, l’URL partageable : autant de pratiques qui distinguent les sites qui convertissent des sites qui frustrent. Sur un site existant, l’audit du composant filtres et son réagencement font partie des chantiers UX les plus rentables, avec un retour souvent visible dès les premières semaines de mise en ligne.
