
A guide to proper use of animation in UX - joshdance
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
======
JoshMnem
Most animation is visual spam. The proper way to use animation is to _NOT_ use
it except when there is absolutely no other way to communicate something.[1]
Material Design is fundamentally broken, because it tries to simulate physical
motion, which is terrible for accessibility, so I don't think it's a good
source to cite. Browsing the Web over the past few years has become an often-
nauseating experience.

Edit: here is some reading for the downvoters:

[https://usability.yale.edu/web-
accessibility/articles/animat...](https://usability.yale.edu/web-
accessibility/articles/animated-moving-scrolling-flashing-or-changing-content)

[https://alistapart.com/article/designing-safer-web-
animation...](https://alistapart.com/article/designing-safer-web-animation-
for-motion-sensitivity)

[https://simplyaccessible.com/article/animations/](https://simplyaccessible.com/article/animations/)

[http://accessibility.psu.edu/animations/](http://accessibility.psu.edu/animations/)

[https://www.smashingmagazine.com/2018/04/designing-
accessibi...](https://www.smashingmagazine.com/2018/04/designing-
accessibility-inclusion/#lens-animation-effects)

[1] except in gaming, where animation is expected and reasonable

~~~
codetrotter
> The proper way to use animation is to NOT use it except when there is
> absolutely no other way to communicate something.

While it is true that _some_ animations are excessive, I find that a certain
amount of animation makes it less taxing to follow what is happening on
screen. If big changes happen suddenly and without animation then I have to
spend a little bit of extra time to figure out what moved where relative to
where it was before and what was added, removed or changed.

Mainly I mean when changes happen automatically, like if something was
dynamically added, removed or changed by the system. Not, say, if I initiated
a page-down with my keyboard in mutt etc.

~~~
mrob
There's no need for animation to highlight changes. E.g. if a new item appears
suddenly in a list, it can use bold text so it stands out. It can then
immediately change to non-bold when you interact with it. This has the
additional advantage that the change is obvious even if you were looking away
when the item appeared. I've never seen a UI animation that was better than no
animation.

~~~
pryce
The problem with your proposal is that the meaning of the "bolded" item is not
immediately -or perhaps even with careful thought- obvious to anyone except
the person proposing the idea, or the people who have already encountered the
same idea beforehand.

We don't have a widely-understood cross-cultural shorthand for annotating an
item's 'newness'. By contrast, we are all familiar with objects retaining
their identity while they move.

When I minimize my window in macOS, it physically transforms and is sent to
its new location. I know where the window I was working on went, and I as a
person would have a good reason to be able to somewhat or even mostly
comprehend this even if I hadn't ever seen macOS before.

With no animation, the large and prominent window I have been using would
immediately disappear with no indication where it went, and the minimized icon
in the dock would be highly likely to be overlooked. It would also look almost
exactly like "closing" the window, and it would be easy for an inexperienced
user to think minimizing a window and closing it are the same thing. I can
assure you, this blurred conceptual distinction is not an imaginary problem.

Sure, I don't personally need this animation because I'm an experienced user
already. However, in almost all cases it is fundamentally flawed to approach
interface design by considering only the needs and preferences of experienced
users.

~~~
mrob
Why does the meaning have to be obvious to inexperienced users, at the cost of
making things worse for everybody else? We don't let untrained users drive
cars unsupervised, and cars are much simpler than computers. I say that
considering only the needs of inexperienced users is a fundamentally flawed
approach.

~~~
TeMPOraL
I agree (and often use the same example of cars). I believe the reason is
simple and sad - UI is meant to sell your product (or more likely these days,
service). UI and UX panders to new users because that's who they have to
impress; after purchase/subscribe decision is made, their feedback rarely
matters (and there are plenty of ways to make them stick around, including
exploiting sunk cost and network effects). Add to that the fact that regular
users _accept what they 're given_, because they have little experience to
know things could be better, and you have a perfect recipe for UIs promoting
sellability over user productivity.

~~~
wruza
Moreover, users tend to protect what they're given. It is not unusual to hear
_probably they know better_ against your criticism of ui, physical (like in
cars) or on-screen. Or even worse, lower grade touch screen. People believe
that manufacturers are gods of knowledge and engineering, because of that same
marketing I think.

------
fenwick67
"Numerous researches have discovered that optimal speed for interface
animation is between 200 and 500 ms"

They are still too slow.

If you have an android phone, go into developer options and turn animation
scale to 0.5x (animation duration is halved, so they are twice as fast).
You'll be amazed how much faster the OS feels.

~~~
Jaruzel
Fun fact: The default Start Menu pop-up delay in Windows XP was 400ms. Once of
the first things I always did was reduce it to <100ms on every new machine I
used.

~~~
wruza
While for you (and most of us here) that delay was too slow, it also served a
purpose -- users who can barely hold the mouse would diagonally go from parent
to e.g. 4th child element too slowly and lose the submenu on the way, because
it would disappear after the same delay if cursor was not on parent-or-child.
Otoh, windows devs could arguably make it independent and the problem could
disappear.

In short, with 100ms you have to go ¬-shaped and with 400ms you can go
\\-shaped.

------
Jaruzel
Someone please explain to me, why we have all these animations nowaways other
than 'because we can' \- what purpose do they actually have?

~~~
hawski
They may be useful for beginners.

Otherwise mundane app will look much more sophisticated. It can also make the
experience more fun, which makes it easier to addict the user. Just think why
slot machines are so colorful and flashy. Would they have same appeal if they
would look and behave like a parking meter?

I would not mind animations if:

\- they would not slow me down - I'm faster than them and I have to wait. It
would be interesting if animations would be faster or disabled when user
interacts faster than some threshold.

\- they would be interruptible

\- they would not cause performance degradation

\- they would not add more bugs. As with most asynchronous actions they are
not properly tested when things happen simultaneously or are interrupted.

~~~
CM30
An automatic option to disable animations if the user is faster certainly
seems like an interesting one.

Though it may be interesting just to let users choose whether they want to see
animations in general. That'd solve a lot of problems here, and additionally
give you some metrics in regards to how many people like the things.

~~~
JoshMnem
> Though it may be interesting just to let users choose whether they want to
> see animations in general.

That would be the ideal solution. Make a setting in browsers and devices where
users could turn off all animations. Designers could test their UIs with the
setting on and off. Everyone would be happy.

------
mario0b1
\- huge sticky header

\- some sticky like and share feature on the side

\- weird contrasts which are not comfy for the eyes

\- too many animations (this might not count at all)

This sums up most things I hate about modern web pages actually. Why use all
these things? Especially huge sticky headers are just super annoying. Please
don't use them. Thanks.

Also link related: [https://alisdair.mcdiarmid.org/kill-sticky-
headers/](https://alisdair.mcdiarmid.org/kill-sticky-headers/)

~~~
CM30
Honestly, I never got the hatred for sticky headers and navbars. Yes they're
ridiculous if they're too big, but having the menu in an easily accessible
place is usually a good thing. I mean, there's a reason mobile apps and
desktop programs have menu bars rather than some other design solution.

Does that mean they're always done well? No, things like Medium's 'please join
our service/subscribe to see more from [name]' are ugly and pointless, and
nothing more than a visual distraction. Sticky ads (or for that matters, ads
that try to take over large parts of the page in general) are also terrible
for obvious reasons.

And yes, a lot of 'fancy' design techniques just hurt the usability of the
page, as seen with anything that hijacks scroll/overuses parallax effects.

But I don't think sticky elements are bad in of themselves, and they can make
the site easier to use if done correctly.

~~~
always_good
The issue is that I can already scroll to the top to see the navbar, and
interacting with it is a small fraction of what I do on a website. In fact,
when clicking into media (like a news article or blog post), I'm not even
going to interact with it once.

Yet I must endure all of its downsides the whole time I'm on the page, from
taking up precious screen real estate to the even more annoying approach of
popping in and out when I scroll up/down one pixel.

Just think of how seldom you interact with the navbar of most webpages and why
it then needs to follow you around the page in the off chance that it's more
convenient than just scrolling to the top.

So far I remain unconvinced that it can be done well since the entire premise
is flawed: my device already gives me a one-click scroll-to-top shortcut. Like
inertia scrolling, it's a bad smell when every website thinks it has to bring
its own implementation of feature devices should already have.

------
red_admiral
> Web animation is treated in a different way. Since we are accustomed to an
> almost instant opening of web-pages in a browser, we expect to transit
> between different states quickly as well. So, the duration of web
> transitions should last about 2 times shorter than on mobile devices —
> between 150–200 ms.

So, let me get this right. Animations on th web should be fast, because we're
used to the web being fast. Animations on mobile should be slow, because we're
used to mobile apps being slow?

> In other cases, the user will inevitably think that the computer freezes or
> has troubles with the internet connection.

But on mobile, that is normal?

If I ever need to write a mobile app, I think I've got an idea to make my app
feel a lot faster than its competitors.

------
dmitriid
They talk so much about Material Guidelines. If only Google themselves
followed them,
[https://grumpy.website/post/0QcZsPBJl](https://grumpy.website/post/0QcZsPBJl)

------
devgutt
You can also don't use animation at all. I really don't like animations even
when used correctly.

------
Jyaif
Overall a good article. I learned that speed should depend on the screen size,
something I had never thought about.

What I don't understand is that we are not supposed to use motion blur. Is it
only because it's hard to do right?

Also I always thought that the "when the moving objects transform their size
disproportionally, they should move along the arc rather than in a straight
line" thing felt wrong. Anybody else feels this way?

------
pier25
Gratuitous animation like the ones showed in this article are not "proper".

Animation can serve a communication (and hence UX) purpose, but when
everything is animated it defeats its purpose.

It also has to be noted that the more animations there are, the better GPU you
need, which can create a false need of a new device.

------
seba_dos1
The author of this article should read some guide to proper posting animated
images on the web. Having examples implemented in CSS would probably be easier
on resources than those awful fullHD GIFs.

------
mrzool
> Please don't do things to make titles stand out, like using uppercase or
> exclamation points, or adding a parenthetical remark saying how great an
> article is.

\--[https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html)

