17 ms·

I’m surprised nobody has mentioned that iOS has had round checkboxes since forever? https://ux.stackexchange.com/questions/116712/apples-round-checkboxes-where-

I’m surprised nobody has mentioned that iOS has had round checkboxes since forever? https://ux.stackexchange.com/questions/116712/apples-round-checkboxes-where-and-when-are-they-used https://ux.stackexchange.com/questions/116712/apples-round-c... Likewise I thought the article’s punchline was going to be the increasing use of on-off toggles instead of checkboxes. Like how the settings app on macOS now has more on-off toggles than ever before. Personally though, my fav pet peeve remains the unclear toggle button. When the icon is white, is it on? Is it off? Does the line through the microphone mean it’s muted? Or that it mutes when tapped? No one knows, tap it a few more times to find out…

cyclotron3k 3y ago
Google Mail and Google Photos on Android also have round checkboxes.
- gardenhedge 3y ago
  Yeah Gmail immediately came to mind for me. It feels natural tbh
ncruces 3y ago
The toggle is supposed to convey immediateness, like a light switch turning on bluetooth is immediate. A checkbox is like filling a form, it requires submission for the action to take place.
- ratg13 3y ago
  The parent comment is talking about how the colors are often set on a toggle. That the user never knows if the toggle is in the on or off position.
  - stavros 3y ago
    Your parent is talking about their parent's second paragraph, about toggles in settings.
    - ratg13 3y ago
      That is what I am talking about as well >When the icon is white, is it on? Is it off? They reinforce this with another example of ambiguity. The user can’t be suggested to take any actions if they can’t figure out what the default settings are.
      - stavros 3y ago
        lstamour talked about two things, the proliferation of toggles, and the unclear toggle buttons. ncruces replied clarifying the former, that the toggles proliferate because they convey immediateness. They didn't say anything about the "unclear toggle button" point. Your comment, then, aimed to correct ncruces' comment, clarifying that lstamour was talking about unclear toggles, when ncruces was talking about the other point in lstamour's comment, and thus was already correct.
      - rezonant 3y ago
        > Likewise I thought the article’s punchline was going to be the increasing use of on-off toggles instead of checkboxes. That's the second paragraph. This would be those left/right toggles that became popularized with iOS on the original iPhone (since you could physically slide them with your finger). These also do have color insanity associated, though. The third paragraph used "toggle" in a more general sense. To be fair, the comment has a lot going on.
- ajitid 3y ago
  This assumption breaks if you use macOS. Windows uses (or used to use) Apply button in its settings. Macintosh OSes were reactive from the start. Which means that checkboxes have immediate-ness on Macs.
- layer8 3y ago
  The real reason is that in contexts like the Settings app, where toggleable items are mixed with other items, checkboxes on the left would take too much space on mobile (especially on the early small-screen iPhones), because it would require the left margin to be increased for all items. Checkboxes on the right are awkward though, and thus were replaced by the toggle switches. The immediateness argument is just a convenient excuse. Immediately-effective checkboxes weren't uncommon on desktop before. In addition, there is "previous art" in the form of boolean-toggle menu items that are immediately effective and show a checkmark when active.
- mr_toad 3y ago
  That was true in the 90’s when you’d post a whole page but these days the individual checkboxes are more likely to have event handlers that transmit state to the server immediately.
  - boomlinde 3y ago
    > That was true in the 90’s when you’d post a whole page I'd say that to the extent that is true, it was equally true for radio buttons in the 90s. These days I find myself scrolling around pages to look for submit/save/apply buttons to determine whether checkboxes and radio buttons are intended to have immediate effects or have to be submitted to be applied, because there really seems to be a lack of consensus on what these elements mean in those terms.
weinzierl 3y ago
On iOS the toggles are off left, and shown as dim grey. They turn green when you shove them to the right into the on position. That's about as much as my brain can process. In many other environments these clues are more subtle or completely absent and I never know which is which. I don't necessarily wish my check-box back, because I think a slider is easier to handle on touch devices[1], but it should be done in a way that indicates the status clearly. Apple's use of color is also not perfect, but at least they did not fall into the trap of using red and green. Light grey and vibrant green should be distinguishable for most people with color deficiencies even. [1] At least when implemented properly. I am looking at you Ninebot. Your huge on/off slider only let's me turn off my scooter when the stars are aligned right. I don't even bother anymore and just use the button on the scooter.
- rezonant 3y ago
  > because I think a slider is easier to handle on touch devices I guess because the toggle has more real estate for you to tap? If so, then couldn't you just make the checkbox bigger and get the same ergonomics?
