5 Simple rules for creating a professional looking UI motion in your product

Whether you are developing a mobile app or working on a stunning business presentation - you might want to spice things up with some UI motions.

Animations help you create a flow, they create progress, emphasize or soften changes, catch the eye, and cause delight.

Motion turns binary actions into human-friendly ones. 

Animations and motions are great, but you need to know how to use them, otherwise, they are just annoying. In this guide, I will try to explain how to create a simple animation that never fails.

Rule #1: Do not throw in childish animations

I’ve seen too many dumb animations being used by good speakers.
Dumb animations are easy to recognize: they do not have a consistent direction, they do not contribute to the flow of the presentation (or app) and usually, we (the audience or the users) just want them to end.
The fact that there are so many animation types is a trap because most of these types are not recommended.

 If you are not sure about what animation to select - don’t animate. 

Rule #2: Select a simple movement direction and stick with it

Select a direction to your software animation (or slides transitions) and stick with it for the entire show. 

Here’s an example of 3 elements flying in from the bottom of the screen. 

This is a classic animation that can be used in presentations or in your app (i.e. a toast flying in from the bottom of the screen with a short status update).

 In the example above, we bring all 3 elements from the same location.

The animation is simple and creates a flow, but it doesn’t look sexy yet.

More UI design guides: 

• 40 UI rules for designing and writing better text in mobile apps
• 84 cognitive biases you should use to design better products (part I)
• 84 cognitive biases to help you design better-converting products (part II)
• 20 Dark Patterns to avoid when designing products
• 20 UI rules for designing data tables that don't suck
• 10 lessons learned from asking our users to pay
• Is 'the fold' still a thing in today’s scrolling and skimming culture?
• Lessons learned from our App Store screenshots redesign

Rule #3: Create a tiny delay between each animation

You can spice things up by adding a very short delay between the animation of each element. 

I’m talking about a really short delay, something like 0.15 seconds delay. 

IMPORTANT: Do not wait to begin the second animation AFTER the first element finished, start animating the second element a few milliseconds after the first element already started to move. 

Example: 

Element 1: enters in 0 seconds, 0 milliseconds, animation takes 500 milliseconds 

Element 2: enters in 0 seconds, 150 milliseconds, animation takes 500 milliseconds 

Element 3: enters in 0 seconds, 300 milliseconds, animation takes 500 milliseconds 

So in fact, element 3 starts the animation before element 1 finished, but the short delay creates an enhanced motion experience.

See the result below - it makes things a bit more interesting although it’s still not perfect.

There’s something missing and I will explain it in a minute. 

  

 Moving elements one after the other - important to spice things up but still not perfect

Rule #4: Nothing in nature moves linearly

Remember kinetic energy? People are used to seeing elements accelerate or decelerate as they start to move or reach the end of their movement. 

In most animation mechanisms (whether you are using PowerPoint for presentations, or developing UI) you will be able to find options to ease-in or ease-out the animation. 

This is one of the most important rules of animations, so if you want to create a natural motion - make sure to ease out your animation. 

Do not use too many options here: in most development languages you can combine ease-in/out but from my experience, it’s better to stick with a simple ease out.

  Hard to notice, but the smooth ending makes the motion more natural

Rule #5: Combining tiny delays and slow ending - the winning formula

Combine the smooth ending with the short delay between elements. 

It’s a combination of rules #3 and #4 and it’s the best way to create motion. 

The first element slows down (ease out) while the second and third elements are still moving in and it creates an interesting and natural motion. 

I use this kind of animation all the time, and even though the movement itself seems simple - the result is stunning.

This is how animations should look like:

Elements are moving one after the other with a smooth ending

Summary: 

1. Do not use dumb animations
2. Create a natural motion by applying simple movements
3. Do not move all the elements at once - add a short delay between the starting point of each element 
4. Make sure all your animations end slowly by using the ease-out option (smooth ending)
5. Review your animations and make sure they are aligned with the flow you wish to create and the overall "interaction" of your app.

But really, just don't use any dumb animation... 

Before you head of to your other 30 open tabs, follow me on twitter @gilbouhnick or subscribe to the Mobile Spoon newsletter to get my occasional blogs directly to your inbox.