3-state control on/off/suspended

Question

I’m creating a prototype for a system which will give the user to control a specific feature in the system by switching it on and off. To control the feature we have a 3-state control:

• on

• off

• suspended

The on/off mode is not a problem, but part of it is the suspended mode that will be activated automatically in certain situations. So my question is: what is the best usability way to define this kind of tool? How should it look like? Buttons?

At the moment it's an On/Off switch but the user should see if the system is in a suspended mode.

Answer 1

Your on and off states should be visible and in the suspended state you should make the on/off selection disabled.

Here is an example using a slider(radio) button, not the best buttons, but seemed to be good for the suspended state scenario :)

You can do similar implementation with regular buttons, like:

Answer 2

The suspend control is controling the on/off switch - which leads me to this design. Mockup 1 shows on-state, mockup 2 shows off-state and mockup 3 shows suspended state: Both on and off are not in use, represented as disabled without anyone of them selected.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

The best way is to lower the opacity and not let user control the switch if you want the switch to be in suspended mode. And you can have a normal toggle button for On/Off.

Answer 4

The first thing you should consider is how long it will take to turn something on and off. You haven't given any specifics (maybe you can't), but let's assume you're showing the user a table of servers for which they're responsible, with the described button as a cell and a server on each row.

In this case, the button has two functions. It shows the state of the system and it's a means of changing that state. This means that it the action of changing state takes a few seconds, the button should reflect that. The best affordance for an action like this is a button (with the slider mentioned by @rk. a close second). I wouldn't go for the radio buttons, since they may suggest a submit button.

I think my ideal solution would be to separate the state-display and state-change functions but keep them close together. Here's a mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The progress bar could be replaced by a spinner. And, of course, this would be better with icons, but those depend on your domain.

Answer 5

When a UI control is de-activated, a common UI pattern is to greyed it out. Original active state and colour returns if the proper conditions are met.