9 ms·

A guide to proper use of animation in UX

151 points by joshdance 8y ago

fenwick67 8y ago
"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.
- th0ma5 8y ago
  On my last phone I turned the animations off complete, and then with my latest I'm waiting until I want a new phone to turn them off to give me a breath of fresh air.
- orev 8y ago
  Did this on a jailbroken iPhone once and I found the effect over time to give me the feeling of being frantic. I think the speed of these animations are chosen for various reasons, and serenity is an important part of how you feel in general while using the device. Just like you would need to teach a self-driving car not to accelerate too fast, your mind has similar expectations about what’s a comfortable pace.
  - iforgotpassword 8y ago
    Interesting. I usually try to disable animation entirely, but that sounds plausible. Did you try to disable animations and did it make a difference?
    - orev 8y ago
      On iPhone the animation speed was/is there to help give apps time to launch, for example, so while the app is launching you see the animation and it hides the fact of the app launch time. If you disable the animation / speed it up, sometimes you run into apps that you notice are unresponsive until they have finished launching. You can’t disable the animation completely, but you can reduce the animation time to as low as it can go. This was a while ago as I haven’t been jailbroken for a few years now. What I describe above is my experience with “disabling” the animations.
- elcomet 8y ago
  Best tip ever! My phone feels snappy again!
- insonifi 8y ago
  In contrast, on early Android 2 phones, I did the opposite -- increasing animation time to 2x. It felt smoother. I'd argue, that animation can cover unresponsiveness of application, and improve perception of performance.
  - hennsen 8y ago
    Why not just tell the user something is taking long to calculate or load (maxbe due slow network)?
  - Too 8y ago
    You need very high frame rate to make fast animations feel smooth and natural. I suppose older Android phones had quite low frame rate and required slow animations to feel smooth. Imagine moving a window 500px over 100ms in 30FPS, that is just 3 frames! It means your window will jump 166px per frame. On average resolution display this translates to a few centimers jump per frame. Not very smooth.
- Jaruzel 8y ago
  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 8y ago
    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.
  - degenerate 8y ago
    Same here, I miss the days of Microsoft Windows XP PowerToys Now almost nothing UX-based is configurable
- kqr 8y ago
  I turn off animations entirely on my phones, and when watching others use their phones I'm always baffled by how slow they feel. However, I've notice Android occasionally uses animation to convey things to the user, so I'll try your idea of halving it.
  - diggan 8y ago
    Yeah, I initially turned off animations on my phone maybe a year ago or so. Works great unless you occasionally play games (QuizUp for example!). Then animations needs to be able to show something, otherwise the game UI is laggy. Setting the animation scale to 0.5x fixed the issue, and still my UI feels very snappy.
  - crtasm 8y ago
    If you turn one of the three animation settings to 0 on a Keyone phone, the popup to choose charge/fast charge/data connection when connecting to USB doesn't appear and there's no alternative way to select it. I forget which but stuck with 0.5x for that reason.
- adrianmonk 8y ago
  I think there are two factors causing developers to choose too-long animations: 1. Pride. We worked hard to build this animation, and the user is damn well going to watch it! Because they'll definitely like it as much as we do. (This is an example of not putting the user first.) 2. Inaccurate conclusions from user testing. I think users go through two phases. Early on, they don't know their way around the UI and can't navigate quickly. Plus the animations are novel and they're still enjoying them as eye candy. So for two reasons, they don't mind slower animations. As they use the UI for days or weeks, both these factors flip. You start navigating the UI by muscle memory, and novelty is gone. Thus you can only find the optimal animation speed by testing how a user feels about it after weeks of usage, which isn't how user testing is usually done.
mrzool 8y ago
> 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
JoshMnem 8y ago
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/animated-moving-scrolling-flashing-or-changing-content https://usability.yale.edu/web-accessibility/articles/animat... https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity https://alistapart.com/article/designing-safer-web-animation... 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-accessibility-inclusion/#lens-animation-effects https://www.smashingmagazine.com/2018/04/designing-accessibi... [1] except in gaming, where animation is expected and reasonable
- codetrotter 8y ago
  > 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.
  - JoshMnem 8y ago
    I'm referring to accessibility, not just aesthetics. +1 for mutt. Text-first is the way to go.
  - mrob 8y ago
    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.
