2

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.

|improve this question
  • 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 – Shreyas Tripathy Jun 13 '17 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. – David Mulder Jun 13 '17 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 – Shreyas Tripathy Jun 13 '17 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 – Shreyas Tripathy Jun 13 '17 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 '17 at 12:34
4

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

|improve this answer
1

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.

|improve this answer
  • Entirely undiscoverable indeed, but if we would decide to move towards a completely standard solution this would probably be the way to do it. – David Mulder Jun 13 '17 at 11:23
1

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.

|improve this answer
  • 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 . – David Mulder Jun 13 '17 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. – Adarsh Sosale Jun 13 '17 at 11:45
0

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.

|improve this answer
  • So clicking the checkbox or the label doing different things is you think good UX? – David Mulder Jun 13 '17 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. – Shreyas Tripathy Jun 13 '17 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? – David Mulder Jun 13 '17 at 10:22
-1

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

|improve this answer
  • 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? – David Mulder Jun 13 '17 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. – Dimitra Miha Jun 13 '17 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. – David Mulder Jun 13 '17 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? – David Mulder Jun 13 '17 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. – Dimitra Miha Jun 13 '17 at 10:20
-2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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