Animation is not just for entertainment.
In the world of UX design, animation can play a pivotal role in helping users understand the purpose of website elements, interface components, and navigational tools. These types of design elements are called functional animation.
Functional animation enables UX designers to explain complex things in a simple yet visually compelling way. There is nearly limitless potential for animation to fulfill the need for tutorial-type interactions with users.
How to Use Functional Animation – And How Not To
Animation of any kind is easy to overdo. If everything on the page is moving, your users will probably feel lost and confused.
The key to successfully deploying functional animation is identifying where it is most useful. This is not as hard to do as it may seem at first. There are a few key rules surrounding animation that remain true in almost every UX context:
1. Use Animation to Manage UX Friction
Is there a big wall of text that users need to read in order to pass on to the next stage of your sales funnel? What about a cancellation button that needs friction?
In either case, functional animation can help manage UX friction by addressing the usually abrupt nature of friction-causing elements. It helps reduce friction when needed and helps create it when necessary.
For example, if you need users to fill out a large number of data fields, you could use functional animation to make each field slide into view, one-by-one. This breaks down a big, time-consuming task into small, easily manageable chunks that the user is less likely to resist.
2. Deploy Animation to Support Interaction Design
Good animation is a complementary part of interaction design. It helps users achieve whatever tasks they need to complete at that particular point.
The way functional animation does this is by making user interaction smoother and more intuitive. This can be as simple as animating a menu to appear where a link to a new page would normally go, or having users’ contacts auto-populate when they click on a messaging icon.
In both of these cases there is an underlying functionality that animation brings to the surface. This helps users interact with technology and makes it a less static, page-by-page kind of interaction.
3. Never Slow Down the User Experience
Animation is resource-intensive. If you focus too much on creating highly detailed animations or use too many animations on a single page, unacceptable load times will result.
Good design teams can mitigate this risk by using updated animation libraries and keeping animation code separate from user event code. The idea is to allow users to interact with website elements before the animations begin and seamlessly start the animations once they finish loading.
This is also a good reason for designers to avoid simultaneous animations. One good animation is far better than several mediocre ones. Ultimately, you have to be judicious when considering what to animate – choose only things that offer concrete value to the UX.
4. Keep Animations Relevant
Animations have an undeniable “wow” factor. There’s an intrinsic entertainment value in having website elements move around of their own accord, showing new information or offering different paths for the user to take.
But functional animation has to stay well-grounded in the function of the website itself. There can still be a “wow” factor, but it must serve the interests of the UX as a whole.
This requires taking users’ emotions, preferences, and cultural expectations into account. An e-commerce website will have different starting points for functional animation than a social media platform.
5. Design Animations with the Right Speed
Not all functional animations are equal. Certain effects, like fading, hovering, and scaling, need to occur very quickly to avoid breaking the user’s engagement. Complex easing and other large moves need to happen more slowly, or you risk boring users by forcing them to wait.
There is a significant amount of research on what speed is ideal when it comes to the most popular forms of functional animation. Fading and scaling effects should take no more than 200 milliseconds to complete. Larger animations should move slower, at a duration of up to 400 milliseconds long. Anything less than 100 milliseconds appears to the user as “instant”.
Animation Works Because of Human Nature
The human mind subconsciously directs the eye to pay attention to moving objects. Animation capitalizes on the fact that we pay attention to moving things in order to call attention to the elements that are most important on a webpage. This makes animation an important tool for the UX designer who wants to point users towards specific interactions.
