web-dev-qa-db-fra.com

Meilleure pratique UX pour le filtre de données

Je travaille actuellement avec une refonte d'une application de bureau. Et l'un de mes défis consiste à concevoir un système de filtre à partir d'un écran basé sur une table.

Voici la proposition de conception du designer qui a travaillé avant moi (langue: portugais brésilien):

Filtres avec les accordéons fermés: Filters with the accordions closed

Filtres avec 2 accordéons ouverts: Filters with 2 accordions opened Commentaires des utilisateurs: - À première vue, ils n'ont pas reconnu ces accordéons comme des filtres; - Les séparations des éléments dans les catégories ne fonctionnent pas correctement car différents utilisateurs utilisent un filtre du premier accordéon et 2 du troisième. L'activité de filtrage nécessite donc de nombreux clics sur de nombreux accordéons différents.

Je veux savoir quelle est la meilleure pratique pour filtrer ce type de données. Le filtre doit être au format vertical et doit être une "entrée de texte" ou une "entrée de sélection" comme le montrent les tirages.

Merci pour votre temps et désolé pour toute erreur en anglais.

4
Mário Barbosa

J'essaierais d'identifier les filtres les plus courants parmi les utilisateurs et de les rendre toujours visibles. Ensuite, vous pouvez masquer des filtres supplémentaires sous le lien nommé avancé, des filtres supplémentaires, etc.

S'il y a beaucoup de filtres, ce n'est peut-être pas la meilleure idée de les montrer tous en même temps, car cela sera trop écrasant pour l'utilisateur.

2
Gosia

À première vue, ils n'ont pas reconnu ces accordéons comme des filtres

Vous devriez probablement abandonner les accordéons ici car ils ne sont généralement pas utilisés pour les filtres. Les filtres actuellement utilisés doivent toujours être visibles et il sera difficile d'y parvenir avec des accordéons.

Les séparations des éléments dans les catégories ne fonctionnent pas correctement car différents utilisateurs utilisent un filtre du premier accordéon et 2 du troisième. L'activité de filtrage nécessite donc de nombreux clics sur de nombreux accordéons différents.

L'aplatissement de toutes les entrées de filtre dans un élément d'interface utilisateur résoudra ces problèmes de navigation. Vous pouvez avoir trop de filtres à afficher à la fois, mais vous pouvez en masquer certains derrière un plus de boutons de filtres. Vous devrez peut-être réorganiser les entrées de filtre car chaque accordéon contient plusieurs entrées. Certaines entrées peuvent fonctionner logiquement comme un seul filtre, certaines entrées peuvent devoir être regroupées logiquement dans un filtre. Chaque filtre doit avoir ses propres commandes pour appliquer ou effacer le filtre.

Je veux savoir quelle est la meilleure pratique pour filtrer ce type de données. Le filtre doit être au format vertical et doit être une "entrée de texte" ou une "entrée de sélection" comme le montrent les tirages.

L'exemple ci-dessous de asos.com montre les entrées de filtre sous forme de liste déroulante avec un titre facile à comprendre pour chaque filtre. Le filtre est appliqué lorsque l'option est sélectionnée. Les filtres appliqués sont mis en évidence avec une barre bleue au-dessus de la liste déroulante.

Vertical filter on Asos website

L'exemple ci-dessous de airbnb.com utilise également les entrées de filtre comme listes déroulantes mais les filtres sont stylisés comme des boutons avec des modaux contextuels. Le filtre est appliqué lorsque vous cliquez sur le bouton Appliquer du filtre. Les filtres appliqués sont surlignés en vert.

Vertical filter on Airbnb website

1
Andre Dickson

simplement avoir un bouton "Filtres" qui se développe pour afficher tous les filtres dans le même espace. L'utilisateur sélectionne ses filtres et cliquez sur "Appliquer". La page se recharge avec les résultats.

Exemple, cliquez sur "Plus de filtres" dans Airbnb . enter image description here

0
Nicolas Hung