5 Simple rules for creating a professional looking UI motion




5 simple rules for creation a professional looking UI animation


Whether you are developing a mobile app or working on a 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.


UI motion tip: If you are not sure about what animation to select - don’t animate.
 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.

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 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 infect, 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.

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.



Comments

Gil Bouhnick The Mobile Spoon
Tinh Kieu said…
That's a really good place to start and gives I a key skill to start exploring.
Reference article: https://v8web.com/choosing-a-domain-name-for-your-business/
Gil Bouhnick The Mobile Spoon
Unknown said…
This Post has the great Information And I'm working in the Animation industry but I did't know such a creative method that how can can we create perfect animation.
Telstra Contact Phone Number
Gil Bouhnick The Mobile Spoon
pexejurer said…
THANK YOU SO much for sharing the post. Wanting more from you. kinguser Poweramp leo playcard
Gil Bouhnick The Mobile Spoon
Unknown said…
It has been three months since the last time we here at Game Crate sat down and rattled off the amusements we by and by are anticipating the most. This is the place we remove our basic caps and simply enable ourselves to end up aped up for amusements once more. Since 2015 is altogether wrapped up, it's an ideal opportunity to investigate what energizing titles are coming up in 2016 and past. Apple Repair centre