Through the incorporation of motion, you can bring anything to life. From cinemagraphs to stop motion stories and animated logos, the addition of movement takes otherwise still images and gives them an exciting layer of action and storytelling. And, we see this happening all around us in obvious and subtle ways, even in the technology we interact with regularly. Just like motion graphics became a fundamental part of the design of movie title sequences in the 1950s, motion graphics have become a core feature of today’s digital user experiences.
What is UI animation, and why does it matter?
Animation in user interfaces (i.e. UI) incorporates motion into an interface to enhance the user experience of a digital product. It will also create an element of surprise and delight to the overall interaction.
Animation has become an essential part of effective user interfaces making them more interactive, fun and user-friendly.
Motion for Mobile by Tubik.
By adding animations to your digital experiences, you create a communication layer between your interface and your user. Like all good things in design and life, UI animations are best done intentionally and in moderation. When done right, UI animations can increase usability, provide feedback, and support the mood of your brand. If done poorly, however, they can become a source of distraction and decrease the functionality of your app.
The biggest advantage of this animated interaction is providing assurance for the users, making them aware and confident in the process of using the product.
UX Design: How to Use Animations in Mobile Apps by Tubik
Animating User Interfaces
Although animating interfaces may be a relatively young practice, the principles behind the animations are not. In a previous post, I introduced the 12 Principles of Animation, and they still matter here. By following these same principles like squash and stretch, easing, and staging with your visual elements, you can achieve a feeling or naturalness and style.
As described in an article published by Invision, “While motion designers know these principles well, looking at them through the lens of user interfaces allows us to add an aspect to the principles that weren’t there before: function. Using them as a guide, we can give feedback and provide clarity in order to more effectively communicate with our users.” If you want to learn more about how each animation principle can be applied to UI, I highly recommended reading the full article.
While motion designers know these principles well, looking at them through the lens of user interfaces allows us to add an aspect to the principles that weren’t there before: function. Using them as a guide, we can give feedback and provide clarity in order to more effectively communicate with our users.
Animation principles in UI by Invision
Common UI Animation Patterns
As mentioned earlier, animation in UI should be done intentionally and with moderation. The animations should support and strengthen the functionality of your product while simultaneously enhancing your brand ethos. Below are some common UI Animation patterns and supporting examples. Observe how they incorporate the principles of Animation into them, as well as enhance what would otherwise be a static moment for the user.
Provide Feedback
Feedback notifies the user of something, like whether a task was completed successfully or failed. Consider it the line of communication between the user and interface. It lets the user know that the interface is responding to the user’s actions. Using visual and animated cues helps the user understand that the interface acknowledges their actions.
Feedback Example 1:
Feedback through the use of shape, color, and motion is given to the user when they select an emoji, and a yellow circle appears around it. Feedback through color is also incorporated into the user’s selections by them turning purple. Although the additional facial reactions on the emojis aren’t absolutely necessary, they do provide additional personality and delight—making the experience positive and memorable for the users.
Feedback Example 2:
There are a few instances of feedback displayed in this example. From verbal and visual verifications of payment to the clock counting down your order being prepared and delivered. The user understands what is happening through every step of their order because the interface is keeping them informed. This example takes into consideration the overall theme of the site and finds unique and interesting ways to incorporate important messaging into it.
Communicate Progress
Progress animations help users know that the interface is still working, even if nothing is happening at that very moment. They inform the user that something is happening and give the user confidence.
Progress Example 1:
What I really like about the example below is how progress is clearly conveyed visually and conceptually. Instead of using a traditional spinning circle, the site ties the loading into the rest of the theme. This shows how animation can be used not only to communicate progress to the users but also to create a pleasant and unique experience.
Progress Example 2:
This animation is simple yet beautiful. It clearly conveys the progress of a download, for example, while keeping the user engaged at the same time.
Show Transition
Transitions guide a user from one element to another. Transitions can add style to the user experience, as well as help convey a certain feeling. Quick changes will feel energetic, while slower ones will feel light and soft.
Transition Example 1:
This example uses slow, uneven movements to mimic the organic feeling of waves. I think the color and animation do a beautiful job while still keeping the focus on the content.
Transition Example 2:
Although I am using this example for its transition features, you can see that it also includes a compelling loading screen and clear visual feedback on the hover of the links. The transition fits the style of the overall design and feels energetic and fun.
Creating UI Animations
After conducting the research above, I attempted to create my own animation for a previous interface I designed for a product called Money Kit. I imported my artwork from Adobe XD into After Effects in order to create the animation. Although XD has some animation capabilities, the power to customize them is incredibly limited–that’s where AE really shines. Within AE I was able to smooth out the timing of the elements and create a more fluid transition. I was also able to determine the timing of each object separately and create the ripple effect you see here. After learning more about animation and After Effects I now understand its power and potential for building unique animations for user interfaces.
Resources
May, J. (2010, October 4). The Art Of Film Title Design Throughout Cinema History. Smashing Magazine. https://www.smashingmagazine.com/2010/10/the-art-of-the-film-title-throughout-cinema-history/
Tubik. (n.d.). UX Design: How to Use Animations in Mobile Apps. https://blog.tubikstudio.com/ux-design-how-to-use-animations-in-mobile-apps/
Tubik. (n.d.). Motion for Mobile. 20 Creative Concepts of UI Animation. https://blog.tubikstudio.com/motion-for-mobile-creative-concepts-of-ui-animation/
Fry-Pierce, A., Layton, B. (2018, February 5). Animation principles in UI. Invision. https://www.invisionapp.com/inside-design/animation-principles-in-ui/
Writings by Michelle Ovalle 