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?

  • 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? Commented Jun 11, 2014 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
    Commented Jun 11, 2014 at 15:13
  • 1
    @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. Commented Jun 11, 2014 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
    Commented Jun 12, 2014 at 7:01

5 Answers 5


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.

  • 2
    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
    Commented Jun 11, 2014 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). Commented Jun 11, 2014 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. Commented Jun 11, 2014 at 19:53
  • 1
    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
    Commented Jun 11, 2014 at 19:57

If I want to 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.

  • 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. Commented Jun 11, 2014 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
    Commented Jun 11, 2014 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. Commented Jun 11, 2014 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
    Commented Jun 11, 2014 at 23:14

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.


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.


To give a really helpful answer, I think we need to know a little more. Are the items that filter is going to be applied to limited to matching one of the icons, or can one item show up in more than one? How is the content organized, and how do users filter in the first place?

Your case could be close to product categories, as seen on Amazon: A thing is in one category, not in many, and categories help users to limit the scope of their browsing to relevant items.

It could also be close to tags here on Stack Exchange: A thing can have multiple tags, and they help users to find everything related to their interest.

However, If selecting more icons shows more content, then the expectation would be that unselecting icons shows less content. So, the logical way would be to go with your option A.

The issue with your option A is that it’s very likely cumbersome for the user, assuming that usually they will want to choose one icon only, and with option A they would need to unselect all that do not apply.

As has already been pointed out, unselecting everything and showing all content is also unintuitive. It could, however, be the best solution – depending on how your users are actually using the site.

There’s two alternative solutions that come to mind that both would bring clarity to the situation, and both require the same addition:

Add a "show all"-option.

Solution 1: Treat your filter like categories. That is, let the user only select one. It’s a very common, very well-learned behavior. If you need users to be able to select multiple icons, I’d suggest …

Solution 2: Treat the case that all filters are active as a special case, as illustrated below. The idea is to have "show all" as a special toggle. However, I think even this is somewhat ambiguous :-)

Special Operator "Show all"

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.