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.

XAML for Windows 8 offers 3 controls for toggling: toggle button, check box and toggle switch.

visual example of all three toggle controls

The Windows 8 UX guidelines explain and compare the check box and the toggle switch, but make no mention of the toggle button.

How and when do I use it? Should I use it at all, considering the – in my opinion – lower affordance and discoverability? What are its pros and cons?

share|improve this question
    
switches have affordance problems, they imply click, drag and slide –  Toni Leigh Feb 18 at 7:20

4 Answers 4

up vote 11 down vote accepted

A toggle button usually makes the most sense when you have a number of buttons to choose between. Something like a set of radio buttons in interaction.

enter image description here

Otherwise, one toggle button on its own isn't clear in terms of either interaction or affordance, and the other options are better choices.

share|improve this answer
3  
+1 Toggle buttons should come in three's at least. Having two toggle buttons isn't any clearer than one in terms of interaction and affordance. Same with radio groups of two options. I never know which one is selected and which one isn't. –  Marjan Venema May 29 '13 at 19:57

From what I've seen, switches are used more for persistent system settings, whereas toggles are more contextual. So a switch might turn a service on or off, accessed from a settings panel but taking effect everywhere, while a toggle will act on the content that is currently in focus.

Toggles do not need to be offered in groups. There are several valid examples of singular toggle buttons, such as "like", "favourite", or the bold format button on your word processor's toolbar.

share|improve this answer
    
Please give more reasoning behind your statements so that readers can see why you state that. –  JohnGB Feb 18 at 1:06

As an EU, I cannot stand toggle switches. Claim the state or don't use it. "Off" can mean click to turn off, or it means, "It is off now." That's crap. What about color blind people? Highlighting the color in the control to identify its state is not user friendly in that circumstance. All binary decisions should be checkboxes, or radio buttons - or label the toggle switch with "currently...on/off" - which is more work for a silly control. I don't do much programming, but would never use a binary toggle switch. It causes people to make incorrect decisions. It may be "cute," but it is dysfunctional.

share|improve this answer
    
I disagree with this blanket statement. 1. Not all systems are made for generic (unknown) users. 2. Some systems are made for "expert" users. People who will be using this tool for hours every work day. Toggles make actions easy to scan. Power is ON or OFF and color coding helps distinguish between the two states. –  Mayo May 21 at 15:55

Explicit labeling should help you out here. When you have multiple toggle buttons, it is quite important that they appear visually related (in a group).

When using a stand alone toggle button, have a label to make it explicit that it is a toggle and highlight/de-highlight the state of the button according to your visual theme. Rather than just putting it in a 'white state', grey out the off state since if is quite similar to 'disabling'.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.