The Web Usability Blog a publié un article très intéressant concernant le design des facettes sur le web. Lors d’une recherche, la présence de facettes permet à l’internaute d’affiner ses critères lorsque le nombre de résultats est trop large. L’affinage de critères est utilisé par les moteurs de recherche et de nombreux sites e-commerce.
Sans être 100% SEO, j’ai trouvé pertinent de partager leurs analyses. A partir de quelques expériences, voici l’essentiel à retenir :
1) Où afficher la liste des facettes ?
- La colonne de gauche est le meilleur emplacement : sans forcément réinventer la roue, des sites “assez populaires” comme Google, Ebay ou Amazon utilise le panneau latéral gauche de leur site pour afficher les facettes. Certes, il est toujours intéressant d’étudier si c’est le meilleur endroit. Cependant, lorsqu’un internaute a l’habitude d’utiliser ce genre de site régulièrement, il aura l’habitude de regarder à gauche pour l’affinage de ses critères. Un peu simple certes et pourtant…
- Le haut de page “bien mais pas top” : l’affichage de facette en haut de page est une bonne idée d’un point de vue vision de l’internaute. En revanche, dans bien des cas, l’affichage des produits se produit souvent en-dessous de la ligne de flottaison de l’écran, ce qui est assez frustrant pour l’internaute.
- La colonne de droite est à éviter : d’après leur test sur le même site, 50% de leur visiteurs ont ignoré les facettes lorsque ces dernières étaient affichée dans la colonne de droite. Simple malchance ou habitude des internautes de regarder d’abord à gauche et en haut ?
2) Comment indiquer quels filtres sont actifs ?
- Directement dans la recherche de facettes : le meilleur moyen de voir si une facette est activée est de changer directement sa façon de l’afficher. Un bon exemple pour vous rendre compte de ce système est d’aller vous promener sur la partie Store de chez Apple. Inconvénients du système : si trop de facettes sont sélectionnées simultanément, ça peut déstabiliser facilement l’internaute.
- Dans un zone séparée : moyen couramment utilisé. L’avantage est qu’il permet à l’internaute de garder une vue d’ensemble sur ce qui est sélectionné. Inconvénient, ça décale un peu toute la zone d’affichage des éléments.
- En haut de page : peu utilisé mais les testeurs sont assez favorables à cette solution. De mon point de vue, ça permet de connaître en permanence les critères utilisés sans chercher.
3) Comment annuler un filtre actif ?
- Afficher un petit “x” pour annuler le filtre juste en face de son nom : pratique et discret.
- Ajouter un lien “effacer les filtres” : pas forcément le plus “user-friendly” et ça rajoute une ligne en plus à l’écran.
- Ajouter une facette “tous” dans chaque catégorie : pas le plus élégant mais ça fonctionne (exemple : Apple).
- Ajouter un “x” derrière chaque filtre actif dans la zone de filtres actifs : dans le cas d’un affichage des filtres dans une zone séparée, on peut ajouter une croix de suppression derrière chaque filtre actif.
Au final, j’ai trouvé ces ensemble de conseils plutôt concrets. Néanmoins, je ne dis pas non plus qu’il faut formater le web et faire comme tous les gros sites, sinon où serait la créativité… ? En revanche, on constate qu’il est difficile de changer les habitudes des internautes.Lorsqu’il sont habitués à un style de navigation d’un service qu’ils utilisent régulièrement, il ne vaut mieux pas tout chambouler d’un coup.
Merci pour l’article, très sympathique. Certains conseils sont bons à prendre
Encore un article informatif riche en contenu, qui se démarque de ce l’on peut trouver ailleurs.
Merci…
Yvan,
En ce moment, je suis sur une prestation qui inclut le moteur à facettes Compario. Il est pas mal par défaut. En tout cas l’équipe a voulu prendre en compte les notions de référencement.
Sinon, un petit truc pour les filtres. Afin d’éviter le duplicate d’URLs, je préconise d’ajouter un # avant les filtres. Ce délimiteur annule le reste de l’URL.