0

I have a tree where the user can check/uncheck each item. Since there's many items, I would like to provide a way to filter the tree to display:

all items
only selected items
only unselected items

Today, I have three radio buttons:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

From user's feedback, the behaviour of those buttons seems not obvious.

Do you have a better way to provide this feature, is there some patterns around that?

  • 1
    Could you provide a screenshot of your user interface? Maybe the lack of understanding is due to false positioning and relation with other elements. – gpelelis Jun 4 '15 at 11:25
0

I'd suggest a filter with the checkboxes like so:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The "display all" option seems redundant, and could possibly have the effect of making it seem like "all" consists of more than selected and unselected. The dropdown has the same problem. Most users already associate checkboxes with multiple options that are not mutually exclusive.

Instead, all items would be displayed when either both checkboxes are checked, or when both are unchecked—the equivalent of no filter.

3

Could you implement a dropdown? Something like the following:

Dropdown display selection

When the dropdown is closed, only the active choice will be visible, hopefully causing less confusion.

  • 2
    Titling the drop down "Filter" might also help the user to understand it's purpose – Andrew Martin Jun 4 '15 at 13:34
  • @AndrewMartin +1, good addition. I used "Display" because it was the language used in the question, but that language may also contribute to user confusion. – Alan Jun 4 '15 at 14:26
1

Radio buttons imply an OR condition, meaning you're choosing A or B or C. In your case, choosing A is the same as choosing B and C, which may be what's leading to the confusion.

A better option may be two checkboxes where any combination of the two may be chosen:

[] Display selected items

[] Display unselected items

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.