Hacker News Reader

Comment by foobarbecue | Hacker News Reader

His "flash mode" example, which he labels "good," is bad, in my opinion.

He's drawn one of those circle-in-a-slot switches. I often have trouble figuring out what the on / off state of those is supposed to be. And then the discription "flash mode" makes it even more unclear how a switch state corresponds to app state (does on mean enabled? does on mean suppressed?).

The good example for "email weekly summary" is actually good, because checkboxes have a clearly enabled / disabled state and if it's enabled the user knows the thing in the text next to it will happen. It's clear. "flash mode" should be re-written in the "email weekly summary" style. It would have a checkbox with a label "use Adobe Flash for rendering."

View on HN

His flash example is particularly bad because it's not a setting that should be binary in the first place. Auto/On/Off are all important settings for flash photography. Removing one of them would actively anger a lot of people. This section is actually a really great example of how tiny decisions made in UI can actively reduce usability even though on the superficial level it seems like a good idea.

I also think flash mode is represented well on most camera apps. I wouldn't change a thing about them other than maybe adding a text label.

The absolute worst is the "iPhone is dead / charging / not charging" graphic on my phone. I have absolutely no idea which one indicates that the charger is successfully connected. Like PLEASE can you just put the label "Charging" on it.

Is this an instruction or a status?? https://i.imgur.com/2u8RlDG.jpg

Not owning an iPhone, I would say this is an instruction. Once it's charging, the battery indicator should show a lightning symbol in the middle, or a "Charging" text as you said.

I don't have an iPhone, so I would say that the lightning symbol and the plug icon means the cable is connected and charging.

One of the worst trends in UX over the last decade has been that words have been replaced by iconography. Google seems to have really led the way on this from what I can tell. They've also pushed hard to make every one of their icons impossible to tell apart at a glance: they used to have distinct colors and shapes for each of their apps. Now every app is a white circle with a slightly different rainbow in the middle. It's baffling.

The real solution is to stop describing the thing being changed and start describing the state.

"Flash mode" is the problem.

"Flash is on/off" is the solution.

("is" is important here. "flash on" has many ways to be interpreted because it's missing a verb.)

Your UI should be understandable from text alone if needed.

One of the problems compounding unusable UI that I've noticed is the trend to use as little text as possible.

I can understand why designers and even developers want to not use text: Handling multiple languages is annoying and getting people to read is impossible.

But you know what? I don't understand what that fucking black-and-white hieroglyph you pulled out of your ass five days ago fucking means.

you mean pulled out of font awesome's limited ass

For booleans I tend to prefer using “Enable/Disable”. In this example, “Disable Flash” with a checkbox that is clearly in an “Enabled” state can reduce ambiguity. Alternatively, displaying the state and using tooltips that describe the action can be great, but falls apart on mobile devices.

That leads to the extremely common confusion of if "disable flash" is a description of what you will do when you interact with the control (the verb describes the action to be done), or a description of the current state (it's a "yes, disable flash" confirmation). Both are common. Some apps even use both on different controls.

Compare that to a checkbox next to "Flash is disabled". Or a toggle. Or a button. The control and its vague state or bad color blindness choices doesn't even matter if you're clear with your words.

Toggle slider switches are the blue/gold dress of UI design. In a given population roughly 50% will swear with absolute certainty the given state is "enabled" and the other 50% will be ready to start a holy war with the conviction it is "disabled".

The population can be further subdivided into camps which disagree over what enabled and disabled even mean in this context.

Literally any design choice is better.

>He's drawn one of those circle-in-a-slot switches. I often have trouble figuring out what the on / off state of those is supposed to be.

iOS has an option to display I/O labels on these toggles too, and as it turns out, not everyone knows that I/O refers to on/off. I found out about this when I had to explain to a friend that those symbols meant open and closed respectively on the vents in a car.

I know what I/O refers to, and I have for the last, I dunno, 30 years. Do I know which letter refers to which state? Not a damn clue. I have never been able to remember it.

It’s not I/O (the “I” displays with serifs for me), it’s |/⭘ (line and circle). As a mnemonic, you can think of it as 1 and 0 (for on and off).

The standby symbol ⏻ combines the two.

And the 1 represents a connected circuit (power flows when on) and 0 represents a closed loop, no power flowing through, so off.

??? Electrically, a closed circuit is on, and an open circuit is off. No power can flow in an open circuit.

> As a mnemonic, you can think of it as 1 and 0 (for on and off).

I always thought that's literally what it represented, true (on) and false (off).

Yeah, terrible convention, especially because on and off both begin with O. And memory-aid stories don’t help: “those symbols meant open and closed respectively on the vents” - hang on - is O like an open vent or does it mean off?

Genuinely curious, not challenging you: Do you have trouble figuring out the on/off state on iPhone toggles? They've always been obvious to me, but I have seen bad toggles out in the wild.

On Androids I have this problem all the time. It's a combination of bad color and bad text - I don't know if iOS forces the color OS-wide, but the text is app dependent.

I've never used an iPhone. The ones on my Android are unclear. Usually I guess how they define off / on based on context.

Reply on news.ycombinator.com