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

  • 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. Commented Jun 25, 2012 at 15:36

3 Answers 3


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. https://i.sstatic.net/kP5Vr.jpg

  3. https://i.sstatic.net/f7aR6.jpg

  • I liked this way. But I've not seen any toggles changing their label in different states -- I suppose, it would be rather confusing. Commented Jun 25, 2012 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 Commented Jun 25, 2012 at 11:56
  • Oh, thank you, and the link contains the same question about ambiguity of the "label for current or next state". Commented Jun 25, 2012 at 11:59
  • Please look at the i.sstatic.net/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. Commented Jun 25, 2012 at 12:02
  • @AlexOvi See my answer to that link. Commented Jun 25, 2012 at 15:33

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.


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.

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.