17

We are developing an app for both Android and iOS and try to use similar patterns between the two platforms. For Android we have decided that tapping the label that belongs to a Switch component should also change the state of the switch. This seems consistent with how Google does it in Android, at least in settings:

label tap

For iOS we haven't really seen this pattern; tapping a switch label in iOS settings does nothing.

Is it a bad idea to have tappable labels for switches?

Would it break the iOS guidelines?

Improve this question
2
  • For what it's worth, tapping the label isn't very consistent in Android itself. Most of the times it will toggle the associated switch, but some times it will actually open a separate page with more settings.
    – Vivelin
    Aug 9, 2018 at 9:33
  • In those cases there should be a vertical separator between the label and the switch. Atleast that is how I interpret how Android does it in settings.
    – filip
    Aug 9, 2018 at 11:02

2 Answers 2

Reset to default
20

In iOS tapping the label does not enable/disable the switch.

Go with what ever the convention that is part of the respective operating systems, as the users of those systems will expect the behaviour they are used to.

iOS: Label is not tappable
Android (as far as I'm aware): Label is tappable

With regard to the guidelines I'm not 100% sure but it maybe worth looking in their respective developer guidelines for guidance:

Apple iOS: https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/

Google's Android: https://developer.android.com/guide/topics/ui/controls/togglebutton

Improve this answer
2
  • 2
    Whilst I totally agree we shouldn't confused users and give them what they expect, I have to also question why the UX is different between Android/Apple. Surely the research should point to the same experience being the best for both Android/Apple...the users can't inherently be that different...
    – ESR
    Aug 9, 2018 at 5:09
  • They probably aren't that different but the operating systems theyre using are, subtle differences in the expectations of the operating system and an app thats on it could cause frustration.
    – UIO
    Aug 9, 2018 at 8:16
1

Is it a bad idea to have tappable labels for switches?

In general, yes. It is, indeed, not a very wise decision to keep a label, tappable. Labels are meant to convey a message in a textual form. Buttons and switches are meant to be clicked/tapped to trigger an event. Even in a physical environment of the user.

Would it break the iOS guidelines?

Yes. As per iOS design guidelines, the toggle switches are only triggered when user taps on the toggle button and not on tap of a label. Your users who are on iOS platform, are invariably going to attempt tapping the toggle switch and not the entire block (which includes the label and the button).

BUT

Making the entire block tappable/clickable, is going to increase the area of the tap/click event. Which can help the user as well as can lead to a ghost touch issue.

Improve this answer
6
  • 1
    Still, the label for checkboxes should always be tappable!
    – filip
    Aug 8, 2018 at 10:48
  • 1
    I think I mis-read your comment. :) Yes. You're right, label for checkboxes should be tappable.
    – Chandan
    Aug 8, 2018 at 10:49
  • 13
    FWIW, checkbox and radio button labels have been clickable on major operating systems for decades - you're probably so used to it that you didn't even notice! Having to navigate your mouse to a little geometric shape is just not user-friendly. However, touch conceivably changes this to some degree: personally I'd keep tappable areas to a minimum as I'm always finding myself accidentally touching the screen in random places as I struggle to hold my massive device (ooh-er) at the same time as craning my fingers onto the screen to actually use it.
    – Lightness Races in Orbit
    Aug 8, 2018 at 10:50
  • Absolutely. That's the convention. Specially in cases of a touch-driven interface.
    – Chandan
    Aug 8, 2018 at 10:53
  • 1
    Your entire first paragraph should also apply to checkboxes and radios though; since it doesn't, why would it apply in this case? Shouldn't the logic and experience be consistent?
    – ESR
    Aug 9, 2018 at 5:06

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.