4 ms·

Material Design is fundamentally broken. It's based on the idea that things should look like animated physical materials, but UIs shouldn't look like real motio

Material Design is fundamentally broken. It's based on the idea that things should look like animated physical materials, but UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Animation should be kept to an absolute minimum unless you're making a game.

jdietrich 8y ago
>UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Could you expand on that point? I'm struggling to think of a user group whose experience would be fundamentally broken by the use of motion in Material. Could you give an example? I use Material extensively and would like to think that I have a good understanding of accessible design, but I'm always looking to improve.
- kuon 8y ago
  The simplest example I have is text input field with placeholder "transforming" into the label when the field has focus. This simple animation and often color change of the text can be disturbing, especially when the appearance of the keyboard (on mobile) pull the field to the top and hide the label. On desktop, the label can become too small to read when above the text field. This is not really a problem for me, but I've seen people complaining about it. If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. Looking at that page, I realize another MAJOR annoyance[2], what is "123 main street..." description? special "location" event attribute? Removing label from filled field is so bad for usability, for ALL users. I could go on forever with what is wrong on every material design page. [1]: https://material.io/design/components/dialogs.html https://material.io/design/components/dialogs.html [2]: https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QLrzkbNzz/dialogs-fullscreendialog.png https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QL...
  - arbie 8y ago
    > If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. This is easily done by setting an md-warn attribute on the cancel button, e.g., https://material.angularjs.org/latest/demo/button https://material.angularjs.org/latest/demo/button It is up to the designer to scope out the magnitude of destruction the action will cause and select the right color/hue, and even set md-raised on the default action in a workflow.
    - kuon 8y ago
      Well, if your app have an orange/red primary color, the warning color is just ignored. And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it.
      - arbie 8y ago
        > Well, if your app have an orange/red primary color, the warning color is just ignored. This is incorrect. If you use Material color templates and pick red as the theme, md-warn will pick an alternate accent color. > And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it. No disagreement there. Some of Google's own apps butcher Material Design. YouTube Music on Android is a usability mess.

jdietrich 8y ago

>UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Could you expand on that point? I'm struggling to think of a user group whose experience would be fundamentally broken by the use of motion in Material. Could you give an example? I use Material extensively and would like to think that I have a good understanding of accessible design, but I'm always looking to improve.

kuon 8y ago
The simplest example I have is text input field with placeholder "transforming" into the label when the field has focus. This simple animation and often color change of the text can be disturbing, especially when the appearance of the keyboard (on mobile) pull the field to the top and hide the label. On desktop, the label can become too small to read when above the text field. This is not really a problem for me, but I've seen people complaining about it. If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. Looking at that page, I realize another MAJOR annoyance[2], what is "123 main street..." description? special "location" event attribute? Removing label from filled field is so bad for usability, for ALL users. I could go on forever with what is wrong on every material design page. [1]: https://material.io/design/components/dialogs.html https://material.io/design/components/dialogs.html [2]: https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QLrzkbNzz/dialogs-fullscreendialog.png https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QL...
- arbie 8y ago
  > If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. This is easily done by setting an md-warn attribute on the cancel button, e.g., https://material.angularjs.org/latest/demo/button https://material.angularjs.org/latest/demo/button It is up to the designer to scope out the magnitude of destruction the action will cause and select the right color/hue, and even set md-raised on the default action in a workflow.
  - kuon 8y ago
    Well, if your app have an orange/red primary color, the warning color is just ignored. And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it.
    - arbie 8y ago
      > Well, if your app have an orange/red primary color, the warning color is just ignored. This is incorrect. If you use Material color templates and pick red as the theme, md-warn will pick an alternate accent color. > And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it. No disagreement there. Some of Google's own apps butcher Material Design. YouTube Music on Android is a usability mess.