February 1st, 2017
Humans are visually driven creatures, our eyes are naturally attracted to moving objects which is why animation is like eye candy to us. Recently, more and more designers have been incorporating animation as a functional element to enhance the user experience rather than just for pure aesthetics and delight; and since then, it has proven to be one of the most important tools for successful interaction.
Unlike animations by Disney Studios or for computer games, functional animations have a clear and logical purpose. They are usually subtle and normally go unnoticed by someone who is passively browsing, but subconsciously, have a huge impact on the usability and ultimately… conversions!
So, what’s the secret to great animations?
The magic to the recipe is to subtly incorporate it into your content, in the right place and at the right time – so that it complements and reinforces the messaging and design rather than distract from it. The animation will bring the user interface to life, so it needs to be intuitive and responsive. But remember… it must be functional first!
The top functional animations
Visual feedback on actions
When users are interacting on your site, feedback is essential to aiding the user experience and the user journey. Any feedback such as visual or motion cues will act as a prompt or acknowledgement of an interaction – whether it was successful or not. Avoiding hassle or frustration.
Visibility of system status
Visibility of system status remains among one of the most important principles of user-interface design. Allowing users to know their current progress in a system at any given time and also sets expectations for how fast the action will be processed, helping make them wait longer. You never want to keep a user guessing, they’ll be more likely to leave.
This type of functional animation can also be used to attract a user’s attention to important status changes – such as an incoming call:
Visual cues and hints
This can be great for first time users to quickly help them understand how to use an interface – it will come in particularly handy if you have an unfamiliar or unique interface with uncommon interactions. A simple, functional animation like the one shown below can teach users how to use your UI.
Additionally, you can also use it to help users understand something immediately, with a simple visual such as the one shown below:
Things to keep in mind
Whether you use one or all three types of functional animations listed above, the key is to find the right balance between usefulness and needless animation.
As mentioned earlier, it’s important to animate for a logical purpose rather than just for the sake of animating. When an animation isn’t fit for purpose, it can feel awkward or become annoying, especially if it’s slowing the user down! With that in mind, remember that it’s important to take the time to consider an animations functionality and conduct extensive testing to determine its usefulness and longevity.
Example: Take this Paypal receipt concept, the animation looks great but it’s too excessive for its purpose. It takes almost 4 seconds to see the transaction details which disrupts the user flow. A simple fade-in animation would be more suitable simply for the fact that it takes less time.
And now you’re ready…
With this knowledge to hand, you are now armed and ready to create fantastic and purposeful animations, implement them into your user interface and boost the user experience for your visitors.
As long as you remember to make it functional first, simple second and beautiful last, take the time to see it from a users point of view and test, test, test! There will be little to no room for things to go wrong.