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 have a challenge to optimize one service for sensor panel. It has a table with equipment list, and the user can manually change the state of every equipment — to "normal" or "failure" (only two choices):

Current State

Other contexts of the task: the users are not experienced in computer interfaces, using fingers to change the state, and they should notice only failure states (visually accented), not normal. In current realization of interface user clicks the button and selects from these two states in pop-down list (two finger clicks on the surface of sensor screen).

So this is my challenge -- is there any way to make this control require one click (as checkbox), but that they will understand, that this button will change to another state (not lead to another page, or to dropdown menu).

"On/off switch" would be the ideal control, but this is not on/off switch, it is "normal/failure" switch, and due to long labels it is too large in the table (the original labels are on russian and are even longer, than english ones).

Checkbox is also not an alternative, because it doesn't show the exact name of the second state (but it seems that I will use it if there is no another, better way).

Update: Do you think it is a good solutions (the current state is clear, and the possibility to change it to some another by clicking or draging is also clear):

Alternative solution

share|improve this question
    
The image you displayed last reflects the current state is a clear way. Since "the users are not experienced in computer interfaces" you should use toggle controls that look like something the users are already familiar with. The 2nd suggestion you used is a lot more clear. The question is will your users at least figure out those are slider buttons? Adding pseudo-3d effects to make the gap look deeper may help. –  Danny Varod Jun 25 '12 at 15:36
add comment

3 Answers

up vote 0 down vote accepted

You could use a physical looking toggle switch with a red light.

E.g. these three commercial search results

  1. http://depositphotos.com/1194534/stock-illustration-Toggle-Switch.html

  2. http://i.stack.imgur.com/kP5Vr.jpg

  3. http://i.stack.imgur.com/f7aR6.jpg

share|improve this answer
    
I liked this way. But I've not seen any toggles changing their label in different states -- I suppose, it would be rather confusing. –  Alex Ovtcharenko Jun 25 '12 at 11:42
    
Actually, it can make its operation less confusing if done correctly: ux.stackexchange.com/questions/20713/… ux.stackexchange.com/a/22728/687 –  Danny Varod Jun 25 '12 at 11:56
    
Oh, thank you, and the link contains the same question about ambiguity of the "label for current or next state". –  Alex Ovtcharenko Jun 25 '12 at 11:59
    
Please look at the i.stack.imgur.com/ljwFi.png -- is it a clear solution for the problem? (another state can be hidden, but it is not "off" state, users will understand it in their application domain. –  Alex Ovtcharenko Jun 25 '12 at 12:02
    
@AlexOvi See my answer to that link. –  Danny Varod Jun 25 '12 at 15:33
add comment

Like ChrisF, I'd first suggest emulating the iPhone / iOS toggle buttons:

enter image description here

These switches take a strong colour when 'active' (you could use a red for the 'warning' state), and belie the state in the switch appearance. Be sure the 'background' space looks recessed, typically by using a slightly darker colour than the switch element itself. Your current design's background is probably too dark, and the red warning element doesn't look raised against it.

The other convention that comes to mind is 'flagging', with warning icons that can be toggled on or off with a touch. The icon itself could be a flag, or perhaps something like an exclamation mark:

enter image description here

You'd probably want to tweak the above to give the exclamation links more affordance, but you get the idea.

share|improve this answer
add comment

Your second screen shot is very similar to the toggle switches I have on my LG touch screen phone and (from what I recall) the "usual" iPod/iPad toggle buttons, which seem (to me) to convey the state information you wish to impart.

I'd go with that design.

Even the most inexperienced users soon pick up on what's required to manipulate controls.

share|improve this answer
add comment

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.