2

Consider the following scenario:

  1. The user goes on a restaurant search page in an app
  2. He/she enters some information, then clicks on "Filter results"
  3. There he/she finds the possibility to filter by price level.

Which, would you say, is the better default state? A or B? And Why?

Of course, by default all results should be visible, no selection. But how does this look?

  • A: All price ranges are visually "active / on"
  • B: All price ranges are visually "inactive / off"

Most Sites I looked at, chose B (Tripadvisor, Yelp,…)

But I would argue A would actually make more sense as B has the following inconsistency:

  • When all of the options are active, I see all the results.
  • When one of the options is active, I see only that one result.
  • When none of the options is active, I still see all the results.

The screen on the right would be what a user sees when he/she either deactivates the third chip (when coming from A) or activates the first two chips (when coming from B).

  • Not sure I'm following here. If you land on a page, you'd expect all filters to be off and thus see all results. It may be that the result of all filters off and all filters on is the same, but that isn't that surprising. The filters in these cases are additive, meaning you see all results that either adhere to filter 1 or filter 2, not results that adhere to both simultaneously. That would be highly unusable. Users don't expect to have results filtered for them when they haven't done anything yet, so A would be unusual. – Wendy Wojenka Apr 21 at 11:00
  • Sorry for not providing enough context. The scenario looks like this: 1. The user goes on a restaurant search page in an app 2. He/she enters some information, then clicks on "Filter results" 3. There he/she finds the possibility to filter by price level. The screen on the right would be what a user sees when he/she either activates the first two chips (when coming from B) or deactivates the third chip (when coming from A). – angelozehr Apr 21 at 11:17
  • OK, I reread your post with the added context, and I have to stick to B -> C making more sense. A filter is used to - as the name implies - filter all results. Users tend to prefer seeing everything up front and filtering from there, rather than the other way around. I understand the end result is the same in this case, haivng all filters off and having all filters on shows the same thing, but from a user perspective you give them the control if you start with all filters off. – Wendy Wojenka Apr 21 at 11:18
  • The main difference is in usability. If you start with everything on you'll have to deselect everything you don't want as supposed to only having to select what you want. If you have many filters this problem compounds, hence version B is preferred. This is a case where usability trumps logic. – Martyn Apr 29 at 7:05
2

Usually, a filter’s purpose is to help users narrow down the number of items that display in front of them. If a user input 1 search query but there are still too many items to look through, the user can input more queries until the information is digestible. In this case, the logic in design is that the content needs to contain all queries users put in.

A filter is simply a way to narrow down results. Therefore, it should be 'off' by default.

If you really want to 'preload' the experience and have results filtered beforehand, you can introduce another question in the step before you show results. You can ask which price range they prefer. Once they continue, you show results based on that filter they desired (have the [€] active for example) and leave the other buttons [€€] and [€€€] inactive. That way users still have control to change their choice afterwards. But if you ask me, it's kind of redunant in the scenarios you portrayed.

More information: https://uxdesign.cc/5-things-to-be-mindful-of-when-you-design-filters-fc1ca83e157c

| improve this answer | |
-1

You should start with them all active, as in the A image "green" when the user first lands on the page because you are setting up a color's meaning (selected) which will be used in further interactions.

Then, when a user clicks on a specific filter button ($$$) the selection will change to just that button and the other buttons should become deselected as this will meet what the user expects will happen - focus on just those $$$ items. (see below)

In clicks of the buttons, they will toggle on and off as normal.

enter image description here

| improve this answer | |
  • Interesting, haven‘t thought of that solution before. Thank you! – angelozehr Apr 28 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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