I agree on a lot of your points. Since a website is interactive, I think its animation should be present but unobtrusive or subtle. Given the choice between too much/too strong animation and no animation, I'd choose the latter. For example, in their demo [1], if you toggle the switch for the Composition Example, there's a lot of extraneous animation that's happening when it doesn't need to, and I'd rather take a plain toggle/checkbox because it's unobtrusive.
Your other points about websites not looking like Google's visual branding or like a generic Android app are also important, since Google's style is so distinct it's essentially Bootstrap 3 all over again, but with more animation.
On the example you mentioned, clicking the 3-dot "hamburger" is an example of the easing that I referred to. The menu drops out like it's needlessly spilling out of the side of the component. The user is already looking where they are clicking/tapping.
Hovering over the "view source" icons also has an over-the-top easing effect that is too theatrical for what it does. Try opening and closing the source windows on a few different sections quickly, and watch how too many things that aren't important are animating at once and how easing is making them last too long for fast use of the UI.
Things "ripple" in MD when you click them -- for no coherent reason. Users don't need such distracting visual feedback for that. It gives UIs a floppy, cheap plastic look.
Two more examples of problems with Material Design are Google's new login screen and Trello's Android app -- both due to the distracting animation. Watch how things animate and then ask _why do those elements need movement that attracts users attention at this moment?_ (They don't. The user already knows where to find them.)
I don't think that last few years of Bootstrap have been terrible, except for the overuse of the parallax effect and animations on homepages as you scroll down to each new section. There has been a kind of generic look to some Bootstrap sites, but I don't think that it's bad. Example: this random Bootstrap-based theme[1] is generally fine and readable, except for the animation in the menu items when scrolling back to the top. I think that UIs should be simple and easy to use, and that you shouldn't really notice them when trying to get to the content. Animation and easing is for computer games, not content.
Comments
I agree on a lot of your points. Since a website is interactive, I think its animation should be present but unobtrusive or subtle. Given the choice between too much/too strong animation and no animation, I'd choose the latter. For example, in their demo [1], if you toggle the switch for the Composition Example, there's a lot of extraneous animation that's happening when it doesn't need to, and I'd rather take a plain toggle/checkbox because it's unobtrusive.
Your other points about websites not looking like Google's visual branding or like a generic Android app are also important, since Google's style is so distinct it's essentially Bootstrap 3 all over again, but with more animation.
1: http://www.material-ui.com/#/components/app-bar
On the example you mentioned, clicking the 3-dot "hamburger" is an example of the easing that I referred to. The menu drops out like it's needlessly spilling out of the side of the component. The user is already looking where they are clicking/tapping.
Hovering over the "view source" icons also has an over-the-top easing effect that is too theatrical for what it does. Try opening and closing the source windows on a few different sections quickly, and watch how too many things that aren't important are animating at once and how easing is making them last too long for fast use of the UI.
Things "ripple" in MD when you click them -- for no coherent reason. Users don't need such distracting visual feedback for that. It gives UIs a floppy, cheap plastic look.
Two more examples of problems with Material Design are Google's new login screen and Trello's Android app -- both due to the distracting animation. Watch how things animate and then ask _why do those elements need movement that attracts users attention at this moment?_ (They don't. The user already knows where to find them.)
I don't think that last few years of Bootstrap have been terrible, except for the overuse of the parallax effect and animations on homepages as you scroll down to each new section. There has been a kind of generic look to some Bootstrap sites, but I don't think that it's bad. Example: this random Bootstrap-based theme[1] is generally fine and readable, except for the animation in the menu items when scrolling back to the top. I think that UIs should be simple and easy to use, and that you shouldn't really notice them when trying to get to the content. Animation and easing is for computer games, not content.
[1] http://devitems.com/preview/nexo/index.html