28 comments

  • Joe Blau, almost 8 years ago (edited almost 8 years ago )

    I think this is becoming more of an design trend as well. It's definitely been accelerated by Material Design which has lots of animation at it's core. I would say one of the leading design teams in building interfaces with animation correctly is Stripe. This blog post on improving the payment experience with animations as well as this video by Benjamin De Cock at CSSConf Australia really show that they understand how to do UI animations correctly. In the @bdc video, He lays out 4 guidelines which I've adopted in my own designs and prototypes.

    • Animate exclusively opacity and transform
    • Keep your animations fast (usually around 300ms)
    • animate things independently
    • always use custom easing

    I'm still a fan of animation because it can help maintain context (demonstrated in this post in the last design), distract a user while information is loading (pull to refresh animations), or provide a humanistic visual response as demonstrated in the "no" animation. I just think that it's also very easy to over use and cause slow, nauseating experiences. I know a few people that turn off all animations / parallax on their iPhone for that reason specifically.

    16 points
    • Sean LesterSean Lester, almost 8 years ago

      I'm getting into UI animation a bit here at Match, but have very little idea what I'm doing - so this is helpful. Anything else you can point me to, perhaps?

      I threw this together yesterday super fast (and have since rebuilt and refined it in Edge Animate so that the devs can pull values from the JS output) to show how a new message might animate in. http://i.imgur.com/rApJFbK.gif

      2 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 8 years ago

      Note about animation speed: it depends on what you're animating. If it's a small visual, between 200 and 250 is great and looks "instant". 300 fits some bigger animations, and you can go all the way up to 1 second of animation for things like "scroll to top" or other page-wide animations.

      Easing is just as important on this as the speed.

      The reason speeds should vary, is because of the purpose of an animation.

      Let's say you have an index at the top of your page, and when you click it, you animate the scroll down the page to get to the content. Now ask yourself: why am I animating this?

      In the above example, animation is used to convey a sense of position. If you go too fast, a user won't have any idea where on the page they are, and the animation was useless and might as well have been instant.

      Compare this to a hover state, where you just want to show something is interacted with: as long as it's clear almost instantly that someone is hovering over it, the app will feel responsive. The slower you animate however, the less likely the user will notice the state.

      Again, not dismissing "usually around 300ms", because as a general rule, that's just fine. Just felt like expanding on what the word usually means here! :)

      2 points
    • Marc EdwardsMarc Edwards, almost 8 years ago

      I am a huge fan of Stripe and @bdc’s work. I agree that they’re such a good example of how to get it right.

      Animate exclusively opacity and transform

      This point is mostly about the web and CSS, because opacity and transform can be exclusively done on the GPU. That is, they don’t trigger a browser repaint of any elements. And that’s why they’re typically the best way to get 60fps results.

      But, for native the rules are slightly different. It’s the same in that you want to avoid repaints, but what’s possible is slightly different.

      4 points
  • Louis-André LabadieLouis-André Labadie, almost 8 years ago

    Hm. I agree with the article, but pretty strongly disagree with the example.

    10 points
    • Jesse HeadJesse Head, almost 8 years ago (edited almost 8 years ago )

      The example I did agree with was going 'full screen' on OS X. That animation is just awful.

      3 points
      • Marc EdwardsMarc Edwards, almost 8 years ago

        Yep. I wish it was somehow 2 or 3 times faster.

        Yes, yes… that’s all very nice… but… C'mon OS X, I just want to go full screen. As a comparison, Photoshop’s full screen mode doesn't animate at all, and I prefer it, even though it’s a bit jarring. At least it doesn’t get in the way.

        4 points
      • Sri KadimisettySri Kadimisetty, almost 8 years ago

        I have a theory it's because they are making sure everyone gets the concept of zooming into a full screen from a window. I bet they will reign it in future updates.

        1 point
  • Eli SladeEli Slade, almost 8 years ago

    The example that was showed for Mac OS X fullscreen video is a perfect example of good animation. It provides context to where you were and where you're going. This is important because, humans are logical(mostly) and they like to make sense of things. If the video just flashed to fullscreen it would be jarring and would't make much sense. The way the desktop scales back and slides to the left gives a sense of space. This sense of space is something that our brains are good at understanding.

    5 points
    • Hamish TaplinHamish Taplin, almost 8 years ago

      Agree completely. The transition is good design—it just needs to be faster.

      1 point
      • Adam Nelson, almost 8 years ago

        And disableable. I got it the first time, no need to bash me over the head with it in slow motion two dozen times a day for the past several years.

        1 point
      • Eli SladeEli Slade, almost 8 years ago (edited almost 8 years ago )

        Yes animation speed should be able to adapt to how frequently you do that said task. The more you do it, the more familiar you are with it, the faster it should be.

        0 points
  • Jared ScheelJared Scheel, almost 8 years ago

    I think the risk is that designers focus on the "delight" of their design to the detriment of it's usability. Delight is important, but it can't cover the actual nuances of the user experience. This article gets into it a bit when talking about context. The original modal requires a context change by occluding the original tag. Focusing on the delight of the animation can blind you to this problem. The last example, where the context never full switches, but simply expands, is much better. The animation smooths out the expansion of the context, helping the user, instead of masking a problem.

    2 points
  • Stephan KarstenStephan Karsten, almost 8 years ago

    The iphone trick is great, i switched settings right away. Most prefers a snappier UI instead of "long" animations. Although it might be a "superuser" thing.

    But when professional designers at apple with years of experience in interface design get it wrong, it's going to be a hard for 20 year old's at small webcompany's to do better. We can hope, but i think animation overkill will be here for a while.

    My personal pet peeve is the already stupid cookiebar the EU forced on websites, and then implemented with a 3 second jQuery collapse animation (first world problems i know ;).

    1 point
    • Pasquale D'SilvaPasquale D'Silva, almost 8 years ago (edited almost 8 years ago )

      I believe a major contributing factor for poor animation design, is that the designers at the 'top' have little, to no understanding of animation fundamentals.

      Those who have a little experience seem to just understand the surface level concepts, and regurgitate memes like Disney's 12 principles, without really comprehending them in a practical context. It's not enough to learn some theory and then apply it literally.

      9 points
      • Jeff EscalanteJeff Escalante, almost 8 years ago

        What is your recommendation on how to improve for them? This is the only thing your comment is missing, without this its just complaining and a blanket insult.

        5 points
        • Pasquale D'SilvaPasquale D'Silva, almost 8 years ago

          I said it: "comprehending them in a practical context". It's not a step by step tutorial. It's introspective thinking, instead of knee-jerking some principles out.

          It's only an insult if you're insecure about not knowing something.

          4 points
    • Marc EdwardsMarc Edwards, almost 8 years ago

      The iphone trick is great, i switched settings right away.

      Reduce motion? That changes the animation type, but not speed, I think. It doesn’t save you any time or make the animation non-input blocking.

      Slow, input blocking animation is the worst kind of animation.

      0 points
  • Luís SilvaLuís Silva, almost 8 years ago

    Right on time. As of late, Twitterrific show/hide image animation has been annoying me. It's too slow, especially having to wait for the dark overlay to fade out after dismissing the image.

    0 points
  • Riho KrollRiho Kroll, almost 8 years ago

    I'd still like to make a case for 'delightful animations', as long as they don't interfere with the users' intentions. I think animations add a great deal to the web experience. We're no longer going from one context to another in a split second. We can ease users into a different contexts through animations, which in my opinion makes the web generally a more pleasant and usable place.

    Obviously there are generally bad practices being used, like with any new technology, but it doesn't mean we should just use the technology less (which is the general vibe I got from that article). We should improve our use of it.

    0 points
  • jiyin yiyongjiyin yiyong, almost 8 years ago

    I think of Material Design as a progress of exploring motions in design. People won't get to the destination without a tough progress. I just don't want to be bothered implementing them with poor CSS I learnt.

    0 points
  • Matt WalkerMatt Walker, almost 8 years ago

    I had this issue at a previous job. The front-end devs wanted to pack in animations any time they could get a chance because they thought it looked cool.

    0 points
  • John PJohn P, almost 8 years ago

    Flash Intros

    0 points
  • mako mano, almost 8 years ago

    Get special favors to anybody so if you held this better call hurts and then after the bitter conference you met with one of your special suppliers separately and you gave them a few insider tips that would be unethical so those are the kind of questions that you can expect take a concept from the PM BOC guide akin ethics standard an ethics standard and combine the two and do it right that's really did the kind. http://examguidez.com/c4040-250/

    0 points
  • Heri Rakotomalala, almost 8 years ago

    I'm not sure about the example. What if that app had a library on the bottom? It then makes sense that the user file opens from the bottom. It really depends on the context.

    0 points
  • Matt Smadner, almost 8 years ago

    DON'T TELL ME WHAT TO DO.

    0 points