4 ms·

http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu really? how can this be good usability. it's text and an arr

by franze 12y ago

http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu really? how can this be good usability. it's text and an arrow far, far away. this could be anything and does not in any way imply any kind of select action. if this is really implemented after the material design spec of google, than oh man, google really has an issue.

dingaling 12y ago
> it's text and an arrow far, far away. That's an arrow? I just see a Unicode failure-box :( That's one of the problems with the trend of icons-as-fonts, when they fail there's no reversion mode for users to understand what the glyph is supposed to be. planefinder.net is a canonical example, without the correct font none of their on-screen controls make any sense.
- coldpie 12y ago
  Well, the font is usually provided by the website. Your client is being prevented from using the provided font for some reason.
notastartup 12y ago
The dropdown also caught my attention it seems like it's a bit of a distance from the traditional dropdown in a sense that I think some users will have some trouble with actually realizing that it's a dropdown. Another complaint is the checkbox, there's no way to tell once something is checked off whether it's a picture or a form.
- clay_to_n 12y ago
  Agreed with this. In Android's Material spec (as well as the Android 5.0 implementation) you can always tell it's a checkbox. However, in Google's Polymer project, the box totally transforms, as in material-ui. :/ Ex) http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7YUQ5TEFVT3ZJQjg/components_listcontrols_checkbox2.png http://material-design.storage.googleapis.com/publish/v_1/qu...
bryans 12y ago
I think you're ignoring the context in which this element will be displayed. It makes sense visually inside a form or options panel, among its related counterparts. There is no reasonable situation that would result in this element being lost in such a sea of whitespace, as portrayed in the example.
colinramsay 12y ago
Here's the Google spec for this: http://www.google.co.uk/design/spec/components/menus.html#menus-usage http://www.google.co.uk/design/spec/components/menus.html#me... If you look at the menu with "All", "Family", "Friends", "Coworkers", initially it shows "All" and the arrow is immediately to the right of the text. I expect that if you select "Coworkers" then the arrow moves.
- clay_to_n 12y ago
  Yeah, I think standalone it should have the arrow right at the end. When the dropdown is used in a form, it should have an underline, like so from the Material spec: http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7MHBnQlFGeFRtYTQ/components_menus_usage5.png http://material-design.storage.googleapis.com/publish/v_1/qu...
  - calinet6 12y ago
    Yeah, let's not consider every copycat that comes along a valid and complete implementation of good UI guidelines... This one surely is not.
    - xg15 12y ago
      The problem is that many people will use those copycats as the basis for their own app designs. Not everyone is willing to really understand the reasoning behind the design spec down to such minute details as an arrow placement if he can be hip and trendy with something that superficially looks like the same design. If a design is so easily misunderstood with such (comparably) large consequences for the user, that's a flaw in the original spec IMO.
      - calinet6 12y ago
        I don't believe it's easily misunderstood; I think people just don't know how or why to create a quality implementation based on an original. The spec is actually remarkable in the level of depth it goes to teach you not only about the design guidelines themselves, but also the reasoning and psychology behind it. Really, it's probably the best full on UX specification ever produced (and I'm not saying that lightly). It just shows that it's very difficult to get this stuff right. There's still going to be a bell curve, with most implementations and copies ending up in the mediocre middle, but overall, the guidelines might bring the quality of the overall market up. That's all we can hope.
thomasahle 12y ago
I should have a shadow.

by franze 12y ago

dingaling 12y ago

> it's text and an arrow far, far away. That's an arrow? I just see a Unicode failure-box :( That's one of the problems with the trend of icons-as-fonts, when they fail there's no reversion mode for users to understand what the glyph is supposed to be. planefinder.net is a canonical example, without the correct font none of their on-screen controls make any sense.

coldpie 12y ago
Well, the font is usually provided by the website. Your client is being prevented from using the provided font for some reason.

notastartup 12y ago

The dropdown also caught my attention it seems like it's a bit of a distance from the traditional dropdown in a sense that I think some users will have some trouble with actually realizing that it's a dropdown. Another complaint is the checkbox, there's no way to tell once something is checked off whether it's a picture or a form.

clay_to_n 12y ago
Agreed with this. In Android's Material spec (as well as the Android 5.0 implementation) you can always tell it's a checkbox. However, in Google's Polymer project, the box totally transforms, as in material-ui. :/ Ex) http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7YUQ5TEFVT3ZJQjg/components_listcontrols_checkbox2.png http://material-design.storage.googleapis.com/publish/v_1/qu...

bryans 12y ago

I think you're ignoring the context in which this element will be displayed. It makes sense visually inside a form or options panel, among its related counterparts. There is no reasonable situation that would result in this element being lost in such a sea of whitespace, as portrayed in the example.

colinramsay 12y ago

Here's the Google spec for this: http://www.google.co.uk/design/spec/components/menus.html#menus-usage http://www.google.co.uk/design/spec/components/menus.html#me... If you look at the menu with "All", "Family", "Friends", "Coworkers", initially it shows "All" and the arrow is immediately to the right of the text. I expect that if you select "Coworkers" then the arrow moves.

clay_to_n 12y ago
Yeah, I think standalone it should have the arrow right at the end. When the dropdown is used in a form, it should have an underline, like so from the Material spec: http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7MHBnQlFGeFRtYTQ/components_menus_usage5.png http://material-design.storage.googleapis.com/publish/v_1/qu...
- calinet6 12y ago
  Yeah, let's not consider every copycat that comes along a valid and complete implementation of good UI guidelines... This one surely is not.
  - xg15 12y ago
    The problem is that many people will use those copycats as the basis for their own app designs. Not everyone is willing to really understand the reasoning behind the design spec down to such minute details as an arrow placement if he can be hip and trendy with something that superficially looks like the same design. If a design is so easily misunderstood with such (comparably) large consequences for the user, that's a flaw in the original spec IMO.
    - calinet6 12y ago
      I don't believe it's easily misunderstood; I think people just don't know how or why to create a quality implementation based on an original. The spec is actually remarkable in the level of depth it goes to teach you not only about the design guidelines themselves, but also the reasoning and psychology behind it. Really, it's probably the best full on UX specification ever produced (and I'm not saying that lightly). It just shows that it's very difficult to get this stuff right. There's still going to be a bell curve, with most implementations and copies ending up in the mediocre middle, but overall, the guidelines might bring the quality of the overall market up. That's all we can hope.

thomasahle 12y ago

I should have a shadow.