From the early days of the internet, animations were used notoriously in the form of flashing pop-up dialogs and wacky GIFs. They might not have been pretty, but they definitely captured viewer's attention. As design styles have evolved over time, so have animations.
Different techniques have been adopted to animate a user interface (UI) as an engaging way to add delight to a website or application. Think of a loading spinner or a button being pressed. These simple interactions can be animated in so many different ways to elevate a user experience.
In this article, you'll learn about a few different types of UI animations, how they differ from motion graphics, some principles of animation to follow, as well as some tools to get you started creating your own UI animations.
Understanding UI animations
UI animations are used to enhance communication and engagement between the user and the interface of a website or application. Also known as micro-interactions, they're used to provide feedback to the user when interacting with UI elements, such as loading pages, navigation menus, or icons. There are a few different types of UI animations that you've probably encountered before.
Loading state
One example of a UI animation is a loading state. When a process or task is loading, users don't like to be left on a screen without knowing the status of the load. UI animations have long been used to animate loading bars and spinners to create the illusion of progress. This makes waiting a bit easier for the user as the animation helps communicate the remaining time they can expect to wait or that the task is currently in progress and hasn't stalled out.
This download animation from the early days of the internet shows a piece of paper being transferred from the globe on the left to the folder on the right to indicate that a file was being saved. The progress bar beneath it would continue to fill up as the task progressed, letting the user know the estimated time left:
Navigation
Animations are also used when interacting with navigation UI elements, such as menus, tabs, or cards. The movement of a page or element can help users orient themselves within the website or application, and understand where the previous page or section is located in relation to where they currently are.
In this example from Material Design, the border around the tabs moves from one to the next when selected. The information in the panel below moves in and out from left to right to help the user understand which direction they are navigating and where to find the previous content. Without this UI animation, it wouldn't be as obvious to the user how they're moving within the app, and the user experience would also be less engaging:
Icons
A simple, but important UI element is the icon. These visual elements are used to help users recognize and remember the purpose of different interactive elements. They can be used in any UI element that has a label, such as a button, tab, or form field, and sometimes, for universal icons, they are used without a label.
While static icons can add visual interest to an interface, animating them can bring that to the next level. Animating icons not only creates a more engaging user experience, but they can also help communicate differences in states to the user, such as success and error, lock and unlock, or active and disabled. An animated UI element can also capture the user's focus and attention toward it at the right time.
In this example from Material Design, each icon seamlessly transitions from active to disabled state, forming a connection between the two when selecting it:
Icons can also be animated simply to add delight to an interface or help explain a process to the user. In this example from the UberEats app, each icon is animated to help communicate the type of compliment that the user can send to their courier. Not only are the animations engaging to look at, but they also help the user understand the context behind them:
Difference between UI animations and motion graphics
Animations and motion graphics are often referred to synonymously, as they both apply movement to visuals, but there are some key differences between the two. While animation is a broad term that refers to creating moving images, motion graphics are often used for marketing, whereas UI animations specifically are animated UI elements within a website or application to enhance user experiences.
Motion graphics apply movement to graphic design and are typically found in branding and advertisements, such as logos, or promotional videos. An example of motion graphics in branding is Airbnb's video unveiling their "Bélo" logo. Motion is used to animate the graphic logo and text, creating a memorable brand experience for the audience. It's also used to animate the logo into different graphics to help explain the meaning behind it, which further strengthens its brand:
Another example of motion graphics can be found in product videos. These are often created when a company reveals its new product and wants to explain the high-level features to its users. The video applies motion to graphics such as illustrations, text, numbers, or design mockups, to help tell the story.
Motion graphics can also be applied to 2D or 3D characters as a way to animate a mascot. Tableau uses motion graphics with its logo and Einstein mascot during a video introduction. This creates a fun way of incorporating their brand character with its logo:
Basics of UI animation
Designers should follow the laws of physics, such as gravity, friction, and inertia, when animating UI elements. To make animations or transitions feel natural and intuitive to the user, they should behave the way users would expect them to behave based on physical laws. To achieve realistic effects, there are a few techniques you can apply to your UI animation.
Ease in and out
The first technique is easing, but to understand how to apply easing to an animation, we must first talk about keyframes. If you've ever created a flipbook animation, each illustration on a page represents a keyframe in the animation. As you flip the pages of the book, your eyes view each keyframe in a fraction of a second, giving the illusion of an animation:
UI animations work the same way in that they have keyframes and a duration of time. If the animation were to progress through each keyframe at the same pace, it would have a linear easing function.
By changing the speed at which the animation moves through keyframes, you can create an easing effect. An animation with a slow start uses an ease-in function, meaning that the animation moves slowly through the keyframes during the beginning then speeds up. An ease-out function would have the speed slow down toward the end of the keyframes:
Fade in and out
Another technique to make your UI animations look less jarring and more pleasant is fading. A fade in or fade out effect can make your transitions feel seamless. Instead of a modal that suddenly appears on top of the content that you're viewing, having it fade in can help the user transition their eyes from the background to the modal in the foreground:
Squash and stretch
This technique adds realism to an animation, giving an object weight and flexibility when it encounters an opposing force. A classic example of squash and stretch is a ball that is dropped on the ground. Notice that the ball does not change volume when squashed or stretched. It simply becomes longer or wider to give it an elastic feeling:
In UI, squash and stretch can be used for buttons, toggles, or other elements that you might want to bring the user's attention toward using animation. It can also be used to add a fun element to your interface when the user clicks on the button or switches a toggle. Be careful not to squish or stretch your element too much, as it can turn an elegant microinteraction into an unexpected behavior that doesn't fit in with your product's experience:
There are countless tools out there to get started creating UI animations of your own, but some have steeper learning curves than others. Picking the right tool depends on the features you're looking for and how much control you'd like over creating the perfect animations. Let's look at three animation tools that you should check out.
Figma
For most product designers who already use Figma to create designs, its built-in prototyping features can add animations to your interactions. You can set interaction details like the trigger, such as on click, while hovering, or even after a delay. In terms of the transition types, Figma has options such as dissolve, move in and out, push, slide in and out, or its smart animate transition.
Within each of these transitions, you can set the type of animation you'd like whether it's linear, ease in and out, or bouncy. Figma will apply the animation to your transition using the start and end frame as keyframes. You can even define the speed of your animation:
Flinto
While Figma has some great prototyping transitions and effects, its features are somewhat minimal. It may be sufficient for users who don't require fancy transitions, but if you are looking to add some more flair to your prototypes, try out Flinto. The tool's transition and behavior designer allow you to design animated transitions and micro-interactions without needing to code.
Whether you want to add a spring to a transition or toggle different states of an element in slow motion, Flinto has got you covered. For an easy transition from designing to prototyping, you can import your designs from Figma or Sketch directly into Flinto:
Principle
This tool is more advanced than the previous two, as it provides greater control over the properties of your UI animations. Designers have access to many interactions, such as scrolling and swiping, as well as transitions like easing or spring. However, you can also build custom animations as Principle allows you to define your own easing curves.
This comes in handy if you can't seem to find the right animation style with other tools' built-in features:
It also uses a timeline to show you an overview of all the animations within your app or website. You can use it to stack animation layers and adjust their order and duration in relation to others. And just like Flinto, you can import your designs from Figma or Sketch into Principle to create advanced animations that can't be done in other tools:
Conclusion
Humans are animated, not robotic creatures. The world that we live in isn't static — it's moving all around us. Thus, our digital products shouldn't be static either. How you design your UI determines if your users will be engaged or form an emotional connection with your website or app.
A great way to add delight to your product's user experience is to animate your UI. Not only do they contribute to fun experiences, UI animations can also help communicate progress when pages are loading, orient themselves through navigation, and understand the connection between different states of an element.
Some of the basic UI animation techniques include easing, fading, squashing and stretching. These types of effects can add some extra flair to your product, although a balanced approach is necessary to not overdo it. Having too much animation can make the experience worse than having none. Nevertheless, with tools like Principle, Flinto, and Figma, there are plenty of resources out there to bring your UI animations to the next level.
Comments
Post a Comment