hermitcrab 3y ago
I find toggles very confusing. Is it showing the current state, or what happens when I toggle the state?
- dspillett 3y ago
  This doesn't need to be the case, though depending on context extra design elements (colour, descriptive text, …) may be needed to make the interpretation truly unambiguous. Sometimes (advert stalking preferences being the key example) the confusion is very deliberately not dealt with, and furthermore on occasion extra steps are actively taken to ensure the confusion.
- leshenka 3y ago
  I've never seen toggles show "what happens", they're mimicking the real-life toggle. Accent color means "I'm active" unless you're on an email newsletter subscription settings page, in that case beware
rezonant 3y ago
White/black "indicators" of toggles are horrid. A lot of phone and meeting apps do this and it's horrible. As for mute, I think it's pretty objective at this point that an icon based toggle should show the current state, not the state that tapping on the icon will produce. That's because the icon is serving two jobs: Convey the state and let the user change it. When a developer gets this wrong and shows a crossed out speaker while audio is playing, that's just frustrating.
- Y-bar 3y ago
  > As for mute, I think it's pretty objective at this point that an icon based toggle should show the current state, I can't see this holding up as the primary UI rule. And exceptions only for things like mute toggles are seldom a good thing in interfaces where predictability should be the king. It breaks down on play/pause toggles. The answer in my opinion is to separate the concern of the action and the state and distinctly show both at the same time.
  - rezonant 3y ago
    That's true, but I just can't live in a world where mute goes the opposite way. I'm not aware of a major media player that doesn't cross out the mute when audio is muted (assuming it uses a crossed out icon at all). I also can't live in a world where play/pause is opposite to the way it is now: play icon should mean the media is paused, pause icon should mean the media is playing, as you suggest. If we constrain ourselves to only having two buttons (one play/pause, one mute/unmute), and only differentiating them by the shown icon, then I'm afraid it just has to go with the convention. They are inconsistent with each other, but intuitiveness beats consistency I guess. > The answer in my opinion is to separate the concern of the action and the state and distinctly show both at the same time. I don't think this is practical, especially on mobile. There is a need for these UIs to be concise, and even if there is enough space, each visual element comes at a cognitive premium to the user.
    - Y-bar 3y ago
      > each visual element comes at a cognitive premium to the user. As someone who studied two years of cognitive sciences as part of my degree, this is not necessarily true. Lack of information can often lead to even more cognitive load as the user then has to imagine virtual scenarios, an cognitive process which is linear. Visual processing however is largely parallel, faster and less consuming, as we have evolved to live in a visually complex and noisy environment.
albert_e 3y ago
When a button displays the text "mute" ... does it mean that the status is CURRENTLY muted, or that pressing that button will make it MUTE?
- Y-bar 3y ago
  Yep! When the _state_ and _action_ are intermixed it becomes ambiguous. This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. Look at this UI, it's mix of state and action: https://discussions.apple.com/content/attachment/861693040 https://discussions.apple.com/content/attachment/861693040 fast backward rewinds: Probably showing action Play: 100% ambiguous if action or state fast forward: Probably showing action Volume slider: showing state Back-forward buttons: showing action Select drop-down: Showing state
  - iamtedd 3y ago
    As someone who has no experience with this version of iTunes: - The lower row is definitely a row of buttons. Back, forward, categories in the library (?), I don't know what the last one is supposed to do. - Are the things above that row buttons? Why don't they look like them then? - If they are, what does fast forward and rewind do? Skip to the next track and to the beginning of the same track? Actually move quickly through the track (like fast forward and rewind used to do)? Does pressing rewind go to the beginning of the track or to the previous track? If it's to the same track, how quickly do I have to click again to go to the previous track? - Is that slider a progress bar or volume slider? - Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? - I assume the coloured things are the window management controls. Does clicking the red one close the window and keep the music going, or does it stop?
    - Y-bar 3y ago
      > what the last one is supposed to do. It's indicating an iOS device being locally, e.g. for administration, backup, file transfer and the like. > Are the things above that row buttons? Why don't they look like them then? Haha yeah. That's modern Apple for you! > what does fast forward and rewind do? They sort of behave the way ff and fr does on a remote. Click/press fast and you skip to the next/previous song/chapter or equivalent. Hold down and you scrub at something like 4x speed. > Is that slider a progress bar or volume slider? A volume slider. > Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? I ask myself the same thing every day and have the same problem with many many apps, also in Windows. For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. > I assume the coloured things are the window management controls. Yes, these have remained mostly unchanged for over 20 years, they have gotten a bit flatter and lost some subtle small iconography. > Does clicking the red one close the window and keep the music going At least this part works well and in a predictable fashion. It consistently follows Apple's Human Interface Guidelines since well over 30 years: Closing a window or document of a Mac OS application should not quit the application. (there are some exceptions, but that is the default behaviour).
