ContentBuilder.js ContentBuilder.js

Comment intégrer harmonieusement un système de filtres dans un site Web

Lorsque la quantité de contenus d'une site Web connaît une croissance exponentielle, un moteur de recherche est le bienvenu. Mais cela ne suffit pas toujours. En s'appuyant sur l'exemple de Housing.com — un géant de l'immobilier indien — cet article met à jour des approches nouvelles pour naviguer parmi des contenus pléthoriques.

Capture - Comment intégrer harmonieusement un système de filtres dans un site Web

Des filtres intégrés nativement aux listes d'offres

L'ajout récent des offres de location dans le portfolio de Housing a fait exploser le nombre d'annonces sur la plateforme. Pour faciliter la recherche du logement parfait, Housing propose des filtres pré-calibrés accessibles au sein des pages de résultats de recherche. Le but est d'apporter une aide aux utilisateurs en facilitant le tri parmi des millions d'annonces immobilières. Les filtres de Housing se mettent en scène sous la forme d'une section intégrée nativement à la suite des premières offres de liste.

HOUSING FILTRES NATIFS.JPG
Housing filtres natifs

Lorsque l'utilisateur sélectionne un filtre, ce dernier est ajouté en tant que nouvelle facette de tri à la recherche en cours. La page est automatiquement rechargée pour ne laisser apparaître que les offres correspondant aux filtres sélectionnés.

Un tri personnalisé en fonction des comportements de navigation

Les filtres natifs à la page de résultats offrent la possibilité d'affiner la recherche avec des fourchettes de prix pré-établies par quartier ou par thématique (quartier résidentiel, branché, valeur sûre, en progression, etc.).

L'accompagnement de l'utilisateur dans sa recherche du logement parfait ne s'arrête pas là. Si la liste filtrée comporte encore un nombre important d'items, d'autres sections natives de filtres sont injectées dans le listing. A contrario, lorsque la liste ne se compose plus que de quelques offres, un bloc de filtres natifs en fin de liste offre une porte de sortie à l'utilisateur. Cela lui permet d'étendre sa recherche à d'autres secteurs et avec d'autres options de standing.

Des accélérateurs d'exploration responsives

Le design des filtres de Housing sont accessibles à travers tous les supports, couvrant le Web, iOS et Android. Le but est d'encourager l'acte d'achat en rendant le plus facile possible la prise de contact entre acheteur <> vendeur.

L'idée qu'il faut retenir avec les filtres natifs de Housing est que la mise en scène géolocalisée, par prix et par standing des offres de logement ne suffit plus. La recherche de logements est de plus en plus identitaire. La combinaison de facettes de tri au sein de filtres pré-packagés est un atout majeur pour séduire des segments d'utilisateurs parfois très fragmentés.

Cette approche du design native aux contenus est la bienvenue pour guider des utilisateurs à travers de gigantesques inventaires.

Les bonnes pratiques pour concevoir un système de filtres

Quelques astuces qui feront de vous un designer de filtre efficace.

A l'exemple de Housing, faîtes le choix d'adopter la solution la plus simple pour mettre en scène vos filtres. Des boutons pré-remplis avec des valeurs par défaut permettent d'accélérer l'entrée de l'utilisateur dans le parcours de recherche. Il n'a pas à saisir les informations, l'interface lui rend service à condition d'avoir fait ses devoirs concernant les besoins prioritaires de vos utilisateurs sur les fonctions de recherche.

Si vous ne savez pas quels filtres proposés par défaut, surveillez les mots-clés les plus recherchés dans votre moteur de recherche interne. Ils vous donneront une indication sur les valeurs de tri à proposées par défaut dans votre interface. Par exemple, Housing propose de filtrer les annonces immobilières en fonction des localités les plus populaires et par types de logement les plus recherchés (2 pièces par ex.).

Un autre conseil est de laisser une liberté de recherche à votre audience via un champ texte. Si vos filtres sont trop contraignants, certains de vos utilisateurs préféreront vérifier par eux-même l'existance d'un contenu via la saisie de mots clés.

Dernières astuces, fournissez un moyen rapide et efficace pour annuler le filtrage en cours et mettez en exergue les filtres actifs correspondants aux items affichés dans la liste de résultats. De cette manière, l'utilisateur a un feedback de l'interface sur ses actions de tri et il obtient un moyen rapide de revenir à l'état inital de l'interface.

Pour aller plus loin

Si vous aussi, vous souhaitez investir dans des facettes de tri innovantes pour accélérer la découverte de vos contenus, les site builders peuvent s'avérer être un bon pari. Des outils tels que Webflow, Squarespace ou Wix offrent un moyen simple et accessible pour créer un site et surtout de pouvoir le modeler selon vos besoins. Dans notre cas, les systèmes de filtres proposés par Wix sont un bon point de départ. Ils permettent d'améliorer l'expérience utilisateur concernant la recherche d'un contenu particulier. L'approche du design de Wix consiste à proposer une plateforme de création de sites Web basée sur le cloud. Elle est donc accessible à des millions d’utilisateurs à travers le monde pour créer facilement un site web en toute autonomie.

On en parle ?!

Avez-vous des commentaires, des questions, de l'amour ou de la haine ? Envoyez tout ça à guillaume@magazineduwebdesign.com. Si vous n'aimez pas les e-mails, envoyez un tweet à @MagDuWebdesign.

Ressources complémentaires

ContentBuilder.js
ContentBuilder.js

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer

Développez vos talents en explorant ces collections

3 sections à explorer. Des centaines de conseils & d'astuces pour rendre le monde meilleur, pixel après pixel, balise après balise.