Comment puis-je autoriser des filtres multiples et explicites
Il existe N catégories, chacune affiche ses propres éléments lorsqu'elle est activée. L'utilisateur voit initialement des éléments de toutes les catégories (ils sont tous activés).
Actions de catégorie:
- Désactivez une catégorie. Cela montre des éléments des catégories restantes.
- N'activez qu'une seule catégorie. Cela désactive toutes les autres catégories.
- Activez une catégorie. Cela montre des éléments de celui-ci et des autres activés.
Chaque catégorie a une icône et un titre.
Comment afficher horizontalement ces catégories et permettre à l'utilisateur d'effectuer ces trois actions sur chaque élément?
Mes pensées sont:
- Sur l'élément en survol, je vois un autre menu, sous la catégorie, qui me dit mes options
- Au survol de l'élément, la catégorie est développée et mes options apparaissent à droite (en ligne)
De plus, l'icône est toujours un problème. Comment expliquer la fonctionnalité à l'utilisateur inexpérimenté? Seule l'icône plus (+) est claire pour moi.
Je suggère de déplacer des actions globales (Activer/Désactiver tout) pour séparer une partie de l'interface utilisateur.
Ensuite, vous avez deux états de catégorie: activé et désactivé
Lorsqu'il est désactivé, cliquez pour activer.
Lorsqu'elle est activée, le survol de l'icône/étiquette donne une liste déroulante avec deux options; "Activer uniquement ceci" et "Désactiver"
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
"Activer uniquement ceci" (ou "Activer uniquement ceci") est légèrement maladroit. Un scénario de filtrage similaire se rencontre dans les logiciels d'édition sonore, lorsqu'il offre à l'utilisateur la possibilité d'écouter uniquement l'une des pistes sans avoir à désactiver toutes les autres. Le terme qui y est utilisé est "Solo", mais c'est une étiquette assez musicale et est devenu conventionnel dans les environnements Digital Audio Workstation - il peut ne pas être approprié ici.
Je pense que vous devez parler verbalement pour cela; les icônes peuvent ne pas suffire, le survol doit être explicite. Le motif que vous avez fourni n'est également pas bon, car il est possible que l'utilisateur déplace le curseur trop loin pour que le menu survolant disparaisse (c'est le même problème que pour fournir un deuxième niveau horizontal pour un menu).
La sélection d'une catégorie et la désélection des autres est une action qui donne plus de conséquences, car elle affecte plusieurs éléments du menu, pas seulement celui avec lequel l'utilisateur interagit. C'est pourquoi l'action pour cela doit être plus compliquée que la sélection (effectuée en cliquant simplement) pour éviter une utilisation involontaire. Vous pouvez utiliser par exemple maintenez ou faites glisser pour cela. Il devrait être possible de le rendre plus compliqué, car il ne sera pas effectué à plusieurs reprises (alors que les utilisateurs peuvent toujours cliquer à plusieurs reprises sur plus de catégories, pour choisir une combinaison appropriée de celles-ci).
Donc, je pense que vous pourriez le faire comme ça. Pendant que le curseur se trouve sur une catégorie, l'utilisateur peut voir une info-bulle (ou plutôt: une paire d'infobulles) se développer au-dessus et au-dessous de l'image de la catégorie:
- La partie ci-dessus se lirait: "Cliquez pour sélectionner"
- La partie ci-dessous se lirait: "Faites glisser ici pour sélectionner cette catégorie uniquement".
Ces informations pourraient être (alternativement, ce serait peut-être encore mieux, car il y a beaucoup de texte à afficher) fournies pour la barre de catégorie entière. Voici une petite visualisation de ce que j'ai en tête:
Dans ce scénario, le CTA supérieur peut être visible tout le temps. Vous pouvez décider si le champ vers lequel glisser, affiché sous les catégories, doit également être visible en permanence ou affiché en survol.
Je garderais le menu contextuel/déroulant empilé verticalement plutôt qu'horizontalement. Pour moi, cela ressemble à une bonne différenciation entre les deux niveaux d'interaction: au premier niveau, vous traversez horizontalement pour sélectionner la catégorie, puis à l'intérieur de la catégorie, vous voyagez verticalement pour sélectionner les options respectives.
En ce qui concerne la clarté du problème d'interaction, est-il possible pour vous d'avoir un tour/guide pour la première fois que l'utilisateur interagit avec le système? La raison en est que, même si l'interaction n'est pas évidente en soi, si elle est simple, elle peut être facilement enseignée par l'exemple. La mise en œuvre la plus simple pour moi serait:
- Un seul clic pour basculer la visibilité (marche/arrêt)
- Double-cliquez pour sélectionner uniquement celui-ci et désactiver tous les autres.
D'accord, ma solution modifie légèrement votre approche initialement suggérée. Je suis pour l'activation et la désactivation d'une seule catégorie à la fois et cela signifie laisser l'autre option en dehors de laquelle vous activez une catégorie et désactivez les autres en une seule fois. Cela signifie que chaque filtre de catégorie devient un "bouton bascule" et c'est tout.
Pourquoi je pense ça?
UX est toujours un compromis entre confort et confusion. Vous avez suggéré que l'approche a un certain confort pour activer et désactiver tout en utilisant un seul bouton, elle a une complexité visuelle et d'apprentissage considérable.
Une autre raison qui m'encourage à n'utiliser que 2 états est que vous n'avez que 5-6 catégories à utiliser et qu'un utilisateur dans le pire des cas devrait taper n-1 fois, ce qui fait 4-5 taps et je peux vivre avec ça.