
Motion Design Is the Future of UI - nerdy
https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f
======
pavlov
There is a terrible trend among designers to start doing motion design for
mobile apps way too early.

Before even the app's purpose is properly conceptualized, someone digs up one
of those great new animation-oriented prototyping tools and starts making
flipping buttons and sliding blocks like the ones shown in the original post.
"This is going to be our app's unique personality!"

That effort can end up being misspent and misleading if it's done before
proper prototyping. Having ultra-polished animations in mockups will guide
development towards implementing those rather than asking questions about what
users might want to do.

The article refers to Facebook's Paper app: _" Can you imagine Facebook
designers presenting their iOS Paper app as a static layout? It would look
pretty lame."_

Ironically, Paper has been discontinued and the Facebook Creative Labs group
that created it has been disbanded. Turns out that awesome animations didn't
give the app a purpose of its own.

~~~
vvanders
Motion is the the bass player in the band. You shouldn't notice them but when
they're gone something definitely doesn't feel right.

~~~
mrob
All interfaces already have motion without needing animations. If I click
"minimize" and something disappears, then it obviously minimized. I don't need
a timewasting animation telling me that.

~~~
makecheck
Actually, I think you do. Maybe the app crashed without saving your data.
Maybe you hit a button or pressed a key by accident without realizing what it
did, and now all your precious work seems to be gone and you don’t know where
it went or why.

Not all feedback is automatically bad.

The trick is to get rid of animations that _force_ the user to wait for them
(e.g. most “opening” animations are in this category; I do not want to wait
for something to finish sliding open before I can use it, I want items to
_appear instantly_ ).

~~~
mrob
In that case the correct solution is fixing the app so it doesn't crash, and
fixing the input device so it doesn't generate spurious inputs. The Unix style
of silence on success is the best feedback, because it means I can mentally
queue multiple actions without being interrupted.

------
tlrobinson
On the other hand, a recently discovered glitch in iOS 9 that lets you disable
system animations has been very popular:
[https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_di...](https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_disable_ios_system_animations_opening/)

It just makes everything feel a bit faster.

~~~
oxplot
Power Saver feature of android (or maybe just the Cyanogenmod flavor of it)
disables all animation which is based on the android UI framework and besides
making everything faster (and apparently less power hungry), it could also
change the way a user uses an app or bypass restrictions that the app
developer relies on to limit user activity (e.g. like/dislike on a series of
items).

~~~
lake99
Don't use Power Saver for this. The mode affects many things pretty
pervasively. Instead, under Settings->Developer Options, you'll find three
settings related to animations. I keep them all turned off.

Of course, this is the first thing I do no matter what UI I'm using.

Dear UI/UX designers, I don't care what you do with these animations as long
as you let me turn it off completely (via the OS, if necessary). Just don't
force animations on users.

~~~
ferbivore
Not sure if that still happens now, but turning "Animator duration scale" off
used to affect auto-scrolling in Hangouts. Might want to check that if you get
any weird issues.

~~~
lake99
I don't use Hangouts, so I'll never know. But I'll keep your comment in mind
for other software. Google doesn't help matters by being so terribly slow to
act on bug reports.

------
Klathmon
Wow I'm surprised that many of the comments here are negative.

Despite what you may feel, animation and UI/UX are extremely important, and
the suggestions in the article are not the "overdoing" that many of the
comments here are complaining about.

Motion is a great tool to hide latency, give some spacial awareness, and can
be an additional tool to give quick feedback on an action.

I've personally found its one of the major reasons the "average" person
chooses software.

Edit: per my last line, "its" is referring to UI/UX design in general.

~~~
Niksko
And there's your answer. The average HN user and the average person are very
far apart.

I personally love animation as part of good design, but I know plenty of
people that don't care. Even non-tech people I know say things like 'I don't
care how it looks, I just want it to work'. Which is a ridiculous sentiment,
not because things need to be aesthetically pleasing to work well, but because
aesthetically pleasing designs and good usability lead to you wanting to use
an app more. It's not just vanity, it actually makes a difference to how you
interact with software.

