5 ms·

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 wa

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.

christophilus 7y ago
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.
Kaze404 7y ago
Isn't the consensus that right means selected? I don't remember ever been confused by that.
- mrkwse 7y ago
  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)
  - lonelappde 7y ago
    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.
- warp 7y ago
  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)
- muth02446 7y ago
  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.
  - Kaze404 7y ago
    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.
- dagw 7y ago
  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.
  - Kaze404 7y ago
    Full transparency, I'm neither of those things. I'm saying this out of nothing but my user experience.
jsolson 7y ago
> 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?
- AgloeDreams 7y ago
  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 https://material.io/components/chips/#filter-chips
Nannooskeeska 7y ago
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 https://i.imgur.com/uQaDDGG.png Is there a different-looking menu that you're talking about on another version?
- berlesi 7y ago
  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.
  - soylentcola 7y ago
    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 https://i.imgur.com/cDhABnE.jpg
EpicEng 7y ago
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?
- birksherty 7y ago
  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.
  - Tyr42 7y ago
    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.
mleonhard 7y ago
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.
- anoncareer0212 7y ago
  ...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

christophilus 7y ago

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.

Kaze404 7y ago

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

mrkwse 7y ago
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)
- lonelappde 7y ago
  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.
warp 7y ago
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)
muth02446 7y ago
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.
- Kaze404 7y ago
  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.
dagw 7y ago
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.
- Kaze404 7y ago
  Full transparency, I'm neither of those things. I'm saying this out of nothing but my user experience.

jsolson 7y ago

> 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?

AgloeDreams 7y ago
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 https://material.io/components/chips/#filter-chips

Nannooskeeska 7y ago

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 https://i.imgur.com/uQaDDGG.png Is there a different-looking menu that you're talking about on another version?

berlesi 7y ago
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.
- soylentcola 7y ago
  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 https://i.imgur.com/cDhABnE.jpg

EpicEng 7y ago

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?

birksherty 7y ago
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.
- Tyr42 7y ago
  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.

mleonhard 7y ago

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.

anoncareer0212 7y ago
...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