How can I allow multiple and explicit filters

Question

There are N categories, each displays its own stuff when enabled. The user initially sees stuff from all categories (they are all enabled).

Category actions:

• Disable a category. This shows stuff from remaining categories.
• Enable only one category. This disables all other categories.
• Enable a category. This shows stuff from this and the other enabled ones.

Each category has an icon and a title.

How can I display horizontally these categories and allow the user to perform these three actions on each item?

My thoughts are:

• On item hover I see another menu, below category, that tells me my options
• On item hover the category is expanded and my options appear on the right (inline)

Also, the icon is still a problem. How can I explain the functionality to the inexperienced user? Only the plus (+) icon is clear to me.

Answer 1

I think you need to go verbal for this; icons may be not enough, the hover needs to be self-explanatory. The pattern you have provided is also no good because there is a chance that user moves the cursor too far so that the hover menu disappears (it's the same problem as with providing horizontal second level for a menu).

Selecting one category and deselecting the others is an action that gives more consequences, as it affects multiple items in the menu, not only the one user interacts with. This is why the action for this needs to be more complicated than selecting (performed by just clicking) to avoid unintentional use. You can use e.g. hold or drag for this. It should be ok to make it more complicated also because it's not going to be performed repeatedly (while users can still click repeatedly on more categories, to choose a proper combination of these).

So, I think you could do it like this. While the cursor is over a category, user could see a tooltip (or rather: a pair of tooltips) expanding above and below the category image:

• The part above would read: "Click to select"
• The part below would read: "Drag here to select this category only".

This information could be (alternatively, maybe this would be even better, because there is quite a lot of text to display) provided for the whole category bar. Here's a little visualization of what I have in mind:

In this scenario, the top CTA could be visible all the time. You can decide if the field to drag to, displayed below the categories, should be also visible all the time or shown on hover.

Answer 2

I suggest moving global actions (Enable/Disable All) to separate part of the UI.

Then you have two category states: Enabled and Disabled

When disabled, click to enable.

When enabled, hovering over the icon/label gives a dropdown with two options; "Enable only this" and "Disable"

^{download bmml source – Wireframes created with Balsamiq Mockups}

"Enable only this" (or "Enable this only") is slightly clunky. A similar filtering scenario is encountered in sound editing software, when offering the user the ability to only listen to one of several tracks without having to switch off the all the others. The term that gets used there is "Solo", but that's quite a musical label and has become conventional in Digital Audio Workstation environments - it may not be appropriate here.

Answer 3

I would keep the pop-up/drop-down menu stacked vertically rather than horizontally. To me, it feels like a good differentiation between the two levels of interaction: on the first level you traverse horizontally to select the category and then inside the category you travel vertically to select the respective options.

Regarding the clarity of the interaction issue, is it possible for you to have a tour/guide for the first time the user interacts with the system? The reason being, even if the interaction is not evident on its own, if it is simple, it can be easily taught via example. The simplest implementation for me would be:

• Single click to toggle visiblity (on/off)
• Double click to select just that one and mute all others.

Answer 4

Okay my solution is slightly modifying your initially suggested approach. I am for enabling and disabling only one category at a time and that means leaving the other option out using which you enable one category and disable others in one go. That means every category filter becomes a "Toggle Button" and that is it.

Why am I thinking that?

• UX is always a trad-off between comfort vs confusion. You suggested approach has some comfort of enabling and disabling all using one button, it has considerable visual and learning complexity.

• Another reason which encourages me to use only 2 states is that you only have 5-6 categories to use and a user in worst-case scenario would have to tap n-1 times which is 4-5 taps and I can live with that.