arrrg 3y ago
Ha! That‘s a surprise to me, I never noticed. So, checking out Apple‘s first party apps it seems that checkboxes are either solid color round circles (just the outline when unchecked) with a checkmark in the middle (for multi selections in lists) or just toggles (typically in settings). Those round checkboxes I could only find being used for list selections (even when the list is horizontal, e.g. when sharing a photo). Toggles for settings. Radiobuttons seem to always come with one element already selected. I couldn’t find an instance of an empty list where you select one element. In those cases (e.g. when picking your WiFi network) they are just a solitary checkmark on the left without the circle. It‘s internally consistent (as I assume visionOS is, too) and the checkbox design in visionOS is actually closer to iOS than macOS. I assume that‘s the origin with quite some history behind it. Nearly two decades. I think the more exact statement would be that as far as iOS is concerned the checkbox already was dead for nearly two decades. As far as UI conventions go I‘m not too worried. What worries me a bit more that this much more clearly frames visionOS (as well as running iPad apps) as a iOS descendant when this might be the platform with the space to be more clearly in the tradition of the Mac.
- Y-bar 3y ago
  > Radiobuttons seem to always come with one element already selected. This Apple behaviour follows the HTML spec: > At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially. https://www.w3.org/TR/html401/interact/forms.html#radio https://www.w3.org/TR/html401/interact/forms.html#radio
  - Kwpolska 3y ago
    The current standard says something else: > If none of the radio buttons in a radio button group are checked, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script). That behaviour makes more sense for the Web, so that the user is required to make an explicit choice, and I'm not sure if browsers ever cared about this little part of the standard. When interacting with OS components, it makes sense that there's some default or already configured value. https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio) https://html.spec.whatwg.org/multipage/input.html#radio-butt...
moontear 3y ago
The articles punchline IS the use of toggle buttons?! Or have I misunderstood you?
- lstamour 3y ago
  I was using punchline to actually mean “point”, as in: I assumed the article would show some examples of toggle buttons, but the _point_ of the article was whether the checkboxes were round or square in shape. Yes, literally, at the very end there is a punchline on toggles. But it’s more for the laughs - a literal punchline - it doesn’t change the focus of the article.
grumbel 3y ago
My "favorite" toggle button is the one where they add on/off labels[1] to it, but only one, and the slider hides the label. So the label actually tells you the state, not the state it would be when you move the slider over the label. Or at least that's how I think how they work, it breaks my brain a little whenever I look at them. [1] https://itsfoss.com/content/images/size/w1000/wordpress/2022/12/installed-extensions-listed-in-gnome-extensions-website.png https://itsfoss.com/content/images/size/w1000/wordpress/2022...
- wredue 3y ago
  I actually hate this one because it’s completely unclear. Does OFF there mean -the setting is off Or -Slide this thing over to turn it off I’ve seen it both ways. It’s confusing and not clear.
  - MrOxiMoron 3y ago
    is the bridge open when it's up or is it closed when it's up?
    - chrisweekly 3y ago
      are you in a car or a boat?
      - NoPedantsThanks 3y ago
        [dead]
  - RunSet 3y ago
    https://www.youtube.com/watch?v=Ljjns1Y1q-A https://www.youtube.com/watch?v=Ljjns1Y1q-A
- mc32 3y ago
  Those are terrible. I think I’ve had analogs in the physical world where toggles indicated state by the color exposed (green = on, red = off) but this tries to be better by having both color indicator and text indicator) and you’re left deciphering their language a bit. Yes, it is terrible.
LeonB 3y ago
Yes absolutely this — > my fav pet peeve remains the unclear toggle button. When the icon is white, is it on? Is it off? Does the line through the microphone mean it’s muted? Or that it mutes when tapped? No one knows, tap it a few more times to find out… There’s no UX consideration just design by committee, looking at static renders of the “design language”
fsckboy 3y ago
> iOS has had round checkboxes since forever? but iOS hasn't been around forever. In the spirit of TFA, iOS marks the start of the Vandals climbing over the gates and sacking what had been to melt it all down and make a soup of melty things.
coffeebeqn 3y ago
Toggle buttons are hard! I tried making some for a game I made once but ended up just using text because half the people thought it meant the opposite of what it did
- hn_throwaway_99 3y ago
  So why not use a check box?
  - coffeebeqn 3y ago
    Re-inventing the wheel I guess