Jaruzel 8y ago
Someone please explain to me, why we have all these animations nowaways other than 'because we can' - what purpose do they actually have?
- mrob 8y ago
  Tricking the managers into thinking that the designers are actually contributing value.
- red_admiral 8y ago
  I think one of the original ideas was to "show where something had gone" - when you minimised a window, both on Win XP (if I remember right) and OS X, it wouldn't just "disappear" but would animate down to the taskbar / launch bar. That way you get fewer people confused about where their window went. I suppose you could just about make a case that when you have a modal element like a form to edit an item, if it takes up most or all of a small screen then having an animation to expand it makes a visual difference between "you're now on a new page" and "this form has popped up, but when you close it you'll be back on the page you were before - it hasn't gone away".
- molf 8y ago
  It can make it clear what happened after user interaction. Was an article added to the list during a refresh? Did the correct item actually go away after deleting it? It's easy to miss updates without animations. Even if you don't miss the update an animation will provide an additional confirmation that the correct thing happened. On touch devices there's also the fact that animations mimic input gestures. Imagine swipe-to-delete without the item actually moving, that would be super awkward to use... Of course, like anything, it is possible to mis-/overuse.
- hawski 8y ago
  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.
red_admiral 8y ago
> 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 8y ago
They talk so much about Material Guidelines. If only Google themselves followed them, https://grumpy.website/post/0QcZsPBJl https://grumpy.website/post/0QcZsPBJl
devgutt 8y ago
You can also don't use animation at all. I really don't like animations even when used correctly.
mario0b1 8y ago
- 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 8y ago
  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.
  - mrob 8y ago
    Sticky headers are an example of something breaking the normal scrolling behavior as mentioned here: https://news.ycombinator.com/item?id=18045207 https://news.ycombinator.com/item?id=18045207 A sticky header changes how page-down works, so I have to adjust my eye movement to compensate. Because of this I consider allowing web pages to set sticky headers a browser bug. Browser devs disagree, but at least I have the tools to disable this kind of user-hostile behavior.
  - always_good 8y ago
    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.
Jyaif 8y ago
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 8y ago
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 8y ago
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.

151 points by joshdance 8y ago

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

th0ma5 8y ago
On my last phone I turned the animations off complete, and then with my latest I'm waiting until I want a new phone to turn them off to give me a breath of fresh air.
orev 8y ago
Did this on a jailbroken iPhone once and I found the effect over time to give me the feeling of being frantic. I think the speed of these animations are chosen for various reasons, and serenity is an important part of how you feel in general while using the device. Just like you would need to teach a self-driving car not to accelerate too fast, your mind has similar expectations about what’s a comfortable pace.
- iforgotpassword 8y ago
  Interesting. I usually try to disable animation entirely, but that sounds plausible. Did you try to disable animations and did it make a difference?
  - orev 8y ago
    On iPhone the animation speed was/is there to help give apps time to launch, for example, so while the app is launching you see the animation and it hides the fact of the app launch time. If you disable the animation / speed it up, sometimes you run into apps that you notice are unresponsive until they have finished launching. You can’t disable the animation completely, but you can reduce the animation time to as low as it can go. This was a while ago as I haven’t been jailbroken for a few years now. What I describe above is my experience with “disabling” the animations.
elcomet 8y ago
Best tip ever! My phone feels snappy again!
insonifi 8y ago
In contrast, on early Android 2 phones, I did the opposite -- increasing animation time to 2x. It felt smoother. I'd argue, that animation can cover unresponsiveness of application, and improve perception of performance.
- hennsen 8y ago
  Why not just tell the user something is taking long to calculate or load (maxbe due slow network)?
- Too 8y ago
  You need very high frame rate to make fast animations feel smooth and natural. I suppose older Android phones had quite low frame rate and required slow animations to feel smooth. Imagine moving a window 500px over 100ms in 30FPS, that is just 3 frames! It means your window will jump 166px per frame. On average resolution display this translates to a few centimers jump per frame. Not very smooth.
Jaruzel 8y ago
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 8y ago
  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.
