The problem

The goal is to offer the user a filter control which by default includes all data

enter image description here

But the user might typically want to only show data from a certain continent or a certain subset. Especially typical is clicking one after eachother through the contintents one by one. Deselecting every item in the list is obviously painful, so what's a good UX solution?

The current solution

Right not clicking the checkbox will select/deselect a single item, whilst clicking the label will select only that item (and deselect all other items in the list). Once you select only one (or a few items) you can go back to selecting everything with the checkbox next to the title of the filter).

enter image description here

Considering we explain this behavior actively to our users it's an acceptable solution, but I still have this nagging feeling there must be better solutions out there.

  • 3
    The behavior shown in the GIF going to be very confusing for the user. The checkbox is the Call To Action while the text is its label. They should either have the same action or the text should have no action. Under no condition should they result in different actions Jun 13, 2017 at 10:23
  • @ShreyasTripathy And that's EXACTLY why I am asking for help here. I am looking for a solution which does not end up with more clicks (or slower in general) as our powerusers would hate that, but which removes this unintuitive behavior. Jun 13, 2017 at 10:25
  • 1
    I don't think you are following what @Dimitra and I are trying to convey. Let me rephrase: By default, don't have any checkboxes selected. If the user wants to select all, they will click on the parent one -> One Click Similarly, if they want to select just one of checkboxes, they will click on that -> One Click if they want to select 2, then 2 clicks. Which is completely acceptable If they want to select all but one, then they will click on the parent checkbox, then uncheck the one they don't want - 2 Clicks. Again, very acceptable Jun 13, 2017 at 10:29
  • 1
    @DavidMulder - No matter what control you choose, if the user needs to perform x number of actions which are not related, they will have to click/tap x number of times. There's no magical way of reducing clicks. In case of a filter, the user is expected pick and choose what they want to get a better result. You can make a search intuitive but not a filter because it is dependent upon the user Jun 13, 2017 at 10:39
  • 1
    @ShreyasTripathy if the tags aren't replacing the filter, how does that help the OP with the UX of their filter selection? They can currently deselect all but a single filter with one click, adding tags doesn't solve that in a more friendly manner.
    – dosxuk
    Jun 13, 2017 at 12:34

6 Answers 6


Have you seen google's Data Studio? They have a fairly nimble interaction: see enclosed gif. You can quickly uncheck all, check all, and use the 'only' filter to quickly select just one item from the list. You also have quick enumeration to the right of the category name to show how many are selected.

enter image description here


How about a long-press or double-click on both the checkbox and the label being used for the deselect-all-others action? So a single click would just toggle the filter as normal, but double clicking / holding the button for more than half a second would select the new filter, then clear the others.

My concern would be about discoverability, but if we're talking about a small number of power users this should be trainable. It would have the advantage of working exactly like a standard one of these filters for new users, and increasing the hitbox for toggling each filter.

  • Entirely undiscoverable indeed, but if we would decide to move towards a completely standard solution this would probably be the way to do it. Jun 13, 2017 at 11:23

Here's a slightly unconventional solution that may work better in your case. Add the locations as deletable tags. This works especially well if there are more than the filters you've mentioned. You can then add the tags that aren't selected in the "unselected" section.

By default, you can include all the tags and provide a checkbox to delete all the tags from the selected list. This checkbox can also have a "Select all" option when you have removed all the tags.

I've used this approach in a project before and

I'd say this is a more elegant solution because firstly, tags are a more concise way to represent selectable data and the option to add or remove the tags are more apparent. Secondly, they provide for a larger click target than your standard checkboxes, making the interactions more effortless.

  • I am not sure I like this solution at all (at least in our case), however so far you're the only one who actually showed an understanding for the problem itself, so thanks +1 . Jun 13, 2017 at 9:56
  • Haha. Agreed. Basically, this solution works only when there are a number of other tags as well, not just a single section. So I can understand if this may not apply for your case. Jun 13, 2017 at 11:45

I don't really see the problem here.

If you have a parent checkbox (My Filter) for the checkbox group then clicking it should toggle between selecting and deselecting all the check boxes. That is the reason why there is a parent check box.

  • So clicking the checkbox or the label doing different things is you think good UX? Jun 13, 2017 at 9:55
  • I don't follow. The idea here is to make the "My Filter" pane (both the checkbox and the label) a toggle for checking or unchecking all the checkboxes below. If the user wants to select just one option then he/she would click on "My filters" to uncheck all and then click on the required option. If the user wants to deselect one option then he/she would click on the option that needs to be deselected. Jun 13, 2017 at 10:13
  • So you would recommend to make the label toggle the checkbox and increase the number of clicks when changing the filter from one item to the next from one click to two clicks? Jun 13, 2017 at 10:22

My suggestions are:

  • When you have selected "My filter" and then you click on one of the items, then it should deselect that item. Just like the following image.
  • Instead of having "Filter" => "All Regions/Areas/Continents/etc"
  • Remove "Data from", because it repeats and the user needs more cognitive load in order to read all the continents.
  • In your fiddle, I see that when a continent is deselected, the "My filter" is not deselected.


download bmml source – Wireframes created with Balsamiq Mockups

  • The Quick & Dirty fiddle was just to get an idea of the main behavior I was describing. Namely that clicking the label and the checkbox does different things. Text labels and polished behavior of course are not the same in a Quick & Dirty fiddle and an actual product... Anyway, so regarding the actual question, you think it's a good idea to split up the behavior of the label and the checkbox? Jun 13, 2017 at 9:54
  • I am sorry, I didn't get why you gave me a negative point? Polished behavior is part of the user's cognitive load, which actually will help the user understand easier how they can select things. I believe that clicking on the label "My filter" is not understood. Because the expected behavior would be to actually select all or deselect all the options. Except that, I think it is an understandable solution. Jun 13, 2017 at 10:04
  • 1
    This isn't UX review, this is UX stackexchange. When someone is asking about a specific problem you don't start talking about the fact that a fiddle which helps explain stuff isn't polished enough in areas not relating to the actual problem. Jun 13, 2017 at 10:17
  • Anyway, here is a GIF of the behavior: i.gyazo.com/84a74c9ee9400da55df5f8ddd7dae417.gif , what do you mean with the behavior of clicking on the label of the list not being understood? Jun 13, 2017 at 10:18
  • What does my filter mean? It does not provide any information what will happen when the user clicks there. It is not understandable. Jun 13, 2017 at 10:20

One idea for a solution would be to show both checkboxes and radio buttons. Don't like this solution personally, although I think it's better than the current solution and takes the same number of clicks to achieve all actions. Just wanted to show there are other solutions as well.

Note: I didn't draw the group label in the below mockup, but I would of course include that still as a way to deselect/select all.


download bmml source – Wireframes created with Balsamiq Mockups

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.