0

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.

  • 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. – Evil Closet Monkey Aug 20 '14 at 22:04
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.

  • 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 Aug 20 '14 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. – Majo0od Aug 20 '14 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 Aug 20 '14 at 13:46
  • @Izhaki radio buttons aren't for multiple choice, checkboxes are. – DA01 Aug 20 '14 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 Aug 20 '14 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
  • 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 Aug 21 '14 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?

  • 1
    Just thinking outside the checkbox? I'll get my coat... – Franchesca Aug 20 '14 at 13:42

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.