0

Switch vs Check-box

Today I had a debate with some of the iOS developers in my team about the check-boxes I have used on our app. They are very opposed to them, much preferring the iOS style toggles instead, as pictured below. I disagree. Here are both our points...

My logic

  • iOS Switches* - only used when the action remains 'on' or 'off' permanently/consistently. For example, I turn 'on' push notifications and they will remain on throughout the app, unless I go back into settings an turn them off. Behaves similar to Wifi which would be 'on' or 'off', only changing through user interaction

iOS toggle switch

Check-boxes - used when you agree to something e.g 'I am happy to emailed about this' and also for list choices such as a filter for results e.g show me hotel results with 'parking, wifi, lift access, swimming pool'. These choices are NOT carried through on a user journey say 10 days later and would have to be 'checked' again. All check-boxes are minimum 44px in width and height.

Check-boxes

Their logic

It's a dated approach of doing things and too aligned to web and mouse use. Even at 44px the touch area is too small and the feedback from the interaction happens under your thumb, so not ideal.

"Show me a decent app that uses checkboxes!", one of them cries! "No one does this!" :D Maybe he has a point?

"iOS design guidelines do not do have check-boxes, so we shouldn't either."

Final thoughts

I am making the assumption that the user see iOS toggles as a switch that will remain 'on' or 'off' foreseeably, until they choose to interact with it again. Therefore I feel it should be distinguished with a different interaction when this is NOT the case. However am I fighting the iOS system and standard Apple behaviors here? To introduce an interaction that is not (supposedly) optimized for thumbs on a mobile device? Hmmmmm. Any thoughts would be greatly appreciated.

1

I'm not entirely familiar with the apple guidelines but in webapps I've been using both for different behaviours.

Switch

If the action results directly when clicking/tapping the component, use a switch.

WiFi setting, Show/Hide something

Checkbox

If another element has to be clicked/tapped before the action takes effect, use a checkbox.

Accept T&C's, Options in forms

0

Checkbox is very useful IF you have multiple choices to be selected. And also, it's really common for agreeing terms and condition etc.

Toggle would be helpful for active/inactive function.

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