~~~
ehnto
Your statement, 'I don't care how it looks, I just want it to work', versus
your argument against it, 'aesthetically pleasing designs and good usability
lead to you wanting to use an app more' are perhaps misaligned.

Usability is not supposed to be aesthetically pleasing, it can be but it is
not supposed to be. It's supposed to be usable.

If something is more usable by removing a microsecond delay, then it may not
look as nice but it is more usable. I would prefer more usable to nicer
looking.

Design is absolutely not just vanity, but artificial delays absolutely do
hinder usability to increase the vanity. It may not "feel" as nice, but it is
objectively better to use.

The Android Chrome browser is a great example. Swiping stuff around, amazing,
smooth and great animations. The animations take only as long as it takes for
me to use them. But when I click the button to show me more tabs, it takes a
moment to swoop out, then I click and it takes a moment to swoop back in.
Great, spatial awareness is introduced and it felt nice, neat.

But now I have 5 tabs open and I am trying to flip between them without losing
my train of thought and all those delays add up, it is now no longer as nice
to use because I feel like I am ahead of my device because it's slow, when
it's really just the artificial delays.

You can still move up to the tab overview screen, it still gives spatial
context, but the animation is not needed, and can be removed for better
usability.

I also feel like good animations can still exist without delay in many
contexts (not all). Complete the users action instantly, show them the results
instantly, but in some contexts there is room to fade out auxiliary
information out more slowly.

Moving up to the tab overview is a good example. The tabs can be shown
instantly, and just a ghost of the previous screen could fade out behind it.

------
anexprogrammer
Motion can be incredibly useful if it's used appropriately.

The vast majority of examples are not used appropriately adding distraction,
or worse, they slow down actions. It's all over the place, cute or "helpful"
animations or displays that just get in the way of using the damn thing. Home
electronics that have "welcome" and "bye" messages delaying the on or off are
in the same pointlessly annoying category.

To use his first example, if you use an animation for deleting a record, is it
going to significantly slow down deleting? What about a number of records you
want to delete?

Personally I'd _stop using_ an app that decided to animate passwords like
that. It's gratuitously distracting.

 _" we could even ditch the text completely, relying on our animations to
provide user feedback"_

Oh ffs no. So we have to guess what the bounce, shake, or dancing emoji is
trying to tell us in place of "nothing selected"?

~~~
anotheryou
what I used on my very first flash website for an animation like the deleting:

\- separate buttons from animation, (buttons jump/stay, content animates).
This allows for fast clicking.

\- fast animations, so the animation and the underlying UI are not separate
for too long.

------
coldcode
As someone who struggles with these people every day I would prefer it die
with fire. UX (the abstract concept you are giving the user) and UI (the
implementation) are there to make the user be able to get out of the
application what they need. Spending ridiculous energy on stuff which does
nothing to help the user along is a waste of effort. It's no different than
worry more about the "look & feel" (using the old term) than building
something that is understandable and adaptable to different experiences and
abilities of users. There is nothing wrong with making it look pretty or even
using motion to point a user in the right direction but like everything these
days it becomes an end unto itself and just makes development take even longer
and cost even more.

~~~
Yhippa
I get the feeling that UX/UI designers are doing this stuff to stand out from
each other. No point in using the existing stuff that already works if it
doesn't have your name on it right?

~~~
nathanaldensr
The more cynical among us would say that you're exactly right. Many designers
have big egos, religious perspectives on what designs are "right" or "clean,"
and suffer from extreme cases of NIH syndrome. These types of articles are
resume portfolios for many of them.

 _Next Steps Ready to learn how to create these beautiful animations? Check
out my blog and Motion Design course at The Kinetic UI._

~~~
pavlov
I feel you're on the mark with this.

It's not all that different from the endless stream of programming articles
that promote a particular approach as the one true solution, when the writer
happens to be a consultant in that specific approach.

