Initial state of checkboxes for basic list filtering

Question

I'm developing a web application which features a list of items. The list can be filtered by type, and the user can choose to view one or more types at once. Let's say the types are Red, Green, Blue, and Yellow.

My idea was to use checkboxes, one for each type, so that e.g. when Blue and Yellow is selected, then the list contains the sum of these two. Basic logic.

Now, the default view is as above: no type is selected. In the app's logic, this is treated the same as selecting all types - in other words, all items are visible on the list. The user can now click on the type they're interested in, and the list will only contain that.

Is this an intuitive approach?
Or maybe all the checkboxes should be selected on init instead?
Or perhaps a completely different mechanic should be used in place of checkboxes?

I couldn't decide and made a list of pros and cons:

• All checkboxes empty on init
  • :) One click required to filter by one given type
  • :( It doesn't make much sense that nothing checked means all shown
• All checkboxes checked on init
  • :( Three clicks required to filter by one given type
  • :) Makes more sense that all checked means all shown

I'm not sure if my reasoning is correct. Looking at shops which let you e.g. select a laptop brand, it's normal for them to start with all options unchecked. But since my app's list is rather short and filtering results are immediate, I'm not sure if any of these approaches is better than the other, or maybe I'm missing a better way.

Answer 1

UX wise, your first approach is very intuitive: 'all the check boxes unchecked on init'.

This way the user feels more comfortable selecting his or her choice (as preferred to when all the check boxes are selected already).

It also makes more sense intuitively that:

• All items are visible and Unchecked
• Users see all their options (unchecked unconsciously lets them know they have choices to pick from)
• Users select their preferred options
• System filters
• Users see results based on selected options.

Answer 2

It is not intuitive that you can see everything while checkboxes are empty, but it is already a standard because it require less clicking. I remember that I indeed was confused about it when I first saw filters in form of checkboxes, but I am use to it by now. I don't think that anybody will read it as negative filters. (If you check yellow you no longer see yellow.) Still there is something that can improve it. You remember when filters were shown as list? Everything was clear back then. That is because a list have a one more state, the clear state. Sadly list aren't good for users, because they lower discoverability and staf. Although we can learn from it that we need that additional state. Let's call it all. It will automatically get unchecked when user select any other checkboxes.

OR this way: It will make more clear for some users that it will get unselected. However if your users aren't fluid with checkboxes and radio buttons behaviours, it will confuse them. Then chose the first option.

EDIT: Sorry for late response, had a lot of work lately. There is also a solution that is more intuitive but takes more space. I didn't thought about it at first because my mind is in the space saving mod now. (I working on a mobile webpage.)