Designing with Motion

It’s very rare that we come across a piece of software that feels alive. Most web sites and apps you use are functional and stoic. If you are lucky you will find something that you think is pretty. But when you find something that has energy and character it becomes special. This achievement comes from a culmination of things, but life in software comes almost entirely from motion and animation.

Classic Examples

Everything about this app feels organic and upbeat. Pay particular attention to the compose button interaction.

For better or for worse, Windows 8 has a lot of energy. They created a new visual style for Microsoft that is a combination of flat minimal visual design and responsive motion design. Take note of all the view transitions.

This one is a little more subtle. As the video scrolls down notice how the new posts animate in. Also, see the pull to refresh. It is something that is fun and playful which echoes Google’s brand.

I love this app. These guys did a great job using animation to demonstrate modality shifts. Pay attention to the pop up windows and pop over menus. The animations draw attention and make it easier for the user to imagine the dimensional model.

This app is a game that uses a lot of little animations to make it feel fun and lightweight. It uses animation for emphasis / call outs and animation for delight (see the end).

When looking at all of these it is important to notice that not very much is happening! There aren’t a lot of elements flying across your screen like an arcade game. The animations are subtle, complex, and natural. The right combination of these can make a UI feel responsive and alive. Animation is a tool best used subtly. Think of it as a new color that can’t be used conventionally. This new color is the loudest and brightest color ever made. Let’s learn how and when to use it.

Break it down

Like all design you have to learn how be able to look at animations and understand what elements make them up. With animation you have to consider direction, timing, and easing. Let’s look at Currently as an example. The animation when Currently loads is pretty complex. There are six things moving, three different animations, three different directions, and each day of the week is slightly more delayed than the previous one.

Direction

There is a classic design principle called focal point. It is the convergence of energy in the piece; the loudest point. This is most easily abused with animation. When things are flying around your screen it is pretty easy to overwhelm the user. When picking animation directions you have to retain a focal point. Where do you want people to look? With Currently, watch the two rows. The time is moving down towards the center, and the weather is moving up. The direction of these animations create focus and energy in the center of the screen, where the user is meant to look.

Timing

When you press a physical button on your computer or in your car, the button is depressed at the same rate that you pressed it. In software, this isn’t something we can recreate. However, we can fake it. The timing on a button is important because you don’t want the button to suddenly look different, but you also don’t want it to be so slow that it feels unrealistic. There is a magic number somewhere between 80ms and 200ms here. With other types of animation it really depends on the context and the distance. If you have no idea where to start, try 200ms. It is a pretty magical number.

Easing

Without opening a calculus book, easing is basically how fast your element is moving at any time during its journey from point A to point B. Here is a great list of easing function graphs. When trying to design life into your web site or app you have to remember how life works. When you are driving a car and you want to go from 0 to 60, you start at 0 and accelerate all the way up 60, getting faster and faster over time. It is the same when slowing down. You don’t instantly go from 0 to 60. So, when picking your easing function you want one that has clear acceleration and deceleration. This creates a natural feeling. On the chart, look at Ease-In-Out functions to start.

Start Building

Let’s make something. A great way to play with animations is to use CSS animations for a web site. They are very simple to understand, easy to customize, and they perform pretty well in modern browsers, especially if you enable hardware acceleration. I put together a jsFiddle using Dan Eden’s Animate.css, and jQuery.

Here is an example of an animation that happens on load. Click on the little play button to run the animation. It can be found at the top right of the embedded jsFiddle.

Here is an interactive example.

Animation is hard

Adding life to code is not easy. It is far from the territory of logical UX design and closer to the door step of art. Like anything it requires practice, adoration, and consumption. Look for movement and rhythm in movies, art (dance), and hopefully other websites and apps. Add animations to your website, then remove 90% of them. You have to be an expert in reduction and focus. Remember, animation is the loudest and brightest color you can possibly use. Use it strategically for emphasis or delight, and use it sparingly.

Read this great Quora discussion on the tools that designers can use.

Final Inspiration

Here is an awesome video of some non-functional UI design. It is the UI in Iron Man’s suit in the movie The Avengers. Notice all the complex motion and floating elements and see how they still seem collected and actionable. Have fun.