25 ms·

Ask HN: Why are toggle switches replacing checkboxes? Isn't on/off less obvious?

Every website and software seems to move to the left/right sliding thingies. I know the right side is on. But whenever I have to use them, I always have this little doubt on my mind of "did I really set it correctly?" Am I going crazy or are these things a fad with much worse usability than checkboxes?

kris_wayton 4y ago
The short delay in a toggle switch turning on, as opposed to a checkbox, is also irritating. Like, if it's used to expose an additional menu option, for example. That stutter of waiting breaks the flow.
br1brown 4y ago
The choice of using a toggle switch or a checkbox depends on the context. Toggles, switches and checkboxes are all components used to switch between states, often on or off, but not always (in toggles you can also have multiple states) UI and UX studies suggest how they would be best used to aid readability A toggle switch is best used for actions or options that have an immediate effect on the user interface and do not have to be confirmed or reviewed. A checkbox is more suitable when there are further changes, are within a form or need to be revised before continuing. When designing forms, it is important to focus on the context of use rather than the function of the controls... I recommend watching this video https://www.youtube.com/watch?v=wFWbdxicvK0 https://www.youtube.com/watch?v=wFWbdxicvK0 This research shows six different ways of using the mobile phone screen to control devices with only two states (on/off). There are buttons, sliders and rockers. The ways that require sliding are safer because they avoid problems caused by accidental touches. For this reason, the iPhone uses a slider to unlock the phone
nroets 4y ago
People older than 30 grew up filling in paper forms for everything and know check boxes well. Younger people are less familiar with check boxes, so the best real world analogy is light switches. They are also expecting changes to happen instantly.
- jeroenhd 4y ago
  I don't think light switches are a good analogy. My light switches don't turn green or red when I flip them and I don't need to slide them either. Furthermore, many light switches only toggle the state of the light because it's common enough to have multiple switches hooked up to the same light source. The only analogy I can think of is the physical slider built into some smartphones for sound on/off. I don't think toggle sliders are common at all these days.
- _dain_ 4y ago
  >Younger people are less familiar with check boxes I get that people fill out paper forms less than they used to, but give the younger generation some credit here. It's not like we live in a Star Trek future world where paper is an antique curiosity. It's still alive and well in schools, for example, lockdowns notwithstanding. I'm 100% sure they still know how to tick a box, be it by pen or by mouseclick or tapping a touchscreen. For my part, I only recently learned that "radio buttons" were named after an actual kind of button that existed on old fashioned radios. I never encountered such radios as a kid, but I had no trouble at all using radio buttons in computer UIs. There are only so many ways to make a button.
smcl 4y ago
You're not going crazy. I think it's revealing that these elements are common in the cookie consent forms, where if don't click the big green "I give up, give me all your cookies" button you have to try to understand: - which way means "on" (because the UI element isn't clear) - whether "on" means "no cookies" or "actually I would like the cookies after all" (because the label is poorly worded)
osrec 4y ago
I think it's just because Apple did it and people got used to it. There are a lot of things I personally hate about the functional aspects of Apple's UI components, even though they look very pretty.
globular-toast 4y ago
Fashion. That's it.
kypro 4y ago
Good UX patterns are generally those which are recognisable and intuitive to the user. Checkbox's in the real world are used more in confirmation, or a yes/no pattern. In the real world you can check a checkbox if it applies, but you don't uncheck a checkbox when something doesn't apply. You also don't expect some state change to occur from merely checking a checkbox. Checkboxes are still used everywhere they make sense. "I accept these T&Cs" for example would almost certainly use a checkbox, not a slider for the reasons I mentioned. For on / off patterns though checkboxes are less intuitive. When you slide a physical toggle switch in the real world you're typically switching a device from one state to another state - and you typically have the ability to switch back and forth. Checkboxes are not used in this way in the real world so it's less intuitive to use them like this in digital UIs. I don't think the issue you have with sliders is universal. If you design a slider well it should be very clear what the state is. For on / off patterns changing the colour of the slider from green to red can provide a clear visual hint about the active state.
Vanit 4y ago
I think they make sense if used correctly; the act of toggling immediately changes the state of the app to match the state of the toggle. If you're tracking a dirty state and the action doesn't occur until a Save/etc button is clicked, it should be a checkbox.
jeroenhd 4y ago
Apple used sliding checkboxes. Then everyone copied Apple. It's an annoying industry trend but in terms of clarity I don't think it matters at all in this case. For a while people also used push buttons with "lights" indicating on/off but those have been phased out almost entirely now. I don't think there's much of a difference between a checkbox and a toggle if you size them right. Toggles are easier to size up to touch screen size so on touch screens they make sense. On desktop, in non-touch mode, the oversized control kind of irks me, though. "On" versus "off" is always clear, but the question "did I set it correctly" depends on the phrasing of the checkbox labels. What does "FizzBuzz enabled when widgeting" being on or checked mean? Design wise, I think generally the toggles are reserved for cases when you turn on a feature or service, and checkboxes just modify that feature's/service's behaviour. "VPN" is a toggle, but "auto-connect VPN" is a checkbox. "Accessibility" is a toggle, but "always overlay mouse cursor" is a checkbox. On touch screens the bigger toggle buttons make more sense so I think on Android/iOS you'll always see them in the place of a checkbox.
- kryogen1c 4y ago
  > toggles are reserved for cases when you turn on a feature or service, and checkboxes just modify Oh wow. I've never thought about this before but that is very intuitive. Toggles have a physical, analog equivalent, like a switch or lever. Checkboxes don't really map to meatspace; they're strictly a logical construct. Makes sense that toggles do big changes and checkboxes tweak.
  - wongarsu 4y ago
    Checkboxes map into meatspace, they copy checkboxes/tickboxes in paper forms. The things they make you tick to confirm that they can phone you, or the thing you fill out when voting on a paper ballot or in a multiple choice test. Admittedly not as physical as buttons, but they were designed as a copy of an existing thing.
    - zestyping 4y ago
      That analogy seems to support the idea that checkboxes require a "save" button to apply the change. In real life, merely ticking a box on a piece of paper doesn't do anything; you have to give the piece of paper to someone. On the other hand, a toggle switch (like a light switch) has an immediate effect.
eternityforest 4y ago
I often get left and right confused, so I'm not really a fan of using left/right as code. It takes maybe 2 seconds max to think about it, but it's annoying. Worse is the labeling. When something says "On" it's not clear whether you mean it is on, or the button turns it on. As far as I'm concerned there is no correct choice, because it's not fully unambiguous. The aesthetics, however, are pretty great, there's a reason designers don't seem to like checkboxes. Checkboxes feel kinda odd. On paper they are used to denote membership in a set more than general boolean status. When the question is a boolean, like "Did you feel sad today?" there's usually one box for yes and one for no. The aesthetics are good enough I'd say it's even worth adding an unambiguous state indicator like (Disabled) to clear the doubt. But, radio buttons with separate on/off boxes can also be very familiar and aesthetic, and I'd probably go with those more often.
- phkahler 4y ago
  I wonder if the issue with checkboxes is that real checkboxes can not be unchecked. "Check all that apply" makes sense when the boxes are all empty. It's doesn't feel the same when it's a list of cookies that are all checked by default.
_dain_ 4y ago
I'm convinced they're bad UI based on how I've seen my parents try to use them on touch devices. They try to slide them horizontally, not realizing you're just meant to tap them. And the slide motion ends up doing something to the page or menu they're part of. At best it's a no-op, at worst the slide causes a transition to a different screen and they get confused. They're antiskeumorphic. The design actively sabotages user understanding.
mattbee 4y ago
In the 90s I used 3 different desktop OSes where the UI followed a style guide, and that style guide evolved gradually over years, allowing you to glance at a control and be familiar with its possibilities. Now even on one device, the user sees 10 kinds of different controls and new ones that are thrown at them all the time. The problem is surely that you can't rely on the user _recognising_ the control you've built. You have to design as if every user might be parsing it for the first time.
- peterkelly 4y ago
  Usability has taken a nosedive with the rise of web apps. Every company wants to have their own special branding in the form of a "design system", and there's a whole industry of designers coming up with different non-standard ways to do things.
  - pornel 4y ago
    It's not just web apps. macOS has a haphazard mix of old-style checkboxes, large iOS-style toggles, newer SwiftUI smaller iOS-like toggles, old menubar checkboxes, new iOS-control-center button toggles, and a HomeKit universe of ad-hoc toggles designed for touch that make no sense for a mouse UI.
dusted 4y ago
The ones I hate the most is the ones that also change the label, because both description and indicator changes, it's just confuzing.. I like the "positive description: [ ]" pattern. Ghosts can breathe fire [ ] Radians are better [X] There's no doubt what the state is.
- sjcsjc 4y ago
  Apparently there can be doubt - see this comment https://news.ycombinator.com/item?id=34439689 https://news.ycombinator.com/item?id=34439689
patchorang 4y ago
Designers like how they look better than a checkbox.
cameronh90 4y ago
When I was much younger, I had trouble understanding checkboxes - in particular the ones with an X in them because at the time I thought X means no. So I would assume checkboxes with an X meant that you were deselecting them. Is it possible it's really all just what we're used to?
- kalleboo 4y ago
  This was also a problem with the Playstation controller. The controller has ○ and × buttons, and in Japan "×" can mean no/incorrect and "○" can mean yes/correct, so in the menus you press ○ to confirm and × to deny. When they localized it for the west, they flipped the meaning so that × means yes as in "check the box" and ○ means no as in "zero" (like on a power switch with 1 and 0) So when you play games from another region, what controls you use in menus changes.
  - ilyt 4y ago
    I'm still annoyed the big 3 all have different position for usual OK/cancel