gcanyon 3y ago
I’m ashamed I never noticed this until you pointed it out. Standards can be broken insidiously, and it’s disappointing that a company that cared about consistent UI enough to put out the HIG. Having typed that, I read the HIG on toggles and realized that those items in iOS aren’t checkboxes. A checkbox turns something on or off. The “round checkboxes” used in iOS are to select multiple items for further action. I don’t know what those are, or if/where they’re covered in the HIG. https://developer.apple.com/design/human-interface-guidelines/toggles https://developer.apple.com/design/human-interface-guideline...
samstave 3y ago
>>>"...increasing use of on-off toggles instead of checkboxes" One of the most egregiously angering thing to me is toggles that self un-toggle: "Disconnecting Bluetooth Until Tomorrow" WHAT? I literally just commanded the device to turn something off which required me to pick it up, unlock it with a biometric identification, navigate to the settings containing the option I want to control with my physical hands, look at the screen, read the results for the object I want. Make the decision to turn a thing off. Do so by physically touching the device and adjusting the setting - not the Device says "Oh you want that off? More than for just a little bit? Well, I'll have you know that we use your Bluetooth radio for a lot of our data tracking systems, so its important to us that its on - so we've coded your device's operating system to only allow you to turn off your Bluetooth radio temporarily so you feel like you're in control of it. Why? Because Fuck You Thats Why. Now go back to browsing reddit"
- djur 3y ago
  I find that kind of "feature" frustrating as well, but I'm pretty certain that the reason it's there is that otherwise they get a constant deluge of support requests from people who forgot they turned it off.
  - neuromanser 3y ago
    If only Apple had the resources to create and enforce a UI that would make disabled Bluetooth obvious. /s
  - samstave 3y ago
    I fully believe you and I are both correct. Yours is so "Benevelant Big Brother", mine is the 'Sinister Big Brother' <- Evil twin.
dartos 3y ago
> Likewise I thought the article’s punchline was going to be the increasing use of on-off toggles instead of checkboxes It kind of was. The last line of the article is “Kids these days will just use a toggle anyway”
- lstamour 3y ago
  Yes, but it took awhile. :) Also, I feel like the era when checkboxes were actually filled squares or Xs within square braces were less “checkboxy” in that they filled a box but were not “checkmark” shaped. It’s arguable they were toggles already, just data-constrained design variations of them.
amadeuspagel 3y ago
Of course the entire point of the article is whining about the web and web developers.
stevage 3y ago
As a non iOS user, I always get thrown by the horizontal slider toggles. I can never tell by looking at one if it is on or off. And sometimes on touch screens I try to slide them sideways and it doesn't work.
- Gabrys1 3y ago
  Tabs in Gedit are the same. Whenever I have two text files open, I always understand the tab bar wrong: the item I read as active is inactive and vice-versa. All becuase they doing follow the traditional tab design and use some sort of pills instead.
hombre_fatal 3y ago
That reminds me of how every other time I silence/unsilence my iPhone, I stare at the "Silence activated" / "Silence deactivated" and work out in my head if it means the phone will make noise or not. Despite doing it thousands of times. I suppose "Sound on" vs "Sound off" would be better because in the moment I'm thinking of noise and sound, so silence is the inverse of that and kinda forms a double negative situation. "Not-noise mode activated / not activated".
djur 3y ago
An app I use regularly and have introduced numerous people to uses a small toggle slider next to text that reads "Yes, [enable this feature]". Both I and literally every person I have introduced the app to have made the mistake of assuming that the "Yes" text described the current state. What's worse is that the "on" state of the toggle is just slightly more activated-looking than the "off" state. You could hardly design it worse on purpose.
ummonk 3y ago
I could swear Discord inverted its mic button on vs off convention sometime last year.
inquirerGeneral 3y ago
[dead]
dusted 3y ago
The must microphone is a great example. I'm often finding it hard to find out whether that type of input means "change state to this" or "this is the state". Most confusing is when the text changes along with the checkbox, I just go from one unknown state to another.
harperlee 3y ago
> Kids these days will use a toggle anyway. From the end of the article
beAbU 3y ago
I've only seen round checkboxes used in the context of selecting multiple things in a list of indeterminate size, like emails in your inbox, photos in your gallery, etc. In my mind this is a slightly different application to the classic "form" that you fill out with data and options before submitting.
beAbU 3y ago
I also absolutely hate switches in almost all contexts. In some applications it can make sense, like the UI that controls your WiFi or something. The reason why a light switch is so effective is because we can see an immediate response/impact on our action, the direction that the toggle points in is actually irrelevant, because either the lights are on or off, and toggling the switch changes that state, and I can verify with my eyes. Usually it's safe to toggle the switch back and forth until the desired state is achieved. In software that's not always possible, and often changing the state has destructive results. So you can't experiment. And then you get the abominations that bring in double negatives, and things that use switches to control something more complex than a simple boolean state. "Disable the nuclear missile warning test = ON/OFF" - like what the hell does this even mean, and how can the user be expected to understand what the right option is without trying first.
NoPedantsThanks 3y ago
[dead]