- degenerate 8y ago
  Same here, I miss the days of Microsoft Windows XP PowerToys Now almost nothing UX-based is configurable
kqr 8y ago
I turn off animations entirely on my phones, and when watching others use their phones I'm always baffled by how slow they feel. However, I've notice Android occasionally uses animation to convey things to the user, so I'll try your idea of halving it.
- diggan 8y ago
  Yeah, I initially turned off animations on my phone maybe a year ago or so. Works great unless you occasionally play games (QuizUp for example!). Then animations needs to be able to show something, otherwise the game UI is laggy. Setting the animation scale to 0.5x fixed the issue, and still my UI feels very snappy.
- crtasm 8y ago
  If you turn one of the three animation settings to 0 on a Keyone phone, the popup to choose charge/fast charge/data connection when connecting to USB doesn't appear and there's no alternative way to select it. I forget which but stuck with 0.5x for that reason.
adrianmonk 8y ago
I think there are two factors causing developers to choose too-long animations: 1. Pride. We worked hard to build this animation, and the user is damn well going to watch it! Because they'll definitely like it as much as we do. (This is an example of not putting the user first.) 2. Inaccurate conclusions from user testing. I think users go through two phases. Early on, they don't know their way around the UI and can't navigate quickly. Plus the animations are novel and they're still enjoying them as eye candy. So for two reasons, they don't mind slower animations. As they use the UI for days or weeks, both these factors flip. You start navigating the UI by muscle memory, and novelty is gone. Thus you can only find the optimal animation speed by testing how a user feels about it after weeks of usage, which isn't how user testing is usually done.

mrzool 8y ago

> 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

JoshMnem 8y ago

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/animated-moving-scrolling-flashing-or-changing-content https://usability.yale.edu/web-accessibility/articles/animat... https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity https://alistapart.com/article/designing-safer-web-animation... 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-accessibility-inclusion/#lens-animation-effects https://www.smashingmagazine.com/2018/04/designing-accessibi... [1] except in gaming, where animation is expected and reasonable

codetrotter 8y ago
> 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.
- JoshMnem 8y ago
  I'm referring to accessibility, not just aesthetics. +1 for mutt. Text-first is the way to go.
- mrob 8y ago
  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.

Jaruzel 8y ago

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

mrob 8y ago
Tricking the managers into thinking that the designers are actually contributing value.
red_admiral 8y ago
I think one of the original ideas was to "show where something had gone" - when you minimised a window, both on Win XP (if I remember right) and OS X, it wouldn't just "disappear" but would animate down to the taskbar / launch bar. That way you get fewer people confused about where their window went. I suppose you could just about make a case that when you have a modal element like a form to edit an item, if it takes up most or all of a small screen then having an animation to expand it makes a visual difference between "you're now on a new page" and "this form has popped up, but when you close it you'll be back on the page you were before - it hasn't gone away".
molf 8y ago
It can make it clear what happened after user interaction. Was an article added to the list during a refresh? Did the correct item actually go away after deleting it? It's easy to miss updates without animations. Even if you don't miss the update an animation will provide an additional confirmation that the correct thing happened. On touch devices there's also the fact that animations mimic input gestures. Imagine swipe-to-delete without the item actually moving, that would be super awkward to use... Of course, like anything, it is possible to mis-/overuse.
hawski 8y ago
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.

red_admiral 8y ago

> 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 8y ago

They talk so much about Material Guidelines. If only Google themselves followed them, https://grumpy.website/post/0QcZsPBJl https://grumpy.website/post/0QcZsPBJl

devgutt 8y ago

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

mario0b1 8y ago

- 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 8y ago
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.
- mrob 8y ago
  Sticky headers are an example of something breaking the normal scrolling behavior as mentioned here: https://news.ycombinator.com/item?id=18045207 https://news.ycombinator.com/item?id=18045207 A sticky header changes how page-down works, so I have to adjust my eye movement to compensate. Because of this I consider allowing web pages to set sticky headers a browser bug. Browser devs disagree, but at least I have the tools to disable this kind of user-hostile behavior.
- always_good 8y ago
  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.

Jyaif 8y ago

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 8y ago

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 8y ago

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.