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?


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.

  • 1
    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, 2012 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. May 17, 2012 at 8:34
  • 1
    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. May 18, 2012 at 23:14

Your Answer

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

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