Why motion design is now a required skill for designers(paulstamatiou.com)
paulstamatiou.com
Why motion design is now a required skill for designers
http://paulstamatiou.com/design-provide-meaning-with-motion/
8 comments
I find that reading articles on design can be off-putting if read too literally. "Do this" or "Don't do this" may or not apply to a specific situation. I did think this was a nice article in that it showed some nice examples of what things can look like and explained the general principles about why it may be a good idea to use them.
Thanks! My point wasn't to spit out what Google guidelines state. It was to draw one general observation -- the deep thinking about motion -- and expand upon the importance of that, but not necessarily how to do to.
"Google's implicit announcement that motion design is now a huge, required component for creating great software for mobile, desktop and wearable devices."
Google certainly promoted that notion - but it remains to be seen whether increasing the amount of motion of a user interface leads to better apps.
Google certainly promoted that notion - but it remains to be seen whether increasing the amount of motion of a user interface leads to better apps.
I'm pretty sure we've already seen cases that prove that it doesn't, perhaps not enough to write a blog post about, but they are definitely out there (iOS 7's dramatic increase in the use of motion comes immediately to mind). I think it's a dangerous sentiment to promote in such a generalized sense and designers/developers need to be very cognizant of the value any animation provides to the UX. It's far too easy to justify the abuse/overuse of motion/animation, making any animation noticeable to "delight"/"tell a story" which contradicts any functional reason for implementing it.
I found the post overall to be pretty superficial. There was only one paragraph spent on describing the function/purpose of "motion design" and it placed far more emphasis on it's more marketable aspects than on it's utility to "educate your users about how to interact with particular elements".
"Motion design" is just one UI tool and one that really didn't need to be pulled out and promoted in this way IMHO as it's always been an essential tool in great software when used properly. I think it would have been great if it wasn't an "implicit announcement" but explored in detail what good "motion design" entails. It's easy to get carried away with it, and introducing motion with appropriate intent can be what makes an otherwise good application into a great one, but let's not pretend it's magic dust that can turn cole to diamonds.
I found the post overall to be pretty superficial. There was only one paragraph spent on describing the function/purpose of "motion design" and it placed far more emphasis on it's more marketable aspects than on it's utility to "educate your users about how to interact with particular elements".
"Motion design" is just one UI tool and one that really didn't need to be pulled out and promoted in this way IMHO as it's always been an essential tool in great software when used properly. I think it would have been great if it wasn't an "implicit announcement" but explored in detail what good "motion design" entails. It's easy to get carried away with it, and introducing motion with appropriate intent can be what makes an otherwise good application into a great one, but let's not pretend it's magic dust that can turn cole to diamonds.
Sorry people are downvoting you. I agree heartily with your reasonable dissent. This push shows every sign of being a capricious fetish and a trend. If it ever becomes notable, it will be as the nadir of a cycle heading back toward "Simplicity."
The examples in the page are utterly inessential and confusing - The back arrow rotating? Why did the arrow spin? Are there things in those directions? Can I move in those directions? No. It's clearly just because it can. It's not meaningful.
The Twitter box that spins, falls halfway, stops in mid-air then fades away when you click it? Saccharine. What is supposed to be happening? Is it "falling?" Why does it stop halfway? Why did it start rotating while it fell?
The vocabulary is all wrong.
A printer icon that gets bigger as it appears? Is it moving toward me? Is it inflatable?
A heart that fades away? Is love lost? What the hell is going on?
How can Google expect to be a design leader when they're luring people with vinegar?
I don't think these examples provide meaning - they merely grab attention as human vision has an irresistible response to movement.
And what's wrong with jump cuts? Do you suppose Hollywood and independent movie makers use them for a reason? How about human eyeballs, why do you suppose they dart around from object to object? And how about walls and doorways in architecture - why are rooms separate from one another?
This is clearly just an attempt to mimic Apple on a superficial layer.
The examples in the page are utterly inessential and confusing - The back arrow rotating? Why did the arrow spin? Are there things in those directions? Can I move in those directions? No. It's clearly just because it can. It's not meaningful.
The Twitter box that spins, falls halfway, stops in mid-air then fades away when you click it? Saccharine. What is supposed to be happening? Is it "falling?" Why does it stop halfway? Why did it start rotating while it fell?
The vocabulary is all wrong.
A printer icon that gets bigger as it appears? Is it moving toward me? Is it inflatable?
A heart that fades away? Is love lost? What the hell is going on?
How can Google expect to be a design leader when they're luring people with vinegar?
I don't think these examples provide meaning - they merely grab attention as human vision has an irresistible response to movement.
And what's wrong with jump cuts? Do you suppose Hollywood and independent movie makers use them for a reason? How about human eyeballs, why do you suppose they dart around from object to object? And how about walls and doorways in architecture - why are rooms separate from one another?
This is clearly just an attempt to mimic Apple on a superficial layer.
Precisely. These are all very good examples of what to be careful of in designing any transformations or transitions. There are however, lots of incredibly useful and well designed transformations that actually enhance the overall experience and usability of an interface especially when used in conjunction with each other, fad or not.
I wasn't trying to dismiss it as a whole, but I did want to encourage the decisions to include it to be deliberate and thoughtful. That may have rubbed a few people the wrong way and I'm ok with that. I was hoping to start a reasonable dialog of where designers and developers should make an attempt to draw the line so that the end result doesn't become the equivalent of "now available in 3D!" so I really appreciate your response.
I wasn't trying to dismiss it as a whole, but I did want to encourage the decisions to include it to be deliberate and thoughtful. That may have rubbed a few people the wrong way and I'm ok with that. I was hoping to start a reasonable dialog of where designers and developers should make an attempt to draw the line so that the end result doesn't become the equivalent of "now available in 3D!" so I really appreciate your response.
Saccharine.
Spot on! So much onanastic talk on "flourish" and "delight", and so little concrete evidence on which of these expensive gimmicks, if any, effectively guide user atention and reduce confusion between screens, or the exact opposite.
Blame the dribbblization of design [1].
[1] http://insideintercom.io/the-dribbblisation-of-design/
Spot on! So much onanastic talk on "flourish" and "delight", and so little concrete evidence on which of these expensive gimmicks, if any, effectively guide user atention and reduce confusion between screens, or the exact opposite.
Blame the dribbblization of design [1].
[1] http://insideintercom.io/the-dribbblisation-of-design/
> which of these expensive gimmicks, if any, effectively guide user attention and reduce confusion between screens,
I'll give out one hint free: The reptilian (and hence retro-human) mind developed to perceive each room or space as a state apart from the others. We have a second level of cognition which ties nearby rooms together and therefore an innate ability to learn the layout of a building from each room. Consider the predominance of Zelda-style maps in the emotional memory of this generation. Consider the dog who seems to enter every room happy for the first time.
The webspace - in this case, that is to say hyperlinks and pages - ruptures this layout through jump-cutting between nearby spaces. A simple amendment to its construction would "match its impedance" to established mental abilities. And if you continue this metaphor, you'll see additional forms. The typical smartphones' home menus, such as Android, follow this to an extent, but really, it's only the beginning.
Getting distracted by matters such as properly interpolating frames and writing portable GPU code to do this is fun and profitable, but if you want epic design you have to step back and understand the sources of these ideas.
I'll give out one hint free: The reptilian (and hence retro-human) mind developed to perceive each room or space as a state apart from the others. We have a second level of cognition which ties nearby rooms together and therefore an innate ability to learn the layout of a building from each room. Consider the predominance of Zelda-style maps in the emotional memory of this generation. Consider the dog who seems to enter every room happy for the first time.
The webspace - in this case, that is to say hyperlinks and pages - ruptures this layout through jump-cutting between nearby spaces. A simple amendment to its construction would "match its impedance" to established mental abilities. And if you continue this metaphor, you'll see additional forms. The typical smartphones' home menus, such as Android, follow this to an extent, but really, it's only the beginning.
Getting distracted by matters such as properly interpolating frames and writing portable GPU code to do this is fun and profitable, but if you want epic design you have to step back and understand the sources of these ideas.
That twitter box I built is unrelated to the post and an old relic I've had on my site for a while. Needs to be redone given my very recent (this month) redesign :)
I was trained as an EE and got my Master's degree much later in life, studying art and design.
One of the key differences between design and engineering I learned is that people _only_ respond to what is right in front of them. (except some engineers). This is a radically different approach from e.g. "Release early, release often."
If you show people a seed and tell them it will be a plant, they'll say, "Yes, but if that seed were red, I might like it more."
These experiences taught me to keep my art and design demos under wraps until they were much, much closer to reality. It also taught me to keep my presentations congruent with no out-of-place elements. If you bill yourself as a chicken farmer and a moose walks into the frame, people won't know what you're talking about.
Incidentally, this is one of the reasons designs-as-presented often appear a bit oversimplistic. It's a form of communication which doesn't tolerant nuance and irony very well. Remember how poorly the Project ARA (modular smart phone) demos came out?
I wish you luck in your ventures, sir, but I'm seeing the human canon ball rushing to put his helmet on, on the way out of the barrel.
One of the key differences between design and engineering I learned is that people _only_ respond to what is right in front of them. (except some engineers). This is a radically different approach from e.g. "Release early, release often."
If you show people a seed and tell them it will be a plant, they'll say, "Yes, but if that seed were red, I might like it more."
These experiences taught me to keep my art and design demos under wraps until they were much, much closer to reality. It also taught me to keep my presentations congruent with no out-of-place elements. If you bill yourself as a chicken farmer and a moose walks into the frame, people won't know what you're talking about.
Incidentally, this is one of the reasons designs-as-presented often appear a bit oversimplistic. It's a form of communication which doesn't tolerant nuance and irony very well. Remember how poorly the Project ARA (modular smart phone) demos came out?
I wish you luck in your ventures, sir, but I'm seeing the human canon ball rushing to put his helmet on, on the way out of the barrel.
> keep my presentations congruent with no out-of-place elements
For god's sake, this. If a demo is full of "ignore that", "don't look at that", "yeah we're going to change that", the demo is a failure.
For god's sake, this. If a demo is full of "ignore that", "don't look at that", "yeah we're going to change that", the demo is a failure.
The fact that there are apps with excessive motion seems like a great argument for better motion design.
Great point - and there are a million ways that adding motion without care can lead to a worse experience!
As long as i can determine the speed and length of every animation implemented, go ahead, mobile industry. If not, fuck right off. There are already way too many programs that make the user wait for an action to happen just because someone decided the animation must take a minimum amount of time.
Part of working with motion is always being cognizant of this delay. We never, ever want to make users feel like they are waiting.
It's like that study that showed people get more annoyed at airlines for waiting for their bags so airlines started assigning baggage claims that were further away. Same time to get your bags but you were busy walking over most of the time and didn't get bored. :)
It's like that study that showed people get more annoyed at airlines for waiting for their bags so airlines started assigning baggage claims that were further away. Same time to get your bags but you were busy walking over most of the time and didn't get bored. :)
I don't know what material design is, but if Google+ is an example, the implementation is bad. If I click on the status input box, there's a time span when I can't type characters to the input box. I need to wait some useless animation when it expands. What probably really happens is that the "fake"/unused input DOM element is replaced after the animation to a new input DOM element or something.
The same bug also happens with YouTube. If I open the YouTube page and start to type characters to the search box, I'll get missing characters. For example, if I type "skateboarding dog", the end result will be something like "skarding dog" etc.
Google+ offers animations that make the site more annoying to use, stuff moves and changes in size. Facebook, on the other hand, works really well. Their 'status update' input element does resize, but I can start typing instantly.
The same bug also happens with YouTube. If I open the YouTube page and start to type characters to the search box, I'll get missing characters. For example, if I type "skateboarding dog", the end result will be something like "skarding dog" etc.
Google+ offers animations that make the site more annoying to use, stuff moves and changes in size. Facebook, on the other hand, works really well. Their 'status update' input element does resize, but I can start typing instantly.
The current Google+ is not material design. Here's more info: http://www.google.com/design/spec/material-design/introducti...
https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxms...
https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxms...
Right, but if the delay in obtaining the luggage is deliberate, so that the poor travelers can absorb more glorious brand identity, then it's a crappy way to treat them, isn't it?
[deleted]
Would you rather wait 20 minutes for your food to arrive or have chips & salsa while you wait?
OK, but this baggage claim story only makes the case for animations during wait times. That wasn't exactly the impression I got from your blog post.
Unrelatd to UI, giving the air traveler a distant baggage claim might shift the travel annoyance from waiting to navigating the airport? That's kind of a dick move to make someone walk farther to baggage claim just so they don't notice the baggage time. They could have just put an estimated wait clock on the carousel and solved the problem that still exists at baggage claim.
Unrelatd to UI, giving the air traveler a distant baggage claim might shift the travel annoyance from waiting to navigating the airport? That's kind of a dick move to make someone walk farther to baggage claim just so they don't notice the baggage time. They could have just put an estimated wait clock on the carousel and solved the problem that still exists at baggage claim.
Great to hear you're aware of the issue! :D (Now write a blog post just as big about it. ;) )
There's a great video on how to solve this very problem with motion on iOS.
"Building Interruptible and Responsive Interactions" (via https://developer.apple.com/videos/wwdc/2014)
"Building Interruptible and Responsive Interactions" (via https://developer.apple.com/videos/wwdc/2014)
I've been working in the motion design industry (vfx/animation for broadcast and commercials) for 12 years.
I'm excited by the convergence of our industries. The existing talent in the motion industry will need some guidance - right now motion graphics often revolve around "concepts powered by wizz-bang-wow!", and will need to become much more intention-driven to have successful user experiences.
More and more motion companies are branching out in some form or another to the "digital" world - apps, digital content (pre-rolls, short-form video ads), etc. I think companies that can "realize" the priority of user interaction and implement that in their offerings will be in a great position as companies like apple/google/facebook look for their help.
I'm excited by the convergence of our industries. The existing talent in the motion industry will need some guidance - right now motion graphics often revolve around "concepts powered by wizz-bang-wow!", and will need to become much more intention-driven to have successful user experiences.
More and more motion companies are branching out in some form or another to the "digital" world - apps, digital content (pre-rolls, short-form video ads), etc. I think companies that can "realize" the priority of user interaction and implement that in their offerings will be in a great position as companies like apple/google/facebook look for their help.
I think motion design the way Google is doing it could very easily backfire in the hands of those who aren't terribly skilled.
Android is already not well known for highest quality experiences, and now they're layering animation which is going to be abused.
Given that there is basically no quality control or approval process for Android apps, there's going to be a lot of terrible apps with terrible animations.
Yay.
Android is already not well known for highest quality experiences, and now they're layering animation which is going to be abused.
Given that there is basically no quality control or approval process for Android apps, there's going to be a lot of terrible apps with terrible animations.
Yay.
Having recently switched from iPhone to Android, it is clear that Android apps suffer in responsiveness and power use. Animations make both of these problems worse.
Most google motions are simple Tweens that can be expressed using penner easing equations. None require much motion design skillz, and can be standardized relatively easily in a visual design spec.
The larger point was not just about individual motions, but choreographing many together to create one cohesive action that guides the eye to the relevant part of the screen requiring attention.
Many cases for motion are typical and should be handled in the toolkit/design language directly; I don't think the world can handle a hundred arrow button animations or simple page transitions. For niche cases, you might need a motion expert (e.g. an animation designer on a larger design team) or become one yourself.
Prototyping in AfterEffects is a bit overkill though. Processing and Flash have been used for prototyping via tweening for more than 5 years now.
Prototyping in AfterEffects is a bit overkill though. Processing and Flash have been used for prototyping via tweening for more than 5 years now.
"It will be an expected part of the design process just like people will begin to expect this level of activity and character in software."
Which design process is this? Maybe at places at Google or agencies handling Fortune 500 companies, but the majority of jobs simply don't have the budget to experiment in any considered kind of process. Therefore, any animation is just a tacked on after thought.
Have you seen the web? The majority of it is completely shit because clients don't have the budget or balls for us to do interesting stuff.
Which design process is this? Maybe at places at Google or agencies handling Fortune 500 companies, but the majority of jobs simply don't have the budget to experiment in any considered kind of process. Therefore, any animation is just a tacked on after thought.
Have you seen the web? The majority of it is completely shit because clients don't have the budget or balls for us to do interesting stuff.
To use a loaded term, I think things like this do "trickle down". People used to say the same thing about mobile websites - building a responsive framework was a lot of extra schlep that wasn't always in budget. Now we have bootstrap, etc, and what was once a high-level "polish" feature has now become easy and affordable enough to enjoy wide adoption, and entry barriers so low that there's no excuse for omission.
The motion in the Google IO videos really reminds me of the motion design in some of the better Flash stuff from 5-10 years ago. Think most designers who have been in the game for a while already have pretty good motion design chops.
The tooling these days is kind of lacking since Flash got killed though - you end up doing things twice, first design in AE, then coding it up.
The tooling these days is kind of lacking since Flash got killed though - you end up doing things twice, first design in AE, then coding it up.
That can be done by having some sort of bridging tool.
At Apple I hear there used to be an in-house tool that takes AfterEffect raw output and convert it into full transformation matrices (which covers rotation, translation and scale, which in turn covers everything within an animation) that can be directly used by CoreAnimation.
I'm actually surprised AE still doesn't have a tool that can export full transformation matrices on a frame-by-frame basis.
At Apple I hear there used to be an in-house tool that takes AfterEffect raw output and convert it into full transformation matrices (which covers rotation, translation and scale, which in turn covers everything within an animation) that can be directly used by CoreAnimation.
I'm actually surprised AE still doesn't have a tool that can export full transformation matrices on a frame-by-frame basis.
AE has a pretty powerful javascript-based scripting language that can write exporters like this very easily. I regularly write exporters for passing timing/transform matrices back and forth within our 2D/3D pipeline.
Hopefully Edge Animate will become on par with AE and it'll be a one step process.
yeah that'll work for html5 but not for native stuff
My bad, forgot this was focusing on native stuff.
Edge would be useful if Firefox OS ever picks up though.
Edge would be useful if Firefox OS ever picks up though.