5 bonnes pratiques pour que vos filtres facilitent VRAIMENT la navigation dans votre catalogue e-commerce


 
Kézako?
60
shares
Partager sur Twitter
Partager sur Google+
Partager sur LinkedIn
Partager sur Pinterest
+
5 bonnes pratiques pour que vos filtres facilitent VRAIMENT la navigation dans votre catalogue e-commerce

5 bonnes pratiques pour que vos filtres facilitent VRAIMENT la navigation dans votre catalogue e-commerce

Les filtres sont les charnières indispensables d’une bonne navigation sur un site e-commerce.

Quand ils sont bien pensés, les filtres permettent de réduire un catalogue comprenant des milliers de références à une sélection précise de produits qui correspondront exactement à ce que l’internaute cherche à acquérir. Ainsi, l’acheteur potentiel trouve plus rapidement le produit précis qu’il souhaite, ce qui maximise vos chances de gagner la vente et d’améliorer votre taux de conversion.

Toutefois, toutes les boutiques en ligne n’ont pas des systèmes de filtres efficaces pour leur catalogue. Selon une étude réalisée sur 50 grands sites américains, il a été découvert que seulement 16% des e-commerçants proposent une bonne expérience de filtrage du catalogue produit. C’est peu. Cela prouve aussi que c’est un « parent pauvre » des projets de création de sites e-commerce.

Dans ce billet, je vous donne 5 bonnes pratiques, exemples à l’appui, pour enchanter vos utilisateurs avec votre système de filtrage du catalogue produit.

1 – Adaptez vos filtres en fonction des catégories de produits

Regardez vos propres usages: lorsque vous utilisez les filtres d’un site e-commerce, vous le faites sur une catégorie de produits précise, et non sur tout le site (à l’exception de sites très « niche » peut-être). Or chaque catégorie peuvent avoir besoin de filtres différents:

  • les megapixels pour des appareils photos numériques
  • le format pour des livres,
  • les températures de confort pour des sacs de couchage,
  • la puissance du processeur pour un ordinateur,
  • etc.

L’objectif est de fournir au visiteur le filtre « pertinent » qui l’aidera réellement à affiner sa sélection. Si un attribut vous semble important à ajouter dans les fiches de certains produits, c’est que certainement il doit aussi être crucial de l’ajouter comme filtre pour toute la catégorie concernée.

Pixmania - Filtres categories

Sur le site de Pixmania, on peut constater que les filtres varient en fonction des catégories produits. Ici, les critères de tri des « Objectifs pour appareils Nikon » sont différents de ceux des « Caméras de Sport »

2 – Pensez aux filtres « thématiques »

Bien souvent, il est aisé de trouver « le bon rayon » sur un site e-commerce. Le menu de navigation primaire et le catalogue produit en lui-même sont structurés pour cela. En revanche, une fois dans « le bon rayon », il peut être difficile d’affiner sa recherche selon certains « thèmes ». L’illustration la plus frappante est l’achat de prêt à porter: vous cherchez un vêtement « hiver », ou « été », ou bien une chemise au style « formel » ou plutôt « sport »…

Alors qu’est-ce qu’un thème pour un système de filtrage e-commerce? Ce sont des types de filtres, plus « subjectifs », qui permettent à l’internaute d’affiner une sélection de produits en fonction d’attributs comme :

  • « Saison » (hiver, printemps, été)
  • « Style » (formel, sportif, contemporain, classique)
  • « Usage » (extérieur, intérieur)
  • « Critères d’achat » (premiers prix, meilleur rapport qualité prix, haut de gamme)

Sans ce type de filtres, l’internaute peut simplement penser que vous ne proposez pas le type de produits précis qu’il recherche. Et croyez moi, ces critères de tri ne sont pas juste des « nice to have »: lorsque vous les proposez, leurs usages peuvent parfois dépasser 50% des visiteurs de la catégorie !

Autrement dit, ils sont utiles et utilisés!

