UI Animation and UX: A Not-So-Secret Friendship

Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances.

When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience. And we can do it with CSS.

A CSS animation refresher#section2

This article uses CSS animations and transitions in the associated examples. If it’s been a while since you’ve used them, here’s what we’re looking at:

CSS animations are what we most closely associate with traditional animation. Any changes in state (like movement) in an animation are defined by a named list of keyframes within a CSS @keyframes rule. Reference a set of keyframes, assign a duration, a timing function, and a few other optional properties, and voilà! You’ve got CSS animation.

.animation {
	…
	animation: bounceAround 1.1s ease-in-out infinite;
}

@keyframes bounceAround {
	0% {transform:translateY(0);}
	20% {transform:translateY(-60px) rotate(0deg);}
	25%{transform:translateY(20px) rotate(0deg);}
	35%, 55%{transform:translateY(0px) rotate(0deg);}
	60% {transform: translateY(-20px) rotate(0deg);}
	100%{transform: translateY(-20px) rotate(360deg);}
}

CSS also has transitions—which, as it happens, can also be used to make things move. (Not that that ever causes confusion.) To make a transition, you flag a property (or properties) you’d like to see change smoothly over time, set a duration or other parameters for that change, and then change the property to trigger the transition between the two states.

.transition{
	…
	transition: .4s background ease-out;
}

.transition:hover {
	background:#e65445;
}

In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. This example shows a simple version of each for a quick code-based refresher.

Softening the edges#section3

The most fitting places to add animation in our work are at moments of change. State changes on the web often involve hard cuts by default, which can make them difficult to follow. These moments of change have the potential to be softened, as well as improved, by adding some animation to the UI.

Many of these moments center on helping a person orient themselves to the interface, find their way around, or establish visual relationships. Here are a few common examples:

1. Where did you come from? Where did you go?#section4

Our brains and eyes are hardwired to pay attention to moving objects—it’s almost a reflex. Magicians use movement to perform sleights of hand; car dealerships work to catch our eye with inflatable dancing tube men. We can use it to call attention to changes that hide or reveal information, such as opening drawers of content or exposing a submenu.

Animation can help the eye see where a new object comes from upon its reveal or where a hidden object goes (and likely can be found again). And of course, we can use both for an extra powerful one-two punch.

In this example, the main navigation slides out of the way as you move over it, revealing a layer of submenu. That movement lets the user know the main menu hasn’t disappeared. And, hey, there are additional options below the dark blue bar the next time they’re needed. The motion helps create a mental model of where items are located, even when they can’t all be on screen at once. If this was done with just a hard cut between states, that cue would be lost.

Part of the beauty is that the interaction doesn’t need the animation to work. The animation adds to it, giving further visual clues and communicating the personality of the site—without getting in the way.

2. These two (or more) belong together#section5

Establishing connections and content relationships is another moment of change for which animation is particularly helpful, both functionally and stylistically.

In this example, the document icon animates from its original position into a position in the modal, making it clear that it’s the same item, just with more detail. When you close the modal, you see the icon settle back into place. This is helpful and adds style in this simple example, but the same concept has an even greater impact when more items are in the mix.

This also works well for associating thumbnail and detail views. A visual cue as to where that box came from makes the experience less jarring or disorienting.

You can see this same technique when viewing or closing documents within Basecamp, or a 3D zooming variation of it when opening and closing apps in iOS 7—however, the results look and feel quite different (and have generated very different audience reactions as well!).

3. A reminder of what just was, a hint to what can happen next#section6

Sometimes the task at hand involves more than just clicking or tapping on items. When adding, moving, or reordering content is required, animation can offer up some useful cues.

Take adding or removing items from a list, for example. (I’ve simplified the action needed to add and remove items for our purposes here.) When you add a new item to the list, multiple animations indicate that you’ve done so successfully and offer a visual indication of its new position: adjacent items move out of the way to make room, the item slides into its new place, and the animated change in the background color highlights the new addition. The color fades over time as the item becomes less new, so focus can be given to new actions if needed.

Similar animations provide cues when removing an item, making the interaction easier to follow and reinforcing what has occurred. In a more complex list interaction—say, one where you can freely drag and reorder items as you please—animation could help indicate where you can drop an item, which items are active, and so on.

As interactions become more than a sequence of click, wait for new page, click on next thing, providing cues and clues like this becomes even more important. We’re manipulating data, getting (and expecting) near real-time updates, and doing more complex tasks on the web. The touchscreens in our pockets have conditioned us to expect more intelligent and sophisticated interactions from all our screens. Plus, the nature of your animations convey more personality than any static interaction could. There is a whole lot of potential power to be harnessed here!

And yes, just for fun#section7

Talking about animation in a serious light feels a bit weird sometimes—because, well, animation is supposed to be fun, too. Never underestimate the impact of adding surprise and delight.