"Awesome Agile Angular solves all your front-end woes! -- Sign up for my
mailing list, buy my e-book, take my 3-day course, come see me talk at the
TimeWaste 2016 conference."

~~~
aikah
> TimeWaste 2916 conference

note to self, trademark that conference name ASAP ...

------
ChrisDutrow
I've been working on a web application for the past year or so. Many of the
features are extremely valuable, but also hard to understand intuitively.

I started adding little animations with the purpose of "nudging" the user to
understand the interface without having to think as hard. Just simple stuff
like when toggling a button state, flipping it like a card so the user's
intuitive mind more easily comprehends the state change.

I used slower animations in 0.4s range, but I think after reading these
comments, I'll switch a lot of stuff to the faster 0.2s. It sounds like
animations that are too slow are frustrating people.

If anyone is thinking of adding animations to a web app for the first time: I
found them fairly easy to implement just using CSS. (a little bit of
JavaScript here and there)

This is a demo if anyone is curious:
[https://demo.enterprisejazz.com](https://demo.enterprisejazz.com)

------
FranOntanaya
For whatever is worth, animated UI has been a thing in window managers
forever, and I've never had a good experience with it. If it was named "Forced
latency" design it wouldn't be so sexy.

~~~
Silhouette
Window managers do offer a few genuinely useful applications for animation,
though. For example, they often have functionality that hides part of the
display, and clicking on some corresponding icon or text then restores it. A
quick animation showing a just-hidden item shrinking down to wherever the user
needs to go to find it again later does provide useful information in a
transparent way, and is unlikely to interfere with or slow down whatever the
user wants to do next.

~~~
FranOntanaya
That's like a permanent "tutorial mode" though, why do we treat users as if
they would never learn.

~~~
Silhouette
Not necessarily. If you've got a whole row of icons across the top/bottom of
your screen representing running or available programs, for example, the quick
animation showing where the window you just minimized went to saves you
hunting right across your screen if you want to restore that window again.

~~~
mrob
The better solution is for the icon representing the active window to be
highlighted. Then you can look at the icons before you minimize if you want to
be reminded. You shouldn't need to do this often, because the positions of the
icons should be consistent and easy to remember.

~~~
userbinator
Ironically enough, Microsoft seems to be making the icon highlighting (taskbar
buttons, really) fainter with each new Windows version, to the point where the
only indication in Windows 10 is a small brightness increase..

7/8's default theme aren't that much better; can you tell which of these are
active?

[http://www.groovypost.com/wp-
content/uploads/2012/10/Windows...](http://www.groovypost.com/wp-
content/uploads/2012/10/Windows-8-Desktop-Taskbar.png)

[http://i.stack.imgur.com/rFOQm.png](http://i.stack.imgur.com/rFOQm.png)

XP/Vista, much clearer "pushed in" effect for the active button:

[http://mytechquest.com/blog/wp-
content/uploads/2009/09/Iconi...](http://mytechquest.com/blog/wp-
content/uploads/2009/09/Iconize-Windows-XP-Vista-Taskbar-Buttons.jpg)

Windows 9x/ME/2K/Classic - _very clear_ pushed-in effect for the active
button:

[http://www.howtogeek.com/wp-
content/uploads/2009/01/613x178x...](http://www.howtogeek.com/wp-
content/uploads/2009/01/613x178xsshot67.png.pagespeed.gp+jp+jw+pj+js+rj+rp+rw+ri+cp+md.ic.gCSEUm58b4.png)

------
KaiserPro
Oh please god, not _again_

Looks kids, Firstly its not motion design, its animation. Shoving in a non
linear tween into an interface does not make it more useable. Thats why
everyone hated flash, not because it was insecure or "slow", they hated it
because it was full of stupid transitions.

Lets put it this way: Go look at FT.com Look at it, its horrific. In terms of
design it basically a poorly translated printed page on the screen. However
its wildly popular. 500,000 people pay for that interface, why? because the
content is so good.

Let that sink in for a moment.

If the only differentiator between you and your competitor is the amount of
ease-in tweens in your UI, you're in an over-saturated sector, go home, start
again.

As for the OP's first assertion: "if something has been deleted, shove an
animation in" NO. what if I want to delete multiple items quickly? (I'm
looking at you IOS Mail app.) do I seriously have to suffer that battery
sucking animation Every. Fucking. Time?

Just lay it out, make it consistent, remove as many steps as possible, and
make it fast. Let your content/USP do the talking.

~~~
DonHopkins
Another flowery buzzword for the same old technique (from judiciously using
animation to draw and focus attention, to gratuitously abusing it to dazzle
and titillate) is "cinematic interface". Of course like any flowery buzzword,
different people have different takes on what it means, but here you go:

One concrete example from OpenLaszlo: there was a "cinematic" input focus
indicator, so when you tabbed between controls in a form, it would smoothly
fade in, animate over and fade out four corner chevrons from the current field
to the next, to draw your attention and move your eyes to the next field in a
form.

And of course it supported type-ahead: you could quickly press any number of
tab or back-tabs, and it would continuously animate toward the current input
focus.

I thought it was actually pretty nice and served a purpose, and was obvious
enough that it didn't need any explanation, but yymv.

Here's a talk about OpenLaszlo that defined the term "Cinematic User
Experience" (this was years ago so it all seemed so fascinating at the time):

Creating a Cinematic User Experience with OpenLaszlo:
[http://webconf.hu/2007/program/i/openlaszloen.html](http://webconf.hu/2007/program/i/openlaszloen.html)

What is meant by the term Cinematic User Experience? It’s characterized by the
following:

Continuous User Interface: By featuring fluid application state changes,
rather than today’s standard page-by-page format, a Laszlo-enabled site helps
users stay oriented and efficiently complete multi-step online tasks.

Universal Canvas: With the ability to view common media data types including
text, video and sound formats seamlessly on a single “universal canvas,” users
are able to work with integrated multimedia information displays without the
distraction of separate playback software for each media data type.
Furthermore, Laszlo enables a wide array of media types without requiring
users to install additional plug-in software.

Real Time Information: Traditional Web sites only update information when a
page is reloaded. Laszlo enables live data push into standard browsers. This
real-time messaging enables Laszlo-powered Web sites to provide integrated
instant messaging and real-time inventory or financial information displays.

Other people have used the same term in various ways:

Cinematic Continuity in User Interface Design: [https://medium.com/ux-
design-1/cinematic-continuity-on-ui-de...](https://medium.com/ux-
design-1/cinematic-continuity-on-ui-design-8aa191ab9c8e#.ijfn4dnko)

Cinematic Interfaces -- Film Theory After New Media:
[https://www.routledge.com/products/9780415833158](https://www.routledge.com/products/9780415833158)

~~~
userbinator
I really like the adjective "cinematic" in that you get an experience like
watching an action movie, with stuff flying everywhere and general attention-
getting mayhem every time something happens; but it also reflects the fact
that, no, people do _not_ want interacting with UI to be such an exciting
experience. (Notwithstanding things like games where excitement can be
appropriate.)

------
TYPE_FASTER
> If a password is entered, a simple ‘nod’ animation can be introduced upon
> completion. Whereas a horizontal shake can be used when denying a password.

The NeXT used to do that on the login screen. It got huge applause at the
premiere I saw in 1988.

> Any way you can avoid showing a loading status will make your app appear
> much faster.

The animation is now the loading status. The animation isn't making the user
think the app is faster, it's just taking the place of a different animation
that would show the asset is loading.

I do appreciate showing that loading status so I don't have to try to figure
out what my phone is doing by looking for the spinner at the status line at
the top of the screen, but don't change the size of the button and distract me
from the content.

~~~
wyattpeak
> The animation isn't making the user think the app is faster...

I disagree. The right hand animation, sure, but if I saw the middle animation,
I don't think I'd register the latency at all. In fact I think I might
misinterpret and get irritated that my time was being wasted with an
unnecessary animation.

Not necessarily better, but I would have been distracted from the load time.

------
joshmarinacci
While I agree motion design is important why is it presented as "The Future"?
This stuff is old. The seminal paper dates to 1995.

[http://dl.acm.org/citation.cfm?id=974941](http://dl.acm.org/citation.cfm?id=974941)

~~~
DonHopkins
The other thing that came out of that Self research was the Java HotSpot JIT
compiler, which led to V8 and other JavaScript VMs. And here we are again!

------
userbinator
I find that the human visual system is interrupt-driven in that it responds to
changes --- any movement or change will cause some sort of processing in the
brain, which is why I think animations are distracting since they compete for
the resources of the user's brain which are devoted to the actual task, and
could cause cognitive overload and inattentional blindness.

To use the example in the article, if I'm creating an item I want to be able
to start interacting with it _immediately_ , not wait even a little bit for it
to finish animating. Having to wait and watch the animation breaks the "flow"
of the sequence of actions I've mentally prepared.

------
afandian
As a user I can't stand motion in UIs. Even Google's new buttons that show
ripples when you click are disconcerting.

To any UX designers reading - if you put more motion in your design I will
avoid your software.

(And yes, not everyone's the same)

------
joeyspn
The _future_ or the past?... motion design for UIs started in the 80s/90s and
gained traction in the web during the early 2000s with Flash/AS2/AS3...
Denying this is knowing nothing about the history of UI design.

Browse the FWA for proof of cool UI animations starting in the year 2000 [0].

I'd say we're having a _rediscovery_ (specially in the web) now that
HTML5/JS/CSS3 allows fluid transitions and transforms.

[0]
[http://www.thefwa.com/site/mmorph?c=SOTM](http://www.thefwa.com/site/mmorph?c=SOTM)

~~~
BatFastard
3 more years and they will catch up to where flash was in 2000.

~~~
douche
Just imagine what we could have done if we didn't have to do everything in
JavaScript, in web browsers... If we could write actual real rich-clients...

------
Yhippa
I'm not a native developer but are there power considerations for these
animations? If you're using what the OS gives you then I imagine it's been
highly optimized. If not you're creating your own animations which require the
device to work harder to achieve 60 FPS.

~~~
sjmulder
I'm not really up to date on Android here, but iOS uses a scene graph that
lets you do a lot of things with great performance as long as you keep in mind
some basic guidelines.

------
e40
When elements in the UI move it increases the chances that I'll click on the
wrong element. When it happens, it's so incredibly frustrating.

~~~
BatFastard
Its not hard to add blocking elements, which stop more changes until animation
is complete.

~~~
DonHopkins
It's not hard but it's mean.

------
ChrisNorstrom
Translation: Annoying Power Point Transitions are the future.

Sorry but there's a reason why the comments here are negative. I'm a temp
designer and even I stay away from transitions, they are almost always
inappropriate, slow down the experience, distract attention, delay response.
Especially as users get better and more familiar with using the app and use it
more and more. These transitions start to become obnoxious.

Just look at the mess caused by CSS3 transitions over the last 4 years.
Especially those stupid Parallax backgrounds. No longer can you simply scroll
down and have the page and images go up... Oh no, now the images fade in as
you scroll down, pop in off screen, backgrounds move at a different rate than
the rest of the page. And for what? To impress someone? It's annoying, not
impressive.

On the other hand, with the examples Craig Dehner gave in this article, motion
design is great for tutorials so you can see what elements changed, where it
went, etc... It would be nice for an app to have transitions only for the
first 3 times you perform an action, after that they disable.

------
ilostmykeys
"Thinking about music is like dancing about architecture" The two are entirely
separate modes of thought, like oil and water one might say. Any attempt to
mix art and logic at a superficial level is futile. You need far deeper
thinking than "Motion Design is the Future" to understand how to mix the two
properly.

------
Tloewald
We're going through a wild west phase of UI ("UX") design where motion is
being integrated into user interfaces in wild and crazy ways. Eventually a
consensus will emerge (in the past, this has usually been driven by Apple
either standardizing on something, like slide to open or elastic-banding) and
we'll get library support for a standard "create a new item" "destroy an item"
"create a child item" "establish a relationship" and so on. In many cases,
there are already contenders, and you're probably better off picking whatever
looks like a standard and imitating it.

The upshot is that we're in a period of flux, but eventually standards will
emerge and "motion design" will be largely a matter of UI standards and style
guides, just as "button design" is today.

------
mtgx
A couple of talks about it at Google I/O 2014:

[https://www.youtube.com/watch?v=isYZXwaP3Q4](https://www.youtube.com/watch?v=isYZXwaP3Q4)

[https://www.youtube.com/watch?v=FBD0VlcVS1E](https://www.youtube.com/watch?v=FBD0VlcVS1E)

------
Zigurd
I hate to pile on with criticism of what is, in a vacuum, an improvement over
pushing buttons and entering text. BUT the point should not be "motion design"
as a goal, the point should be that direct manipulation should be used where
memory of an action helps the user learn and discover things the UI can do.
Motion is part of direct manipulation, and using it effectively is a Very Good
Thing, but it isn't the only thing and it's not the main thing.

Touch is magical. Babies and the aged like touch because it is a direct link
to actions. But apps don't use touch as effectively as they could, and
direction manipulation is the central concept behind making touch even more
effective.

~~~
douche
>Touch is magical.

Touch is at best a second-class input system. It's never going to have the
kind of pointing precision we got used to twenty years ago with mice, and it's
never going to be comparable for text-input with a dedicated keyboard. We use
it on our phones because it's all we've got, and as terrible as touch screens
on a device that small are (my Samsung phone has an effective touch resolution
of about 4x7 finger tips, and any elements smaller than that I can't reliably
interact with), the alternatives are worse.

~~~
Zigurd
Touch is spatially lo-fi, but the numbers show that humans favor the
obviousness of touch over pointing device precision. And then you have the
dominance of laptops, where most users are relying on a touchpad to hit tiny
targets, the worst of both worlds.

------
mrob
Motion design almost always makes things worse. Latency is cumulative, and I
already have latency sources in the chain, so the maximum acceptable time for
an animation to slow me down is 0ms. This can be accomplished by asynchronous
animations that run in the background without forcing me to wait for them to
finish before I can continue, like the animations in Gnome 2's window manager
Metacity. But motion designers almost never do that, because if people aren't
forced to wait they might not notice the animation, and then the motion
designer would lose status.

------
amelius
This is time consuming stuff. Do we really want our smartest engineers to
spend hours on trivial things like animations?

~~~
vvanders
That's why you build tooling around it so your engineers don't spend time on
it.

~~~
amelius
We tried that once with CSS. If that would have worked we wouldn't have seen
so many articles about how to (ab)use it in better ways. Again, this stuff
consumes too much time and effort.

------
dylnclrk
Interesting article. I agree that subtle animations can improve my mental
model of how an application works. But I hate stuff like this:

    
    
      In some cases, we could even ditch the text completely, relying on our animations to provide user feedback.

------
jcoffland
This will be considered annoying in a few years. Probably sooner, if not now.

------
zimbatm
Animations are mostly useful for learning users because it gives them a cue.
Every UI should have a way to turn those off and stop wasting my time.

------
andrepd
What I don't understand is how "motion design", or any UI design philosophy
for that matter, must imply a certain fixed visual style.

Take android for example. I loved the clean and understated look of Holo. I
hate the inconsistent light pastel whitespaced mess that is material design.
However I'm forced to have it if I buy a <2 year old phone and what the latest
security updates. Why couldn't I get the holo theme to choose from? The UI
elements are the same; point is there isn't any reason to tie it to the visual
design and impose a specific style.