Pour mettre en place des filtres thématiques, taguez simplement les produits de votre catalogue avec des attributs thématiques. Vous utiliserez ensuite ces tags pour proposer des filtres thématiques pertinents à vos visiteurs.

Rideaux - Filtres thematiques

Prenez rideaux-decoration-interieure.fr. Le site propose un système de filtres thématiques très pertinents, comme « l’ambiance » recherchée, ou le « style » qui s’accordera le mieux à votre intérieur.

3 – Le cas échéant, pensez aux filtres de compatibilité

Certains produits sont pensés pour être combinés avec d’autres.

C’est le cas par exemple des coques de téléphones portables: elles sont manufacturées pour être utilisées avec certains modèles précis de téléphones. Idem pour des pochettes d’ordinateurs, d’appareils photo, ou des cartouches d’encre, des chargeurs de machines informatiques…

Indiquer dans son système de filtres la comptabilité d’un produit avec un autre peut paraître trivial. Et pourtant, selon l’étude citée au début de ce billet, seuls 35% des « testeurs » des grands sites américains sont arrivés à trouver un accessoire dont ils étaient certains qu’il serait comptabile avec le produit principal. Comme quoi, tout n’est pas toujours aussi facile qu’on le prétend.

Assurer que l’internaute puisse facilement trouver les produits compatbiles à un autre est d’autant plus important que dans ce type d’achat, seule la garantie de bonne compatibilité peut vous permettre d’empocher la vente.

  • Aussi bons puissent être les avis clients,
  • aussi léchés puissent être vos arguments de ventes
  • et aussi avantageux puisse être le prix,
  • si l’internaute pense qu’il y a le moindre risque d’incompatibilité, il abandonnera le site en quête d’un autre marchand qui saura mieux le rassurer sur cet aspect.
Kase -Filtre compatibilite

Sur toutes les pages de son catalogue, le spécialiste de coque Téléphone The Kase donne la possibilité de trier les modèles via un filtre « compatibilité ». Ainsi, le visiteur peut limiter la sélection de produits uniquement aux coques qui conviendront à son modèle de téléphone

4 – Mettez en avant les filtres les plus importants en haut de votre page de catégorie

Quelque soit le nombre de filtres que vous proposez sur votre site e-commerce, il y en a toujours certains qui sont plus importants que d’autres, des must have. Cela peut être le filtrage par marque ou l’ordre de tri par prix croissant.

Du point de vue ergonomique, il est judicieux que ces filtres importants surplombent vos pages catégories. Pourquoi?

  • Car la page catégorie est perçue par l’internaute comme l’offre même du site (c’est à dire la partie la plus importante à visualiser)
  • Alors que les filtres, souvent présents dans la colonne de gauche, sont eux perçus comme « optionnels » (une fonction à utiliser uniquement si je recherche un produit très précis).

Pour espérer faire avancer le visiteur dans le processus de conversion, certains types de produits demandent forcément à être filtrés.

  • Dans le prêt à porter par exemple, les acheteurs savent si ils veulent acheter un produit pour « homme » ou pour « femme ».
  • Sur un site d’animalerie en ligne, les acheteurs savent si ils veulent des produits pour « chat » ou pour « chien ».
  • Et dans le rayon des films, le format « DVD », « Blue Ray », « Téléchargement » peut faciliter grandement le parcours de l’utilisateur.

Bien que cette « pré-sélection » puisse se faire via le menu de navigation primaire (d’autant plus vrai avec la prolifération des mégas-menus), il est toujours bon de mettre clairement en évidence, en haut de sa page catégorie, les filtres les plus utiles pour 80% des visiteurs du rayon. Cette simple mise en avant va fluidifier le chemin vers la conversion. Gardez tout de même le filtre aussi disponible dans la colonne avec tous les autres; l’internaute s’attend à ce que TOUS les filtres soient disponibles au même endroit.

Miscota - Filtre mis en avant

Le site d’animalerie en ligne, Miscota, conserve tout au long du « scroll » une barre en haut de page qui fait apparaître les filtres et les tris les plus utilisés.

