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:
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?
I'd suggest a filter with the checkboxes like so:
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.
Could you implement a dropdown? Something like the following:
When the dropdown is closed, only the active choice will be visible, hopefully causing less confusion.
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
