I’m surprised nobody has mentioned that iOS has had round checkboxes since forever? 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…
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?
I'm designing an app right now with this pattern and I'd love to get it "right".
We've got a video playing and an icon button which controls whether the video is muted. We've got a "playing speaker" and a "muted speaker" icon.
What's the correct pattern? Should the icon reflect the current state, or the expected state after pressing the button?
I think, bizarrely, the control pattern for mute "flows" the opposite way to the control for pause/play. If there's a play icon, and you click it, you expect it to play the video. If there's a pause button, you expect it to pause the video. Going against this pattern, if I see a speaker icon, and I click it, I expect it to transition to a crossed-speaker, and mute the video, and vise versa. That is: the current button state in play/pause reflects the action of the button, while the current button state in volume reflects the state of the button.
I think these conventions are easily solved for video, anyway, because it's obvious when the video is muted or not (hopefully).
It isn’t always obvious to me. Sometimes I can’t tell if a video player is muted vs the system volume being low. There’s also the situation where a video is silent and I don’t know if I’m supposed to be hearing anything.
I think these conventions come from actual players like VHS and walkmans. The play, pause, stop,… where actual buttons and mute was an icon on the status display. Buttons are actions while icons are state. The rare case where there was a mute button, it was toggleable (or have a led on it) and these always reflect the state.
my memory of a Walkman had a wheel for volume but a mute button was not something I'm familiar on this device. see this image for reference:
https://vintomatic.com/wp-content/uploads/2022/11/Vintomatic...
They frequently had a "click" at the end of the volume wheel that would fully mute.
The icon should depict a muted speaker and shouldn't change. Then add a LED-like dot to show when the function is active.
Not as unambiguous as it sounds. My keyboard has an led that lights up when the speaker or microphone is muted. But the camera only lights up when it is on. Do we want to show when the function is active, or when the device being controlled is active? I would say the latter is generally better, since it indicates a potential vulnerability / exposure. But then we have to deal with security devices!
This nails it! It’s essentially equivalent to a Boolean property, muted = true|false.
I always appreciated Mackie's Rude Solo Light. It was very difficult to not realize it was enabled.
Don't use icons then, use words. Words like "video is muted" or "mute the video".
Long ago, Apple's HI group had a saying: "a word is worth a thousand pictures".
wow, what a great slogan. It seems so far removed from modern, minimalist-flat-icon-obsessed design which Apple is now the poster child for.
I strongly disagree.
In a conferencing app, for example, "mute" could mean switch audio off, or just the mic, or both.
And consider that a word, even "mute", might not have an equivalent in every languages.
words take up precious real estate and makes the UI look congested/cluttered and is exactly the opposite of the desired clean look. if things are more ambiguous, it is just something for the user to come to terms with. --Jony Ive in some unwritten extract of thoughts
One button one function if you ask Dieter.
https://en.wikipedia.org/wiki/Dieter_Rams#/media/File:Dieter...
Although not standard, I'm thinking that a slider with a muted speaker icon to the left and a playing speaker icon to the right would be unambiguous.
a dedicated mute button for single click action is much appreciated instead of several clicks or click-drag to get to the desired state
Sorry, I used the wrong word. I had an iPhone-style switch in mind which slides when you tap it.
If you have one button, I think it has to match what people are familiar with, and the major players all show the current state. If you have a volume slider or buttons, the mute button is adjacent to the silent end (bottom or left for me; I don't know whether RTL languages flip volume controls).
current state - this easily generalizes to settings with multiple options.
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
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
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?
It's indicating an iOS device being locally, e.g. for administration, backup, file transfer and the like.
Haha yeah. That's modern Apple for you!
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.
A volume slider.
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.
Yes, these have remained mostly unchanged for over 20 years, they have gotten a bit flatter and lost some subtle small iconography.
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).
This can be changed by going to "about:settings" page and setting the option "browser.tabs.inTitlebar" to 0.
That about:config setting is a halfway okay solution for a single app, it loses vertical space however, which is my premium. Optimally I would like a way to (in all applications which has this problem) to _simply show me_ what is a UI widget/button and what part is "inert" draggable window chrome, like this older screen shot where the distinction is unambiguous and clear:
https://i.stack.imgur.com/Se6i0.png
symbols in "traditional" media playback, the icon shown would traditionally be for fast reverse/forward. skip back/forward to the previous/next would had a vertical bar to the point of the triangle. some also go so far to differentiate skip/scanning where scanning uses two triangles while skip uses one triangle with the bar. not really sure what Apple has done to them though. i would almost expect them to be skip instead of the scan with Apple expecting you to use the playhead (in whatever format it is made available) for scanning.
the play button in Apple's use is typically action instead of state. so in this state, clicking it would start play, and then the button changes to the "pause" symbol (an = rotated 90°).
so this is a really good example of mixing usage.
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...
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.
Are you sure? I think the opposite is more common.
where have you seen red = on, green = off?
Most safety switches on firearms expose a red dot meaning the weapon is "ON"/ready to fire.
I agree with you on that, but I’ve never seen green be the contrasting or alternative color.
In electrical industry, red used to mean powered or hot or dangerous, green unpowered or harmless.
All earth-leakage breakers in my area are like this: https://en.m.wikipedia.org/wiki/File:Schneider_Electric_A9D3... https://i.ebayimg.com/images/g/sHYAAOSwu2ZkBk5~/s-l960.webp
Electronics industry have diverged.
In security red generally means encryption/protection is active.
And then there is this: https://en.wikipedia.org/wiki/Tally_light
I have at TV that is red-lamp off, blue lamp on.
The intended analog is lightswitches with the text on them.
https://cdn.thisiswhyimbroke.com/images/lightswitch-identifi...
An icon or text should indicate the current state while hover text should indicate what will happen if you click. At least that's what we do. It's still confusing, but I agree you should be able to infer current state by looking at it. The person who designs it thinks it's obvious but it's usually not.
Checkbooks are quite self explanitory.
Hover isn’t really acceptable UX since the touchscreen era
Even on desktops it's not great for accessibility. There isn't an indicator for what has tooltips, and they appear out of the usual flow of control.
Accessibility guidelines usually allow them but encourage you to make it a last resort.
Not to mention that half the time tooltips don't show up until you wiggle the mouse over them a bunch, and tooltip delays are arbitrarily timed and usually far, far too delayed (often on the order of hundreds of milliseconds when they should be like 10-50ms at most). And my biggest pet peeve about them is that, at least in Chromium-based browsers, they really don't like to go away once they finally show up, to the extent that I can often scroll the page until they're offscreen and they still don't disappear. Or they leave the farm entirely and persist outside the browser window.
An element should do one thing, not two.
Showing the current state matches light switches with the state on them.
https://www.homedepot.com/p/Leviton-15-Amp-Single-Pole-Switc...
Or car door locks which show red (unsafe) when unlocked. It's showing the current state, not the state that will be when toggled.
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.
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.
Your parent is talking about their parent's second paragraph, about toggles in settings.
That is what I am talking about as well
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.
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.
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.
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.
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.
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.
This Apple behaviour follows the HTML spec:
https://www.w3.org/TR/html401/interact/forms.html#radio
The current standard says something else:
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-butt...
Huh, that's odd that it got changed. I can't think of any valid case where [no option] checked is part of a set of radio buttons. The user must be presented by a default, their entire reason for existing as is that one of them is checked all of the time.
Microsoft's Windows guidelines implicitly says that one option must always be checked: https://learn.microsoft.com/en-gb/windows/win32/uxguide/ctrl...
In a political vote, wouldn't that be untolerable bias?
I would never use a group of radio buttons in such a case, would you?
But if hard pressed and not allowed to design a better UI I would do the following options with radio buttons:
( * ) blank vote
( ) Option A (potentially in random order vs other non-blank options)
( ) Option B (potentially in random order vs other non-blank options)
( ) Option ... n
Why would you not use radio buttons? And what pattern would you use instead? I don’t get it …
Radio buttons are the correct metaphor for picking one option among a list of options. Why use something else? What use interface element do you think exists that works for this kind of interaction?
I’m honestly confused why you think radio buttons are the wrong type of interface element for this interaction. What‘s the reasoning as to why this seems so obvious to you? I’m honestly just trying to understand you.
Surveys are a valid use case for radio buttons that come unchecked by default.
You do not want to influence people by presenting them with a default (already checked) choice. (You also typically want to randomize the order, at least when there is no inherent order to the options, e.g. when you are asking about frequency.)
Surveys are also the place where that distinction between single choice (radio buttons) and multiple choice (checkboxes) becomes most apparent because surveys tend to liberally mix the two, so any additional UI signposts you can use to help people filling out the survey are helpful. (The typical recommendation for multiple choice is to still explicitly call out in text that multiple options can be checked.)
Surveys sometimes also have the absolutely wild combined list with checkboxes and – typically as the fixed last option even if you randomize the rest of the options – a radio button (e.g. “None of the above”) that automatically unchecks all other options (and is unchecks itself if any other option is picked).
I don’t think this exists in any spec anywhere but is the most normal thing in the world in most survey software.
I‘m always very precise with whether I use checkboxes or radio buttons when designing surveys.
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.
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.
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.
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.
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.
Fair, but I think there's a middle ground here, obviously an entire screen of buttons on top of a video occludes the content that you want to watch. Even if our visual cortex can handle it, I don't think its desirable if it can be avoided.
Of course, admittedly if all you have is a play button and a mute button (or some other very simple player) it probably doesn't matter much.
I think Twitch's UI is a good example of where the clutter goes too far. It's loaded with tons of distracting bits and bobs. Makes sense for their business model (most of these relate to how you can spend money on the platform), but from a user perspective it's unpleasant.
The mute on the touchbar on my MacBook Pro has a slash when unmuted (and also when muted).
It looks like this unmuted: https://discussions.apple.com/content/attachment/e909bffc-81...
and this muted: https://discussions.apple.com/content/attachment/e3e9c230-e4...
I believe the reason it always has the slash is to distinguish it from the "change volume" button (which, when pressed, pops up a volume slider). But it's still confusing.
Traditionally, the play / pause button is labeled with both icons. It has no need to display state, because the state of playing or being paused is obvious to the user. That button would be telling you the same thing you see by watching your video.
But a mute indicator isn't telling you how other people appear to you. (That would be "deafen".) It's telling you how you appear to other people, which you have no other way of knowing.
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
So why not use a check box?
Re-inventing the wheel I guess
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.
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?
I find toggles very confusing. Is it showing the current state, or what happens when I toggle the state?
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.
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"
The articles punchline IS the use of toggle buttons?! Or have I misunderstood you?
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-guideline...
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.
It kind of was. The last line of the article is “Kids these days will just use a toggle anyway”
Google Mail and Google Photos on Android also have round checkboxes.
Of course the entire point of the article is whining about the web and web developers.
Yes absolutely this —
There’s no UX consideration just design by committee, looking at static renders of the “design language”