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
No filters are active. All results will be shown.
Option B
All filters are active. All results will be shown (because no filter is active).
Which option will you recommend?
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)
Bank filter activated, only relevant results shown.
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.
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.
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 :-)
