0

I have a list of brands to filter some products. Users will check some brands from that list to show products only from those chosen brands. The default (unfiltered) is that the website will show all products of all brands. I wonder how the brand list should look for the first time, because I think it would look ridiculous if all the brands are checked. Btw it's for mobile view.

So far I made all the list children unchecked for the first time, then users check the brands they choose. Is it acceptable? Since nothing checked can be meant we choose none of the brands?

Any idea appreciated. Thank you!

1

Include an "All Brands" option that is activated from the beginning, and each Brand deactivated.

Rather than pre activating all the brands and then making the user deactivate them one by one; or rather than showing all the brands deactivated and at the same time showing all the brands in the results.

  • Maybe you're right..... I've been looking at this link and it sure looks unusual for me, not realizing that there are other options to show filter other than this. Thank you! – Dolorosa Jan 8 '17 at 18:24
  • The site in your link uses the behaviour of checkboxes but the styling of radio buttons. Very counter intuitive.. – Martyn Jan 8 '17 at 22:45
1

As Alvaro said, this is a common interface for selecting all or one or many.

All, many or one

  • I think I haven't been paying much attention for filtering methods, even they are literally everywhere...... Thank you kind Sir! :) – Dolorosa Jan 8 '17 at 18:30
  • Sir if I check some brands and I check "All" again will the checked brands disappear? – Dolorosa Jan 8 '17 at 18:49
  • Of course they would, this is a before and after state. – DarrylGodden Jan 8 '17 at 19:34
  • Strictly speaking it's inconsistent use of the Checkbox element. The All checkbox behaves different. – Martyn Jan 8 '17 at 22:28
  • What element would you suggest? – DarrylGodden Jan 9 '17 at 9:20
1

"Since nothing checked can be meant we choose none of the brands?"

Yes, "Filter by" nothing means show everything.

To add an easy way to remove all the filters at once you could add a 'clear filters' button. Either just those words or a cross in a button.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Wow, I think this way is rather new to me. Thank you! – Dolorosa Jan 9 '17 at 3:08

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.