cyclotron3k 3y ago

Google Mail and Google Photos on Android also have round checkboxes.

gardenhedge 3y ago
Yeah Gmail immediately came to mind for me. It feels natural tbh

ncruces 3y ago

The toggle is supposed to convey immediateness, like a light switch turning on bluetooth is immediate. A checkbox is like filling a form, it requires submission for the action to take place.

ratg13 3y ago
The parent comment is talking about how the colors are often set on a toggle. That the user never knows if the toggle is in the on or off position.
- stavros 3y ago
  Your parent is talking about their parent's second paragraph, about toggles in settings.
  - ratg13 3y ago
    That is what I am talking about as well >When the icon is white, is it on? Is it off? They reinforce this with another example of ambiguity. The user can’t be suggested to take any actions if they can’t figure out what the default settings are.
    - stavros 3y ago
      lstamour talked about two things, the proliferation of toggles, and the unclear toggle buttons. ncruces replied clarifying the former, that the toggles proliferate because they convey immediateness. They didn't say anything about the "unclear toggle button" point. Your comment, then, aimed to correct ncruces' comment, clarifying that lstamour was talking about unclear toggles, when ncruces was talking about the other point in lstamour's comment, and thus was already correct.
    - rezonant 3y ago
      > Likewise I thought the article’s punchline was going to be the increasing use of on-off toggles instead of checkboxes. That's the second paragraph. This would be those left/right toggles that became popularized with iOS on the original iPhone (since you could physically slide them with your finger). These also do have color insanity associated, though. The third paragraph used "toggle" in a more general sense. To be fair, the comment has a lot going on.
ajitid 3y ago
This assumption breaks if you use macOS. Windows uses (or used to use) Apply button in its settings. Macintosh OSes were reactive from the start. Which means that checkboxes have immediate-ness on Macs.
layer8 3y ago
The real reason is that in contexts like the Settings app, where toggleable items are mixed with other items, checkboxes on the left would take too much space on mobile (especially on the early small-screen iPhones), because it would require the left margin to be increased for all items. Checkboxes on the right are awkward though, and thus were replaced by the toggle switches. The immediateness argument is just a convenient excuse. Immediately-effective checkboxes weren't uncommon on desktop before. In addition, there is "previous art" in the form of boolean-toggle menu items that are immediately effective and show a checkmark when active.
mr_toad 3y ago
That was true in the 90’s when you’d post a whole page but these days the individual checkboxes are more likely to have event handlers that transmit state to the server immediately.
- boomlinde 3y ago
  > That was true in the 90’s when you’d post a whole page I'd say that to the extent that is true, it was equally true for radio buttons in the 90s. These days I find myself scrolling around pages to look for submit/save/apply buttons to determine whether checkboxes and radio buttons are intended to have immediate effects or have to be submitted to be applied, because there really seems to be a lack of consensus on what these elements mean in those terms.

weinzierl 3y ago

On iOS the toggles are off left, and shown as dim grey. They turn green when you shove them to the right into the on position. That's about as much as my brain can process. In many other environments these clues are more subtle or completely absent and I never know which is which. I don't necessarily wish my check-box back, because I think a slider is easier to handle on touch devices[1], but it should be done in a way that indicates the status clearly. Apple's use of color is also not perfect, but at least they did not fall into the trap of using red and green. Light grey and vibrant green should be distinguishable for most people with color deficiencies even. [1] At least when implemented properly. I am looking at you Ninebot. Your huge on/off slider only let's me turn off my scooter when the stars are aligned right. I don't even bother anymore and just use the button on the scooter.

rezonant 3y ago
> because I think a slider is easier to handle on touch devices I guess because the toggle has more real estate for you to tap? If so, then couldn't you just make the checkbox bigger and get the same ergonomics?

hermitcrab 3y ago

I find toggles very confusing. Is it showing the current state, or what happens when I toggle the state?

dspillett 3y ago
This doesn't need to be the case, though depending on context extra design elements (colour, descriptive text, …) may be needed to make the interpretation truly unambiguous. Sometimes (advert stalking preferences being the key example) the confusion is very deliberately not dealt with, and furthermore on occasion extra steps are actively taken to ensure the confusion.
leshenka 3y ago
I've never seen toggles show "what happens", they're mimicking the real-life toggle. Accent color means "I'm active" unless you're on an email newsletter subscription settings page, in that case beware

rezonant 3y ago

