While most people think of UI animation as something you see in cartoons or video games, animation is actually all around us — especially in the apps and websites that we use. Animation is useful for many different purposes like scrolling down a screen, receiving notifications and also guiding users as they navigate through a website. Animation in UX also serves a very important function of storytelling and creating a brand narrative. In other words animation brings a website to life. 

What is UI Animation?

The process of adding motion to UI elements so that a website, app or any kind of product becomes more interactive is known as UI animation. UI/UX designers use animation to bring life to their design, guide their users around the interface for better user experience and also guide users towards the decision they want their users to take such as buying something or signing up. UI animation makes a website or app feel less static and mechanic and creates a much more intuitive and user friendly experience.

Animation has evolved a lot since its early days when it was more decorative to something that can be more functional. Designers soon learnt that loading their interfaces with multiple animations actually detracted from the quality of the site and even resulted in a loss of users. They then transitioned from using animation as a decorative add-on to something that could actually enhance the user experience. The turning point in the evolution of UI was the switch from linear movement to interactions that are similar to how we interact with objects in the real world like speed, gravity and weight. This was what resulted in the realistic UI animations that we see today.

Thus we can conclude that there are two types of animations in UI design, functional and decorative. Functional animation guides and informs the user in real time, whereas decorative animation is an essential tool in the arsenal of designers for storytelling and branding.

Why is UI Animation important?

Users have become accustomed to simple, easy to navigate, powerful, functional and unique interfaces. Products need to be designed from a human perspective, intuitive and responsive to users. Designers can achieve all of this and more with animation. Animation can add a much needed human touch to digital interfaces by simulation the experience of interacting with a physical object in real life. This creates a much more naturalised product for the user and also reduces the cognitive load. Animation shows the relationship between different elements in lots of small subtle ways. It also reduces stress by providing real time updates and feedback, keeping the user informed at all times.

Finally, animation makes the interface of a product a lot more fun and engaging. It can make it a lot more visually interactive. Designers just need to be careful about not overloading their products with too many elements but rather only adding the right amount of elements to strike the perfect balance.

Do’s and Don’ts of UI Animation

These golden rules and do’s and don’t will help you master animation in your UI designs and know what animation mistakes not to make.

Do keep things consistent with design systems

Use design systems to help control the use of user experience animation across a project. Design systems outline and define the kinds of animation that appear in different pages across a site. This helps in maintaining the consistency of animations across your site. Consistency is becoming more important and having an overall view of all of your animations is important.

Don’t include animations for the sake of it

Designers need to be careful that they not include animations that have no usability or advantages for the users. It is important to figure out whether an animation is actually useful and has some sort of goal. Don’t build animations just to have animations. Design systems can be useful here too. When you decide the different types of motion, they are linked to different purposes within the interface. 

Do consider different devices

Depending on the role that animation is going to play in your product, you can use introduce different approaches based on the device used. For example for desktop experiences you can add effects that are reactive with mouse clicks or hovers while mobile animations can have effects triggered by the movement of the device itself.

Another alternative is to keep things minimal and have global animations that work equally well on both mobile and desktop. These animations are responsive and appropriate regardless of the device being used. 

Don’t force users to view your site with animations

Some users may have accessibility issues that cause them trouble with motion. For example parallax scrolling can cause motion sickness. Give users the option to turn off UI animations or opt for reduced motion experience on their browser. This is easy enough to do with the Web Animations API, which can help you easily provide an alternate experience using JavaScript; you can stop animations within your design, or skip them all animations to their ending state.

Do pay attention to existing mental models

Learn more about the 12 principles of animation and learn how when animation can be used to combination with real-world physics to make animation look better or to explain something. There are certain mental models, based on real-world physics, that dictate how we expect objects to behave and how we react to certain movements. For example, a wiggly motion will trigger a user’s attention, while a slow fade will often go unnoticed.

Don’t forget your audience

Ensure that you choose the number of interface animation you include, based on the audience you’re aiming for. While lots of bouncy motion might help keep a young audience engaged and excited by your product, an older audience might find it distracting and off-putting as they try to absorb the content at their own pace. 

While it’s easy to get carried away by UI animation’s enticing creative possibilities, keep in mind that successfully incorporating animation and animation rules into a user interface ultimately hinges on usability.