credits R A D I O

UI animation in Website/App

Animation for the sake of “cool” can often hurt conversions since it’s distracting, but not always.Using animation on sites can add a lot of value to a website when it comes to user experience. Unfortunately a lot of websites over use it by animating every element; by slowing down the browser so much that they don’t want to continue using the site. Or even by just not testing very well and breaking the entire site.

Here are some rules to follow when implementing animation into your digital designs:

1. Use loading sequences that keep your user engaged.

Animations can keep the user engaged even before the website fully loads. This keeps users from leaving too soon. Even a 1 second increase in load time can equal a 7% loss in conversions. Animation can hide this load time by visually occupying the user.

2. Animate based on where the user should focus

Complete the UI incrementally before the content is fully loaded. This keeps users interested during slower load times. Animation is achieved by the content cascading onto the page skeleton.

3. Keep Users from getting lost

Users risk of losing the context of what they are seeing if suddenly the web page changes. Animation can be used to make transitions more obvious, so it’s clear what happened between where the user started and ended up

The point of an animation is to help the user understand where they’re coming from and where they’re going to. Animations can create layers in an interface, when you slide from one element to another, the user remembers where the interface slid from, and if you take advantage of that memory correctly, you can make the interface slide back just as they would expect. Although it’s a simple, almost thoughtless transition, it can relieve frustration and build trust with the user.

Dribbble.com — Zee Young

Do’s and don’ts

Here are some do’s and don’ts when it comes to using animations on a website:

• DO: Provide a similar experience regardless of the device.
• DON’T: Confuse the user by not allowing them to go back from where they came from.
• DO: Provide instantly recognizable and easy-to-use navigation.
• DO: Let the user control their browsing experience.
• DON’T: Hindering a visitor’s ability to scan the screen.
• DO: Make the most important thing on the screen the focal point.
• DON’T: Make things bounce, just… never.

Hierarchy

Elements on the screen are arranged in layers, one sitting on top of the other. Regardless of the content type — background images, shapes, patterns, labels, paragraphs, buttons or icons, cards or any other UI element, by animating the order of their appearance, we are able to emphasize the importance of a specific element and direction the user’s focus.

For example, layout elements appear on screen with subtle movement or animating the opacity value, but the last element to appear is an icon. This suggests it is also the most important action on that specific screen (e.g. the “add” button on a favorites list, share action on profiles etc.).

Dribbble.com — kiran shivlingkar

Sometimes we want to bring login or onboarding screens to life just by adding simple animations to it. This way we make the user have a better impression of the brand and make the whole experience more fun and interesting.

Some examples would include parallax effect (image and text area while scrolling, gallery items, cards etc.), animating background patterns, transforming icons, making brand elements appear throughout the app or even animating a mascot, if there is one..

Dribbble.com — Alexandre Naud

User navigation and control

Sometimes all we need is to reveal a hidden “search” feature by slightly dropping it down and pulling it back under the header bar, in which case the user is aware of search appearing on “swipe down” gesture. The other option is to place hints inside the app which appear only the first time user comes across that specific element, such as onboarding tutorials or slightly animated arrow with short description pointing at the element it describes.

Conclusion

Animation is a very powerful ally to our digital design efforts. It used to be just a fancy addition to websites, and later apps.

We can do more than what we’ve ever been able to do before. There’s a lot of power at our fingertips, and we can make it really easy and fun for users to use our websites and applications.

But please, just keep it to a minimum, keep it running at 60 frames per second (butter smooth) and put it in the hands of your actual users on real world devices before assuming anything.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!