15

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?

Improve this question
1
  • 1
    switches have affordance problems, they imply click, drag and slide
    – Toni Leigh
    Feb 18, 2015 at 7:20

5 Answers 5

Reset to default
18

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.

Improve this answer
2
  • 5
    +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, 2013 at 19:57
  • 1
    I agree, that toggle buttons should come in 3 at least, but not always. It's all because flat design is everywhere and you can't recognize which button is clicked an which not. If you add some slight 3d effects, use a little gradient and shadow, user will see that unclicked toggle button is higher than "ground level".
    – mintpandapl
    Nov 7, 2016 at 11:47
6

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.

Improve this answer
2
  • 3
    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, 2015 at 15:55
  • I think toggle switches are not as bad as people think of them. It's because they are usually implemented in a wrong way. I think each end of toggle switch should have small label, that will tell which action is choosen by the toggle pin (yes/no, on/off). The choosen label/option can be also emphasized by bold or additional color etc.
    – mintpandapl
    Nov 7, 2016 at 11:51
2

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.

Improve this answer
1
  • Please give more reasoning behind your statements so that readers can see why you state that.
    – JohnGB ♦
    Feb 18, 2015 at 1:06
0

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

Improve this answer
0

toggle need to the description so you can use it for clear meaning like (on/off) and I think it more common on mobile than web

the checkbox is more accurate (the user have to click not just change button state )

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.