Concevoir des filtres utiles pour un catalogue ou un annuaire

Choisir des critères qui aident à décider

Observez les questions que les visiteurs posent avant de choisir. Un annuaire peut nécessiter une catégorie, une zone et un type de ressource ; un catalogue, une disponibilité, une dimension ou un usage. N’ajoutez un critère que si les fiches portent la donnée correspondante de façon fiable.

Définissez les valeurs et leurs synonymes avant de publier. Deux libellés qui veulent dire la même chose dispersent les résultats. La page de l’annuaire web montre comment associer catégories, recherche et fiches explicatives.

• Critères liés à une décision.
• Données présentes sur chaque fiche concernée.
• Valeurs et synonymes harmonisés.

Afficher le résultat et son état

Après chaque choix, indiquez le nombre de résultats et les filtres actifs. L’utilisateur doit pouvoir enlever un seul critère ou tout réinitialiser. Un état sans résultat doit expliquer la situation et proposer une action raisonnable, sans effacer silencieusement la sélection.

Testez la combinaison de plusieurs filtres, le retour arrière, le changement de catégorie et la recherche libre. Une carte doit conserver son titre et ses informations essentielles même si l’image ne charge pas. Le guide de recherche interne complète ce parcours.

Jeu d’essai fictif : les quatre fiches ci-dessous ont chacune un identifiant unique. Dans cet exemple, plusieurs valeurs d’un même filtre sont reliées par OU ; des filtres différents sont reliés par ET. « Guides » donne 2 fiches, « FR » en donne 2 et « Guides ET FR » n’en donne qu’une : R1. Avec seulement « FR OU EN », les 4 fiches restent présentes. Ce contrat doit être explicite : un composant de cases à cocher ne définit pas à lui seul la logique métier.

La combinaison « Outils ET FR ET PDF » donne 0 résultat. Retirer uniquement PDF doit retrouver R3, sans perdre les deux autres choix ; tout réinitialiser doit retrouver les 4 identifiants, chacun une seule fois. Conservez les critères dans l’état vide et comparez le compteur à la liste réellement affichée. URLSearchParams.getAll() lit les valeurs répétées d’un paramètre ; cette méthode ne choisit ni OU ni ET et ne valide pas les valeurs du catalogue.

• Nombre et critères visibles.
• Réinitialisation simple.
• Aucun résultat expliqué.

Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

• MDN : URLSearchParams.getAll()

  MDN, consulté le 22 octobre 2026 : lecture des valeurs répétées. Le jeu de données et les résultats attendus constituent notre exemple pédagogique.

Permettre clavier et mobile

Les cases, listes et boutons doivent avoir des libellés explicites, un ordre logique et un focus visible. Si les résultats changent sans rechargement, annoncez le changement de façon compréhensible sans interrompre la lecture à chaque frappe. Sur mobile, contrôlez l’ouverture du panneau et la place laissée aux cartes.

Vérifiez avec un clavier seul, au zoom et sur un écran étroit. Une interface qui fonctionne à la souris peut rendre impossible le retrait d’un filtre avec un lecteur d’écran ou sur téléphone. Le guide d’accessibilité décrit une méthode de test.

• Contrôles nommés et atteignables.
• Changements de résultats perceptibles.
• Panneau mobile utilisable.

Décider quelles URL doivent être explorées

Certaines sélections peuvent avoir une page utile et stable ; la plupart des combinaisons ne méritent pas une URL indexable. Documentez ce choix avant de multiplier les paramètres. Gardez accessibles les fiches individuelles et une liste principale complète.

Les recommandations Google sur la navigation à facettes expliquent le coût des espaces d’URL quasi infinis. Contrôlez les pages vides, les paramètres répétés et les liens générés après chaque évolution des filtres.

Séparez l’état du filtre destiné à une personne et la politique des URL publiques explorables. Dans son guide sur les facettes, Google recommande une réponse HTTP 404 à l’URL concernée pour une combinaison sans résultat, incohérente ou une pagination inexistante. Le tableau applique ce cas précis à un catalogue pédagogique ; il ne prescrit pas de transformer toutes les recherches internes sans réponse en pages 404. Le message doit encore expliquer les critères et proposer une sortie utile.

Pour des facettes que vous choisissez de rendre explorables, utilisez des séparateurs de paramètres standards et limitez les combinaisons sans intérêt. Deux valeurs admises sous un même nom de paramètre peuvent être valides ; un filtre dupliqué interdit par votre contrat ne l’est pas. Testez l’URL exacte, son statut et son contenu, sans rediriger les listes vides vers une erreur générique. Gardez les fiches et la liste principale accessibles. Une canonique peut réduire l’exploration de variantes avec le temps ; elle ne bloque pas immédiatement leur exploration.

• URL publiques choisies délibérément.
• Fiches accessibles sans filtres.
• Combinaisons vides et doublons contrôlés.

Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

Représenter des filtres partageables sans concaténer des fragments d’URL à la main.

Cas fictif : un catalogue utilise un filtre dont la valeur contient « R&D + conseil ». Construisez l’URL avec URLSearchParams et comparez la valeur retrouvée après navigation. Décidez ce que signifient les paramètres répétés, absents ou inconnus. Cette API facilite l’encodage ; elle ne valide pas les valeurs et ne définit pas la stratégie d’indexation du catalogue.

• Le filtre retrouve sa valeur exacte ; les paramètres inconnus et répétés suivent une règle explicite.

• MDN URLSearchParams

  Interface pour lire et construire les couples de paramètres d’une URL, avec gestion de leur encodage et de leurs répétitions.

Conserver le sens des filtres

Cas proposé : choisir une catégorie puis une ville produit une liste vide. La page ne permet pas de savoir quel filtre retirer ni de retrouver l’état précédent.

Testez combinaisons, remise à zéro et retour arrière. Relevez résultat, critères actifs et URL lorsqu’elle représente l’état ; un compteur doit rester cohérent avec les éléments effectivement présentés.

• Afficher les critères actifs
• Tester une combinaison vide
• Vérifier remise à zéro et retour

• Tester une recherche sans jargon

  Concevoir une recherche interne qui aide vraiment à trouver