White/black "indicators" of toggles are horrid. A lot of phone and meeting apps do this and it's horrible. As for mute, I think it's pretty objective at this point that an icon based toggle should show the current state, not the state that tapping on the icon will produce. That's because the icon is serving two jobs: Convey the state and let the user change it. When a developer gets this wrong and shows a crossed out speaker while audio is playing, that's just frustrating.

Y-bar 3y ago
> As for mute, I think it's pretty objective at this point that an icon based toggle should show the current state, I can't see this holding up as the primary UI rule. And exceptions only for things like mute toggles are seldom a good thing in interfaces where predictability should be the king. It breaks down on play/pause toggles. The answer in my opinion is to separate the concern of the action and the state and distinctly show both at the same time.
- rezonant 3y ago
  That's true, but I just can't live in a world where mute goes the opposite way. I'm not aware of a major media player that doesn't cross out the mute when audio is muted (assuming it uses a crossed out icon at all). I also can't live in a world where play/pause is opposite to the way it is now: play icon should mean the media is paused, pause icon should mean the media is playing, as you suggest. If we constrain ourselves to only having two buttons (one play/pause, one mute/unmute), and only differentiating them by the shown icon, then I'm afraid it just has to go with the convention. They are inconsistent with each other, but intuitiveness beats consistency I guess. > The answer in my opinion is to separate the concern of the action and the state and distinctly show both at the same time. I don't think this is practical, especially on mobile. There is a need for these UIs to be concise, and even if there is enough space, each visual element comes at a cognitive premium to the user.
  - Y-bar 3y ago
    > each visual element comes at a cognitive premium to the user. As someone who studied two years of cognitive sciences as part of my degree, this is not necessarily true. Lack of information can often lead to even more cognitive load as the user then has to imagine virtual scenarios, an cognitive process which is linear. Visual processing however is largely parallel, faster and less consuming, as we have evolved to live in a visually complex and noisy environment.

albert_e 3y ago

When a button displays the text "mute" ... does it mean that the status is CURRENTLY muted, or that pressing that button will make it MUTE?

Y-bar 3y ago
Yep! When the _state_ and _action_ are intermixed it becomes ambiguous. This is one of may things we lost in the war on skeumorphism. The skeumorphic interfaces could mix both more clearly, using shading and texture and "lights" to indicate that a play button was pressed down and active. Look at this UI, it's mix of state and action: https://discussions.apple.com/content/attachment/861693040 https://discussions.apple.com/content/attachment/861693040 fast backward rewinds: Probably showing action Play: 100% ambiguous if action or state fast forward: Probably showing action Volume slider: showing state Back-forward buttons: showing action Select drop-down: Showing state
- iamtedd 3y ago
  As someone who has no experience with this version of iTunes: - The lower row is definitely a row of buttons. Back, forward, categories in the library (?), I don't know what the last one is supposed to do. - Are the things above that row buttons? Why don't they look like them then? - If they are, what does fast forward and rewind do? Skip to the next track and to the beginning of the same track? Actually move quickly through the track (like fast forward and rewind used to do)? Does pressing rewind go to the beginning of the track or to the previous track? If it's to the same track, how quickly do I have to click again to go to the previous track? - Is that slider a progress bar or volume slider? - Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? - I assume the coloured things are the window management controls. Does clicking the red one close the window and keep the music going, or does it stop?
  - Y-bar 3y ago
    > what the last one is supposed to do. It's indicating an iOS device being locally, e.g. for administration, backup, file transfer and the like. > Are the things above that row buttons? Why don't they look like them then? Haha yeah. That's modern Apple for you! > what does fast forward and rewind do? They sort of behave the way ff and fr does on a remote. Click/press fast and you skip to the next/previous song/chapter or equivalent. Hold down and you scrub at something like 4x speed. > Is that slider a progress bar or volume slider? A volume slider. > Where do I click and drag to move the window? If it's in that top row, why are there things cluttering up the title bar? How much space do I have left to move the window? I ask myself the same thing every day and have the same problem with many many apps, also in Windows. For example Firefox has the same design problem where its buttons have nor border and therefore have no clear place where draggable top space is and button is. > I assume the coloured things are the window management controls. Yes, these have remained mostly unchanged for over 20 years, they have gotten a bit flatter and lost some subtle small iconography. > Does clicking the red one close the window and keep the music going At least this part works well and in a predictable fashion. It consistently follows Apple's Human Interface Guidelines since well over 30 years: Closing a window or document of a Mac OS application should not quit the application. (there are some exceptions, but that is the default behaviour).

arrrg 3y ago

