8

I have a list of items. These items have 1 or more colors (black, red, green or any combination of the three).

The user wants to filter the item on color. For example, show only the items that:

  • contain black
  • contain black and red
  • are black only
  • are black and red only

My first thought was 3 checkboxes, one for each color. However, consider the scenario where a user checks black and red. It's not intuitive whether it will show items that are exactly black and red, or items that just contain both black and red. So not only are checkboxes not intuitive, they don't handle both cases.

Any other thoughts or ideas?

| improve this question | |
  • Will they need to search against only one criterion at a time, or a multiple criteria? For example, will users want to find all items that match ["black only" OR "red and green"]? – Erics Jan 9 '12 at 5:54
  • @Austin: If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. – dnbrv Feb 7 '12 at 18:33
1

I would stick with the three checkboxes to keep it simple but just be a bit intelligent about how you prioritise the results. If the user selects one colour (e.g. black) the system shows items with only black at the top of the results, followed by items with black and another colour, followed by items with black and two other colours. Then the user can check another colour to narrow the results further.

Heres an example ui below (I think something more graphical then just checkboxes reinforces the fact you are doing an AND):

enter image description here

I would also include a count of the results at the top of the page so it is clear that multiple selections produce a narrower range of results.

| improve this answer | |
3

If I had understood the question properly .. this might be a good idea ..
enter image description here

In the Image:

Note the radio buttons given for the main options ..!! You can have check-box's inside or just make the whole color tiles as clickable buttons showing selected and unselected states .. Hope it helps you some how .. !!

| improve this answer | |
2

What kind of items are they, and why does the user need to select on color?

With such a small number of colors (black, red and green), I'd show all 6 options (take apart the single-colored items from the others). You may want to play around with the labels, and probably don't need checkboxes but can use another selection mechanism. And watch out for accessibility issues when working with color, never rely on color alone.

Item selection

| improve this answer | |
  • There are 7 options, not 6. Red, Black, Green, Red+Black, Red+Green, Black+Green, and Red+Black+Green. – Erics Jan 9 '12 at 5:52
1

A checkbox for each colour seems fairly intuitive to me actually.

To handle the "are black only" and "are black and red only" case have another checkbox at the bottom:

enter image description here

| improve this answer | |
0

Ticking off a check-box is semantic to saying "Yes". Thus, your question needs to be worded accordingly.

If users expect the filter to return single-colored items then it should be a check-box per color and a check-box for Include multi-colored items. (IMHO, better option)

If users expect the filter to return multi-colored items then it should be a check-box per color and a check-box for Show only single-colored items.

If you're not sure about the expected behavior, go back to the search screen and see what terms are there as well as A/B test both versions to see where users react better.

| improve this answer | |

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.