Why motion design is now a required skill for designers

http://paulstamatiou.com/design-provide-meaning-with-motion/

by PStamatiou • 12 years ago

57 38 12 years ago

uptown• 12 years 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.

PStamatiou7• 12 years ago

Great point - and there are a million ways that adding motion without care can lead to a worse experience!

chrisdevereux• 12 years ago

The fact that there are apps with excessive motion seems like a great argument for better motion design.

yojimbo3112• 12 years 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.

chillingeffect3• 12 years 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.

Mithaldu2• 12 years 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.

PStamatiou7• 12 years 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. :)

Mithaldu2• 12 years ago

Great to hear you're aware of the issue! :D (Now write a blog post just as big about it. ;) )

nawitus• 12 years 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.

ttctciyf2• 12 years ago

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?

forgottenpass• 12 years ago

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.

jarjoura• 12 years ago

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)

te_platt• 12 years 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.

PStamatiou7• 12 years 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.

seanmcdirmid2• 12 years 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.

PStamatiou7• 12 years 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.

seanmcdirmid2• 12 years 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.

dharma12• 12 years 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.

milesokeefe2• 12 years ago

Hopefully Edge Animate will become on par with AE and it'll be a one step process.

dharma12• 12 years ago

yeah that'll work for html5 but not for native stuff

Cookingboy• 12 years 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.

chriskelley2• 12 years 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• 12 years 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• 12 years 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• 12 years 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• 12 years 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.

chriskelley2• 12 years 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.

Why motion design is now a required skill for designers

Related Stories