Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Background

Our web application has a filter bar at the top of the page, with a data grid beneath it with (potentially) thousands of results. This is a simplification, but the filter bar looks approximately like this (an idea which we borrowed from FogBugz, if anyone is familiar with it):

Filter bar example image

The leftmost item in the filter bar ("Widgets" in the example above) is the main category. Users can view all categories at once, or choose a specific category. Then the user is given the option to refine the results further by selecting [+] refine further and choosing the type of filter they want to apply. There are dozens of types of filters (ranging from free-form text entry, to checkboxes and radio button lists). The filter choices are dependent upon which category is selected. In the example above, two filters have been applied (attribute-x is free-form text like "Foo", and attribute-y is a checkbox list equal to "Bar").

The filter values can be entered/modified by clicking the filter value and entering information in the little dropdown that appears (the white box with three options - Bar/Hello/World - and the option to remove the filter).

The Question

What I'm currently wrestling with is how to best handle "OR filtering" with a filter bar like this. In the example above, attribute-x and attribute-y are applied as "AND filters", so only data grid results that meet both criteria will be returned.

How could I handle OR filters in addition to AND filters? Take the example of attribute-y, which is a checkbox list field that can be "Bar", "Hello", "World", or any combination of the three. I would like the user to also be able to select a combination of those three values as an OR comparison, e.g., "attribute-y is Hello OR World".

The UI concept that I'm currently toying with is using a Gmail Labels style interface for the filter value dropdown. If you're not familiar with Gmail labels, this is how they work: When choosing a label for a Gmail message, you have the option to immediately select any label and instantly apply it by simply clicking the label name. Alternatively, if you want to choose multiple labels, you can instead use the checkboxes next to the label names to check multiple options, and then select "Apply" at the bottom of the label dropdown.

Using that as the model with respect to my original example, each of the options in the dropdown would have a checkbox added in front of it, and you could simply click an option name (e.g., click the word "Bar") to instantly apply only Bar, or you could check multiple checkboxes to apply more than one value (e.g., "Bar or Hello").

I don't love this idea for a number of reasons:

  • It's not immediately obvious at a glace how it works.
  • It creates different functionality for the checkbox and the checkbox label.
  • It mixes OR and AND filters in a potentially confusing way.

But I'm struggling to come up with a better alternative. On a scale of "sort of terrible" to "extremely terrible", how bad is this idea? Can anyone think of any obvious alternatives or improvements?

share|improve this question
    
related: ux.stackexchange.com/questions/21459/… –  Ben Brocka May 16 '12 at 20:53

1 Answer 1

I wonder if you can't make your operators (and / or) a drop down, if you wanted to stay within the current paradigm. If you were only using two options (and / or) you could also have them toggle. But, if you want to add greater functionality, like contains, excludes, etc, then you'll need to move to a drop down.

In terms of advanced searches, I still find the itunes advance search elegant and user-friendly and it's a decent example selecting the operator for the filter criterion.

share|improve this answer
    
Thanks for the response! I'm not a regular iTunes user, so I'm having trouble finding the advanced search that you mentioned. Can you point me in the right direction? –  Michael May 17 '12 at 0:55
1  
You might also look at stock image website istockphoto.com The left-hand margin displays all the search criteria you have used, and shows very clearly how you have filtered the results. –  techtheatre May 17 '12 at 8:34
    
I like this solution, I just have one issue with it. If you end up with a statement like A and B or C and D is that (A and B) or (C and D) or is it (A and (B or C) and D) etc. You could interpret that sentence a few ways. You could probably fix that with a few carefully placed commas. Sorry, I don't have a good answer just at the moment. –  Peter Bagnall May 18 '12 at 23:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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