5 – Donner à l’utilisateur la possibilité de déployer/fermer les filtres pour faciliter l’usage

Pour les sites e-commerce qui proposent de très nombreux filtres (plus que 6 est considéré comme « nombreux »), on se retrouve vite avec une liste interminable dans la colonne de gauche. Le problème ergonomique que cela pose à l’utilisateur est qu’il devient difficile d’aperçevoir tous les types de filtres disponibles; il leur faut dérouler avec la souris un ascenceur qui n’en finit jamais.

Filtres avec ascenceursPour solutionner ce problème, certains marchands préfèrent mettre des ascenceurs « dans » des blocs de filtres aux tailles prédéfinies. Cette solution n’est pas optimale, même si il devient plus simple d’avoir un aperçu de tous les filtres disponibles (et encore, cela dépend de la taille fixée aux blocs de filtres).

  • En effet, l’utilisateur se retrouve contraint d’interagir sans cesse avec des barres de défilement qui ne font que quelques pixels de large.
  • Et sur mobile, faire défiler les filtres est un exercice qui devient parfois hasardeux… Le visiteur qui veut faire descendre la barre de défilement des filtres se retrouve en réalité à faire défiler l’ensemble de la page.
  • Cela est énervant, et en aucun cas ne peut être considéré comme une « bonne » expérience utilisateur.

Une meilleure option est de construire ses filtres « en cascade »: l’utilisateur peut choisir de déployer ou de « fermer » un groupe de filtres pour rendre la liste moins chargée. Une fois tous les filtres fermés, il est simple pour le visiteur d’apercevoir toutes les options qui lui sont proposées. Il déploiera alors seulement les filtres qui lui seront utiles pour trouver le produit qu’il recherche.

Il faut cependant être vigilant sur la manière dont il est indiqué à l’internaute que les filtres peuvent se fermer/déployer. Respectez le concept d’affordance en utilisant des symboles comme des flèches, ou des + pour faire comprendre rapidement que le visiteur peut intéragir avec.

Aussi, si un filtre propose plus de 10 options, tronquez la liste en ajoutant une mention « Voir X de plus », et organisez les par ordre de popularité et non de manière alphabétique. Car bien souvent, ces options seront plus représentatives du type de filtres mis à disposition que le titre du filtre lui même (le terme « Iphone » accrochera plus l’attention de l’internaute que « compatible avec »).

Rei - filtres cascade

Sur le site américain de REI (spécialiste de produits outdoor), les filtres peuvent être fermés / déployés facilement. Cela est clairement indiqué par le symbole « + » . Aussi, lorsqu’un filtre propose de nombreuses options, REI fait apparaitre la mention « See X More », ce qui lui évite de surcharger inutilement la colonne de gauche pour qu’à tout instant, le visiteur garde une bonne vision d’ensemble de toutes les catégories de filtres qui lui sont proposées.

Conclusion

Il n’y a rien de plus énervant sur un site que de ne pas arriver à trouver le produit précis que l’on souhaite acheter.

Comme dans une boutique physique, le visiteur e-commerce doit pouvoir trouver le manteau d’hiver, noir, pour homme et en taille M aussi rapidement que si il le demandait à un vendeur… Et pour fournir une expérience aussi rapide sur un site marchand, les critères de tri et de filtrage de votre catalogue doivent être complets, faciles d’utilisation et utiles pour votre visiteur. Sans cela, vous perdrez l’internaute rapidement, qui vous abandonnera et ira chercher ailleurs ce qu’il veut acquérir.

Ajouter des critères de tri est donc crucial pour la navigation au sein de votre catalogue de produits. Or, encore beaucoup de e-commerçants les sous-estiment. Beaucoup sont loins de respecter ces 5 bonnes pratiques qui pourtant, peuvent considérablement améliorer l’expérience utilisateur et rendre l’achat plus rapide, plus simple.

user-experience-vs-design

Autres sources pour rédaction:
The Current State Of E-Commerce Filtering

Partager sur Twitter
Partager sur Google+
Partager sur LinkedIn
Partager sur Pinterest
+

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>