Motion in UI Design


Just like in our physical three dimensional world, motion in the user interfaces we interact with can play an important role in our experience. In general, I prefer to think of there being two types of animation; the ‘sparkle animation’ and the ‘obvious animation’.

Sparkle animations are cool to look at, but generally pull our attention away from content or important tasks.

Obvious animations are exactly what they sound like! They are what we expect and aid in our understanding of where we are in our user flow. Obvious animations obey the laws of physics by accelerating, moving and then decelerating in a way that seems natural to us. It’s so natural that to an average user they become almost invisible.

Inbox by Google — John Schlemmer

The example above is an animation from Inbox by Google. I’ve pulled this example from the Dribbble account of John Schlemmer (Lead Motion Designer for Apps at Google) mainly because his use of motion is as good as I’ve seen!

This example shows what happens when a user taps on their flight info in Inbox. The entire screen actually shifts, changing to Google Calendar but the users attention stays focused on the flight details. Like how a magician uses a sleight of hand, by using depth, animating the card toward us, the UI can change quickly behind without really noticing the transition and the user stays focused on the content.

Seamless.

This is an obvious animation. We’ve tapped it so we expect it to do something. It grabs and holds our attention while a fairly dramatic shift of state takes place in the background.

What can often be confusing is when we tap something and 5 separate elements begin to move at the same time in different directions. Our attention is split in multiple directions and focusing on a specific piece of content is difficult.

It’s a designers job to know when and where to use animation and motion to aid in the user experience, but it’s as important to know when not to use it. After all, someone booking a flight or reading the news hardly wants to get wrapped up in an immersive, interactive experience with stuff moving all over the place, flashing, bouncing and dividing their attention.

Just as there are many ways we can use animation and motion to design great user experiences, there are also many tools we can use to do so! Each tool has varying levels of capabilities and complexities.

Tools For Motion Design

2014 saw an explosion of interactive design and prototyping tools. Although all of these tools still sit separate from the tools user interfaces are actually designed in (Photoshop, Sketch) they certainly nudge things in the right direction. There’s no overall winner for me. I’ve used Adobe After Effects, Marvel, InVision, Pixate, Flinto, Proto.io and have scratched the surface with more complex tools like Framer JS and Quartz Composer. Generally the correct tool for designing interactions depends on the project, time available and the complexity of what you’re trying to do. However, I do have two tools I’ve been continuously going back to.

After Effects

My tool of choice to date has been Adobe After Effects. It’s a fairly intimidating tool meant for professional motion graphic designers and visual effects experts but for someone comfortable with the rest of the Adobe Creative Suite its a natural progression. For mocking up basic interactions its quick and easy and generally gets the job done when communicating ideas to front-end developers.

To use After Effects effectively you will need to learn some basic code for applying physics based effects to UI elements, like bounce, bounce back and overshoot effects. There are tons of resources where you can copy and paste the code to your project but understanding how to edit it and what it does will allow you to create far more realistic animations.

Designing interactions in AE has it’s limitations though. The prototype won’t be interactive (unless you export and use another program to make it interactive) and because you can’t export source code it’s down to front-end devs to try and recreate what you have designed.

Enter Pixate.

Pixate

I’ve started to use Pixate over the past couple of months and it’s on the way to becoming pretty much the perfect prototyping tool!

It’s interface is well designed and intuitive providing only tools needed for UI animation. Its USP for me is that it’s prototypes run natively on iOS without having to write a single line of code. It uses that same API’s as developers use to run realistic animations in iOS and Android so you know what you’ve created will look and feel exactly the same when built.

Pixate is still young and has it’s limitations. I watched an interesting presentation with the guys at Lyft recently where the founders of Pixate showcased some pretty cool features they’re working on. In short, soon you’ll be able to convert the interactions you’ve created to code, package it up, and send it over to the developer’s you’re working with so they can pick at it and use what they need. Features like this will certainly bridge the gap between design and development in the next few years and will eventually (I’m guessing) lead us toward a tool that allows us to design interfaces and interactions together and will generate, close to, production ready code for frontend developers to work with.

If you enjoyed reading this post, please recommend and share it! You can also check out what else I’m up to on Dribbble.com!

John Sherwin
Product Designer at
Soundwave