cjg 4y ago
I saw a cookie opt-out a couple of days ago where right was off.
Dr_ReD 4y ago
Ah, so I'm not the only one...
JaceLightning 4y ago
The color? Green/blue is on. Gray is off.
seydor 4y ago
Ask the people at YouTube who still think "outline-no outline" on a black and white theme is the best idea to indicate whether you have liked a video or not. Apparently they tested it with aliens because i, as a mere human, keep being confused and often unlike vids by mistake
layer8 4y ago
I suspect one reason why toggle switches became widespread, aside from touch interface cargo-culting, is that in contexts like the iOS Settings app, they can fit the pattern of label-on-the-left, control-on-the-right, whereas checkboxes (and radio buttons) need to be on the left of the label, unlike other controls. (Or on the right for RTL languages, I suppose.) Checkboxes can thus require a little more consideration in how to layout a dialog. I still believe that checkboxes are the better control, because they can be toggled with a single click/tap without having the conceptual disconnect that a physical sliding toggle implies that you would need to drag it across, and because the checkbox state is visually unambiguous regardless of coloring (and 1/0 labelling). With checkboxes, there is also the general convention that clicking on the label (and anywhere between the checkbox and the label) toggles the checkbox, meaning a larger click target (this is one thing that <label for=…> achieves in HTML, by the way), whereas for sliding toggles this is not a common convention, making them less convenient to use with a pointing device. Another benefit of checkboxes is that the label is always directly adjacent to the checkbox, meaning you don’t need any extra visual aids (horizontal lines, more vertical whitespace) to prevent confusion about which control goes with which label, which can be an issue when there’s a lot of horizontal whitespace between label and control in a list of controls.
- SketchySeaBeast 4y ago
  > checkboxes (and radio buttons) need to be on the left of the label Does it though? What about a checkbox makes it NEED to be on the left?
  - zestyping 4y ago
    English text aligns on the left. So the checkboxes need to be on the left to be close to the text. If checkboxes are on the right, they are either far away from the text or (I shudder to imagine) horizontally misaligned.
    - SketchySeaBeast 4y ago
      While that does make sense, a grid layout helps solve some of that - though it could be hard to keep track of what checkbox belongs to what row. I'm not arguing that we switch up where checkboxes go, I'm just asking if our assumptions are as valid as we think they are.
throw7 4y ago
I recently wanted to unsubscribe from one of those corporate emails. When you click to unsub, the web site brings up "Notifications: " and a toggle next to it. It is not clear which way does what.
voganmother42 4y ago
As long as its clearly marked "Mode Execute Ready"…
czbond 4y ago
Mobile usability that can be performed with a single hand/finger is my guess. Creating a UI that is both web & mobile friendly.
- throw1234651234 4y ago
  Not a guess, this is "the" answer - toggles came around as mobile UI.
kardianos 4y ago
I like sliders for a three state: NULL | On | Off. This can be useful in a search area where I want both an explicit yes/no, but also have an option for either yes or no.
ohadron 4y ago
I mostly agree, but just to be the devil's advocate: When a toggle switch is 'off', it still looks like a toggle switch. When a checkbox is 'off', it's a square.
- domador 4y ago
  Yet does anyone think "this is decorative square" rather that "this is checkbox that's off" when they see a checkbox that is off, especially in the context of a list of settings?
  - DonHopkins 4y ago
    Who decorates control panels with squares?
    - domador 4y ago
      Precisely.
jimbomins 4y ago
They are only used in places where confusion benefits the user. It has to be deliberate so people accidentally opt in. I've assumed it's a dark pattern.
randomifcpfan 4y ago
I think the trend started with iPhone. Probably due to a combination of skeuomorphic design and needing a control that was easier to activate using touch. See this page for Apple’s guidance on when to use toggle vs checkbox: https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/toggles/ https://developer.apple.com/design/human-interface-guideline...
pg_bot 4y ago
It provides a bigger target for your fingers to hit on mobile. So if your design calls for people using small screens it generally is an improvement.
domador 4y ago
As to the "why", it's probably because some influential program or OS's UI started using toggle switches and then a lot of UI designers felt a need to follow along. It's unfortunate that bad UI designs are so contagious. (Some of my own pet peeves are skinny scrollbars on desktop apps and the fixation on making whitespace-infested UI that has no borders between different sections of the UI.) Going back to toggle switches, the look of the switch when it's on is symmetrical and nearly identical to when it's off, barring a rotational transformation and sometimes a subtle color difference. Checkboxes on the other hand look very different when on or off. I think one guiding principle for UI should be that different states of the UI should look significantly different from each other. In the case of toggle switches, the difference is just not significant enough.
hristov 4y ago
That one is easy. See where toggle switches are most popular. It is in situations where the site gets some benefit out of you being confused and putting the switch on the opposite setting. This is usually for the privacy settings required by the EU. It allows sites to reap the benefits of some confused incorrect settings while being in full compliance with EU regulations.
leaf8937 4y ago
After ticking a checkbox, you might have to press submit button. For the toggle switch, there is no submit button.
kortex 4y ago
Rimworld nails the best UX: Boolean settings are expressed like: Choose language [English] Run in background X Development mode v "v" indicates a check mark; HN won't render that symbol. The labels are left-justified and the toggles are left-justified in a column next to it, along with drop-downs. The X's are red and v's are green. Clicking X/v toggles state. The label is usually positive valence, but some are negative. "Disable tiny font" and "Disable game-specific cursor" are the only negatively worded toggles I could find. Nested menus (like ingredient lists) have a third state, yellow "~", which indicates some sub-items are ticked and some are not. It ticks all my boxes (pun intended) for good UX: unambiguous what the current state is, indicates state in multiple modalities, the label key/value reads left to right, keys are values are all justified nicely. The only slightly bad thing is red/green color blindness and non-universal association of color semantics. But since it's symbol plus color, it's still unambiguous.
- deleted 4y ago
  [deleted]
