Flip-flop button
This pattern describes a user interface component to select one out of two possible values.
Context
The user wants to change the status of something, e.g., turn audible signals on or off.
Forces
The difficulty here is to properly assign the currently active state of the flip-flop button to the setting it controls. It must be clear to which state the setting changes when the button is pressed.
Solution
There are two solutions, one for resistive touch screens and one for touch screens based on capacitive technology.
Interactive Example — Capacitive
The first example shows a solution for capacitive touch technology where drag and drop operations are possible.
Drag the slider to change states.
Interactive Example — Resistive
The second example shows how to avoid drag and drop for resistive touch technology.
Click the control to change states.
Usability impact
Using this pattern allows a clear display of the current status together with a clear indication of the status selection control.
Safety impact
The flip-flop button can be used to protect other, safety-relevant controls.
You should follow our updates via Twitter or RSS!
Contact
intuio User Experience
Consulting GmbH
Lange Gasse 33/4a
A-1080 Vienna
Austria
Where's that?
Or call us: +43 (1) 236 37 62
Still ambiguous
This pattern addresses some good issues, but doesn't have clear indication of which status is active. Only by convention (of iPhone and other GUIs) do these make sense. In your example, when the status shows "Off," one might still be compelled to slide it to the right to turn it off.
The click (touch resistant) button allows me to click on the indicator text, which may confuse users into thinking they are going to the state that they are currently seeing after clicking, not what it will change to.