35

There's a constant debate on checkbox vs toggle. enter image description here

Personally, as an iPhone and Mac owner, I'm still very confused every time when I see the toggle. I often ask ask myself, "The 'on' is on the left, does that mean I have to slide the light gray from right to left in order to turn it on?" I eventually found out the answer was no. Yet, I still have to mind exercise every time when I see the toggle.

Aside from personal feelings, what are the good arguments for using checkboxes vs toggles?

46

This has been discussed in much depth in many other related questions (see right pane on this page). So I'll make it brief.

Toggle switches are anti-usability

Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for example) is the current state, or the action.

Another issue with these is that the layman can easily conclude that in order to change the state one should drag the handle (like in the real world) rather than click anywhere on the whole control.

Ludicrous form

The style of the toggle switches in your example (which have only one label inside the switch) is somewhat a ludicrous attempt to take something from the real world and create an interface metaphor. Thus, this type of toggle switches also violate the form-follows-function guideline.

In the real world, switches are far more basic than the one's in your example, forcing manufacturers to provide labels and trace lines for all possible states. As in this real-world switch:

An image of a switch from the back of the Mackie HR824 speakers, showing a three-state switch with trace lines to labels

Checkboxes are easier to interpret

There are various ways to improve the usability of such switches, and one has to remember that these are both fairly popular and only require a few learning iterations before most users get it. But from a cognition perspective a checkbox is far easier (and faster) to interpret compared to a toggle switch.

  • 4
    A perfect response. We often try to emulate real world items in our UIs, but then completely ignore that in physical products, there is often very obvious labels and identifiers accompanying buttons and switches. These are not done because they want to, they are done because that is what is necessary and we should follow the same formula. – Chris Aplin Sep 3 '14 at 14:53
  • I'm not so sure - I think that the on/off characteristics and user expectation of a switch are different to those of an HTML checkbox. What seems to have happened is that designers/developers/CSS frameworks have mixed the two things together creating confusion over where and how to use them correctly. – TheSaint Sep 3 '14 at 16:34
  • I agree in general but there are still cases where toggles work very well. I'm including an example in an answer below. – Mayo Sep 24 '14 at 15:48
  • we often also overlook that things designed for fingers in the 3d world aren't going to directly transfer to 2d touchscreens or point and click situations! – Toni Leigh Mar 3 '15 at 23:00
8

Context might be a consideration in this debate rather than focusing purely upon the control itself.

The context might be a long data-heavy survey intended to be filled in with a keyboard, or it might be some user settings on an app destined for mobile or touchscreen devices.

Each situation may call for something different to enable the best user experience and results.

Interaction methods and user feedback can also effect the usability of controls such as toggle switches. For example, the settings toggle switches on iOS7/iPhone;

OFF looks like this

mockup

download bmml source – Wireframes created with Balsamiq Mockups

And ON looks like this;

mockup

download bmml source

Interaction helps here by providing real time user feedback upon using the toggle control (the switch turns green and all the information appears).

I don't know the answer, but I do know that I would always try to consider context and interaction before choosing to use an alternative to the humble checkbox!

6

The implementation of the switch that you have show is not correct. Refer to the image attached.enter image description here

4

The IOS way of saying yes and no also is a little unclear to me.

I use checkboxes when I have a YES/NO or AGREE/DISAGREE situation such as this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

For a toggle, I use a selection between two situations in equal weight such as: ASCENDING / DESCENDING; or WOMAN / MAN

mockup

download bmml source

  • 8
    What does the middle position in woman/man mean? – Izhaki Sep 3 '14 at 14:14
  • 1
    @lzhaki Probably the default position (-> If the user hasn't specified it yet). – Kweamod Sep 3 '14 at 15:38
  • 2
    How does a user suppose to know this? – Izhaki Sep 3 '14 at 16:02
  • 1
    This convolutes things even more, though. On iOS, where the toggle is prevalent (for better or worse) it's a replacement for a checkbox. The examples at the bottom ore being used as replacements for radio buttons. So I'd say you're not using a not-so great pattern for a checkbox in a way it was never intended for. That said, I do understand the logic and reasoning behind it. Just note that it is a very atypical use of the toggle. – DA01 Sep 3 '14 at 21:00
  • 1
    Triple state checkbox, I think that's really bad UX – Orlando Nov 20 '15 at 14:51
0

I'm trying to sort out this exact issue right now. For me it's about what selecting the option "means". For instance, I'm currently developing some control interfaces; one of them selects which "devices" will be used on a certain schedule, with sub-controls for how long they'll be used and a few other things, another control interface selects on what interval(s) the schedule will run. Under the hood they're both checkbox elements, but for the device selection I use "on/off" toggles (or a button that changes text/appearance on click for mobile) and for the interval selection I use a standard checkbox. The device selection implies an "engagement" of the device (it's literally on or off), but the interval selection is just that, a selection. That makes sense to me, and I feel like it's clear to the users...

0

All in all checkboxes are preferable but we shouldn't loose track of times when they are useful. Sometimes users - especially in expert scenarios simply need a DONE/NOT DONE indicator or APPROVE/NOT APPROVE indicator.

I'm including a graphic below (I removed all incriminating and sensitive information:)

Don't mind the "lock", the "envelope" and the red circle. All have to do with other actions.enter image description here

-2

I like to think of it this way...

If it's something that people think of in terms of ON / OFF then use the toggle: WiFi, Bluetooth,Vibrate, Sounds

But an EITHER / OR scenario use a checkbox next to each option to clear things up, like: enter image description here

Or if it there is an assumed default state, like a forum where you post publicly...the default state is PUBLIC. Then you might want to specifically call out the alternative state with one check box, like: enter image description here

  • 2
    You should not use checkboxes for mutually-exclusive options (e.g., man, woman) but radio buttons instead. – tilo Jun 11 '18 at 10:57

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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