Shortcut to go from a list of selected checkboxes in a filter to only one selected item

Question

The problem

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

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).

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.

Answer 1

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.

Answer 2

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.

Answer 3

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'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.

Answer 4

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.

Answer 5

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}

Answer 6

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}