1

I have a product. Product have property, simple yes / no one. Sadly, in reality this property have four states:

  • Yes (graphic card is a discrete one)
  • No (graphic card isn't discrete, must be integrated)
  • Does not apply (no graphic card)
  • We don't know / undefined (we will fill it once we'll find out)

Graphics design of product filter web page assumes I will be able to filter products using one checkbox per property. Sadly, user might want to select only products:

  • With property set to Yes
  • With property set to No
  • With property set (like, some graphic card is present)
  • Doesn't matter (show all products)

Is there any clean and intuitive way to do it with just one checkbox? Tri-state checkbox is not enough for this purpose, and drop-downs are something my designer does not want. On the other hand, user who sees our site for the first time should be able to use it without the need to read or think too much, that's more important than looks.

Improve this question
1
  • 2
    I see a bigger question of "How do you convince your designer his design is poor UX?" Checkboxes are not your answer here. 4 state checkboxes don't make sense, no way around that.
    – Nicholas Pappas
    Commented Aug 20, 2014 at 22:04

3 Answers 3

Reset to default
7

Well, you have the answer in your question - you lined up the answers like a bullet list. Do the same, but with radio buttons. They are often the best option when there are few options, but one (and only one) have to be selected.

Improve this answer
5
  • 4
    Just to expand on this answer: Checkboxes should be used with yes/no questions. For multichoice you can either use a select(drop down) - less space but less option visibility; or use a radio button group.
    – Izhaki
    Commented Aug 20, 2014 at 13:40
  • Additionally, checkboxes symbolize an optional input field, because they can be unchecked. Radio buttons however, once selected, cannot be unselected which convey a more mandatory input.
    – UXerUIer
    Commented Aug 20, 2014 at 13:44
  • @Izhaki problem is: designer sees only yes and no, and I wasn't able to make him really see "either" and "doesn't matter" as real options.
    – Mołot
    Commented Aug 20, 2014 at 13:46
  • @Izhaki radio buttons aren't for multiple choice, checkboxes are.
    – DA01
    Commented Aug 20, 2014 at 22:12
  • @DA01 You're right - radio buttons are for a single choice, not multiple ones. Wasn't attentive enough with the terms but I'm afraid I can't edit the comment now. Thanks for spotting that.
    – Izhaki
    Commented Aug 20, 2014 at 22:48
3

I don't know the full context of your situation, but I think you have more of a wording issue.

As you state, there are 4 states. So using yes/no doesn't make sense at all. Sounds like your for initial states should be set via radio buttons as:

( ) Has a discrete graphics card 
( ) Has a integrated graphics card 
( ) Does not have a graphics card
( ) Unknown

Only one applies.

Then for your filters, you'd implement them as checkboxes. In this example, I'm looking for all systems with graphics cards:

[X] Has a discrete graphics card 
[X] Has a integrated graphics card 
[ ] Does not have a graphics card
[ ] Unknown
Improve this answer
1
  • 1
    Exactly - keep away from "yes", "no" and similar answers. Write what the choice is. The same goes for buttons. Instead of just typing "Ok" on a button, write what it will do.
    – Henrik Ekblom
    Commented Aug 21, 2014 at 7:45
1

What about providing a vertical slider to the right of you list that can snap to one of the 4 distinct states?

Improve this answer
1
  • 1
    Just thinking outside the checkbox? I'll get my coat...
    – Franchesca
    Commented Aug 20, 2014 at 13:42

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