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

share|improve this question
3  
Sorry, I'm not clear what your actual question is here. What do you need to know? –  JonW Apr 4 '13 at 15:17
    
Sorry 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. The on/off mode is not a problem, but part of it is the suspended mode that will be activate 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? –  Revital Apr 4 '13 at 15:23
    
At the moment it's an On/Off switch but the user should see if the system is in a suspended mode. –  Revital Apr 4 '13 at 15:24
    
OK, I've edited your comments into the question, I hope it now makes sense and fits with what you're looking for? –  JonW Apr 4 '13 at 15:35
2  
What is "suspended" mode? Does it function similarly to on or off? What exactly is the relation between being suspended or being on or off? Please edit your question to clarify this. –  3nafish Apr 4 '13 at 15:50

5 Answers 5

up vote 0 down vote accepted

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 :)

enter image description here

You can do similar implementation with regular buttons, like:enter image description here

share|improve this answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
My understanding was that the suspend state was triggered automatically and the user had no control over it. 'but part of it is the suspended mode that will be activated automatically in certain situations' –  rk. Apr 5 '13 at 15:26
1  
I like this because it's explicit and clear. Mapping 2 buttons and a background color puts some mental processing requirements, while this one just says it loud and clear with the 3rd input. –  Sohan Apr 5 '13 at 15:28
    
Thank you for your answers, the suspend like you wrote is activated automatically in certain situations, the user can’t control it but he needs to know when the system is on a suspended mode. I'm afraid the checkbox will confuse him to think he has the option to control it –  Revital Apr 7 '13 at 10:05

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.

share|improve this answer

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:

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.

share|improve this answer

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.

share|improve this answer
    
From his description, "suspended" != "disabled". –  devios Apr 5 '13 at 0:14

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.