Key principles in animation
Animated interfaces are full of life and emotions. Animations add life to static things. When it comes to UI interfaces, animations are not just about enthusiasm, but also about solving problems.
Animations are a method in which individual images get combined to look as if they are moving in a single smooth movement. Each piece of animation that you see consists of several images (or one image in several states) that merge together to fool the human eye into thinking that it is one image.
Let’s get animated 😍
Let’s talk about the following:
- Why animation is important in a product
- Animation tools
- Some practice tips
- Make the interactions feel obvious
Before we get to the practice tips, let’s understand why animation is so important. The main idea of animation principles is that animation is the body language of a product.
Principals of animation
- It’s functional
- It feels natural
- Adds character
It’s functional
What is happening on the interface and will happen if an action is taken gives you a little bit of visual feedback
There is no text alert involved. The animation tells you something so you know what happened. It also tells you when you’re right or wrong. The same as body language translates things non-verbally.
It’s natural
Your elements act as you expect them to act. For example, you swipe a card or want to open it. It should behave with expected behavior.
Add character
With animation, users can get quick visual feedback, which tells you where to go; it can focus your attention and express brand personalities.
A lot of tools that can help you with UI interactions
- To demonstrate concepts, you can use: After Effects, Keynote, Animate. All of these tools can be used as a hack, so you need to understand the principals of UI animation so you can create more realistic and implementable interactions. This a video format so you can send it to everybody.
- For prototype experience you want to test on users before implementing the idea: Principle; Flinto; Kite; Studio; Adobe XD; Origami; Framer, etc
With these tools, you can make nice animations that you can interact with. It’s a great step to test your product.
I highly recommend to watch the Principle tutorial by Stenly: LINK. It’s very easy to get started! - Or even code based so you can easily transfer your project to developers: AE + plugins; Google motion library; CSS and Animation Libraries; Swift for iOS. With these tools you can create interaction exactly how it will be in production and share with your developers so they can integrate it very easily. But it requires more skills such as coding.
Best properties of UI Animation
Softening in animation helps make the movement of the subject more natural. This is one of the most basic principles of animation, which is described in detail in the Disney Animation article.
So that the animation does not look mechanical and artificial, the object must move with some acceleration or deceleration — like all objects in the real world.
Ease out — this property is opposite to the functions of the ease-in curve, so the object quickly travels long distances and then slowly slows down to a complete stop.
This type of curve should be used when an element appears on the screen — it pops up on the screen at full speed and gradually slows down to a complete stop. It can also be applied to various cards or objects that fly onto the screen.
Ease in & out (standard curve) — This curve causes objects to pick up speed first, and then slowly reduce it to zero. This type of movement is most often used in front-end animation. Whenever you doubt which type of motion to use in an animation, use a standard curve. Ease-in-out is used when objects move from one part of the screen to another. In this case, the animation avoids concentration and dramatic effect.
The same type of movement should be used when an element disappears from the screen, but the user can return it to its original place at any time.
Spring — this can be used when you want to make a bouncing effect.
A good example of spring properties is a ball that falls on the floor. Before the ball stops it will bounce a couple of times with less force.
But be careful not to overuse this effect, you don’t want a lot of bouncing and the user to get dizzy 🙂 So think about natural behavior first.
Linear — objects that are not affected by any physical force move linearly, in other words, at a constant speed, that’s why they look unnatural and artificial for the human eye.
You need to avoid using a linear property. Only in rare cases, you’ll need it (for example if you want to keep in it at the same speed always: rotation )
Remember — Animation subconsciously creates the personality of your application. Like structure, free space, typography, and colors.
Good animation helps give feedback and understanding of what is happening. Great animation causes a smile and a desire to try the action again. Micro interaction animation is one of the key points in UI UX design.
Also, a very important part of animation is Timing, Spacing, Storytelling. If you want to be good at animations these are also big parts you need to learn how to use.
Start experimenting and test your decisions on users. Good luck!
