Hacker News Reader

Comment by muth02446 | Hacker News Reader

Piling onto the material design criticism.

I have been using GUIs since the 80s (remember Atari ST GEM). Not once have I been confused about whether an item was selected or not.

Enter material design.

On android's slide down config screen (the one with wifi, bluetooth, etc toggles) I always have to stop and think a bit to determine if wifi is on or not.

Similarly, on many other config screens, horizontal sliders that snap to either the left and right positions are used to indicate on/off but it is never clear which one is which.

I believe there are proper check boxes somewhere in the Widget set but they are not used much.

To me this seems like a case of aesthetic dogma trumping usability.

View on HN

This gets me every single time. I also have seen plenty of screens where buttons are given a "selected" state (e.g. a dark blue background), but it's non obvious if the dark blue background means selected or not. Radio buttons and checkboxes never give me these problems. Just use them.

I might be missing something, but I'm a little confused by this. Here's what that menu looks like on my phone (Galaxy Note 9) running the latest version of Android: https://i.imgur.com/uQaDDGG.png

Is there a different-looking menu that you're talking about on another version?

I don't have a picture, but most of Motorola phones have a mix of greys on it's menu, making it super hard to identify when it's activated or deactivated. IIRC activated is light grey and it really looks like it's deactivated.

This also sounds like a good example of problems that may arise with OEM skinning. Not that the OS maker is immune to flaws in design/layout, but you run into these minor changes that can be worse than "stock" for the sake of surface differentiation.

(My example of the same screen, slightly redacted)

https://i.imgur.com/cDhABnE.jpg

I asked Flutter team to add an iOS checkbox widget. They refused, saying that I can just use the switch widget. They don't realize that checkboxes are far superior in usability. Checkboxes are part of the iOS widget library, used frequently in iOS Settings and Apple apps.

...where? A UITableViewController with one UITableViewCell with a checkmark accessory isn't a checkbox widget. You're looking for Flutter's Menu button widget, it's like UIAlertController crossed with what Settings.ipa does

I have a hard time believing this. My six year old has been using that menu just fine for years now, and on my phone (Galaxy S9+) one of those settings is either dark grey with a light gray icon, or bright blue with a white icon. It's hard to imagine being confused by that. Maybe your menu looks significantly different?

My phone that uses default stock android system have darker grey and lighter grey for on/off. It's difficult. Samsung uses modified skin on your phone.

Under Settings > Styles and Wallpaper there are a few different options. I think the default is blue for selected, but you can select "Ash" to make it grey vs grey.

> On android's slide down config screen (the one with wifi, bluetooth, etc toggles) I always have to stop and think a bit to determine if wifi is on or not.

I'm a bit surprised by this -- it transitions from dark gray on light gray when it's off to _bright_ white on _bright_ blue when it's on. This would seem to mirror many physical things that have status lights which are not illuminated when disabled and are illuminated when enabled. What's the source of initial confusion for you?

Just setting opacity to show state is generally seen as bad practice, the difference in contrast is just too little compared to real life. Seeing as the screen is dimmable/ can be used in various lighting situations, if every switch is off it can be really hard to tell if the current opacity is 'all on' or 'none on'. In UX design it's common to see this solved by both using opacity but also a distinct shape/contrast and by changing the icon. Sometimes throwing a bit of color in can help those who are not color blind. Normally you'll see all three.

Ironically, you can see the team trying to solve this in material's filter chips by adding a checkmark: https://material.io/components/chips/#filter-chips

Isn't the consensus that right means selected? I don't remember ever been confused by that.

I can never remember.

The good ones also switch between greyish being off and some color (e.g. green or blue) when on. But not all of them change color, so I tend to toggle them to see if this one of the colored ones -- and thereby confirm what setting it was on.

(ps. In general I do like material and flat designs, it's just these checkboxes I find hard to read)

That might be sensible with a latin language read left-to-right, but for other scripts read right-to-left, it's ambiguous. Is the enabled state then the inverse? (I believe the guidelines are that it should be left as selected for RTL languages)

The problem with trying to do it properly for RTL is that half of systems won't do it properly which is worse than everyone consistently doing it wrong and users learning to cope.

Quite possibly among UI/UX designers, I'd be surprised if most people knew that.

I know I still find it confusing and occasionally have to toggle the switch to both positions before working out which position I want.

Full transparency, I'm neither of those things. I'm saying this out of nothing but my user experience.

Possibly, but why not design widgets so that no such consensus is necessary. Prior GUIs did not need it and now literally billions of people are burdened with it.

Even though UIs were always built on consensus and common experiences users might have from other platforms, I agree that deviating from the norm is a bad idea in most cases. That said, the specific component in question is so common now that for future generations it might become as intuitive as a checkbox.

Reply on news.ycombinator.com