Slow Animations

This post is part of our Non Sequitur Fridays series, which will feature a different Wistian's take on a non-Wistia-related topic each week. It's like our "employee of the month" but less "of the month"-y. Brendan Schwartz is the co-founder and CTO of Wistia. His last Non Sequitur was about the nuances of language.

Slow interfaces are the bane of my existence. But there's a special kind of slow interface that's worst of all, and that's an interface with slow animations. These interfaces are not slow because of technological limitations, but rather because their creators decided that their users should pause for seconds at a time to marvel at these splendid animations.

I hate slow animations.

Fullscreening in OSX: A Case Study

Let's examine an animation that annoys me on a daily basis: the full screen animation in OS X. Here's a video of me fullscreening a window on my laptop:

It takes 1.3 seconds from when I click the button to when the window is fullscreened! That might not sound like a lot, but have you ever clicked that button by accident? You have to wait 1.3 seconds for it to fullscreen, just to click the unfullscreen button and wait another 1.3 seconds to get back where you started. That's 2.6 seconds of wasted time.

To be fair, about half that time is a delay before the animation starts, so it's not entirely the animation at fault here. But that still means the animation is taking around 700 ms to complete. That's a slow animation!

The importance of animation

A good animation serves as a guide for users and communicates information about the interface. A good example of this is when you minimize a window on your desktop. The window shrinks and moves toward the dock or task bar. This animation effortlessly describes the action that you just took: the application has been stored in an icon at the bottom of your screen. When you click that icon holding the application, it's released and springs back into its full form.

Imagine how much more confusing it would be if instead of that animation, when you minimized a window, it just disappeared. There'd be no way to tell the difference between minimizing a window and closing it! Or if there was an animation of the window shrinking, but it didn't also travel to the bottom of the screen, you'd at least know it minimized, but you wouldn't have any idea how to retrieve it!

Its slow speed aside, the full screen animation does fulfill this purpose. The menu slides over and then the window enlarges to indicate the application is traveling over to a new desktop space.

CSS3 and animation abuse

With the advent of CSS3, it's become easy to make smooth, beautiful animations for just about everything on the web. This is a great tool, but it's gotten out of hand. Everywhere I look, there are fade effects on links and buttons.

I don't mind these animations. Used correctly they can add a great deal to the feel and experience of an application. Unfortunately, it seems many designers want to make sure we don't miss their animations, so they extend their durations. Before you know it, their interface is running at a lazy pace.

The Cancel button is still half-highlighted from when I grazed it on my way to the Confirm button. Why is this interface so slow and indecisive? It's not keeping up.

Human scale

When animations are part of the function of an application, they should take 200-300ms to complete—half a second tops.

When an animation takes longer than that, the animation is getting in the user's way.

The average human reaction time is around 250ms. Take the test, and see how fast you are! Things that happen at that speed appear fast and snappy. When interfaces move at speeds that are several times slower than your reaction time, they're not keeping up with you.

Brendan's Rules of Animation

Remove superfluous animations. If an animation isn't serving a functional purpose and instructing your users, remove it. The best design is the simplest.

Make them fast. If an animation is attached to an action that a user will do more than once, make it snappy. Ideally it should complete in about 250ms, no more than 500ms.

If an animation is attached to an action that a user will do a single time, you can bend the rules a bit because this animation is likely not standing in the way of the job they're trying to do. A flowery animation is much more welcome at the final stage of an account signup process than it is every time you click a button in an application.

iPhone trick

I mentioned my hatred of slow animations to Chris Lavigne the other day, and he showed me a great trick. If you have an iPhone, you can trade the slow application zooming animations for a slightly less slow fade animation. This will save you seconds per day, but more importantly, you'll feel amazing because an interface that you use constantly isn't needlessly handicapping the speed at which you use it.

For the speed boost, go to Settings > General > Accessibility and enable the Reduce Motion setting.