
Why motion design is now a required skill for designers - PStamatiou
http://paulstamatiou.com/design-provide-meaning-with-motion/
======
te_platt
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
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
"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.

~~~
yojimbo311
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
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.

~~~
gone35
_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/](http://insideintercom.io/the-dribbblisation-of-design/)

~~~
chillingeffect
> 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.

------
Mithaldu
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
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. :)

~~~
ttctciyf
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?

~~~
PStamatiou
Would you rather wait 20 minutes for your food to arrive or have chips & salsa
while you wait?

~~~
ttctciyf
I'd rather not wait 20 minutes if that wait is occasioned by the chefs
performing a visual entertainment instead of cooking my food, would be a more
pertinent analogy :)

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

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

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

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

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

~~~
Cookingboy
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
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.

