Tri et filtrage des résultats

Conception seulement

Aidez les utilisateurs à trier et filtrer rapidement les résultats de recherche à l’aide de contrôles et d’étiquettes, afin de faciliter la recherche efficace de contenu pertinent.

Utilisation d’un modèle en cours d’élaboration

Il s’agit d’un modèle, et non d’un composant autonome. Il utilise plusieurs composants de façon structurée pour répondre à un besoin courant des utilisateurs.

Ce modèle est en cours d’élaboration et n’a pas encore été finalisé pour le Système de conception pour l’Ontario. Il comprend actuellement des maquettes Figma à un stade préliminaire ainsi que des lignes directrices initiales, mais aucun code associé.

Les équipes peuvent utiliser ce modèle comme point de départ, mais devront peut-être effectuer des recherches supplémentaires et adapter les conceptions à leurs besoins spécifiques.

Exemple de conception

Exemple


Image du modèle de tri et de filtrage en cours d’élaboration.

Pour demander l’accès aux fichiers de conception en cours d’élaboration, envoyez un courriel à design.system@ontario.ca.


Quand utiliser ce modèle

Utilisez ce modèle sur les pages de recherche ou de résultats lorsque :

  • les utilisateurs doivent affiner un grand ensemble de résultats
  • les résultats peuvent être significativement restreints à l’aide de plusieurs critères

Quand ne pas utiliser ce modèle

N’utilisez pas ce modèle lorsque :

  • la liste de résultats est déjà courte et facile à parcourir
  • les utilisateurs accomplissent une tâche simple et linéaire plutôt que d’explorer des résultats
  • les options d’affinage sont limitées et peuvent être gérées par une simple mise en page ou un regroupement de contenu
  • le filtrage ou le tri ajouterait de la complexité inutile ou une charge cognitive supplémentaire

Fonctionnement du modèle

Ce modèle est composé de plusieurs composants (tri, filtres et étiquettes de filtres appliqués) utilisés sur les pages de recherche ou de résultats. Ces composants peuvent être utilisés individuellement ou combinés, selon les besoins des utilisateurs et la complexité du contenu.

Toutes les pages ne nécessitent pas forcément chaque composant. Par exemple, vous pouvez inclure des filtres sans étiquettes de filtres appliqués, ou du tri sans filtres.

Tri

Le tri permet aux utilisateurs de modifier l’ordre des résultats. Si vous incluez cette fonction :

  • une seule option de tri peut être appliquée à la fois
  • la modification de l’ordre de tri ne doit pas supprimer ni réinitialiser les filtres appliqués

Filtres

Les filtres permettent de restreindre les résultats selon des critères précis. Ils peuvent prendre différentes formes :

  • liste déroulante « Filtrer par »
  • cases à cocher ou boutons d’option regroupés par catégorie

Si vous incluez des filtres dans le modèle :

  • envisagez de les rendre réductibles lorsqu’il existe plusieurs groupes de filtres ou sur des écrans plus petits

Étiquettes de filtres appliqués

Ces étiquettes indiquent quels filtres sont actifs. Si vous les utilisez :

  • assurez-vous qu’elles représentent uniquement les filtres appliqués (et non le tri ou le terme recherché)
  • veillez à ce que leurs libellés soient concis, descriptifs et cohérents avec les filtres correspondants
  • envisagez de permettre leur suppression pour effacer des filtres individuellement

Interaction utilisateur cohérente

Les modifications liées au tri, aux filtres et aux étiquettes doivent être appliquées soit immédiatement, soit après une action explicite (« Appliquer »). L’approche choisie doit être cohérente entre les composants, en tenant compte de l’accessibilité et des essais auprès des utilisateurs.

Si les modifications sont appliquées immédiatement, une rétroaction visuelle claire doit indiquer que la mise à jour a pris effet.


Pratiques exemplaires

Lors de la conception ou de la mise en œuvre de ce modèle :

  • assurez-vous que le tri, le filtrage et les étiquettes sont accessibles au clavier
  • gardez les catégories de filtres concises et pertinentes afin de réduire la charge cognitive
  • veillez à la cohérence du comportement des filtres, des étiquettes et des résultats sur des pages similaires

Ces lignes directrices ne sont pas exhaustives. Des recherches et des essais supplémentaires peuvent être nécessaires pour s’assurer que le modèle répond aux besoins des utilisateurs et respecte les meilleures pratiques en matière d’accessibilité et de convivialité.


Faites-nous part de vos constatations

Si votre équipe utilise ou teste cette première version du modèle, nous vous invitons à nous faire part de vos constatations. Vos commentaires contribueront à l’évolution du système de conception.

Envoyez-nous un courriel à design.system@ontario.ca.

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.