- duderific 4y ago
  > Nested menus (like ingredient lists) have a third state, yellow "~", which indicates some sub-items are ticked and some are not. This is called "indeterminate" state [0] and is part of the HTML checkbox spec [0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...
efields 4y ago
Both cases are 99% a content problem. Every consent item in a form should be highly scrutinized for language and presentation, and so much of the time its just 'do what everyone else is doing' without proper ux research on how your audience will engage with it.
abramN 4y ago
And I don't know that either really handle the null case all that well, i.e. if the value isn't set at all. In that case, does it default to on/checked? or off/unchecked? They almost need a hover-over or message that pops up to tell you the current state.
jmount 4y ago
I agree with the poster 100%. In so many UIs it is literally impossible to guess what drawing represents on and which represents off. Toggles, and even multi-toggles until there are at least 3 states are unreadable. It isn't even "just avoid skeuomorphism", it is just awfulness.
ss48 4y ago
I think it's because of a shift to mobile and setting screens that autosave. Using on/off switched is a common convention on mobile operating systems like iOS. When you are setting up something without hitting apply, the sense of activating a switch seems more like committing to the change compared to the checkbox.
llimos 4y ago
One advantage is that you can have a neutral state (in the middle), forcing the user to choose one way or the other. You can't do that with a checkbox.
AlexandrB 4y ago
Because UX "design" is often not about design but about cargo culting the latest trends.
mmaug 4y ago
Buuuuut, toggle switches are cooool! (I only get paid for [marketing] cool; not coding correctly [that's a client support problem])
Fire-Dragon-DoL 4y ago
I often struggle which of the two states of a switch represents on or off, sometimes barely distinguishable...
DonHopkins 4y ago
1991 video of the HCIL touchscreen toggle switches (University of Maryland) https://www.youtube.com/watch?v=wFWbdxicvK0 https://www.youtube.com/watch?v=wFWbdxicvK0 This early research at the Human-Computer Interaction Lab shows six different touchscreen based toggle switches allowing the control of two state devices. The user interfaces, ranging from button to sliders and rocker. The designs that require a sliding motion are safer to use when inadvertent change cause problems (which explains why devices such as the iPhone use a slider to unlock the phone). For more information see http://www.cs.umd.edu/hcil/touchscreens http://www.cs.umd.edu/hcil/touchscreens Don Hopkins and pie menus in ~ Spring 1989 on a Sun Workstation, running the NEWS operating system. https://www.youtube.com/watch?v=8Fne3j7cWzg https://www.youtube.com/watch?v=8Fne3j7cWzg After an 1991 intro by Ben Shneiderman we see the older 1989 demo by Don Hopkins showing many examples of pie menus on a Sun Workstation, running the NEWS operating system. This is work done at the Human-Computer Interaction Lab at the University of Maryland. A pie menu is a menu technique where the items are placed along the circumference of a circle at equal radial distance from the center. Several examples are demonstrated on a Sun running NeWS window system, including the use of pie menus and gestures for window management, the simultaneous entry of 2 arguments (by using angle and distance from the center), scrollable pie menus, precision pie menus, etc. We can see that gestures were possible (with what Don call "mouse ahead" ) so you could make menu selections without even displaying the menu. Don uses an artifact he calls "mousee" so we can see what he is doing but that extra display was only used for the video, i.e. as a user you could make selections with gestures without the menu ever appearing, but the description of those more advanced features was never published. Pretty advance for 1989... i.e. life before the Web, when mice were just starting to spread, and you could graduate from the CS department without ever even using one. This video was published in the 1991 HCIL video but the demo itself - and recording of the video - dates back to 1989 at least, as pictures appear in the handout of the May 1989 HCIL annual Open House. The original Pie Menu paper is Callahan, J., Hopkins, D., Weiser, M., Shneiderman, B., An empirical comparison of pie vs. linear menus Proc. ACM CHI '88 (Washington, DC) 95-100. Also Sparks of Innovation in Human-Computer Interaction, Shneiderman, B., Ed., Ablex (June 1993) 79-88. A later paper mentions some of the more advanced features in an history of the HyperTies system: Shneiderman, B., Plaisant, C., Botafogo, R., Hopkins, D., Weiland, W., Designing to facilitate browsing: a look back at the Hyperties work station browser Hypermedia, vol. 3, 2 (1991)101-117. PS: For another fun historic video showing very early embedded graphical links (may be the 1st such link) + revealing all the links/menu items + gestures for page navigation HCIL Demo - HyperTIES Browsing https://www.youtube.com/watch?v=fZi4gUjaGAM https://www.youtube.com/watch?v=fZi4gUjaGAM Demo of NeWS based HyperTIES authoring tool, by Don Hopkins, at the University of Maryland Human Computer Interaction Lab.
clintavo 4y ago
In my early saas products, I just used two radio options either labeled on/off or yes/no. I know that’s “wrong”, but it’s super clear
michaelcampbell 4y ago
Interesting; I found a youtube video yesterday of a guy doing the "things that are weird in the US as a foreigner", and one of them is that where he is from, light switches are "up is off, down is on" evidently because he found the US "up-on, down-off" behavior odd. As a native US citizen I wouldn't have even considered that to be nonstandard. Your "know right side is on" made me think of it. I don't debate your point as a whole, but not everything may be the same way worldwide you think it is.
IYasha 4y ago
Exactly. The first time I've seen those sliding switches I didn't get how to operate them. And some are even colored in a very unintuitive way. And after years on the market, as a bonus, you CANNOT actually drag them! CLICK or TAP to SLIDE. This is ridiculous!
- IYasha 4y ago
  Oh, no. They're even on arxiv.org ! :_(
efortis 4y ago
I'm not a fan of toggles, but they might be better because they usually have an extra text saying "On" or "Enabled" in addition to the label. For example: The label [ *] On A checkbox with a good label [1] is fine, and it's better in the sense that it has a third state (for indeterminate). [1] https://blog.uidrafter.com/guidelines-for-checkboxes https://blog.uidrafter.com/guidelines-for-checkboxes
- RjQoLCOSwiIKfpm 4y ago
  Is that really so? I cannot recall seeing any of them with such an extra text.
  - efortis 4y ago
    https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle https://developer.microsoft.com/en-us/fluentui#/controls/web...
    - RjQoLCOSwiIKfpm 4y ago
      Ah, right, thanks, I do recall that now. Is the disappearance of the additional "On/Off" label perhaps another trend layered on top of the toggle switch trend?
- hedora 4y ago
  The completely ambiguous: Enable the label [O @] Is becoming more popular.
  - lylejantzi3rd 4y ago
    Is it? Dark mode/light mode toggles are very new and are now everywhere. It's a single image of either a sun or a moon with no text whatsoever. Half the sites show the sun when light mode is on and half the sites show the moon when light mode is on. Is the toggle supposed to reflect the current state? Or is it supposed to tell you what's going to happen when it gets clicked?
JoeyBananas 4y ago
A toggle switch is better because it has an animation.
- ungamedplayer 4y ago
  Is animation inherantly better ?
  - JoeyBananas 4y ago
    Many UI frameworks these days seem to think so.
- toast0 4y ago
  You can animate a check too, if you like animation. Gotta make it a stylized check while you're at it, instead of just a filled in box or an x
  - jordanwallwork 4y ago
    Absolutely, just google 'css animated checkboxes' and you'll get a tonne of solutions
- 8bitsrule 4y ago
  Just wait ... before long it'll be a smiley face for On, a frown for Off. After that, 'On' is accompanied by pschedelic-colored wavefronts crossing the page.
- beardyw 4y ago
  I miss Clippy ...
- xigoi 4y ago
  I sure hope you're checking for prefersReducedMotion.
gorbachev 4y ago
UI designers need to stop following fads. You see bad ideas spread like forest fires all the time.
birdymcbird 4y ago
maybe follow up question is what problem being solved. do users not intuit checkbox button? is this some problem being solved or more of fad?
- netsharc 4y ago
  Probably because checkboxes in real life exist mostly on paper, but when the iPhone came out, the skeumorphic designers wanted to make it look like a sleek device. E.g. the sound recorder app had an image of a big retro-style microphone, and a checkbox would look out of place there. Probably a button that stays depressed and "lights up" when touched would be more similar to a checkbox. Touch again to uncheck and it will go undepressed.
kazinator 4y ago
You see them used because they are skeumorphic, and there is a general trend in user interfaces to go skeumorphic across successive generations.
- fsckboy 4y ago
  radio buttons are skeuomorphic and much easier to understand how to operate and get the result you want. Slider toggles are pure fashion and skeuomorphic only in that they are as difficult to use as some recessed sliders are, but without a skeuomorphic fingernail to grab them. There are physical things that are difficult to operate irl, and there's no reason to skeuomorph difficult things to use. but even better, what's wrong with letting me choose what I want? You can have whatever UI you like, it doesn't need to affect me. That's the whole idea behind a personal computer, it's my slave, it's my servant, it does what I want, to make my life the way I want it. Software is the first human technology to offer this promise, it's only the weak of mind, ego and will who see it as a way to impose their stunted vision on other people.
  - kazinator 4y ago
    Slider toggles are skeumorphic in that there are such physical switches and they look like those switches. Those classic radio buttons which are circles with a black dot are skeumorphic in the same sense that checkboxes are: they are an imitation of elements seen on paper forms. You don't have to "grab" slider controls; if you just click anywhere in their display area to toggle them. E.g. try an example here: https://www.w3schools.com/howto/howto_css_switch.asp https://www.w3schools.com/howto/howto_css_switch.asp The sliding is just an animation sequence which replaces the appearance/disappearance of the checkbox with alternative images. In the above example, you in fact cannot grab anything and slide it left to right. All you can do is click. If you're confronted with some UI in which you have to actually pull a slider left or right and cannot just click on it, complain to the vendor.
  - kazinator 4y ago
    Your idea behind the personal computer unfortunately no longer exists outside of the world of FOSS. A device with a proprietary OS is now not really yours. It's something that you depend on for access to essential services and which you got for a deeply discounted price in exchange for giving up control, personal information, privacy and access to your eyes and ears by advertisers.
kerpotgh 4y ago
[dead]
parasti 4y ago
I don't get it either. I never know which side is on and/or which background color means on, unless they're using green/red. You say "right side is on", but I never even realized this until now.
- kioshix 4y ago
  I've encountered sliders that were colored red/gray, where the ON state was to the left and red was on. It was a cookie consent thing, and I was confused. I guess that was the purpose.
- foreigner 4y ago
  Be careful, red/green colourblindness is the most common kind of colourblindness.
  - teamonkey 4y ago
    Also colour associations are cultural, not universal
    - parasti 4y ago
      Are they? Seems to me color associations are conventional, not cultural.
    - jeroenhd 4y ago
      As are left and right positions of a button. Really, the only thing I can think of that clearly indicates the state of these buttons is the ⏽ vs ⭘ distinction because those glyphs have been made specifically for this purpose.
      - kps 4y ago
        I know ⏽ means on, but if I see ⏽, does that mean it's currently on, or that it will be on if I move the toggle to the location of the ⏽? Off ( ▢) On (⏽▢) (⭘▢)
scyzoryk_xyz 4y ago
Checkboxes come from older mouse/cursor UI’s, toggles come from newer touchscreen UI’s.
- mikeyla85 4y ago
  Checkboxes are just as usable as toggles on touchscreen. It doesn't have to do with the tech, it's just that toggles are newer.
  - kevin_thibedeau 4y ago
    Checkboxes are slightly problematic in touch UIs because they are generally scaled to a similar size as text and small enough that they are occluded by a fingertip. Sliders leak information about their state while you touch them.
  - scyzoryk_xyz 4y ago
    I wouldn’t dare make comments on what’s more or less usable in an HN thread since everyone here is such an expert on these things. Toggles came along with iOS when the UI was skeumorphic ca. 2008. Don’t know whether it has to do with tech, but that’s when we first got those. As far as actual evidence, I do UX testing of a touchscreen/cursor application and we have both scattered throughout. I haven’t ever seen anyone have any difficulty understanding, using or differentiating between either. In our results this simply isn’t a problem with investigating.
    - barneygale 4y ago
      > I haven’t ever seen anyone have any difficulty understanding, using or differentiating between either. In our results this simply isn’t a problem with investigating. I'm not sure if this was meant as reassuring, but for me it only reinforces my view that UI/UX folks don't have a clue what they're doing.
  - boomboomsubban 4y ago
    Checkboxes can be just as usable but they're often smaller and often more tightly spaced, which can be a pain to navigate on a touchscreen. I'm not saying that's a good reason, but it is a reason besides being newer.
iforgotpassword 4y ago
Because everything just gets worse as you age. Sure, my dad said it too back then, but they just didn't get how the world moved on and improved. This time around though it's real, everything gets more stupid and dumb and I hate it.
- orlp 4y ago
  It's a two steps forward, one step backwards thing. The things you are noticing really are a step backwards, but that doesn't mean progress overall is going backwards.
- sofixa 4y ago
  1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works. 2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it. 3. Anything invented after you're thirty-five is against the natural order of things. Douglas Adams
  - Dalewyn 4y ago
    I'm early- to mid- 30s (<35), and I hate basically every UI shenanigan that was invented in the past 15 years or so. Which is to say, Douglas Adams might need to adjust the time window in #2 a bit.
    - theandrewbailey 4y ago
      I'm a member of Generation Y, because that's what we were before all this weird sh*t happened.
  - ilyt 4y ago
    To be entirely fair invent -> improve -> cost cut often leads to worse UIs. Like when car manufacturers decided that knobs are bad and on top of people hating it it was proved to cause more distractions to the drivers https://www.vibilagare.se/english/physical-buttons-outperform-touchscreens-new-cars-test-finds https://www.vibilagare.se/english/physical-buttons-outperfor... Part of that is trying to have "one size fits all", why waste time perfecting design for multiple cases where you can just shove touch screen oriented design to desktop OS and "just" waste some space ?
seanhunter 4y ago
My pet peeve is the labeling of these things. 1)I'm going to give you an easy one to start. You see a toggle switch. It is set to on (probably - the little colour bar in the switch is coloured in). It is labeled "Disable fnurbification". Okay now what? Does "on" mean I'm going to be fnurbified? Does switching the switch disable the fnurbification so I actually have to switch it to "off"? No that's crazy. "on" means "disabled", cognative dissonance aside. 2) You see a toggle switch. It is set to on like before. It is labeled "Disable fnurbification". We learned before that "on" meant "disabled", but that filled us with a vague sense of unease. For whatever reason we try toggling the switch. The text changes to just "Fnurbification" Okay really now what? Is my fnurbification on? You try flicking the switch back. The colour fills in and the label changes to "Disable fnurbification" again. Okay what are we supposed to do? What's happened is the designer has read a post on medium about accessibility and that screen readers don't read out the colour of the filled in part of a toggle switch, and has decided to help by changing the label when the state of the switch changes. The problem is now the label could either be describing the current state or be describing what happens when you flip the switch. And there's really no way of knowing. I've seen this very often with the UX for boolean selectors where they use things like buttons rather than toggle switches. Does pressing the button do the thing it says on the label or does the label describe where we are now and pressing the button will reverse that? No way to be sure. Postscript: Notice that whatever you decide is correct in the second case could change what you would do in the first case if the first type of selector is one that would change label when you toggle it.
- shreyshnaccount 4y ago
  A checkbox could have the same issues. Both ust represent binary state
- RobMurray 4y ago
  It's very common for developers to make accessibility worse by doing things like this. I have seen things where the two states to a screen reader are something like: "disable foo toggle button pressed" and "enable foo toggle button not pressed". Why not just a checkbox labeled "foo"?
lgreiv 4y ago
To me, the semantic difference between the two is that I expect a toggle to cause an immediate effect whereas a checkbox merely holds the value to be applied later. Applied to a client/server web application, I would expect a toggle to immediately cause a request to the backend. I’d expect a checkbox to be used in a form which is sent as a whole on submit.
- ilyt 4y ago
  I'd expect it to work on submission only if I saw actual submit button, regardless of what else is in config. I also strongly dislike apps that do the instant thing, coz there is no way to undo something if I made a mistake (say removed some value that I shouldn't)
- crazygringo 4y ago
  This is exactly it, 100%. But it's taken some time for UX paradigms to coalesce around this -- simply because checkboxes used to be used for both, until Apple "invented" toggles for instantly-applied settings in iOS. Now that Apple finally implemented toggles in System Settings in macOS Ventura, the paradigm is largely consistent in desktop software on Macs. Toggles apply a setting instantly, while checkboxes are used within an "OK/Cancel" dialog. But I think because it's taken so long for toggles to "spread", a lot of users and developers have an instinctual understanding that toggle = instant, but haven't always been able to articulate it.
- jayd16 4y ago
  What is your expected UX for a toggle with poor network reliability?
  - lgreiv 4y ago
    I have seen several variations that I found consistent with the metaphor of a switch. Broadly, these could be divided in implementations that offered a loading state (switch goes transparent until persisted, overlaid spinner etc.) and implementations that flicked the switch back when the request failed and provided a very noticeable status update (hint, animation, growl). My preference for systems that work with unreliable persistence is the former, albeit that is purely personal and not founded in a deeper rationale.
fsckboy 4y ago
the left-right slidey things were an Apple affectation, no doubt introduced just to be different, after all, Apples were for the rest of us. We're different. they have much less usability what stinks about them is you can never quite figure out or remember if you're supposed to just tap, only tap on the "other end", or actually slide the slider.
- saurik 4y ago
  FWIW, the ones on iOS have always been something you could drag. As far as I have ever understood, all of the UI controls on iOS were designed to be skeuomorphic in a way that directly made sense for someone futzing with their fingers: you push buttons, you scroll a WHEEL to work with selection boxes, and flip switches to toggle options (which also, notably and at the time almost specifically on Apple products, take place immediately with no concept of "Apply", and aren't part of a "form" metaphor).
baggsie 4y ago
Touch requires a bigger target area and big checkboxes look terrible.
- ComodoHacker 4y ago
  the checkbox itself doesn't have to be as big as its hitbox.
onion2k 4y ago
One thing that you lose if you replace checkboxes with toggle switches, at least on webpages, is the third 'indeterminate' state that JavaScript offers. https://css-tricks.com/indeterminate-checkboxes/ https://css-tricks.com/indeterminate-checkboxes/
- stonecharioteer 4y ago
  I've never understood what that state is supposed to indicate. It only makes sense when the checkbox has nested checkboxes underneath and an indeterminate state only indicates that the user has some of the children selected. But as a user I'd never be able to select this indeterminate state, since, by definition, it is indeterminate. for such scenarios, I'm not sure what is good design.
  - leokennis 4y ago
    Food ordering screen: [ ] Add sauces to my food [ ] Mayonnaise [ ] Ketchup [ ] XO Sauce If I want all sauces I click the first box: [v] Add sauces to my food [v] Mayonnaise [v] Ketchup [v] XO Sauce If I only want Ketchup and click that: [-] Add sauces to my food [ ] Mayonnaise [v] Ketchup [ ] XO Sauce
    - scrollaway 4y ago
      Better ordering screen: Extra sauces (1 selected): [ ] Mayonnaise [v] Ketchup [ ] XO Sauce I understand what indeterminate checkboxes are, but I don't remember them ever actually making sense anywhere I found them.
      - msh 4y ago
        When well implemented the clicking [-] would unselect all and clicking again select all. It does not matter with 3 options and 1 selected, but its nice if its 20 options and 7 random ones selected.
        deleted 4y ago
nitwit005 4y ago
They're optimizing for the website looking cool and trendy, which is an ever shifting standard.
jhanschoo 4y ago
I think toggle switch has a different connotation from checkboxes. Checkboxes were primarily designed for questions where a user wants to choose a subset of related options for the same topic. (e.g. Which colors are acceptable to you? Red yes/no, Blue yes/no, Green yes/no) The toggle switch connotes an A/B answer to a single question. (e.g. Dark theme? yes/no)
hknmtt 4y ago
YES, I hate these things with vigour!
aaron695 4y ago
[dead]
thewebcount 4y ago
This is kind of embarrassing to admit, but I couldn’t figure out how to change the state of a toggle switch for a really long time. I kept trying to slide the switch left or right. Sometimes it worked, but often it didn’t. It wasn’t until I had been using an iPhone for a couple years that I discovered you’re just supposed to press it, not slide it. What a stupid design.
- meigwilym 4y ago
  Years ago I built a cms using these sliders, and one of the users was having problems. I double checked and it worked fine. So I said I'd watch him use it to see what was wrong. He clicked the slider and dragged it to the other side. My jQuery code was listening for 'click' events, which was the source of the bug. Since then I'm careful to use them "properly".
- bbx 4y ago
  On iOS, you can either press it or slide it. The problem is that a lot of websites have started using them and only implement the click/tap event, not the mouse press and move event, or the slide event. So they end up being quite misleading.
- boomboomsubban 4y ago
  Similar. In my defense, lock screens on phones used to have a toggle switch you needed to slide.
  - Terretta 4y ago
    Those were not a toggle. They were a sliding latch: https://i5.walmartimages.com/asr/5cd445f6-b24c-4e39-8c10-0a0311cd96b1_1.c65803773c3fc59dc681260298d6fb2b.jpeg https://i5.walmartimages.com/asr/5cd445f6-b24c-4e39-8c10-0a0...
    - ilyt 4y ago
      And UIs started using sliding latch icon for toggles, which is the point of contention here
axismundi 4y ago
[ ] Fnurbication When enabled, created nurbs are automatically converted into fluffy nurbs.
bandie91 4y ago
"the right side is on" – i'm afraid to bring up, is it so in RTL locales too?
- Adverblessly 4y ago
  Randomly checking one of my apps, the answer is "no" (i.e. the left side is on), but if you are looking at some random website that appears to have been localized, there isn't really any way of judging if they decided to switch the toggle direction or not.
cik 4y ago
I'm glad that you know the right is on.. but I don't. I live in a country with a right to left language system. Things locally, done in the local language are right side is off. Things internationally behave the way you've mentioned. Checkboxes are infinitely better, because they're not language dependent. This is an incredible source of frustration - and one that comes up often. As a native speaker of multiple languages, I always pause and do a double-take in order to actually "see" the language, given that I usually don't notice.
- kzrdude 4y ago
  I thought the color/highlight was the only hint, it wasn't clear to me if left or right is on.
drchaim 4y ago
also me, I always double check. when there is no label: On/Off is even worst.
captainmuon 4y ago
Honestly, I think it is just a trend. It started with the iOS settings UI, everybody copied it and is still copying it almost 15 years later. Look at the settings in Windows, Android, macOS (Ventura), Gnome. List/Detail view, and the detail pane is itself a list of mostly switches. One downside is as you mentioned the confusion whether it is on or off (although nowadays most UIs make it double clear with color and some with additional text). But also because the switch is on the right hand side, it is further away from the text, and is visually inconsistent with radio boxes. And it is part of this "iOS settings" design language which itself is problematic, because it doesn't try to have specialized panes for each setting but crams everything into lists. (This is not the fault of the toggle, but how it is used.) One point in defense of the toggle is maybe that it is not clear to everybody that you can usually click the text on a checkbox, making the click target rather small. But you generally can't click the text on a toggle, so it is moot.
benj111 4y ago
I assume it's part of the 'make everything usable on a phone' thing, regardless of whether you are actually using a phone, so the thing that only contains a half screen of information is now spread over 4 screens. But then you also have the designers that like to make things pretty, rather than give you any hint that some text is in fact clickable.
detay 4y ago
Worst ui decision of all times. Toggling is never enough so you color it to green for true and gray for false.

kris_wayton 4y ago

The short delay in a toggle switch turning on, as opposed to a checkbox, is also irritating. Like, if it's used to expose an additional menu option, for example. That stutter of waiting breaks the flow.

br1brown 4y ago

The choice of using a toggle switch or a checkbox depends on the context. Toggles, switches and checkboxes are all components used to switch between states, often on or off, but not always (in toggles you can also have multiple states) UI and UX studies suggest how they would be best used to aid readability A toggle switch is best used for actions or options that have an immediate effect on the user interface and do not have to be confirmed or reviewed. A checkbox is more suitable when there are further changes, are within a form or need to be revised before continuing. When designing forms, it is important to focus on the context of use rather than the function of the controls... I recommend watching this video https://www.youtube.com/watch?v=wFWbdxicvK0 https://www.youtube.com/watch?v=wFWbdxicvK0 This research shows six different ways of using the mobile phone screen to control devices with only two states (on/off). There are buttons, sliders and rockers. The ways that require sliding are safer because they avoid problems caused by accidental touches. For this reason, the iPhone uses a slider to unlock the phone

nroets 4y ago

People older than 30 grew up filling in paper forms for everything and know check boxes well. Younger people are less familiar with check boxes, so the best real world analogy is light switches. They are also expecting changes to happen instantly.

jeroenhd 4y ago
I don't think light switches are a good analogy. My light switches don't turn green or red when I flip them and I don't need to slide them either. Furthermore, many light switches only toggle the state of the light because it's common enough to have multiple switches hooked up to the same light source. The only analogy I can think of is the physical slider built into some smartphones for sound on/off. I don't think toggle sliders are common at all these days.
_dain_ 4y ago
>Younger people are less familiar with check boxes I get that people fill out paper forms less than they used to, but give the younger generation some credit here. It's not like we live in a Star Trek future world where paper is an antique curiosity. It's still alive and well in schools, for example, lockdowns notwithstanding. I'm 100% sure they still know how to tick a box, be it by pen or by mouseclick or tapping a touchscreen. For my part, I only recently learned that "radio buttons" were named after an actual kind of button that existed on old fashioned radios. I never encountered such radios as a kid, but I had no trouble at all using radio buttons in computer UIs. There are only so many ways to make a button.

smcl 4y ago

You're not going crazy. I think it's revealing that these elements are common in the cookie consent forms, where if don't click the big green "I give up, give me all your cookies" button you have to try to understand: - which way means "on" (because the UI element isn't clear) - whether "on" means "no cookies" or "actually I would like the cookies after all" (because the label is poorly worded)

osrec 4y ago

I think it's just because Apple did it and people got used to it. There are a lot of things I personally hate about the functional aspects of Apple's UI components, even though they look very pretty.

globular-toast 4y ago

Fashion. That's it.

kypro 4y ago

Good UX patterns are generally those which are recognisable and intuitive to the user. Checkbox's in the real world are used more in confirmation, or a yes/no pattern. In the real world you can check a checkbox if it applies, but you don't uncheck a checkbox when something doesn't apply. You also don't expect some state change to occur from merely checking a checkbox. Checkboxes are still used everywhere they make sense. "I accept these T&Cs" for example would almost certainly use a checkbox, not a slider for the reasons I mentioned. For on / off patterns though checkboxes are less intuitive. When you slide a physical toggle switch in the real world you're typically switching a device from one state to another state - and you typically have the ability to switch back and forth. Checkboxes are not used in this way in the real world so it's less intuitive to use them like this in digital UIs. I don't think the issue you have with sliders is universal. If you design a slider well it should be very clear what the state is. For on / off patterns changing the colour of the slider from green to red can provide a clear visual hint about the active state.

Vanit 4y ago

I think they make sense if used correctly; the act of toggling immediately changes the state of the app to match the state of the toggle. If you're tracking a dirty state and the action doesn't occur until a Save/etc button is clicked, it should be a checkbox.

jeroenhd 4y ago

Apple used sliding checkboxes. Then everyone copied Apple. It's an annoying industry trend but in terms of clarity I don't think it matters at all in this case. For a while people also used push buttons with "lights" indicating on/off but those have been phased out almost entirely now. I don't think there's much of a difference between a checkbox and a toggle if you size them right. Toggles are easier to size up to touch screen size so on touch screens they make sense. On desktop, in non-touch mode, the oversized control kind of irks me, though. "On" versus "off" is always clear, but the question "did I set it correctly" depends on the phrasing of the checkbox labels. What does "FizzBuzz enabled when widgeting" being on or checked mean? Design wise, I think generally the toggles are reserved for cases when you turn on a feature or service, and checkboxes just modify that feature's/service's behaviour. "VPN" is a toggle, but "auto-connect VPN" is a checkbox. "Accessibility" is a toggle, but "always overlay mouse cursor" is a checkbox. On touch screens the bigger toggle buttons make more sense so I think on Android/iOS you'll always see them in the place of a checkbox.

kryogen1c 4y ago
> toggles are reserved for cases when you turn on a feature or service, and checkboxes just modify Oh wow. I've never thought about this before but that is very intuitive. Toggles have a physical, analog equivalent, like a switch or lever. Checkboxes don't really map to meatspace; they're strictly a logical construct. Makes sense that toggles do big changes and checkboxes tweak.
- wongarsu 4y ago
  Checkboxes map into meatspace, they copy checkboxes/tickboxes in paper forms. The things they make you tick to confirm that they can phone you, or the thing you fill out when voting on a paper ballot or in a multiple choice test. Admittedly not as physical as buttons, but they were designed as a copy of an existing thing.
  - zestyping 4y ago
    That analogy seems to support the idea that checkboxes require a "save" button to apply the change. In real life, merely ticking a box on a piece of paper doesn't do anything; you have to give the piece of paper to someone. On the other hand, a toggle switch (like a light switch) has an immediate effect.

eternityforest 4y ago

I often get left and right confused, so I'm not really a fan of using left/right as code. It takes maybe 2 seconds max to think about it, but it's annoying. Worse is the labeling. When something says "On" it's not clear whether you mean it is on, or the button turns it on. As far as I'm concerned there is no correct choice, because it's not fully unambiguous. The aesthetics, however, are pretty great, there's a reason designers don't seem to like checkboxes. Checkboxes feel kinda odd. On paper they are used to denote membership in a set more than general boolean status. When the question is a boolean, like "Did you feel sad today?" there's usually one box for yes and one for no. The aesthetics are good enough I'd say it's even worth adding an unambiguous state indicator like (Disabled) to clear the doubt. But, radio buttons with separate on/off boxes can also be very familiar and aesthetic, and I'd probably go with those more often.

phkahler 4y ago
I wonder if the issue with checkboxes is that real checkboxes can not be unchecked. "Check all that apply" makes sense when the boxes are all empty. It's doesn't feel the same when it's a list of cookies that are all checked by default.

_dain_ 4y ago

I'm convinced they're bad UI based on how I've seen my parents try to use them on touch devices. They try to slide them horizontally, not realizing you're just meant to tap them. And the slide motion ends up doing something to the page or menu they're part of. At best it's a no-op, at worst the slide causes a transition to a different screen and they get confused. They're antiskeumorphic. The design actively sabotages user understanding.

mattbee 4y ago

In the 90s I used 3 different desktop OSes where the UI followed a style guide, and that style guide evolved gradually over years, allowing you to glance at a control and be familiar with its possibilities. Now even on one device, the user sees 10 kinds of different controls and new ones that are thrown at them all the time. The problem is surely that you can't rely on the user _recognising_ the control you've built. You have to design as if every user might be parsing it for the first time.

peterkelly 4y ago
Usability has taken a nosedive with the rise of web apps. Every company wants to have their own special branding in the form of a "design system", and there's a whole industry of designers coming up with different non-standard ways to do things.
- pornel 4y ago
  It's not just web apps. macOS has a haphazard mix of old-style checkboxes, large iOS-style toggles, newer SwiftUI smaller iOS-like toggles, old menubar checkboxes, new iOS-control-center button toggles, and a HomeKit universe of ad-hoc toggles designed for touch that make no sense for a mouse UI.

dusted 4y ago

The ones I hate the most is the ones that also change the label, because both description and indicator changes, it's just confuzing.. I like the "positive description: [ ]" pattern. Ghosts can breathe fire [ ] Radians are better [X] There's no doubt what the state is.

sjcsjc 4y ago
Apparently there can be doubt - see this comment https://news.ycombinator.com/item?id=34439689 https://news.ycombinator.com/item?id=34439689

patchorang 4y ago

Designers like how they look better than a checkbox.

cameronh90 4y ago

When I was much younger, I had trouble understanding checkboxes - in particular the ones with an X in them because at the time I thought X means no. So I would assume checkboxes with an X meant that you were deselecting them. Is it possible it's really all just what we're used to?

kalleboo 4y ago
This was also a problem with the Playstation controller. The controller has ○ and × buttons, and in Japan "×" can mean no/incorrect and "○" can mean yes/correct, so in the menus you press ○ to confirm and × to deny. When they localized it for the west, they flipped the meaning so that × means yes as in "check the box" and ○ means no as in "zero" (like on a power switch with 1 and 0) So when you play games from another region, what controls you use in menus changes.
- ilyt 4y ago
  I'm still annoyed the big 3 all have different position for usual OK/cancel

cjg 4y ago

I saw a cookie opt-out a couple of days ago where right was off.

Dr_ReD 4y ago

Ah, so I'm not the only one...

JaceLightning 4y ago

The color? Green/blue is on. Gray is off.

seydor 4y ago

Ask the people at YouTube who still think "outline-no outline" on a black and white theme is the best idea to indicate whether you have liked a video or not. Apparently they tested it with aliens because i, as a mere human, keep being confused and often unlike vids by mistake

layer8 4y ago

I suspect one reason why toggle switches became widespread, aside from touch interface cargo-culting, is that in contexts like the iOS Settings app, they can fit the pattern of label-on-the-left, control-on-the-right, whereas checkboxes (and radio buttons) need to be on the left of the label, unlike other controls. (Or on the right for RTL languages, I suppose.) Checkboxes can thus require a little more consideration in how to layout a dialog. I still believe that checkboxes are the better control, because they can be toggled with a single click/tap without having the conceptual disconnect that a physical sliding toggle implies that you would need to drag it across, and because the checkbox state is visually unambiguous regardless of coloring (and 1/0 labelling). With checkboxes, there is also the general convention that clicking on the label (and anywhere between the checkbox and the label) toggles the checkbox, meaning a larger click target (this is one thing that <label for=…> achieves in HTML, by the way), whereas for sliding toggles this is not a common convention, making them less convenient to use with a pointing device. Another benefit of checkboxes is that the label is always directly adjacent to the checkbox, meaning you don’t need any extra visual aids (horizontal lines, more vertical whitespace) to prevent confusion about which control goes with which label, which can be an issue when there’s a lot of horizontal whitespace between label and control in a list of controls.

SketchySeaBeast 4y ago
> checkboxes (and radio buttons) need to be on the left of the label Does it though? What about a checkbox makes it NEED to be on the left?
- zestyping 4y ago
  English text aligns on the left. So the checkboxes need to be on the left to be close to the text. If checkboxes are on the right, they are either far away from the text or (I shudder to imagine) horizontally misaligned.
  - SketchySeaBeast 4y ago
    While that does make sense, a grid layout helps solve some of that - though it could be hard to keep track of what checkbox belongs to what row. I'm not arguing that we switch up where checkboxes go, I'm just asking if our assumptions are as valid as we think they are.

throw7 4y ago

I recently wanted to unsubscribe from one of those corporate emails. When you click to unsub, the web site brings up "Notifications: " and a toggle next to it. It is not clear which way does what.

voganmother42 4y ago

As long as its clearly marked "Mode Execute Ready"…

czbond 4y ago

Mobile usability that can be performed with a single hand/finger is my guess. Creating a UI that is both web & mobile friendly.

throw1234651234 4y ago
Not a guess, this is "the" answer - toggles came around as mobile UI.

kardianos 4y ago

I like sliders for a three state: NULL | On | Off. This can be useful in a search area where I want both an explicit yes/no, but also have an option for either yes or no.

ohadron 4y ago

I mostly agree, but just to be the devil's advocate: When a toggle switch is 'off', it still looks like a toggle switch. When a checkbox is 'off', it's a square.

domador 4y ago
Yet does anyone think "this is decorative square" rather that "this is checkbox that's off" when they see a checkbox that is off, especially in the context of a list of settings?
- DonHopkins 4y ago
  Who decorates control panels with squares?
  - domador 4y ago
    Precisely.

jimbomins 4y ago

They are only used in places where confusion benefits the user. It has to be deliberate so people accidentally opt in. I've assumed it's a dark pattern.

randomifcpfan 4y ago

I think the trend started with iPhone. Probably due to a combination of skeuomorphic design and needing a control that was easier to activate using touch. See this page for Apple’s guidance on when to use toggle vs checkbox: https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/toggles/ https://developer.apple.com/design/human-interface-guideline...

pg_bot 4y ago

It provides a bigger target for your fingers to hit on mobile. So if your design calls for people using small screens it generally is an improvement.

domador 4y ago

As to the "why", it's probably because some influential program or OS's UI started using toggle switches and then a lot of UI designers felt a need to follow along. It's unfortunate that bad UI designs are so contagious. (Some of my own pet peeves are skinny scrollbars on desktop apps and the fixation on making whitespace-infested UI that has no borders between different sections of the UI.) Going back to toggle switches, the look of the switch when it's on is symmetrical and nearly identical to when it's off, barring a rotational transformation and sometimes a subtle color difference. Checkboxes on the other hand look very different when on or off. I think one guiding principle for UI should be that different states of the UI should look significantly different from each other. In the case of toggle switches, the difference is just not significant enough.

hristov 4y ago

That one is easy. See where toggle switches are most popular. It is in situations where the site gets some benefit out of you being confused and putting the switch on the opposite setting. This is usually for the privacy settings required by the EU. It allows sites to reap the benefits of some confused incorrect settings while being in full compliance with EU regulations.

leaf8937 4y ago

After ticking a checkbox, you might have to press submit button. For the toggle switch, there is no submit button.

kortex 4y ago

Rimworld nails the best UX: Boolean settings are expressed like: Choose language [English] Run in background X Development mode v "v" indicates a check mark; HN won't render that symbol. The labels are left-justified and the toggles are left-justified in a column next to it, along with drop-downs. The X's are red and v's are green. Clicking X/v toggles state. The label is usually positive valence, but some are negative. "Disable tiny font" and "Disable game-specific cursor" are the only negatively worded toggles I could find. Nested menus (like ingredient lists) have a third state, yellow "~", which indicates some sub-items are ticked and some are not. It ticks all my boxes (pun intended) for good UX: unambiguous what the current state is, indicates state in multiple modalities, the label key/value reads left to right, keys are values are all justified nicely. The only slightly bad thing is red/green color blindness and non-universal association of color semantics. But since it's symbol plus color, it's still unambiguous.

deleted 4y ago
[deleted]
duderific 4y ago
> Nested menus (like ingredient lists) have a third state, yellow "~", which indicates some sub-items are ticked and some are not. This is called "indeterminate" state [0] and is part of the HTML checkbox spec [0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...

efields 4y ago

Both cases are 99% a content problem. Every consent item in a form should be highly scrutinized for language and presentation, and so much of the time its just 'do what everyone else is doing' without proper ux research on how your audience will engage with it.

abramN 4y ago

And I don't know that either really handle the null case all that well, i.e. if the value isn't set at all. In that case, does it default to on/checked? or off/unchecked? They almost need a hover-over or message that pops up to tell you the current state.

jmount 4y ago

I agree with the poster 100%. In so many UIs it is literally impossible to guess what drawing represents on and which represents off. Toggles, and even multi-toggles until there are at least 3 states are unreadable. It isn't even "just avoid skeuomorphism", it is just awfulness.

ss48 4y ago

I think it's because of a shift to mobile and setting screens that autosave. Using on/off switched is a common convention on mobile operating systems like iOS. When you are setting up something without hitting apply, the sense of activating a switch seems more like committing to the change compared to the checkbox.

llimos 4y ago

One advantage is that you can have a neutral state (in the middle), forcing the user to choose one way or the other. You can't do that with a checkbox.

AlexandrB 4y ago

Because UX "design" is often not about design but about cargo culting the latest trends.

mmaug 4y ago

Buuuuut, toggle switches are cooool! (I only get paid for [marketing] cool; not coding correctly [that's a client support problem])

Fire-Dragon-DoL 4y ago

I often struggle which of the two states of a switch represents on or off, sometimes barely distinguishable...

DonHopkins 4y ago

1991 video of the HCIL touchscreen toggle switches (University of Maryland) https://www.youtube.com/watch?v=wFWbdxicvK0 https://www.youtube.com/watch?v=wFWbdxicvK0 This early research at the Human-Computer Interaction Lab shows six different touchscreen based toggle switches allowing the control of two state devices. The user interfaces, ranging from button to sliders and rocker. The designs that require a sliding motion are safer to use when inadvertent change cause problems (which explains why devices such as the iPhone use a slider to unlock the phone). For more information see http://www.cs.umd.edu/hcil/touchscreens http://www.cs.umd.edu/hcil/touchscreens Don Hopkins and pie menus in ~ Spring 1989 on a Sun Workstation, running the NEWS operating system. https://www.youtube.com/watch?v=8Fne3j7cWzg https://www.youtube.com/watch?v=8Fne3j7cWzg After an 1991 intro by Ben Shneiderman we see the older 1989 demo by Don Hopkins showing many examples of pie menus on a Sun Workstation, running the NEWS operating system. This is work done at the Human-Computer Interaction Lab at the University of Maryland. A pie menu is a menu technique where the items are placed along the circumference of a circle at equal radial distance from the center. Several examples are demonstrated on a Sun running NeWS window system, including the use of pie menus and gestures for window management, the simultaneous entry of 2 arguments (by using angle and distance from the center), scrollable pie menus, precision pie menus, etc. We can see that gestures were possible (with what Don call "mouse ahead" ) so you could make menu selections without even displaying the menu. Don uses an artifact he calls "mousee" so we can see what he is doing but that extra display was only used for the video, i.e. as a user you could make selections with gestures without the menu ever appearing, but the description of those more advanced features was never published. Pretty advance for 1989... i.e. life before the Web, when mice were just starting to spread, and you could graduate from the CS department without ever even using one. This video was published in the 1991 HCIL video but the demo itself - and recording of the video - dates back to 1989 at least, as pictures appear in the handout of the May 1989 HCIL annual Open House. The original Pie Menu paper is Callahan, J., Hopkins, D., Weiser, M., Shneiderman, B., An empirical comparison of pie vs. linear menus Proc. ACM CHI '88 (Washington, DC) 95-100. Also Sparks of Innovation in Human-Computer Interaction, Shneiderman, B., Ed., Ablex (June 1993) 79-88. A later paper mentions some of the more advanced features in an history of the HyperTies system: Shneiderman, B., Plaisant, C., Botafogo, R., Hopkins, D., Weiland, W., Designing to facilitate browsing: a look back at the Hyperties work station browser Hypermedia, vol. 3, 2 (1991)101-117. PS: For another fun historic video showing very early embedded graphical links (may be the 1st such link) + revealing all the links/menu items + gestures for page navigation HCIL Demo - HyperTIES Browsing https://www.youtube.com/watch?v=fZi4gUjaGAM https://www.youtube.com/watch?v=fZi4gUjaGAM Demo of NeWS based HyperTIES authoring tool, by Don Hopkins, at the University of Maryland Human Computer Interaction Lab.

clintavo 4y ago

In my early saas products, I just used two radio options either labeled on/off or yes/no. I know that’s “wrong”, but it’s super clear

michaelcampbell 4y ago

Interesting; I found a youtube video yesterday of a guy doing the "things that are weird in the US as a foreigner", and one of them is that where he is from, light switches are "up is off, down is on" evidently because he found the US "up-on, down-off" behavior odd. As a native US citizen I wouldn't have even considered that to be nonstandard. Your "know right side is on" made me think of it. I don't debate your point as a whole, but not everything may be the same way worldwide you think it is.

IYasha 4y ago

Exactly. The first time I've seen those sliding switches I didn't get how to operate them. And some are even colored in a very unintuitive way. And after years on the market, as a bonus, you CANNOT actually drag them! CLICK or TAP to SLIDE. This is ridiculous!

IYasha 4y ago
Oh, no. They're even on arxiv.org ! :_(

efortis 4y ago

I'm not a fan of toggles, but they might be better because they usually have an extra text saying "On" or "Enabled" in addition to the label. For example: The label [ *] On A checkbox with a good label [1] is fine, and it's better in the sense that it has a third state (for indeterminate). [1] https://blog.uidrafter.com/guidelines-for-checkboxes https://blog.uidrafter.com/guidelines-for-checkboxes

RjQoLCOSwiIKfpm 4y ago
Is that really so? I cannot recall seeing any of them with such an extra text.
- efortis 4y ago
  https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle https://developer.microsoft.com/en-us/fluentui#/controls/web...
  - RjQoLCOSwiIKfpm 4y ago
    Ah, right, thanks, I do recall that now. Is the disappearance of the additional "On/Off" label perhaps another trend layered on top of the toggle switch trend?
hedora 4y ago
The completely ambiguous: Enable the label [O @] Is becoming more popular.
- lylejantzi3rd 4y ago
  Is it? Dark mode/light mode toggles are very new and are now everywhere. It's a single image of either a sun or a moon with no text whatsoever. Half the sites show the sun when light mode is on and half the sites show the moon when light mode is on. Is the toggle supposed to reflect the current state? Or is it supposed to tell you what's going to happen when it gets clicked?

JoeyBananas 4y ago

A toggle switch is better because it has an animation.

ungamedplayer 4y ago
Is animation inherantly better ?
- JoeyBananas 4y ago
  Many UI frameworks these days seem to think so.
toast0 4y ago
You can animate a check too, if you like animation. Gotta make it a stylized check while you're at it, instead of just a filled in box or an x
- jordanwallwork 4y ago
  Absolutely, just google 'css animated checkboxes' and you'll get a tonne of solutions
8bitsrule 4y ago
Just wait ... before long it'll be a smiley face for On, a frown for Off. After that, 'On' is accompanied by pschedelic-colored wavefronts crossing the page.
beardyw 4y ago
I miss Clippy ...
xigoi 4y ago
I sure hope you're checking for prefersReducedMotion.

gorbachev 4y ago

UI designers need to stop following fads. You see bad ideas spread like forest fires all the time.

birdymcbird 4y ago

maybe follow up question is what problem being solved. do users not intuit checkbox button? is this some problem being solved or more of fad?

netsharc 4y ago
Probably because checkboxes in real life exist mostly on paper, but when the iPhone came out, the skeumorphic designers wanted to make it look like a sleek device. E.g. the sound recorder app had an image of a big retro-style microphone, and a checkbox would look out of place there. Probably a button that stays depressed and "lights up" when touched would be more similar to a checkbox. Touch again to uncheck and it will go undepressed.

kazinator 4y ago

You see them used because they are skeumorphic, and there is a general trend in user interfaces to go skeumorphic across successive generations.

fsckboy 4y ago
radio buttons are skeuomorphic and much easier to understand how to operate and get the result you want. Slider toggles are pure fashion and skeuomorphic only in that they are as difficult to use as some recessed sliders are, but without a skeuomorphic fingernail to grab them. There are physical things that are difficult to operate irl, and there's no reason to skeuomorph difficult things to use. but even better, what's wrong with letting me choose what I want? You can have whatever UI you like, it doesn't need to affect me. That's the whole idea behind a personal computer, it's my slave, it's my servant, it does what I want, to make my life the way I want it. Software is the first human technology to offer this promise, it's only the weak of mind, ego and will who see it as a way to impose their stunted vision on other people.
- kazinator 4y ago
  Slider toggles are skeumorphic in that there are such physical switches and they look like those switches. Those classic radio buttons which are circles with a black dot are skeumorphic in the same sense that checkboxes are: they are an imitation of elements seen on paper forms. You don't have to "grab" slider controls; if you just click anywhere in their display area to toggle them. E.g. try an example here: https://www.w3schools.com/howto/howto_css_switch.asp https://www.w3schools.com/howto/howto_css_switch.asp The sliding is just an animation sequence which replaces the appearance/disappearance of the checkbox with alternative images. In the above example, you in fact cannot grab anything and slide it left to right. All you can do is click. If you're confronted with some UI in which you have to actually pull a slider left or right and cannot just click on it, complain to the vendor.
- kazinator 4y ago
  Your idea behind the personal computer unfortunately no longer exists outside of the world of FOSS. A device with a proprietary OS is now not really yours. It's something that you depend on for access to essential services and which you got for a deeply discounted price in exchange for giving up control, personal information, privacy and access to your eyes and ears by advertisers.

kerpotgh 4y ago

[dead]

parasti 4y ago

I don't get it either. I never know which side is on and/or which background color means on, unless they're using green/red. You say "right side is on", but I never even realized this until now.

kioshix 4y ago
I've encountered sliders that were colored red/gray, where the ON state was to the left and red was on. It was a cookie consent thing, and I was confused. I guess that was the purpose.
foreigner 4y ago
Be careful, red/green colourblindness is the most common kind of colourblindness.
- teamonkey 4y ago
  Also colour associations are cultural, not universal
  - parasti 4y ago
    Are they? Seems to me color associations are conventional, not cultural.
  - jeroenhd 4y ago
    As are left and right positions of a button. Really, the only thing I can think of that clearly indicates the state of these buttons is the ⏽ vs ⭘ distinction because those glyphs have been made specifically for this purpose.
    - kps 4y ago
      I know ⏽ means on, but if I see ⏽, does that mean it's currently on, or that it will be on if I move the toggle to the location of the ⏽? Off ( ▢) On (⏽▢) (⭘▢)

scyzoryk_xyz 4y ago

Checkboxes come from older mouse/cursor UI’s, toggles come from newer touchscreen UI’s.

mikeyla85 4y ago
Checkboxes are just as usable as toggles on touchscreen. It doesn't have to do with the tech, it's just that toggles are newer.
- kevin_thibedeau 4y ago
  Checkboxes are slightly problematic in touch UIs because they are generally scaled to a similar size as text and small enough that they are occluded by a fingertip. Sliders leak information about their state while you touch them.
- scyzoryk_xyz 4y ago
  I wouldn’t dare make comments on what’s more or less usable in an HN thread since everyone here is such an expert on these things. Toggles came along with iOS when the UI was skeumorphic ca. 2008. Don’t know whether it has to do with tech, but that’s when we first got those. As far as actual evidence, I do UX testing of a touchscreen/cursor application and we have both scattered throughout. I haven’t ever seen anyone have any difficulty understanding, using or differentiating between either. In our results this simply isn’t a problem with investigating.
  - barneygale 4y ago
    > I haven’t ever seen anyone have any difficulty understanding, using or differentiating between either. In our results this simply isn’t a problem with investigating. I'm not sure if this was meant as reassuring, but for me it only reinforces my view that UI/UX folks don't have a clue what they're doing.
- boomboomsubban 4y ago
  Checkboxes can be just as usable but they're often smaller and often more tightly spaced, which can be a pain to navigate on a touchscreen. I'm not saying that's a good reason, but it is a reason besides being newer.

iforgotpassword 4y ago

Because everything just gets worse as you age. Sure, my dad said it too back then, but they just didn't get how the world moved on and improved. This time around though it's real, everything gets more stupid and dumb and I hate it.

orlp 4y ago
It's a two steps forward, one step backwards thing. The things you are noticing really are a step backwards, but that doesn't mean progress overall is going backwards.
sofixa 4y ago
1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works. 2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it. 3. Anything invented after you're thirty-five is against the natural order of things. Douglas Adams
- Dalewyn 4y ago
  I'm early- to mid- 30s (<35), and I hate basically every UI shenanigan that was invented in the past 15 years or so. Which is to say, Douglas Adams might need to adjust the time window in #2 a bit.
  - theandrewbailey 4y ago
    I'm a member of Generation Y, because that's what we were before all this weird sh*t happened.
- ilyt 4y ago
  To be entirely fair invent -> improve -> cost cut often leads to worse UIs. Like when car manufacturers decided that knobs are bad and on top of people hating it it was proved to cause more distractions to the drivers https://www.vibilagare.se/english/physical-buttons-outperform-touchscreens-new-cars-test-finds https://www.vibilagare.se/english/physical-buttons-outperfor... Part of that is trying to have "one size fits all", why waste time perfecting design for multiple cases where you can just shove touch screen oriented design to desktop OS and "just" waste some space ?

seanhunter 4y ago

My pet peeve is the labeling of these things. 1)I'm going to give you an easy one to start. You see a toggle switch. It is set to on (probably - the little colour bar in the switch is coloured in). It is labeled "Disable fnurbification". Okay now what? Does "on" mean I'm going to be fnurbified? Does switching the switch disable the fnurbification so I actually have to switch it to "off"? No that's crazy. "on" means "disabled", cognative dissonance aside. 2) You see a toggle switch. It is set to on like before. It is labeled "Disable fnurbification". We learned before that "on" meant "disabled", but that filled us with a vague sense of unease. For whatever reason we try toggling the switch. The text changes to just "Fnurbification" Okay really now what? Is my fnurbification on? You try flicking the switch back. The colour fills in and the label changes to "Disable fnurbification" again. Okay what are we supposed to do? What's happened is the designer has read a post on medium about accessibility and that screen readers don't read out the colour of the filled in part of a toggle switch, and has decided to help by changing the label when the state of the switch changes. The problem is now the label could either be describing the current state or be describing what happens when you flip the switch. And there's really no way of knowing. I've seen this very often with the UX for boolean selectors where they use things like buttons rather than toggle switches. Does pressing the button do the thing it says on the label or does the label describe where we are now and pressing the button will reverse that? No way to be sure. Postscript: Notice that whatever you decide is correct in the second case could change what you would do in the first case if the first type of selector is one that would change label when you toggle it.

shreyshnaccount 4y ago
A checkbox could have the same issues. Both ust represent binary state
RobMurray 4y ago
It's very common for developers to make accessibility worse by doing things like this. I have seen things where the two states to a screen reader are something like: "disable foo toggle button pressed" and "enable foo toggle button not pressed". Why not just a checkbox labeled "foo"?

lgreiv 4y ago

To me, the semantic difference between the two is that I expect a toggle to cause an immediate effect whereas a checkbox merely holds the value to be applied later. Applied to a client/server web application, I would expect a toggle to immediately cause a request to the backend. I’d expect a checkbox to be used in a form which is sent as a whole on submit.

ilyt 4y ago
I'd expect it to work on submission only if I saw actual submit button, regardless of what else is in config. I also strongly dislike apps that do the instant thing, coz there is no way to undo something if I made a mistake (say removed some value that I shouldn't)
crazygringo 4y ago
This is exactly it, 100%. But it's taken some time for UX paradigms to coalesce around this -- simply because checkboxes used to be used for both, until Apple "invented" toggles for instantly-applied settings in iOS. Now that Apple finally implemented toggles in System Settings in macOS Ventura, the paradigm is largely consistent in desktop software on Macs. Toggles apply a setting instantly, while checkboxes are used within an "OK/Cancel" dialog. But I think because it's taken so long for toggles to "spread", a lot of users and developers have an instinctual understanding that toggle = instant, but haven't always been able to articulate it.
jayd16 4y ago
What is your expected UX for a toggle with poor network reliability?
- lgreiv 4y ago
  I have seen several variations that I found consistent with the metaphor of a switch. Broadly, these could be divided in implementations that offered a loading state (switch goes transparent until persisted, overlaid spinner etc.) and implementations that flicked the switch back when the request failed and provided a very noticeable status update (hint, animation, growl). My preference for systems that work with unreliable persistence is the former, albeit that is purely personal and not founded in a deeper rationale.

fsckboy 4y ago

the left-right slidey things were an Apple affectation, no doubt introduced just to be different, after all, Apples were for the rest of us. We're different. they have much less usability what stinks about them is you can never quite figure out or remember if you're supposed to just tap, only tap on the "other end", or actually slide the slider.

saurik 4y ago
FWIW, the ones on iOS have always been something you could drag. As far as I have ever understood, all of the UI controls on iOS were designed to be skeuomorphic in a way that directly made sense for someone futzing with their fingers: you push buttons, you scroll a WHEEL to work with selection boxes, and flip switches to toggle options (which also, notably and at the time almost specifically on Apple products, take place immediately with no concept of "Apply", and aren't part of a "form" metaphor).

baggsie 4y ago

Touch requires a bigger target area and big checkboxes look terrible.

ComodoHacker 4y ago
the checkbox itself doesn't have to be as big as its hitbox.

onion2k 4y ago

One thing that you lose if you replace checkboxes with toggle switches, at least on webpages, is the third 'indeterminate' state that JavaScript offers. https://css-tricks.com/indeterminate-checkboxes/ https://css-tricks.com/indeterminate-checkboxes/

stonecharioteer 4y ago
I've never understood what that state is supposed to indicate. It only makes sense when the checkbox has nested checkboxes underneath and an indeterminate state only indicates that the user has some of the children selected. But as a user I'd never be able to select this indeterminate state, since, by definition, it is indeterminate. for such scenarios, I'm not sure what is good design.
- leokennis 4y ago
  Food ordering screen: [ ] Add sauces to my food [ ] Mayonnaise [ ] Ketchup [ ] XO Sauce If I want all sauces I click the first box: [v] Add sauces to my food [v] Mayonnaise [v] Ketchup [v] XO Sauce If I only want Ketchup and click that: [-] Add sauces to my food [ ] Mayonnaise [v] Ketchup [ ] XO Sauce
  - scrollaway 4y ago
    Better ordering screen: Extra sauces (1 selected): [ ] Mayonnaise [v] Ketchup [ ] XO Sauce I understand what indeterminate checkboxes are, but I don't remember them ever actually making sense anywhere I found them.
    - msh 4y ago
      When well implemented the clicking [-] would unselect all and clicking again select all. It does not matter with 3 options and 1 selected, but its nice if its 20 options and 7 random ones selected.
      - deleted 4y ago

nitwit005 4y ago

They're optimizing for the website looking cool and trendy, which is an ever shifting standard.

jhanschoo 4y ago

I think toggle switch has a different connotation from checkboxes. Checkboxes were primarily designed for questions where a user wants to choose a subset of related options for the same topic. (e.g. Which colors are acceptable to you? Red yes/no, Blue yes/no, Green yes/no) The toggle switch connotes an A/B answer to a single question. (e.g. Dark theme? yes/no)

hknmtt 4y ago

YES, I hate these things with vigour!

aaron695 4y ago

[dead]

thewebcount 4y ago

This is kind of embarrassing to admit, but I couldn’t figure out how to change the state of a toggle switch for a really long time. I kept trying to slide the switch left or right. Sometimes it worked, but often it didn’t. It wasn’t until I had been using an iPhone for a couple years that I discovered you’re just supposed to press it, not slide it. What a stupid design.

meigwilym 4y ago
Years ago I built a cms using these sliders, and one of the users was having problems. I double checked and it worked fine. So I said I'd watch him use it to see what was wrong. He clicked the slider and dragged it to the other side. My jQuery code was listening for 'click' events, which was the source of the bug. Since then I'm careful to use them "properly".
bbx 4y ago
On iOS, you can either press it or slide it. The problem is that a lot of websites have started using them and only implement the click/tap event, not the mouse press and move event, or the slide event. So they end up being quite misleading.
boomboomsubban 4y ago
Similar. In my defense, lock screens on phones used to have a toggle switch you needed to slide.
- Terretta 4y ago
  Those were not a toggle. They were a sliding latch: https://i5.walmartimages.com/asr/5cd445f6-b24c-4e39-8c10-0a0311cd96b1_1.c65803773c3fc59dc681260298d6fb2b.jpeg https://i5.walmartimages.com/asr/5cd445f6-b24c-4e39-8c10-0a0...
  - ilyt 4y ago
    And UIs started using sliding latch icon for toggles, which is the point of contention here

axismundi 4y ago

[ ] Fnurbication When enabled, created nurbs are automatically converted into fluffy nurbs.

bandie91 4y ago

"the right side is on" – i'm afraid to bring up, is it so in RTL locales too?

Adverblessly 4y ago
Randomly checking one of my apps, the answer is "no" (i.e. the left side is on), but if you are looking at some random website that appears to have been localized, there isn't really any way of judging if they decided to switch the toggle direction or not.

cik 4y ago

I'm glad that you know the right is on.. but I don't. I live in a country with a right to left language system. Things locally, done in the local language are right side is off. Things internationally behave the way you've mentioned. Checkboxes are infinitely better, because they're not language dependent. This is an incredible source of frustration - and one that comes up often. As a native speaker of multiple languages, I always pause and do a double-take in order to actually "see" the language, given that I usually don't notice.

kzrdude 4y ago
I thought the color/highlight was the only hint, it wasn't clear to me if left or right is on.

drchaim 4y ago

also me, I always double check. when there is no label: On/Off is even worst.

captainmuon 4y ago

Honestly, I think it is just a trend. It started with the iOS settings UI, everybody copied it and is still copying it almost 15 years later. Look at the settings in Windows, Android, macOS (Ventura), Gnome. List/Detail view, and the detail pane is itself a list of mostly switches. One downside is as you mentioned the confusion whether it is on or off (although nowadays most UIs make it double clear with color and some with additional text). But also because the switch is on the right hand side, it is further away from the text, and is visually inconsistent with radio boxes. And it is part of this "iOS settings" design language which itself is problematic, because it doesn't try to have specialized panes for each setting but crams everything into lists. (This is not the fault of the toggle, but how it is used.) One point in defense of the toggle is maybe that it is not clear to everybody that you can usually click the text on a checkbox, making the click target rather small. But you generally can't click the text on a toggle, so it is moot.

benj111 4y ago

I assume it's part of the 'make everything usable on a phone' thing, regardless of whether you are actually using a phone, so the thing that only contains a half screen of information is now spread over 4 screens. But then you also have the designers that like to make things pretty, rather than give you any hint that some text is in fact clickable.

detay 4y ago

Worst ui decision of all times. Toggling is never enough so you color it to green for true and gray for false.