An interface should be snappy and get out of your way, not try to impress with pointless animations. That screams graphic designer trying and failing to do UX. Which is material in a nutshell really.
There are some glitches when animating layouts. The "primary action button" (is that what the floating circle was called?) sometimes covers the scrollbar after resizing the window, and jumps around on mouse-over; and when the browser window is not maximized, after selecting an option in the left vertical menu, the floating panels jump around a lot vertically before stopping. I'm using latest Chrome on Windows 7.
Material animations are not (entirely) pointless, they are designed to improve user's awareness of UI's behaviors - primarily by making transitions between related screens less "beam-me up, Scotty" Teleport-like.
Sure, it may be prone to abuse, but the base theory is sound. By tapping into the perceptual abilities of movement and shadows, some parts of the inner structure and layout of the interface (which are usually only known to the dialog's developer) are exposed to the user in an intuitive way.
What's some of the best UX design you've done? Can you tell me about affordances, and why the Materials design falls short on them? On desktop? On touch devices?
For us developers, a command line and vim (or emacs, not trying to start a war) can be the epitome of UX -- once we learn all those shortcuts.
But for users, there's a lot more that comes into play. Indicating to a user when something can be interacted with and - more importantly, many times - how it can be interacted with is very important. Usually such indications will also inform about what kind of result will happen from the interaction: will the form submit, will the page reload, will I see a list of additional options?
Just as important is indicating to the user that yes - you just interacted with something that can be interacted with. Depending on the action, this can be something as subtle as an underline - or as obvious as showing a loading indicator.
The Material animations aren't just eyecandy for the sake of eyecandy. While touch screens are getting better, there are still situations where a touch doesn't necessarily register as a touch. It's super important to indicate to the user that a touch has been registered. It's just as important that this happens immediately, instead of after - say - a round-trip request to a server somewhere.
If you've built and designed a user interface that has amazing affordances, a general perception of 'speediness' even if the server is being slow, and treats touch users as a first-class citizen ... I'd really like to see your work!
We do need to let users know a touch has been registered. In some cases all you need is a color change. Other time, a slight fade in or small animation. But having content areas fly in for almost a whole second is overkill. That's why this site is a poor example of the technique.
having content areas fly in for almost a whole second is overkill
...except for those cases when it's not. Major context changes such as switching applications benefit from more explicit animations, that physically convey where everything goes or comes from; those can run from less than half a second to about two seconds for more showy "Welcome to product X" screens. If the old interface simply disappears, the user has no clue on how to restore it. That's why you get nifty "minimize" animations in all modern desktop environments that care about more than processor cycles.
In the Material design, animations are also intended to increase affordance by showing what areas are interactive, without requiring the extra chrome of everything having 3D borders.
I think you misunderstand. I'm not against animations. The minimize animation in today's operating system is a perfect example of how animation can simplify the user experience (although I do think the OSX shrinking animation is a tad dramatic). But keep in mind, those animations are still short compared to the examples here. Whats more, the linked example uses the fly in animations for interactions without major context changes. Switching from pages in a document is hardly the same as switching applications.
I consider it as high distraction. Yeah, sure it looks great in demos and talks, but do we really want to have two seconds animation every time one switchs tab? Or would you like to have this kind of design in tool you use everyday, editor or IDE?
IIRC, in the design guidelines longer animations should be limited to context switches, where anything under two seconds is "acceptable speed" and anything under half a second is "fast".
There's no need to use the most extreme animations for minor actions in the interface, and the linked page is obviously a showcase, not a real application.
Hello, thanks. I see lot of people would prefer what you're asking, and actually the Material Design specs are not followed very well by me regarding the animations. If you'd be so kind to open an issue on the GitHub page I'll be happy to assign a priority to it and work on it when I find some time.
do you think that the listed specs in the comment are truly accurate regarding the types of machines needed to properly display Material design elements, or just the author's way of indicating the the current state of technology?
The thing is, it doesn't really matter. You can't program your interface for quad-core processors and 16GB of RAM because if 50% of the userbase is using 1GB on an ARM processor then you either have to design two interfaces or cater to the lowest denominator.
I like that they make me think about things like depth to differentiate what's active ,
I like the little line in inputs ,it encourages users(me included) to fill the input,
the ripple effect is small and cheap animation and communicates to the user a click .as is with checkbox etc
the morphing transitions is their best idea , As a user I hate flickers , if you blink you miss them overlay are even worse unless you are alerting.
First of all, I like the design. But about the animations...
Web browser engines are not particularly good in animation. I was viewing this with (not quite latest) Firefox and the animations were really choppy (with my less than 3GHz PC). As in really annoying and made user interaction next to impossible. Other browsers may work better.
Secondly, animation (especially in browsers) is very power consuming if you target mobile devices. Of course, this isn't something a web designer would have to care about, because unlike for "native" apps, you can't tell which web site was consuming all the battery. (and battery consumption means bad reviews in app stores)
I work for a mobile device company and I can tell you, for every minute a major web designer spends adding animation on a popular web site, a systems engineer spends an hour trying to optimize the power consumption (with changes to WebKit/Blink, device drivers and the kernel).
Web browsing power consumption is a major benchmark how device manufacturers choose their parts vendors. One of the key benchmarks is picojoules required to render nytimes.com front page. (this is ridiculous but that's how the industry works)
Quite simply: your design would be a lot better if you'd remove most (if not all) of the animations. Especially the mouse click circle (which appears so late it's distracting) and the things that scroll from the bottom (which scroll so choppily that it's annoying). They don't add anything to the usability of this site, on the contrary they make it work slowly.
Lots of people do. I am sure people asking to learn about design on this site have been directed to dribble.
Actually design is a very ambiguous word for me as a developer. I use it to include application architecture, and user workflows amongst other things, while many other people seem to think its all about the shinny pictures on the front page.
The first mention I have ever seen of dribble on this site was from you, just now.
I have had the opposite experience and it seems to me that design articles posted here tend to be focused on user experience improvements, research based explorations into best practices, and calls to stop gimmicky mumbo jumbo like scrolljacking.
At the risk of being productive with my comment, please read Google's information on material design (http://www.google.com/design/spec/material-design/introducti...) and you'll understand that this isn't animation for animatio's sake or design for design's sake.
Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern (src: http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib...) in the search field of the navbar. That almost put me off before I'd even seen the nice floating label pattern under the fold.
There are some "floating label" versions of the components that alleviate that problem, and may come handy at places where the available space is really limited, such as mobile applications.
The floating labels in input text fields are a nice finding.
The click animation for most elements is too strong, though, at least on the desktop. I haven't tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks.
Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous "fade" effect that made the animated circle/rectangle lighter while its moving would be enough to make it subtler and less aggressive.
The ripple effect when clicking buttons is a 20x20px div with 100% border-radius and a CSS scale transform animation, created when clicked, where clicked.
Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.
Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.
This program is free software: you can redistribute it and/or modify it under the terms you can find below.
You can use this software for free only for no-profit projects. If you'd like to use this software in a commercial project you may contact the author (Federico Zivolo) of the software and ask for his permission and fulfill his conditions.
actually you are right lol.. I've used this class because was something that in "material design" is not documented... probably would be better use panels and add to well some different effect. I'll open an issue.. (#279)
I find it strange there's so many different material design implementations (for the web, no idea how it's going on in android), shoudn't at least the CSS be centralized to avoid uneccesary efforts and then provide specialized packages for things like bootstrap, jQuery UI themes, angular, react etc that all use the same base CSS?
I know it's probably utopic but it looks like there's a lot of "wasted" energy in these kind of projetcs.
If Google released their own, then presumably these would mostly disappear. I guess Google's focus right now is on Android, although elements of Material design are appearing on things like Google Docs, so they'd think they'd release that publicly, just as Twitter did with Bootstrap.
In fact, Google offers a downloadable zip file of color swatches, which is a bunch of adobe files. Great for designers who use those tools, less than ideal for designers who don't.
I would like something like this as well. But when I've started the project (and even now) there are not good implementations in pure CSS of Material Design. Mine is the one that tries to follow the specs more than others, but I've not lot of time to dedicate to it so the process is kinda slow.
This is basically unusable on an iPhone 5S - text/elements bleeding off the panel, unclear scroll areas (easy to swipe the background scroll area). I thought the big use case of MD was to deliver a more intuitive interface especially on mobile. This misses the mark by a wide margin.
Looks like this happens on any device in portrait mode. The text in buttons doesn't wrap, for example - and the main content covers up the menu on the left.
Ideally on a narrow-width device, the menu on the left would show/hide with a layered animation. While this is a good material design implementation for desktop and tablet users, it looks like small-form-factor design was forwent.
Currently this framework supports only desktop devices, the demo is not yet compatible with mobile but will be soon (let me find some time to work on it :P)
You are doing great work Fez, you are very active/responsive to the issues on github. Anyone involved in the project knows the effort that has gone into it.
I will be using your repo later this month, and will be more than happy to help contribute to your library.
Ugh, have any of you actually used android l? Google runs video ads for the nexus 5 and 9 with the devicea turned off because they look atrocious when turned on.
This project raised a question for me: what is the copyright or licensing situation with Google’s Material Design? The specification itself appears to be copyright Google, but several implementations of the specification on the Web are under permissive licenses:
How about don't slow down navigation to play an animation. Function over form. Every time. Never artificially slow your user down for the sake of "pretty". Pretty is subjective, snappy is objective and appreciated by everyone.
The navigation feels like when I was 12 and wrote my first c++ program adding "cool loading animations" for no reason.
This demo is intended as a clone of the Polymer demo page, and it must tell the user say "wow", not say "productive!". It's the developer that includes this framework that will have to make its app productive.
Having looked at the polymer page I see what you were going for and I can even agree with the above poster who commended your clever implementation of the animations. You even have a point saying it's on the developer.
I just can't help but feel that many of these new design ideas and frameworks that are constantly posted are completely missing the mark by valuing "this looks pretty" over "this actually works".
They break the back button. They break scrolling. They slow down the loading of new content by animating it. All these things while pretty create a worse user experience, and by including it in examples they make it inevitable it will find its way into the wild. I'm not asking for everything to work in lynx, I just want to not feel like my browsing has been handicapped.
I get that animations can help users sometimes. But these animations are waaaaayyyyy too long.
Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn't mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn't change. Carry on.
The animations don't feel as bad on a touchscreen. I think the biggest problem with material design in this sort of context is that Google made something that feels nice enough on mobile but feels trashy on PC.
This bootstrap material design also does not resonate here .. its hard to get right. I do not like the animations or pointless overlapping panels either.
But stop? I disagree because Google's material design is not about the animations. Its about using minimal appearance chrome to strengthen UI context. Is it part of something, or is it "laying" on top of it? Is it approaching me, or laying back? Its 2,5D.
For example note how the button shadow intuively distinguishes it from a card or other UI-panel.
I see good things for Material Design whenever we have 2,5D or 3D displays in our devices. And so wil iOS with its icon/background parallax effect, which for now is only a gimmick. These where basically made with that in mind.
"Its about using minimal appearance chrome to strengthen UI context."
Keeping chrome to a minimum and adding context are great design principles. But I wouldn't call it material design. It's called good design. I don't think we need a new name for fundamental design principles that have been known for years. Just calling it "material design" attracts the copycats, who would rather copy the look than understand the fundamentals. We should simply talk about good design, and encourage people to study timeless design principles.
You know, I really want to like it, but I just don't.
I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.
Sorry, I know that's exactly how my comment reads. However, given how many CSS frameworks are posted to HN everyday I think it's reasonable to expect at very least the demo to be mobile friendly, especially if it's touting material design.
114 comments
[ 620 ms ] story [ 4600 ms ] threadThe input boxes rather lack affordance/discoverability or whatever you want to call it. Basically - they don't look inputty enough.
Animation for animation's sake. Design for design's sake. This is just tacky.
An interface should be snappy and get out of your way, not try to impress with pointless animations. That screams graphic designer trying and failing to do UX. Which is material in a nutshell really.
Sure, it may be prone to abuse, but the base theory is sound. By tapping into the perceptual abilities of movement and shadows, some parts of the inner structure and layout of the interface (which are usually only known to the dialog's developer) are exposed to the user in an intuitive way.
For us developers, a command line and vim (or emacs, not trying to start a war) can be the epitome of UX -- once we learn all those shortcuts.
But for users, there's a lot more that comes into play. Indicating to a user when something can be interacted with and - more importantly, many times - how it can be interacted with is very important. Usually such indications will also inform about what kind of result will happen from the interaction: will the form submit, will the page reload, will I see a list of additional options?
Just as important is indicating to the user that yes - you just interacted with something that can be interacted with. Depending on the action, this can be something as subtle as an underline - or as obvious as showing a loading indicator.
The Material animations aren't just eyecandy for the sake of eyecandy. While touch screens are getting better, there are still situations where a touch doesn't necessarily register as a touch. It's super important to indicate to the user that a touch has been registered. It's just as important that this happens immediately, instead of after - say - a round-trip request to a server somewhere.
If you've built and designed a user interface that has amazing affordances, a general perception of 'speediness' even if the server is being slow, and treats touch users as a first-class citizen ... I'd really like to see your work!
In the Material design, animations are also intended to increase affordance by showing what areas are interactive, without requiring the extra chrome of everything having 3D borders.
There's no need to use the most extreme animations for minor actions in the interface, and the linked page is obviously a showcase, not a real application.
I like that they make me think about things like depth to differentiate what's active , I like the little line in inputs ,it encourages users(me included) to fill the input,
the ripple effect is small and cheap animation and communicates to the user a click .as is with checkbox etc
the morphing transitions is their best idea , As a user I hate flickers , if you blink you miss them overlay are even worse unless you are alerting.
Web browser engines are not particularly good in animation. I was viewing this with (not quite latest) Firefox and the animations were really choppy (with my less than 3GHz PC). As in really annoying and made user interaction next to impossible. Other browsers may work better.
Secondly, animation (especially in browsers) is very power consuming if you target mobile devices. Of course, this isn't something a web designer would have to care about, because unlike for "native" apps, you can't tell which web site was consuming all the battery. (and battery consumption means bad reviews in app stores)
I work for a mobile device company and I can tell you, for every minute a major web designer spends adding animation on a popular web site, a systems engineer spends an hour trying to optimize the power consumption (with changes to WebKit/Blink, device drivers and the kernel).
Web browsing power consumption is a major benchmark how device manufacturers choose their parts vendors. One of the key benchmarks is picojoules required to render nytimes.com front page. (this is ridiculous but that's how the industry works)
Quite simply: your design would be a lot better if you'd remove most (if not all) of the animations. Especially the mouse click circle (which appears so late it's distracting) and the things that scroll from the bottom (which scroll so choppily that it's annoying). They don't add anything to the usability of this site, on the contrary they make it work slowly.
Otherwise I like the aesthetic of your design.
This is one of the most senseless things I've read in a long, long time. I guess you think "design" means "decoration".
Actually design is a very ambiguous word for me as a developer. I use it to include application architecture, and user workflows amongst other things, while many other people seem to think its all about the shinny pictures on the front page.
I have had the opposite experience and it seems to me that design articles posted here tend to be focused on user experience improvements, research based explorations into best practices, and calls to stop gimmicky mumbo jumbo like scrolljacking.
According to you. I think it's beautiful.
Over the next year I expect it to mature quite a bit. Once I start using it on my current project, I will even contribute to the code base.
Beauty for beauty's sake. Art for art's sake. This is just tacky.
But this remains best implementation
Maybe a solution would be a library to make these animations easier to create.
The click animation for most elements is too strong, though, at least on the desktop. I haven't tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks.
Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous "fade" effect that made the animated circle/rectangle lighter while its moving would be enough to make it subtler and less aggressive.
This program is free software: you can redistribute it and/or modify it under the terms you can find below.
You can use this software for free only for no-profit projects. If you'd like to use this software in a commercial project you may contact the author (Federico Zivolo) of the software and ask for his permission and fulfill his conditions.
Edit- I also think the license should be noted much more prominently otherwise its going to bite people.
Shouldn't the wells – being "wells" – be inset instead of outset?
I know it's probably utopic but it looks like there's a lot of "wasted" energy in these kind of projetcs.
Google has released this, for those brave enough to use web components.
This repo is still very infantile, I'm sure your issues will eventually be addressed.
Ideally on a narrow-width device, the menu on the left would show/hide with a layered animation. While this is a good material design implementation for desktop and tablet users, it looks like small-form-factor design was forwent.
I will be using your repo later this month, and will be more than happy to help contribute to your library.
Is this by design, or is it on my end?
The CSS is huge though - over 250k. This is expensive for mobile devices :(
But given that it fails dramatically on small-screen touch devices, the point is moot.
Google’s Web Starter Kit (https://developers.google.com/web/starter-kit/) uses the Apache License 2.0
Polymer is implementing Material Design for its Paper Elements collection (https://www.polymer-project.org/docs/elements/paper-elements...) under a BSD license.
Angular is implementing it (https://material.angularjs.org/) under the MIT license.
Is Material Design for Google and Android apps only? Can anyone implement it on the Web?
The navigation feels like when I was 12 and wrote my first c++ program adding "cool loading animations" for no reason.
I just can't help but feel that many of these new design ideas and frameworks that are constantly posted are completely missing the mark by valuing "this looks pretty" over "this actually works".
They break the back button. They break scrolling. They slow down the loading of new content by animating it. All these things while pretty create a worse user experience, and by including it in examples they make it inevitable it will find its way into the wild. I'm not asking for everything to work in lynx, I just want to not feel like my browsing has been handicapped.
Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn't mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn't change. Carry on.
But stop? I disagree because Google's material design is not about the animations. Its about using minimal appearance chrome to strengthen UI context. Is it part of something, or is it "laying" on top of it? Is it approaching me, or laying back? Its 2,5D.
For example note how the button shadow intuively distinguishes it from a card or other UI-panel.
I see good things for Material Design whenever we have 2,5D or 3D displays in our devices. And so wil iOS with its icon/background parallax effect, which for now is only a gimmick. These where basically made with that in mind.
Keeping chrome to a minimum and adding context are great design principles. But I wouldn't call it material design. It's called good design. I don't think we need a new name for fundamental design principles that have been known for years. Just calling it "material design" attracts the copycats, who would rather copy the look than understand the fundamentals. We should simply talk about good design, and encourage people to study timeless design principles.
I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.