UI animations have come a long way in the world of digital design.
In the beginning, it was all for fun – UI animations were used to make someone laugh, smile, or simply surprise someone.
For a few years, however, with the advent of more aggressive digital strategies and the decisive role that user experience design has taken on, UI animation has become a tool that improves functionality and an essential factor in the overall user experience.
To become a UX designer, it is also important to know this aspect of the visual design area well.
So let’s take a look at why animation matters so much and how you can use it to improve the user experience on your website.
Table of Contents
Why UI animations are important?
We may not be fully aware of it, as it is one of those things that we often perceive on a not fully conscious level.
This, however, makes the animation seem like a magic show.
When it comes to UX, to really delight us, UI animations have to perform a function.
For example, it can show us when a process is complete or it can let us know that we are doing something right.
And that’s what we call functional UI animation.
[If you want to learn how to create UI animations for your project, sign up for our visual design course, we have a chapter with exercises dedicated to this topic]
Functional UI animation
It is clear that animation comes in many forms and with many purposes. UI animations created for entertainment are one thing, but now we’re talking about an animation that has a particular purpose for UX.
We need a very specific function, so we’ll call it functional animation.
This type of animation is subtle and doesn’t take all of the focus on itself, and has a clear purpose. Or rather: different purposes, since animation is often multifunctional.
In web design and UX, functional animation helps the visitor understand the hidden rules of the page.
It promotes page navigation and helps users perform small and simple tasks such as moving from one location to another or completing a process, such as filling out a form.
UI animations are not essential for a website. Different, however, if we talk about app design, where space optimization could hide many components and UI animations could help us to propose them in a much more simplified and easy to understand version.
Imagine something “basic” like a preloader (the animated icon you see on the screen as a page loads). Most websites now have a preloader.
Now, imagine if they no longer use this animation.
Whenever a webpage takes longer than expected to load, you may think it has crashed or your connection has been lost.
The preloader is an immensely efficient way of saying that everything is fine, the content is loading, and will be delivered to you in seconds.
There are many types of animation that can be used to enhance user experience and make websites more dynamic and engaging.
Some types of UI animations are particularly common and popular, and you’ve probably seen them thousands of times before, but maybe you haven’t paid much attention until now.
Loading UI animations
Most of the time, when we load a page, there will be an animation of some kind, usually a lightly animated icon spinning or doing an equally simple and repetitive motion – like the preloader we mentioned in the previous chapter.
Progression UI animations
Similar to loading, UI animations that indicate the progress of action (which can also include loading) serve to inform the user how far they are from completion.
This is important as, without such information, the user might think that something is wrong with the website or that the upload has stopped.
Action completed
Pressing a button, opening or closing a menu, uploading a file, submitting a form … are all actions that require a quick visual hint that informs the user that the action has been completed successfully.
This is important because these interactions take place in a virtual, non-physical world, and we cannot rely on our senses to figure out if they have been successful or not.
Navigation
Navigation animations help users find their way around the website.
They tell us what’s clickable and what’s not, what scrolling requires, and so on.
For example, the hover animation provides a clue to what lies beneath and improves the user’s understanding of the interface hierarchy.
Transition UI animations
Transitions promote user engagement and make your UX of the website stand out for originality and creativity.
A common example of using animated transitions in web design would be a page or slide that turns like a page in a book.
Scrolling
In addition to clicking, scrolling is the most common user interaction performed on a website or app.
In most cases, an animated scroll is a better solution than a “simple” one, because it mimics our natural interactions with the world. It also creates an illusion of depth and more space than actually exists.
UI animation on Splash screens
A splash screen is a screen a user sees immediately after opening an app.
Usually, it contains the company or app logo.
Users expect apps to load instantly, but with complex mobile apps, that’s not always possible. Since the home screen has no functional elements, it only serves as a form of entertainment.
A UI animation on the splash screen can distract users and make the loading time appear shorter than it is.
Also, the splash screen is the first impression after a user downloads the app.
Image source: Behance
In this example, the animated UI element provides a seamless loading experience, making it seem like the splash screen doesn’t even exist. At the same time, it provides a smooth transition to the login page.
Feedback UI animations
A feedback animation tells users that they are on the right track and that an action was successful or failed.
It’s important to show the user that the app responds to their actions so they don’t ask themselves, “Did I hit the button correctly?”
Feedback UI animations make user travel comfortable and user experience positive.
You can get great UX with the help of animated pop-up notifications, buttons and checkmarks, color and size changes, field backlighting, etc.
A feedback animation is a must for eCommerce platforms.
For example, you can see changes to the size and color of an item, making the online shopping experience real.
Image source: Dribbble
In this concept, you can see how each interaction with the model and color is displayed on the shoe. It is much more pleasant to shop online with such a UX.
Onboarding UI animations
Upon download, users expect to see right away what instructions are on how to use the core features of your app.
You should use the onboarding phase to make a good impression that will convince users to keep using your app.
This stunning onboarding animation incorporates pure design with a complete walkthrough. The transition is natural and demonstrates how the app components interact.
Hidden elements
The minimalist trend has led to simple designs that hide so many elements, especially on mobile devices.
Many apps have a complex hierarchy that users don’t see. Thanks to animations, you can present hidden elements to users.
An app can hide its extensive functionality behind a user’s gestures. Pinterest, for example, doesn’t reveal options until you tap and hold a post in the feed.
Below, you can see a Pinterest-like hidden menu. In this mobile app animation, the designer used a circular menu to hide three main options for interacting with the screen.
Image source: Dribbble
Suggestions with UI animations
In recent years, we have seen an increase in very simple UI interfaces, with few elements and without text, especially on mobile devices, in order to appear fluid and natural, without disturbing the perception of the user.
Sometimes though, icons without captions confuse users, which is why it makes sense to add pop-up captions with the help of animations.
The tips are especially important if the app is used through gestures (or gestures) and users may be confused by the interface without buttons or interactive elements.
Marketing Animations
Another way to increase your brand awareness and grab users’ attention is to apply animations to your brand.
For example, you can bring your mascot to life and place it on your home screen, animate your logo and use it in a progress bar, or embed your motto in an image. Marketing animations serve two purposes: to attract attention and to entertain.
[If you want to learn how to create UI animations for your project, sign up for our visual design course, we have a chapter with exercises dedicated to this topic]
Extra Resources
- Join our FB Exclusive Group to get access to extra resources, it’s FREE.
