Comportement de filtrage par défaut: tout affiché ou tout caché?
Nous avons un champ de sélection sur notre site Web. Et aujourd'hui, nous avons eu une discussion au bureau sur nos options de filtrage lorsque l'utilisateur est confronté pour la première fois aux options de filtrage.
Option A 
Aucun filtre n'est actif. Tous les résultats seront affichés.
Option B 
Tous les filtres sont actifs. Tous les résultats seront affichés (car aucun filtre n'est actif).
Quelle option recommanderez-vous?
Par définition, un filtre est un outil qui aide les utilisateurs à se restreindre à un sous-ensemble de résultats qui les intéresse le plus. Par conséquent, lorsqu'un filtre est actif, les résultats affichés doivent être inférieurs au nombre total de résultats originaux.
Pour cette raison, je trouve que l'option B n'est pas assez intuitive. Si je ne me trompe pas, l'option B traite les icônes à l'aide d'une approche additive (l'activation d'un filtre "affichera d'autres résultats supplémentaires pertinents pour cet aspect", comme pour les cases à cocher). Cela contraste avec l'approche "soustractive" impliquée par les filtres traditionnels (l'activation d'un filtre "supprimera ces résultats sans rapport avec cet aspect et ne montrera que les résultats pertinents). De cette façon, l'option Un semble plus approprié.
Cependant, j'ai l'impression que le contraste visuel pour l'option A fait défaut. Cela ressemble à des icônes désactivées pour moi. Il peut également avoir des problèmes d'utilisation pour le public plus âgé.
Donc, dans l'ensemble, je recommanderais un mélange des deux, comme le croquis ci-dessous.
Par défaut (tous les résultats sont affichés, pas de filtre actif) 
Filtre bancaire activé, seuls les résultats pertinents sont affichés. 
L'idée est d'utiliser un repère visuel subtil (toujours en accord avec le design plat) comme un cercle ou une ombre plate pour indiquer quel filtre est activé en ce moment.
En plus de cela, vous pouvez envisager d'utiliser un texte intitulé quelque chose comme "Affichage des résultats pertinents pour les banques, les arbres et les montagnes", avec un bouton ou quelque chose pour actualiser la page à son état de résultat total par défaut (qui peut avoir un texte "Affichage tous les résultats ").
Veuillez noter que mon croquis ne répond pas aux exigences d'espacement, d'alignement et de police de caractères et ne sert qu'à des fins de démonstration.
Si je veux voir des restaurants, je clique sur l'icône jusqu'à ce qu'elle soit active. ce ne sont pas des filtres, mais des facilitateurs (probablement un mauvais mot). un filtre est comme un tamis et ne laisse pas passer les choses lorsqu'il est actif
pour la question de savoir si tous les filtres sont activés ou désactivés, cela dépend du cas d'utilisation. Je suppose que c'est une carte? est l'utilisateur qui essaie de trouver une chose spéciale, désactivez tout d'abord et vous avez une carte vide. si si l'utilisateur est en train de parcourir les magasins à proximité, utilisez toutes les icônes activées et vous avez une liste complète.
compromis: si la liste complète est inutilisable, vous pouvez également activer certaines icônes afin que l'utilisateur puisse voir qu'elles peuvent avoir des états différents. mieux ajouter un bouton pour désactiver/activer tout, puis pour éviter de cliquer trop pour sortir de cet état.
Si un seul filtre peut être actif à la fois, il doit y avoir un choix de filtre "AFFICHER TOUT", tous les boutons de filtre doivent être activés et un indicateur tel qu'une bordure doit être utilisé pour indiquer quel bouton est sélectionné.
Si les filtres peuvent être combinés, je suggérerais de regrouper les filtres en groupes "OU", dont chacun devrait avoir un bouton "TOUT". Cliquer sur "TOUT" ou sur n'importe quel filtre lorsque "TOUT" est sélectionné devrait sélectionner le filtre cliqué et désélectionner tous les autres. Cliquer sur uniquement le filtre sélectionné dans un groupe doit être équivalent à cliquer sur "TOUT". Dans d'autres cas, cliquer sur un filtre devrait agir comme une bascule. Chaque groupe doit avoir une étiquette descriptive (par exemple, "La couleur des cheveux doit être ..."), afin qu'il soit clair que les articles à montrer doivent satisfaire aux conditions indiquées pour tous les groupes. Lorsque "TOUT" est sélectionné dans un groupe, l'étiquette peut être grisée pour indiquer qu'elle n'est pas particulièrement pertinente. Selon l'espace, il pourrait être utile que le texte de l'étiquette indique le choix [par ex. "La couleur des cheveux doit être NOIRE ou BRUNE ou ROUGE "], pour préciser que le filtre n'exige pas qu'une personne ait des cheveux multicolores.
Pour donner une réponse vraiment utile, je pense que nous devons en savoir un peu plus. Les éléments que le filtre va être appliqués seront-ils limités à la correspondance avec l'une des icônes, ou un élément peut-il apparaître dans plusieurs? Comment le contenu est-il organisé et comment les utilisateurs filtrent-ils en premier lieu?
Votre cas pourrait être proche des catégories de produits, comme on le voit sur Amazon: une chose est dans une catégorie, pas dans plusieurs, et les catégories aident les utilisateurs à limiter la portée de leur navigation aux éléments pertinents.
Il peut également être proche des balises ici sur Stack Exchange: une chose peut avoir plusieurs balises et elles aident les utilisateurs à trouver tout ce qui concerne leur intérêt.
Cependant, si vous sélectionnez plus d'icônes affichent plus de contenu, alors l'attente serait que la désélection d'icônes affiche moins de contenu. Donc, la façon logique serait d'aller avec votre option A.
Le problème avec votre option A est que c'est très lourd pour l'utilisateur, en supposant qu'il ne choisira généralement qu'une seule icône, et qu'avec l'option A, il devra désélectionner tout ce qui ne s'applique pas.
Comme cela a déjà été souligné, tout désélectionner et afficher tout le contenu n'est pas non plus intuitif. Cela pourrait cependant être la meilleure solution - selon la façon dont vos utilisateurs utilisent réellement le site.
Il y a deux solutions alternatives qui me viennent à l'esprit que les deux apporteraient de la clarté à la situation, et les deux nécessitent le même ajout:
Ajoutez une option "afficher tout".
Solution 1: Traitez votre filtre comme des catégories. Autrement dit, laissez l'utilisateur en sélectionner un seul. C’est un comportement très courant et très bien appris. Si vous avez besoin que les utilisateurs puissent sélectionner plusieurs icônes, je suggère…
Solution 2: Traitez le cas où tous les filtres sont actifs comme un cas spécial, comme illustré ci-dessous. L'idée est d'avoir "afficher tout" comme une bascule spéciale. Cependant, je pense que même cela est quelque peu ambigu :-)
Semble très intuitif que toutes vos icônes grisées correspondraient à tous les produits affichés. Si quelque chose est grisé, c'est comme un état "désactivé". Signification non utilisée. Vous devez filtrer les choses en les grisant. Si vous appuyez sur la page et que tous les résultats s'affichent, toutes les catégories représentées par ces icônes sont en jeu. Cliquez ensuite pour griser et supprimer les résultats.
L'option B est supérieure.