9 ms·

Why motion design is now a required skill for designers

57 points by PStamatiou 12y ago

te_platt 12y ago
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.
- PStamatiou 12y ago
  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.
uptown 12y ago
"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.
- chrisdevereux 12y ago
  The fact that there are apps with excessive motion seems like a great argument for better motion design.
- PStamatiou 12y ago
  Great point - and there are a million ways that adding motion without care can lead to a worse experience!
- yojimbo311 12y ago
  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.
  - chillingeffect 12y ago
    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.
Mithaldu 12y ago
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.
- PStamatiou 12y ago
  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. :)
  - Mithaldu 12y ago
    Great to hear you're aware of the issue! :D (Now write a blog post just as big about it. ;) )
  - nawitus 12y ago
    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.
    - PStamatiou 12y ago
      The current Google+ is not material design. Here's more info: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti... https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxmsIJQe6T9CKafiDm7p_LCCx6F https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxms...
seanmcdirmid 12y ago
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.
- PStamatiou 12y ago
  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.
  - seanmcdirmid 12y ago
    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.
dharma1 12y ago
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.
- milesokeefe 12y ago
  Hopefully Edge Animate will become on par with AE and it'll be a one step process.
  - dharma1 12y ago
    yeah that'll work for html5 but not for native stuff
    - milesokeefe 12y ago
      My bad, forgot this was focusing on native stuff. Edge would be useful if Firefox OS ever picks up though.
- Cookingboy 12y ago
  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.
  - chriskelley 12y ago
    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.
programminggeek 12y ago
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.
- protonfish 12y ago
  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.
l33tbro 12y ago
"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.
- RickS 12y ago
  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.
chriskelley 12y ago
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.

57 points by PStamatiou 12y ago

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.

PStamatiou 12y ago
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.

uptown 12y ago

"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.

chrisdevereux 12y ago
The fact that there are apps with excessive motion seems like a great argument for better motion design.
PStamatiou 12y ago
Great point - and there are a million ways that adding motion without care can lead to a worse experience!
yojimbo311 12y ago
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.
- chillingeffect 12y ago
  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.

Mithaldu 12y ago

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.

PStamatiou 12y ago
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. :)
- Mithaldu 12y ago
  Great to hear you're aware of the issue! :D (Now write a blog post just as big about it. ;) )
- nawitus 12y ago
  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.
  - PStamatiou 12y ago
    The current Google+ is not material design. Here's more info: http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti... https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxmsIJQe6T9CKafiDm7p_LCCx6F https://www.youtube.com/watch?v=Q8TXgCzxEnw&list=PLOU2XLYxms...

seanmcdirmid 12y ago

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.

PStamatiou 12y ago
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.
- seanmcdirmid 12y ago
  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.

dharma1 12y ago

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.

milesokeefe 12y ago
Hopefully Edge Animate will become on par with AE and it'll be a one step process.
- dharma1 12y ago
  yeah that'll work for html5 but not for native stuff
  - milesokeefe 12y ago
    My bad, forgot this was focusing on native stuff. Edge would be useful if Firefox OS ever picks up though.
Cookingboy 12y ago
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.
- chriskelley 12y ago
  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.

programminggeek 12y ago

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.

protonfish 12y ago
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.

l33tbro 12y ago

"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.

RickS 12y ago
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.

chriskelley 12y ago

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.