Ha! That‘s a surprise to me, I never noticed. So, checking out Apple‘s first party apps it seems that checkboxes are either solid color round circles (just the outline when unchecked) with a checkmark in the middle (for multi selections in lists) or just toggles (typically in settings). Those round checkboxes I could only find being used for list selections (even when the list is horizontal, e.g. when sharing a photo). Toggles for settings. Radiobuttons seem to always come with one element already selected. I couldn’t find an instance of an empty list where you select one element. In those cases (e.g. when picking your WiFi network) they are just a solitary checkmark on the left without the circle. It‘s internally consistent (as I assume visionOS is, too) and the checkbox design in visionOS is actually closer to iOS than macOS. I assume that‘s the origin with quite some history behind it. Nearly two decades. I think the more exact statement would be that as far as iOS is concerned the checkbox already was dead for nearly two decades. As far as UI conventions go I‘m not too worried. What worries me a bit more that this much more clearly frames visionOS (as well as running iPad apps) as a iOS descendant when this might be the platform with the space to be more clearly in the tradition of the Mac.

Y-bar 3y ago
> Radiobuttons seem to always come with one element already selected. This Apple behaviour follows the HTML spec: > At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially. https://www.w3.org/TR/html401/interact/forms.html#radio https://www.w3.org/TR/html401/interact/forms.html#radio
- Kwpolska 3y ago
  The current standard says something else: > If none of the radio buttons in a radio button group are checked, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script). That behaviour makes more sense for the Web, so that the user is required to make an explicit choice, and I'm not sure if browsers ever cared about this little part of the standard. When interacting with OS components, it makes sense that there's some default or already configured value. https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio) https://html.spec.whatwg.org/multipage/input.html#radio-butt...

moontear 3y ago

The articles punchline IS the use of toggle buttons?! Or have I misunderstood you?

lstamour 3y ago
I was using punchline to actually mean “point”, as in: I assumed the article would show some examples of toggle buttons, but the _point_ of the article was whether the checkboxes were round or square in shape. Yes, literally, at the very end there is a punchline on toggles. But it’s more for the laughs - a literal punchline - it doesn’t change the focus of the article.

grumbel 3y ago

My "favorite" toggle button is the one where they add on/off labels[1] to it, but only one, and the slider hides the label. So the label actually tells you the state, not the state it would be when you move the slider over the label. Or at least that's how I think how they work, it breaks my brain a little whenever I look at them. [1] https://itsfoss.com/content/images/size/w1000/wordpress/2022/12/installed-extensions-listed-in-gnome-extensions-website.png https://itsfoss.com/content/images/size/w1000/wordpress/2022...

wredue 3y ago
I actually hate this one because it’s completely unclear. Does OFF there mean -the setting is off Or -Slide this thing over to turn it off I’ve seen it both ways. It’s confusing and not clear.
- MrOxiMoron 3y ago
  is the bridge open when it's up or is it closed when it's up?
  - chrisweekly 3y ago
    are you in a car or a boat?
    - NoPedantsThanks 3y ago
      [dead]
- RunSet 3y ago
  https://www.youtube.com/watch?v=Ljjns1Y1q-A https://www.youtube.com/watch?v=Ljjns1Y1q-A
mc32 3y ago
Those are terrible. I think I’ve had analogs in the physical world where toggles indicated state by the color exposed (green = on, red = off) but this tries to be better by having both color indicator and text indicator) and you’re left deciphering their language a bit. Yes, it is terrible.

LeonB 3y ago

Yes absolutely this — > my fav pet peeve remains the unclear toggle button. When the icon is white, is it on? Is it off? Does the line through the microphone mean it’s muted? Or that it mutes when tapped? No one knows, tap it a few more times to find out… There’s no UX consideration just design by committee, looking at static renders of the “design language”

fsckboy 3y ago

> iOS has had round checkboxes since forever? but iOS hasn't been around forever. In the spirit of TFA, iOS marks the start of the Vandals climbing over the gates and sacking what had been to melt it all down and make a soup of melty things.

coffeebeqn 3y ago

Toggle buttons are hard! I tried making some for a game I made once but ended up just using text because half the people thought it meant the opposite of what it did

hn_throwaway_99 3y ago
So why not use a check box?
- coffeebeqn 3y ago
  Re-inventing the wheel I guess

gcanyon 3y ago

I’m ashamed I never noticed this until you pointed it out. Standards can be broken insidiously, and it’s disappointing that a company that cared about consistent UI enough to put out the HIG. Having typed that, I read the HIG on toggles and realized that those items in iOS aren’t checkboxes. A checkbox turns something on or off. The “round checkboxes” used in iOS are to select multiple items for further action. I don’t know what those are, or if/where they’re covered in the HIG. https://developer.apple.com/design/human-interface-guidelines/toggles https://developer.apple.com/design/human-interface-guideline...

