0

I have a requirement to visually show the three status of Active / Idle / Off status for devices. I somehow convinced with switch design as you can see in the below illusion,

enter image description here

not fully satisfied as I need to show other one interstate of "Idle" apart from Active / Inactive or On / Off. Rather than showing as text or drop down UI, wanna show this as single visual representation. Thanks in advance.

Improve this question
4
  • Try these answers - not the same question but they will work for this.
    – DasBeasto
    Sep 1, 2015 at 12:26
  • Even though this one is good option, doesn't it leads to confusion when users seeing this first time?
    – Vasethvan
    Sep 1, 2015 at 12:30
  • I mocked it up just to see, I think it'll depend on the context of the toggle: jsfiddle.net/b0ehf0mf
    – DasBeasto
    Sep 1, 2015 at 13:01
  • Ah I see now you want to be able to return to that middle state not just have it as a default.
    – DasBeasto
    Sep 1, 2015 at 13:12

1 Answer 1

Reset to default
2

If you wan't to have a selector with 3 states I wouldn't use a toggle, a toggle button is good if there is only two states (or two plus a default like I tried to show in comments) but if you want to introduce a third state there becomes issues such as which state to switch to on click, and how to properly show what each state represents.

The slider:

enter image description here

Sliders allow you to have multiple states, allows you to clearly label each state to avoid confusion, and lets you toggle to whichever state you want in a single swipe.

The segmented control:

enter image description here

Gives all the benefits of a slider without the sliding. Easily toggle between multiple states in a single click.

Improve this answer
2
  • 1
    Yes, this segmented control is a great approach for selecting between multiple states in a single click. Check out this article which highlights some research around it, and also some other great alternatives to a drop-down: lukew.com/ff/entry.asp?1950
    – Thomas Adcock
    Sep 1, 2015 at 13:28
  • 1
    @ThomasAdcock ah segmented control that's the word I was looking for thanks, and good article.
    – DasBeasto
    Sep 1, 2015 at 13:32

Your Answer

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

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