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.

Also, most windows aren't eligible for tooltips if they are not the focused, active window. I remember that difference being hard to explain to people when Windows 3.x and Mac Classic used entirely different title bars between the two states and sometimes even "shadowed" the window contents. It's especially hard to explain to today in a multi-monitor world and when inactive windows respond by default to all other inputs except some hover behaviors like tooltips. (I'm a software developer and know all this too well and I still tripped over it the other day wondering why tooltips wouldn't show up in a window and only realizing belatedly that the window wasn't active.)

It is ok; you just have to offer a different UX for each medium. And not every application is done on every medium. I don't code or write long-form on my phone.

Laptops have touchscreens too.

And trackpads or mice that let you hover.

Some laptops fold so the mouse/trackpad is inaccessible and/or disabled.

I have a Lenovo yoga, and its a constant nightmare of websites and apps that cannot figure out if I am a laptop or a tablet, even with tablet-mode fully off. I am usually offered whichever UI is least useful for my current configuration

Real question: Are there any touchscreens that provide the equivalent of hover with your finger?

I have an older Android (Samsung S5) with a physical hover feature - you literally hover your finger close to the screen and it triggers hover actions like previewing a message or opening a magnifier over text. It is called "Air View"[1] in Samsung lingo, and was coupled with other features ("Air Gesture"[2]) involving moving your hand over your phone to do things like scrolling or waking the screen.

It's finicky on occasion, but when you are used to it, it's surprisingly intuitive practical! It wasn't super popular though, and I imagine it could be annoying to users who didn't want it. It appears they only did it for a few models, ending in the S5.

That phone was pretty interesting, sensor-wise. I kind of miss using it, and I wonder if it would be practical nowadays.

[1] Air View: https://www.samsung.com/hk_en/support/mobile-devices/what-is...

[2] Air Gesture: https://www.samsung.com/hk_en/support/mobile-devices/what-is...

Would tap-and-hold be the closest equivalent?

At least that’s how you get tooltips on Android. Of course, tooltips were designed to be discovered by a user hesitating with their mouse over an UI element (sometimes works, sometimes doesn’t), while tap-and-hold on buttons you have to know about, and it’s still scary when the button looks like it could do something potentially destructive and you want to find out.

Long-tap to see tooltips is a convention that has been proposed in various incarnations of the Android UI guidelines. The convention was present in very early Android UI guidelines (e.g. Android 4.x); I'm not sure if it still is.

The problem is that long-tap gets used for a lot of other things on Android (extended selection, particularly). The user experience is pretty unhappy if you use both conventions. And, in practice, long-tap tooltips are so rarely provided on Android apps that I doubt that ordinary users would expect them at all.

As far as I know, tap-and-hold (as distinguished from long-tap) isn't a conventional gesture on Android.

>> Hover isn’t really acceptable UX since the touchscreen era

It's an augmentation that can be used on desktops though. I agree that it shouldn't be necessary but, but it can help. Some apps aren't meant for mobile either.

Depends on who your target audience is. Many applications can still safely assume they are for office workers using a desktop or laptop computer with a keyboard and a mouse.

An element should do one thing, not two.

Current state is the best, but it's still not immediately obvious unless you say "current: on" and "Click to turn off" in the hover.

At least sliders generally have right for on, as opposed to pure text toggle buttons which are just awful.

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.

The intended analog is lightswitches with the text on them.

https://cdn.thisiswhyimbroke.com/images/lightswitch-identifi...

I've never seen lightswitches like those, but that's a terrible design as well, for the same reasons.

They're ubiquitous in America, but approximately nobody pays attention to the text because the position is what indicates on/off, where "up" in "on".

Huh, I'd always considered that toggle switches are "down is on". (UK resident).

That way it's the same as a standard rocker switch (the direction of rotation is the same).

I’d expect a rocker switch in America to also be the same as our light switches - pressed at the top for on, pressed at the bottom for off.

That's generally a rocker switches work on devices in America, e.g. guitar amps: the side that is pressed is "on" or selected/enabled.

Last time I was in Europe (Portugal), I remember having a lot of difficulty making sense of the light switches, but it was one of those apartments where you have two or three light switches controlling the same fixture, which is always confusing.

Still, I think the American light switches are actually pretty good. Maybe one day we will get a Technology Connections video about light switches around the world.

Until you encounter a switch that's part of a three-way switch arrangement where up can be on or off depending on the position of the other switch in the circuit.

I've lived with these my whole life, in every place I've lived, plus with one or two switches that were sideways, so the first time I'd ever heard "up is on" was in a comment thread like this a few months ago. I didn't think there was any sort of standard, it's just always been "flip the switch if it's not currently what you want".

This is in the US.

It's still "on" in the sense of the circuit being closed.

In this case I mean "down" as in "the long part is pointing toward the ground", not "some button-like thing is depressed towards the wall".

Agreed, in the UK:

- 'angled towards the ground' is 'On' (https://cdn.aws.toolstation.com/images/141020-UK/800/10481.j...)

- 'angled towards the ceiling' is 'Off' (https://www.tlc-direct.co.uk/Images/Products/size_3/MKK4870....)

But that's completely backwards from a normal rocker switch!

In Aus most light switches are rocker switches that are also "down = on".

In aviation (and old cars) switches are usually toggle switches with "up = on".

Strangely I'm ok with both. I think of rocker switches as opposite to toggle switches automatically.

- https://www.google.com/search?q=rocker+switch

- https://www.google.com/search?q=toggle+switch

With a light switch you can immediately verify that the switch is in the correct position by looking at the light you want to control. Text/labels/positions don't add anything of value. Also, it's usually safe to experiment with the toggle until you get the desired state.

In software often none of this applies.

> green = on, red = off

Are you sure? I think the opposite is more common.

I have at TV that is red-lamp off, blue lamp on.

where have you seen red = on, green = off?

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.

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.

Maybe because a gun should never be treated as totally safe.

In security red generally means encryption/protection is active.

And then there is this: https://en.wikipedia.org/wiki/Tally_light

> In the active (on air) mode, tally lights are typically red.

> Some cameras and video switchers are capable of additionally showing a preview tally signal (typically green) for when the camera is about to be switched to and become the main source of video signal. Once the switch happens, green changes to red.

> In security red generally means encryption/protection is active.

That's daft. You want to highlight (red) the insecure state, and reassure (green)in the secure state.

Really?

Do you want a real-world example have a look at US White House:

> President Obama talks on the phone aboard Air Force One. April 10, 2014.

> The Airborne Executive Phone has the red light on, which means it's a secure call.

https://www.electrospaces.net/2017/01/the-presidential-commu...

It is further made more clear because NSA literally calls their secure network the red network.

red and green should not be used like that. A significant fraction of the population, especially males, has difficulty telling them apart.

That's why mains wiring no longer uses red to mean live and green to mean ground.

I’ve seen it a few times on the web with cookie preferences pop-ups, to set your tracking and personalization preferences. Dark patterns to confuse and trick website visitors into enabling all tracking settings.

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.

Red means “stop” and green means “go”. So how the fuck does red mean “this door is passable”??!

“Unsafe” is contextual. If you are inside the car, and the car is on fire, then “locked” is very much the “unsafe” option.

I've been in moving vehicles where opening the door would have been unsafe more than I've been in car fires. I often lock my car when leaving as well which usually unlocked is a bad state to leave it in, that normally happens more often than being in a burning car.

Are you in burning cars often?

Honestly, if I’m in the car and we’re driving then I want to see a red light for same reason: red means stop and green means go. Or from outside after parking it: will this door open or will it stop somebody.

Red also often means "danger, caution" not just "stop". A red stop sign means "pay extreme attention here, there's danger, please stop and evaluate". A red DO NOT ENTER sign isn't just saying to stop, its saying there's danger heading that direction. If you just stop there its probably not going to end well, So clearly they're signaling more than just "stop".

I'm still unsure, have you been in many burning cars before? More than just moving vehicles?

On many guns, switching the safety to the "fire" position exposes a red dot, red meaning "hot" or "fire".

Yeah my CZ pistol is like that and it’s fucking terrifying because in my mind red means stop or locked. I actually feel more secure with my Glock because it doesn’t have a safety so it’s unambiguous. If I point my Glock and squeeze, I know it’s going to fire.

The red of a stop light makes a lot more sense in relation to the red of a fire mode on a gun when you think of red being "caution, unsafe" instead of just "stop". Just like the red of a STOP sign is to caution you into paying attention of the danger of the cross traffic, not necessarily just stopping.

Red lights on top of towers isn't trying to tell planes and helicopters to stop, its telling planes to exercise caution around the tower.

Or like at a railway crossing. The flashing lights indicate danger, and the barriers drop. According to GP, the lights should flash when the barrier is not dropped, because now it's unsafe, FFS.

Reprogram your brain for "Red means danger, green means safe" and you'll do a lot better.

Red at a traffic light means there's a danger so you stop. Green means it's safe to proceed.

Red on a gun safety switch means danger because it's live.

The red wire is live and dangerous. The green wire is earth and safe. (at least true in Europe).

Ah, my CZ is a DA/SA with a decocker. I'd recommend it! No manual safety, but you can hold the hammer forward while holstering.

If you’re inside a car and the car is on fire, you’re not determining the state of the door lock by its position visually. For people inside the car unlocked is the unsafe position in most cases (leaving, driving.)

(Do car still come doors that don’t automatically unlock when the handle is pulled, if the child safety switch is disabled?)

At my current workplace (particle accelerator) one control panel in particular has red for "good" as in "this is red, so don't go in here, because everything's fine and you have no reason to". Always amuses me.

The link is 403 for me.

It's been archived

https://web.archive.org/web/20240128035720/http://www.homede...

I guess such interactive elements always show the current state of the system, and when they are interacted with, it changes the state it was in, examples: 1. Social media buttons for upvotes/likes/dislikes 2. on/off toggle switches for features 3. microphone/speaker buttons on desktop OSes

The YouTube play/pause button shows the action it will do, not the state that it is in.

>> The YouTube play/pause button shows the action it will do, not the state that it is in.

A lot of physical play/pause buttons show both symbols. Also in a lot of cases you can tell if a video is playing.

Not if it's buffering because you know that you have a bad internet connection. Around here, I often see people skip to an earlier portion of the video to check if it is playing or not.

And that is anyway besides the point of consistent UIs' toggle switches describing their state, not their action.

I miss the old convention of showing a button with shadows indicating it's been pushed in vs. showing it with just a flat plane when it's not pushed in. A button that shows that it's been pushed in with a triangle icon means it's playing, clicking or touching it will stop it from playing. A button that doesn't indicate it's been pushed in with a triangle icon is not playing, clicking or touching it will start it playing. Bonus points if there is a small virtual led that turns on when it's pushed in.

Fewer and fewer devices we have access to these days have physical switches on them, though.

As someone who has built media players, the established convention seems to be that the play/pause button shows what the button will do. It hurts me to do "button shows what it will do" every time. But all the other media players I'm familiar with do it this way.

Does anyone know of a major media player where the play/pause button shows what the state is, rather than what the button does?

Why not just have separate play/pause buttons and highlight the active one?

And (as a european) i'm reminded of the confusing american light switches which show a light when they are off. Oh, and they toggle in the wrong direction (up is on?).

By comparison, it's quite common here to have a switch with a lamp to indicate the light is on, which get used when the status of the light cannot be easily seen where the switch is located (e.g a switch for a light in the loft/outside light etc).

I believe American light switches are intended to confirm to a standard if installed correctly. But that all goes out the window with a 3 way switch.

I'd say in a residential setting our switches make a lot of sense.

The light up variety are mostly to aid turning on the lights in the dark and aren't usually the default. It's nice being able to see the switch when entering a dark room.In a residential setting it's a bit more rare to have a switch control a light you're not either immediately seeing or are often imminently going to see, like a closet or looking out a window next to the switch. It's not like you're often turning on and off lights across the house, so having it light up when the room lights up is rather redundant instead of offering that dark time help. Finally, having an on light would be really redundant since you can usually easily see the switch is physically pointing up or down and they sometimes even say ON or OFF.

As for up being on and down being off, it's about being easier to toggle to the safer state. It's more likely for off to be a safer state (think changing a bulb, having it connected to a garbage disposal, etc.). It's generally easier to flip the switch down than flipping it up, so it's easier to toggle to the safe state rather than the unsafe.

> And (as a european) i'm reminded of the confusing american light switches which show a light when they are off.

I have those in Europe. The point is that you can find the light switch in the dark. Why would it need a light when it's on, if it's in the room that it lights?

This reminds me of when i was studying electronics and we had to design a circuit with some purpose. I made a “Light indicator” with an LED a photoresistor and some other stuff.

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.

is the bridge open when it's up or is it closed when it's up?

are you in a car or a boat?

My same thoughts. The inventors of that revolutionary toggle button should all be tied to the South side of an ass walking towards the North.

I don't like these. They can be mistaken to users as an indicator of what moving the "lever" to the other side of the toggle button will actuate - effectively reversing the user's intent of the button as compared to what the buttons do.

Or when you try to unsubscribe from a mailing list and are prompted:

  Unsubscribe from the following:
  [X] List A
  [X] List B
  [X] List C

  [ ] Unsubscribe All Lists

But if you check the "all" button it clears all of the individual ticks.

I would say a solid 80% of unsubscribe prompts have some sort of similarly confusing layout or verbiage.

That's by design. They want to minimize the number of people who completely unsubscribe.

Having an Unsubscribe All Lists checkbox doesn't minimize that. It just adds form noise and pointless work for a dev. The minimization already happens with the preceding checkboxes to select each list to unsubscribe from, but that's just as inherent to the form as the desirable feature of being able to keep certain subscriptions while unsubscribing from others in an efficient way.

A button or link in place of the 'All' checkbox makes sense and is easiest for users to understand, and has less user actions required.

Treat your customers well even when they're exiting (especially) so they remember something good next time they consider you. "Well at least they made it easy to unsubscribe" is better than "Well they made it unnecessarily complicated to unsubscribe". No need to add insult to injury.

I have to admit I've never experienced this. When I check the "all" checkbox it goes and checks all the other checkboxen for me. Maybe I've only interacted with "nice" unsubscribe pages.

I've seen both versions, and whether they check or uncheck all of the other options (behaving like a radio button), both versions are overcomplicated nonsense.

The unsubcribe-all should just be a link or button with its own submit value or URL param (like unsubscribe=all).

I don't know why people overcomplicate things.

It makes no sense to have a checkbox for "Unsubscribe All Lists". That should just be a link. There's no point in adding a redundant form element even if it's only conditionally redundant.

Or a radio button between all and choose which to unsubscribe from.

I think this is about confusing AI like that offered from gmail or iCloud email that will unsubscribe for you if you click on unsubscribe from their respective inbox / application. Fastmail offers this too.

I noticed there are times I have to do it manually and can't take advantage of auto unsubscribe because the button layouts are like this.

The unsubscribe buttons in email clients are powered by a header that the email includes. Google and Yahoo just started requiring these for all bulk senders (they were previously a best practice only). It doesn’t rely on what the manual preferences page looks like.

This is just a standard unsubscribe header. It's added by the sender specifically for this purpose and has nothing to do with the UI you see. Not everything is AI, but it being the default assumption is funny to me.

I remember when I designed a list of checkboxes this case was specifically considered. The last one needs to be updated when all of the checkboxes above are checked or one of them is unchecked.

I would not be able to tell if these slider toggles were saying "yes" or "no" without them going from gray to green. How do colorblind people deal with them?

That the whole world adopted these abominations, when there was absolutely nothing wrong with checkboxes, is immensely frustrating.

Most of us cope just fine, so long as the contrast between the states is clearly different. My colour blindness is anomalous trichromacy, with a perception difference for red-green. Because the examples shared are a bright blue for on and black for off, I can see it just fine, however, I'd suggest making the switches off state back ground the same as the main background in this case. Aesthetically, it looks better.

Does green (usually these are blue) mean yes? Every time I see one of these I realize I don't understand them and I'm not even sure they are consistent in behavior. I usually use a context cue to infer what they mean. The dumbest part is there is plenty of room to just write "on" and "off" right on them.

I think it is no coincidence these are the preferred control for all manner of dark pattern setting screens.

Yes, green means "yes".

Now, does light-green mean "no" because it's light, or "yes" because it's green? That one you have to check on each application.

Yeah so in your example:

"Disable all extensions" = OFF.

Does this mean all extensions are currently on, or off? Does toggling the switch to on /enable/ the disable-all-extensions subroutine?

A switch brings in a bunch of double negatives that can be avoided in most cases.

Hella confusing!

>> A switch brings in a bunch of double negatives that can be avoided in most cases.

If you put the labels next to the switch: ON [xxxx] ---- OFF then it's clear that sliding the switch toward the label puts it in the on or off state. But hey, we can save some screen real estate but swapping the labels and hiding the inactive one under the switch! Yay! For on/off a chechbox is much clearer for the size.

Physical switches are labeled like that. Somehow, it's not a problem for them, but I do agree that on-screen ones are very unclear.

It's rare to see physical switches like mobile toggles. Most switches show both labels with the switch pointing to the label. It's clear what the status of the switch is and what changing the switch will do.

With software however, the inconsistency comes from knucklehead design. Hipster aesthetics. "But I want ours to be different!" They introduce toggles that don't follow convention and make unclear the status and behavior, or if touching it will even do anything. It then muddies up in people's minds how the conventional ones look and behave.

Physical sliding switches usually look exactly like the ones on your link.

Ex: https://www.chily.com/customer/chily/product/3331_350.png

(Why selling photos of those things never seem to show the label?)

My "favorite" is when they use green color to indicate "Off". Like in this page

https://www.istockphoto.com/plans-and-pricing

The dark patterns here are something to behold (A bit like Adobe's stuff)