samstave 3y ago

>>>"...increasing use of on-off toggles instead of checkboxes" One of the most egregiously angering thing to me is toggles that self un-toggle: "Disconnecting Bluetooth Until Tomorrow" WHAT? I literally just commanded the device to turn something off which required me to pick it up, unlock it with a biometric identification, navigate to the settings containing the option I want to control with my physical hands, look at the screen, read the results for the object I want. Make the decision to turn a thing off. Do so by physically touching the device and adjusting the setting - not the Device says "Oh you want that off? More than for just a little bit? Well, I'll have you know that we use your Bluetooth radio for a lot of our data tracking systems, so its important to us that its on - so we've coded your device's operating system to only allow you to turn off your Bluetooth radio temporarily so you feel like you're in control of it. Why? Because Fuck You Thats Why. Now go back to browsing reddit"

djur 3y ago
I find that kind of "feature" frustrating as well, but I'm pretty certain that the reason it's there is that otherwise they get a constant deluge of support requests from people who forgot they turned it off.
- neuromanser 3y ago
  If only Apple had the resources to create and enforce a UI that would make disabled Bluetooth obvious. /s
- samstave 3y ago
  I fully believe you and I are both correct. Yours is so "Benevelant Big Brother", mine is the 'Sinister Big Brother' <- Evil twin.

dartos 3y ago

> Likewise I thought the article’s punchline was going to be the increasing use of on-off toggles instead of checkboxes It kind of was. The last line of the article is “Kids these days will just use a toggle anyway”

lstamour 3y ago
Yes, but it took awhile. :) Also, I feel like the era when checkboxes were actually filled squares or Xs within square braces were less “checkboxy” in that they filled a box but were not “checkmark” shaped. It’s arguable they were toggles already, just data-constrained design variations of them.

amadeuspagel 3y ago

Of course the entire point of the article is whining about the web and web developers.

stevage 3y ago

As a non iOS user, I always get thrown by the horizontal slider toggles. I can never tell by looking at one if it is on or off. And sometimes on touch screens I try to slide them sideways and it doesn't work.

Gabrys1 3y ago
Tabs in Gedit are the same. Whenever I have two text files open, I always understand the tab bar wrong: the item I read as active is inactive and vice-versa. All becuase they doing follow the traditional tab design and use some sort of pills instead.

hombre_fatal 3y ago

That reminds me of how every other time I silence/unsilence my iPhone, I stare at the "Silence activated" / "Silence deactivated" and work out in my head if it means the phone will make noise or not. Despite doing it thousands of times. I suppose "Sound on" vs "Sound off" would be better because in the moment I'm thinking of noise and sound, so silence is the inverse of that and kinda forms a double negative situation. "Not-noise mode activated / not activated".

djur 3y ago

An app I use regularly and have introduced numerous people to uses a small toggle slider next to text that reads "Yes, [enable this feature]". Both I and literally every person I have introduced the app to have made the mistake of assuming that the "Yes" text described the current state. What's worse is that the "on" state of the toggle is just slightly more activated-looking than the "off" state. You could hardly design it worse on purpose.

ummonk 3y ago

I could swear Discord inverted its mic button on vs off convention sometime last year.

inquirerGeneral 3y ago

[dead]

dusted 3y ago

The must microphone is a great example. I'm often finding it hard to find out whether that type of input means "change state to this" or "this is the state". Most confusing is when the text changes along with the checkbox, I just go from one unknown state to another.

harperlee 3y ago

> Kids these days will use a toggle anyway. From the end of the article

beAbU 3y ago

I've only seen round checkboxes used in the context of selecting multiple things in a list of indeterminate size, like emails in your inbox, photos in your gallery, etc. In my mind this is a slightly different application to the classic "form" that you fill out with data and options before submitting.

beAbU 3y ago

I also absolutely hate switches in almost all contexts. In some applications it can make sense, like the UI that controls your WiFi or something. The reason why a light switch is so effective is because we can see an immediate response/impact on our action, the direction that the toggle points in is actually irrelevant, because either the lights are on or off, and toggling the switch changes that state, and I can verify with my eyes. Usually it's safe to toggle the switch back and forth until the desired state is achieved. In software that's not always possible, and often changing the state has destructive results. So you can't experiment. And then you get the abominations that bring in double negatives, and things that use switches to control something more complex than a simple boolean state. "Disable the nuclear missile warning test = ON/OFF" - like what the hell does this even mean, and how can the user be expected to understand what the right option is without trying first.

NoPedantsThanks 3y ago

[dead]