11

I've been working on a project, and I found an interesting dilemma. The application I'm working on has this filter, let's say something like this:

not checked

By default, none of the "options" are selected, meaning that all the results will be listed with no filter applied. If the user wants to filter by PREMIUM or SHOP he can click on PREMIUM and/or SHOP. This kind of works like a check boxes. So if the user checks both boxes, the filter will look like this:

checked

The thing is this. By default, since there are no filters applied, the application will show all the results. When the user clicks one of the options, the application will just show the results that matches with just that option. But when the user clicks the other option, the application will show all the results again, since it is showing the results with both the options.

Testing this filter with user resulted in no problem on the use. Users did not misunderstood how the filter would work. They understood every step of the filtering process and some even appreciated the clarity of the actions.

But the problem lies in the linguistic department. Is it ok to present a solution that shows the same result in two different states of the interaction?

Should we prioritize use over linguistic?

Do you find other solutions to the filtering problem?

Improve this question
1

5 Answers 5

Reset to default
3

If you regard the two checkbox-style buttons as "Show" instead of "Filter" controls (just turning the perspective, really), then initially, they should be checked and all items displayed:

Show [v] Premium [v] Shop

All items displayed.

But then, from a strictly linguistic point of view, if the user unchecks both, then no results should be displayed:

Show [ ] Premium [ ] Shop

No items displayed.

However, that's just plain waste of "good state". If you have tested your approach with users, and they don't find it confusing, then in my view, that's just fine UI. :)

Improve this answer
7

If I understand correctly, your "problem" (insofar that it's a problem) is that not selecting anything leads to the same result as selecting both filters.

You could solve this in various ways:

  • Add a third option "None" and make it exclusive (eg. when you select it, the other two deselect automatically)
  • Use copy to specify that "none selected" means the same as "both selected" (kind of what Jon W suggests)
  • Use check boxes instead of buttons so that you're being clearer towards your users about what the controls actually do
  • Use radio buttons instead of buttons with the options "Premium", "Shop", and "Both"
  • Use the faceted navigation pattern which is nearly the same as using checkboxes except that your UI visual design is slightly different; usually what this means is that you can click a link (eg. "Premium") and it will become selected and highlighted, but you'll be able to remove that filter somewhere in the UI. Each facet stacks, so you can combine multiple to continue filtering.

One note about using two buttons is that sometimes it's hard to tell which of the two is selected. I don't think you really have that problem since they're well-designed in the sense that the affordance that they're "pressed in" is being visually communicated quite well, but it's something to think about.

Improve this answer
6
  • Thank you for your answer. Using check boxes would bring the same linguistic problem, having none of the check boxes checked is the same as having all of them. Radio button does not seem as the right approach, in this case you are creating option for what the check box is naturally for. The check box seems to be the right one, but still the linguistic problem is there. The question is. Should we care?
    – Emiliano Horcada
    May 24, 2011 at 16:10
  • 1
    It depends on how you want to present the information the user is interacting with. I don't think there's anything wrong with the radio button approach in this instance. You're right, maybe we shouldn't care if users understand the current UI just fine. It's always worth trying alternatives to see what happens, though.
    – Rahul
    May 24, 2011 at 16:52
  • If using only radio buttons, then either "Both" or "None" is redundant depending on the filter labeling. Also, as you imply, Rahul, this doesn't scale well to situations with more filter options. Concerning your idea with "None" as auto-exclusive checkbox, then it would result in rather unusual behaviour, since you would have to auto-deselect "Premium" and "Shop" and select "None", the moment both "Premium" and "Shop" are selected.
    – agib
    May 25, 2011 at 21:17
  • Instead of using copy to explain that none = both, then I think it would be more clear with the number of matching elements out of a total (as James Crook suggests) and which, in the context of search, is discussed here: ux.stackexchange.com/questions/2388/…
    – agib
    May 25, 2011 at 21:20
  • @agib Redundancy can be a good thing sometimes; the point is communicating how things work, not designing the purest, redundancy-free interface. Indeed this doesn't scale, but the question wasn't to create something that scales, it was to fix this specific issue.
    – Rahul
    May 25, 2011 at 22:41
3

The user has three real options - All | Premium | Shop.

And the clearest solution is to provide three buttons, that behave radio-button style. Being clearest, that's what I would do.

Space Saving??

Is there any case that the saving in space of going to two buttons is worth it? Not really. If you're that tight for space something else has already gone badly wrong.

With more Options?

All that changes if you have more buttons for more categories. You can then drop the 'All' button and have each button select its subset. The extra buttons make the behavior, i.e. that you're supporting arbitrary combinations, clearer. Then when all buttons return to being up, you can legitimately put some explanatory text underneath, 'No options selected - showing all items'.

Edit

So I am saying with just two options, use three buttons. But also that that is a special case. Fortunately when there are more options it becomes much clearer that they are cumulative and that any combination is valid. So treating the empty combination specially is less confusing. The special case of all buttons up could return no results, but it is nicer to return all results. You ask:

"Should we care?"

Of course you should care, and it is clear you do care because you have done enough testing already to indicate that users don't find it confusing. As I've indicated I'd include the explanatory text too, but part of the rationale for doing that is that I would anyway have a place for that kind of text, to say "27 items match (of 375)" - so it wouldn't be a new text area.

Improve this answer
1
  • Thank you for your answer. The solution you provide is a solution in this case, but not if you have 3 options in stead of two. You will have to go with check boxes in that case, and we're back at the beginning. The question is.. should we care?
    – Emiliano Horcada
    May 24, 2011 at 16:12
1

I have had exactly this conundrum in the past. All we could come up with were options around de-activating the filter fields until you choose any of the options, or having the choices as 'exclude this option' rather than 'filter by this option'. However this is just overcomplicated and - as you say - users do not appear to have a problem with understanding how it works.

Also, it's debatable whether this is against linguistic rules or not. By default you're not using the filter so all results are displayed. If you start filtering then that is when the filter comes into play. It's basically a case of: 'View all results by default or use the filter to choose specific criteria'.

Improve this answer
1
  • Exactly, and the problem comes up when the user clicks every option. Then we're back in square one.
    – Emiliano Horcada
    May 24, 2011 at 16:59
0

Consider having three different states for the buttons. Use your first graphic when no filters are selected, then when a button is clicked mark that button with the darker color and fade the other buttons slightly.

The risk with this is users thinking the other buttons are disabled, so they can't select more than one thing to filter on.

(this idea taken from prisjakt.nu)

Improve this answer
1
  • I agree with the risk, it's a bit misleading for the user :(
    – Emiliano Horcada
    May 30, 2011 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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