Well-placed animation can win over users, making interactions as fun to use as they are to design. These little additions may seemingly lack real utility, but they speak volumes about the brand and the story. If you’re working on a project where unexpected playfulness fits, make the most of that opportunity—as photojojo.com does, where items jump into your shopping cart and you can pull random levers to move your position on the page.

Animating UIs like a pro#section8

Identifying the places where animation has utility is only half the battle. If we’re going to use animations in our designs, we had better make them good. Very few web designers are also trained motion designers, but if we avoid these common faux pas, we’ll be well on our way to mastering UI animation.

If we were to animate every single moment of change in a given experience, we’d end up creating an intolerable mess. But there’s a lot of room between no animation and all the animation. We have a lot of space to experiment.

One way to use animation skillfully is to reserve it for the most important moments of the interaction—the ones most critical to the main message, or the ones that most need that extra bit of attention from users. For example, Fitbit’s dashboard both on the web and in the app uses animation to highlight updates to users’ data and new achievements, but not much else. It’s a pretty safe bet that those are the most important things to someone checking their Fitbit dashboard. And that’s a good place to start, because animation carries so much attention-grabbing power when it comes to hierarchy.

Animation should never get in the way of completing a task. Even beautifully executed animation becomes annoying fast if it’s slowing you down. The recent Square redesign puts the site’s navigation in a modal that animates into place. In order to use the navigation, you have to wait for the modal to animate open, then wait again for the menu options to fade into place. I would never say navigation is off-limits for animation, but this particular case puts far too much of a barrier between you and the menu.

Of course, that’s my opinion—you might love the effect. “Too much” is a naturally subjective viewpoint, making it easy to dismiss. If they don’t agree with your vision, then to hell with them, right? Maybe. But animation is a bit different in that it has potential to cause actual harm, such as when some people reported the transitions in iOS 7 make them feel physically ill. While these cases may be rare, especially when you’re designing something less ubiquitous than an operating system, there’s a reason the WCAG includes guidelines specific to animation.

The timing of your animations can make the difference between a good interaction and a terrible one. Easing, or timing-function in CSS terms, is central to how any animation is perceived. For example, in CSS, “ease-in” means the animation starts at a slower speed, no matter what the total duration is. This can make the animation appear to take longer or hesitate before it reacts. This feels sluggish and can cause confusion: “Was that thing I clicked on a button or not?” I recommend simply avoiding “ease-in” easing for timing functions on button-like elements.

Even the most well-placed UI animation can fail if it doesn’t fit the overall message. Conflicting personalities stand out like a sore thumb. For example, springy and bouncy menu animations work well in the context of Dots, where they match the feel of the game itself, but feel out of place on apple.com, where the playful, springy movement clashes with Apple’s sleek, sophisticated brand. Animation packs a whole lot of communication into a small space. If we don’t consider what the motion we choose is saying, we’ve missed an important opportunity.

Prototype, prototype, prototype#section9

Good UI animations have purpose, personality, and alignment with your message—they just feel right. That’s a pretty high bar to aim for, and the best ones—the kind that are a pleasure to interact with—are done with style and restraint. That only happens when animation is part of the design process.

When adding UI animations to your own work, prototyping and iteration are your secret weapons. Practice makes perfect, of course, but more importantly it really is impossible to know whether an animation fits in context without trying it out. The faster the prototyping method, the better. Knock out a quick and dirty example using whatever you’re most comfortable with—CSS, After Effects, Edge Animate, or another tool. Production-ready code, or even any code at all, isn’t important here. The goal is to quickly have something concrete to look at and try. Put yourself in your users’ shoes and ask yourself a few questions:

• Does the animation provide any useful information about the interaction?
• Does it feel like it’s responding to you as the user?
• What sort of emotional response does it trigger for you?

Animation that’s worth adding should make things better on some level—think progressive enrichment, or making the interaction richer for browsers that support it. If it’s not adding something—either in terms of use or style—then leave it out. It’s also quite likely that some portion of our audience won’t have a browser capable of handling our animation, so we have to design for that possibility as well.

In fact, the browser landscape is another convincing reason to test your ideas early. The browser is responsible for executing CSS animations and transitions. This is simultaneously the best and worst thing about them. The caniuse.com charts for both animations and transitions show an impressive number of green boxes of support, which is great. Unfortunately, “support” doesn’t mean uniform behavior or performance. Knowing which properties browsers animate most efficiently can be a good first step to getting around any quirks you might encounter, but there’s no substitute for actually trying it out.

Go forth and animate!#section10

UI animation is a powerful tool fully at our disposal as web designers—allowing us to give web interactions the same sophistication as the best-designed native apps.

In fact, I bet we can make the web even better than all of those. It’s up to us as designers to start experimenting, and to explore where and when animations are the most useful for our work. We have the tools. Now let’s see what we can come up with!