Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm building a piece of software which will have a filtering system that involves multiple flags. The complication is that each flag has three possible states:

  1. On

  2. Off

  3. N/A (i.e. It can't be applied, for whatever reason)

Here's my current plan:

enter image description here

So the "Size" and "Weight" flags are "on", "Height" is off and "Lid Width" is N/A (None of the products actually have a lid). Clicking each box toggles the flag, unless it is N/A.

However this method has it's limitations: One of which is that it relies on colour, preventing use by colour-blind users. I could use checkboxes instead, but they take longer to read and absorb when there are a lot visible at once.

N.B. The software will only be used by a small selection of experts for many hours a day. So it is less important for it to be easy to learn, and more important for it to be quick to use and visually clear what's going on at all times.

share|improve this question
    
Why not simply hide the N/A flags? Rather than displaying the full list and figuring out how to indicate what matters, how about only making the displayed list include what matters and have functionality whereby people build the filter from available list items? –  Josh Aug 15 '13 at 11:03
    
@Josh Showing the N/A flags stops the user from thinking "Where did the Lid Width filter go? I'm sure I put one in- I'd better do it again." –  Urbycoz Aug 15 '13 at 11:22
    
@Josh Also, if you turn off the "size" filter, there might be some products which do have lids, so the "Lid Width" filter would turn to "on". –  Urbycoz Aug 15 '13 at 11:23
    
If lid width is N/A, what is the 12mm telling me? –  Eric Aug 15 '13 at 14:36
    
@Eric. I'm saying: "If there's a lid, it needs to be 12mm". But there's no lid, so it's N/A. –  Urbycoz Aug 16 '13 at 9:41

4 Answers 4

up vote 8 down vote accepted

Suggested solution:

enter image description here

How should I visually represent multiple three-state flags? The complication is that each flag has three possible states

Means there are only two states "on/off" for the component, but component itself can be disabled or enabled. So it is enough to have two state switch.

enter image description here

Having that understanding it is possible to throw switch away and use ordinary check-boxes instead (preferred solution).

enter image description here

share|improve this answer
2  
This solution actually goes against many UX guidelines and conventions. A switch is an interaction control - meaning something the user can modify. A proper 3 state switch may have Fast, Medium, Slow; but in your case the N/A state is not selectable by the user. The most obvious convention is a checkbox that is grayed out when not available, I'm yet to see an interface that replace this with a 3-state switch with the middle state representing N/A. With many switches you also promote visual overload through the amount of non-aligned handle. –  Izhaki Aug 15 '13 at 14:10
    
@Izhaki, thank you very much, I'll update the answer in a second. I misread/misunderstand initial requirements. –  Renat Gilmanov Aug 15 '13 at 14:27
    
The second part of the update is important. Why would you prefer a switch over a checkbox? A checkbox is good for yes/no options, like in the problem in question. Switches are good when the options cannot be phrased as yes/no, like fast/medium. –  Izhaki Aug 15 '13 at 14:59
    
I do not prefer a switch in this case. Obviously checkbox is much better taking into account initial problem. –  Renat Gilmanov Aug 15 '13 at 15:07
    
I'm sorry, my comment wasn't clear - The question I was asking wasn't directed at you, it was just to provide the answer that followed. Clearly you have worked it out right. –  Izhaki Aug 15 '13 at 15:26

Red color is eye-attractive although it is for off state. Besides it could be not pleasant while long observation.

I suggest other styles for the states distinction. Dots allow quick eye-jumps and have some meaning (on-off).
enter image description here

share|improve this answer

Well, if you (rightly) don't rely on colours, you'll have to add another visual element. And I don't see the problem with using checkboxes (from Amazon.co.uk):

Amazon Brand Filtering Grid

You can gray out non-available options.

Update

In respond to other posts, here's a comparison of all the ideas so far:

Various options with regards to filter yes/no/disabled

share|improve this answer
    
If, instead of 1, there were 10 different checkboxes clicked, it would take a time to scan through over which were on and off. It's much quicker to take it in if colours are used. –  Urbycoz Aug 15 '13 at 11:34
    
@Urbycoz I'm not sure your statement that it would be much quicker is correct. I see no evidence for that. –  Jay Aug 15 '13 at 13:57
    
Yeah, would be useful to see some reference to this claim. –  Izhaki Aug 15 '13 at 14:16

Good answers here, but they don't mention the common name for this UI element...

These are called "tri-state checkboxes" (wikipedia), and are often used to show a "mixed" or "other" state in toggle switches.

enter image description here enter image description here enter image description here

more examples here...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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