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.

We have a selection field on our website. And today we had a discussion at the office about our filter options when the user is facing the filter options for the first time.

Option A enter image description here

No filters are active. All results will be shown.

Option B enter image description here

All filters are active. All results will be shown (because no filter is active).

Which option will you recommend?

share|improve this question
Are your captions correct? If no filters are active, then all results are shown. That makes sense. If all filters are active, then what? No results are shown? –  Ken Mohnkern Jun 11 '14 at 15:02
To promote answers that relate more to your situation rather than just opinions, it would be a good idea to provide some background info. –  jazZRo Jun 11 '14 at 15:13
@jazZRo - Questions that do not promote specific situations are actually better questions. This question is well phrased to ask a generic "filter on or off by default" type of question. Answers are thus more useful to a broader audience. –  Evil Closet Monkey Jun 11 '14 at 16:38
@EvilClosetMonkey - I agree, I only wanted to point out that the answers may not have any substantiated arguments specific for the OP’s situation. It’s perfectly fine if that is the intention. –  jazZRo Jun 12 '14 at 7:01

4 Answers 4

By definition, a filter is a tool that help users narrow down to a subset of results that is most interesting to them. Consequently, when a filter is active, the results displayed should be less than the total number of original results.

For this reason, I find option B not intuitive enough. If I'm not mistaken, option B treats the icons using an additive approach (turning on a filter will "show some more extra results relevant to this aspect", similar to checkboxes). This is in contrast with the "subtractive" approach implied by the traditional filters (turning on a filter will "get rid of those results irrelevant to this aspect and show only relevant results). In this way, option A seems more appropriate.

However, my impression is that the visual contrast for option A is lacking. Looks like disabled icons to me. It may have some usability issues as well for the older audience.

So overall, I'd recommend a mix of both like the sketch below.

Default (all results shown, no active filter) enter image description here

Bank filter activated, only relevant results shown. enter image description here

The idea is to use a subtle visual cue (still in keeping with the flat design) like a circle or flat shadow to hint which filter is being activated at the moment.

On top of that, you may consider using a text labelled something like "Showing results relevant to Banks, Trees and Mountain", together with a button or something to refresh the page to its default total result state (which can have a text "Showing all results").

Please note that my sketch doesn't meet spacing, alignment, as well as typeface requirements and serves only for demonstration purpose.

share|improve this answer
What if multiple filters may be used at once? E.g. "Financial" or "Business", which includes results for both? Would your answer be different in that situation? (Because I think that's what the OP meant for Option B) –  Ajedi32 Jun 11 '14 at 19:17
Hi @Ajedi32, excellent comment! The sketch above opens for parallel selection, i.e. activate multi-filters at once. As for the actual combination of those filters, it's a question of context. I've seen lots of apps that use the AND operator (showing the resutls that satisfy BOTH criteria). On the other hand, apps for airlines and booking tend to use the OR operator (either criterion is enough). –  Son Do Lenh Jun 11 '14 at 19:53
Thinking more along the line, we could have users modify the default operator by choosing the operator from a dropdown integrated in the label. E.g. Showing only 28 results belonging to ALL of the categories: Financial, Business; where ALL is a changeable item in the dropdown.\nCaveat: Applying ONE SINGLE operator to the whole set of criteria is enough. Trying to give users too much flexibility and let them define pairwise operators for the filters and combine them (e.g. this AND that OR this OR that, etc.) may be an overkill IMHO. –  Son Do Lenh Jun 11 '14 at 19:53
Like the results label at the bottom. Can also consider using a "check" analogy in place of the circle to better show that you can select multiple filters. –  nightning Jun 11 '14 at 19:57

If only one filter may be active at a time, there should be a filter choice "SHOW ALL", all filter buttons should be enabled, and some indicator such as a border should be used to indicate which button is selected.

If filters may be combined, I would suggest grouping filters into "OR" groups, each of which should have an "ANY" button. Clicking "ANY", or clicking any filter when "ANY" is selected, should select the clicked filter and unselect all others. Clicking the only selected filter in a group should be equivalent to clicking "ANY". In other cases, clicking a filter should act as a toggle. Each group should have a descriptive label (e.g. "Hair color must be..."), so that it's clear that items to be shown must satisfy the conditions indicated for all groups. When "ANY" is selected in a group, the label may be dimmed to indicate that it's not particularly relevant. Depending upon space, it might be helpful to have the label text indicate the choice [e.g. "Hair color must be BLACK or BROWN or RED"], to make clear that the filter is not requiring a person to have multi-color hair.

share|improve this answer

if i wanna see restaurants, i click the icon until it is active. those are not filters, but enablers (probably wrong word). a filter is like a sieve and doesn't let things through when active

for the question whether all filters are on or off, it depends on the use case. i am assuming it is a map? is the user trying to find one special thing, turn all off initially and you have an empty map. if if the user is just browsing what shops exist nearby, use all icons activated and you have a full list.

compromise: if the full list is unusable, you can also enable some icons so the user sees they can have different states. best add a button to disable/enable all then to avoid much clicking to get away from that state.

share|improve this answer
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. –  Evil Closet Monkey Jun 11 '14 at 22:34
sorry mate, but this is the only correct answer. talking about filters when he is not filtering doesn't make sense. –  user50401 Jun 11 '14 at 23:04
When a filter is active, what does it not let through (in reference to your last sentence)? If an active filter shows only those results then you just described the OP's 'Option A'. If an active filter hides those results then you just described the OP's 'Option B'. If you are believing the correct answer is an "enabler" then describe what it is, how it is different than a filter, how it works and why it is the correct solution. –  Evil Closet Monkey Jun 11 '14 at 23:13
okay, now i don't think that was the question at all. still, a working mud filter will filter out mud. have added more text hopefully answering the question what the initial state of the list should be. good night –  user50401 Jun 11 '14 at 23:14

Seems very non intuitive that all of your icons being greyed out would equate to all products being shown. If something is greyed out, that's like a 'disabled' state. Meaning not in use. You should filter things out by greying them out. If you hit the page and all of the results show, then all of the categories that those icons represent are in play. Then click to grey out, and remove the results.

Option B is superior.

share|improve this answer

Your Answer


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.