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.

  • Try these answers - not the same question but they will work for this. – DasBeasto Sep 1 '15 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 '15 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 '15 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 '15 at 13:12
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.

  • 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 '15 at 13:28
  • 1
    @ThomasAdcock ah segmented control that's the word I was looking for thanks, and good article. – DasBeasto Sep 1 '15 at 13:32

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.