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.

enter image description here

  • I'm not sure why you need three actions for each category. Why not just a simple toggle between enabled and disabled for each category?
    – Matt Obee
    Mar 18, 2013 at 17:51
  • @MattObee There might be 10 or more categories. In case I want to "see" only one I will have to hover and click 9 times, instead of just 1.
    – Odys
    Mar 18, 2013 at 17:52
  • It feels like the content might be key here. What do you mean when you say "see stuff from all categories"? Does the view change? Also, what's the difference between "enabling" and "selecting" a category?
    – dennislees
    Mar 18, 2013 at 18:25
  • @dennislees edited the question. There is no difference. Also the ui doesn't change. I am at the same view. Just the content bellow changes.
    – Odys
    Mar 18, 2013 at 18:33

4 Answers 4


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.


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.

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:

enter image description here

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.

  • Interesting approach. Only drawback is that mouse users are not used to click and drag.
    – Odys
    Mar 18, 2013 at 18:11
  • This is why this action needs to be performed to select exclusively one category and why there needs to be additional information on hover. I will provide a little sketch in a moment, to improve this answer. Mar 18, 2013 at 18:25

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.

  • It would be great to add a little mockup to your answer Mar 19, 2013 at 0:05
  • Sorry I didn't had put it well. I have updated my post to clarify it. Mar 19, 2013 at 2:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.