7

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.

Improve this question
5
  • 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 Anderson
    Aug 15, 2013 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, 2013 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, 2013 at 11:23
  • If lid width is N/A, what is the 12mm telling me?
    – Eric
    Aug 15, 2013 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, 2013 at 9:41

4 Answers 4

Reset to default
8

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

Improve this answer
8
  • 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, 2013 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, 2013 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, 2013 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, 2013 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, 2013 at 15:26
2

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...

Improve this answer
1

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

Improve this answer
1

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

Improve this answer
3
  • 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, 2013 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, 2013 at 13:57
  • Yeah, would be useful to see some reference to this claim.
    – Izhaki
    Aug 15, 2013 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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