1. Good UI Animation is Natural
State changes in UI often involve hard cuts by default, which can make them difficult to follow. In the real world, most things don't just appear or disappear immediately. When something has two or more states, then changes between states will be much easier for users to understand if the transitions are animated instead of being instantaneous. Let’s look at an example below where the user selects an item in a list to zoom into its detailed view. During expansion, the small card moves in an arc towards its destination as it expands into a larger card. This movement is inspired by the real world forces.
2. Effective UI Animation is Staged
A well-staged animated transition guides your user’s attention and clarifies the change of states. This characteristic is directly related to the user focus and continuity. A good transition helps direct user’s focus to the right spot at the right time, it puts emphasis on the right elements depending on what the objective is. In the example below, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. The first-time user cannot really predict an interaction that is about to happen, but a properly animated transition helps the user stay oriented and not feel that content has suddenly changed. This transition helps guide the user to the next step of an interaction.
3. The Best UI Animations Are Associative
Transitions should illustrate how elements are connected. Good transitions associate newly created surfaces to the element or action that creates them. The logic behind associative connection is to help the user comprehend the change that has just happened in the view’s layout and what has triggered the change. Below you can see two examples of a layer transition. In the first example, the new layer appears far away from the touch point that triggered it, which breaks its relationship with the input method.


4. Popular UI Animation is Quick
If there’s only one principle of animation you care about it should definitely be timing. Timing is arguably one of the most important considerations when designing transitions. The animation should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. Also, a user doesn’t have to wait for the animation to finish. In example below, slow animation creates unnecessary lag and lengthens the duration.

5. The Best UI Animation is Clear
It’s a common mistake to overload UIs with animations or to create too complex interactions. Too much change in a user interface can leave a user disoriented and it takes time to recover from. Remember that every motion on the screen attracts attention, so too much animation at the same time creates chaos. Transitions should avoid doing too much at once because they can get confusing when multiple items need to move in different directions. Remember, less is more with regard to animation and transitions in particular. Anything that if removed would make a cleaner UI is almost certainly a good idea. When a surface changes shape and size, you have to maintain a clear path to the next view. Complex transitions should keep a single element visible. This helps keep the user oriented.Transitions and Accessibility
Since transitions are about visual communication, they by default are not accessible by users with visual impairments. You should provide alternate content for this group of users. webacessibility.com’s best practices for animation offers suggestions on when to provide alternate content for assistive technology.Conclusion
When designing transitions, focus only on the practical things they do for the user. Whether your app or site is fun and playful or serious and straightforward, using meaningful transitions can help you provide a clear and quick cohesive experience.Nick Babich
Fireart Studio is a design studio passionate about creating beautiful design for startups & leading brands. We pay special attention to nuances all the time to create professional while cool products that will not only meet all expectations, but exceed them.
Read Next
3 Essential Design Trends, December 2023
While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…
10 Easy Ways to Make Money as a Web Designer
When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…
By Louise North
The 10 Most Hated Fonts of All Time
Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…
15 Best New Fonts, November 2023
2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…
By Ben Moss
Old School Web Techniques Best Forgotten
When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…
By Simon Sterne
20 Best New Websites, November 2023
As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…
30 Amazing Chrome Extensions for Designers and Developers
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
Exciting New Tools for Designers, November 2023
We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…
The Dangers of Doomscrolling for Designers and How to Break Free
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
By Louise North
From Image Adjustments to AI: Photoshop Through the Years
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
3 Essential Design Trends, November 2023
In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…
30 Obsolete Technologies that will Perplex Post-2000s Kids
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…