While the launch of the iPhone just over a decade ago is rightly hailed as a revolution in mobile technology, it also heralds the beginning of a much quieter — yet comparably significant — transformation. Thanks to touchscreen technology, operating our applications has evolved from merely clicking up and down static lists to pinching, tapping, dragging and swiping our way through our programs.
Paired with modern animation tools, these powerful new ways to interact with our systems pose exciting — and often unexplored — opportunities for any business hoping to better engage with their customers.
Strategic animation ≠ eye candy
Of course, the keyword here is opportunities, as these are often missed by sleepwalking UI and UX designers. But while there may have been a time when it was perfectly acceptable to use animation as frivolous eye candy, today, this practice is largely frowned upon, as more and more, users expect to be receiving entirely purposeful applications.
And really, it’s a wonder that more companies aren’t getting onboard. After all, animation has the power to bring design elements to life! Just consider how a dull and dead call to action may be entirely transformed by simply being given the animation treatment. This is due to the fact that animated text and graphics are inherently more capable of attracting one’s attention — they are both conspicuous and pleasing to the eye.
Nonetheless, a measure of confusion still exists as to how to best utilise animation to one’s strategic advantage. So to help you unleash your team’s creativity, we have gathered below a few ideas on putting purposeful animation to good use in order to create a truly show-stopping user experience.
1. Guided tutorials
Oftentimes, even though developers think users will have it down simply by looking at an interface, this is far from the case.
For example, when Google Chrome’s standard wrench icon was first ousted by the three-dotted button, many people were left confused. Since then, however, most major changes that are made to any Google product will come with an animated introductory tutorial that allows their users to quickly grasp the basics.
This approach is merely logical. If users do not know how to actually use your application, then all the functionality in the world will be rendered useless.
2. Microinteractions
Reputable applications are also extremely responsive, and focusing on microinteractions is a fantastic way to deliver that experience.
According to Author and Designer Daniel Saffer, microinteractions are “contained product moments that revolve around a single use case — they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or ‘like’ something, you are engaging with a microinteraction.”
Essentially, by including animation in these tiny interactive moments, you create the illusion of direct control over physical objects. This is very much akin to the difference between reading a recipe and actually making a cake — there is simply no comparison! When visual cues are given as a response to a tap or any other miniscule action, users are effectively immersed into your application.
Just think of the satisfaction that takes place when you swipe down on an app and the entire interface follows your finger before the Refresh wheel quickly spins and presto, your feed is updated. You feel as though you actually did that!
That magical feeling is the direct result of a thoughtful microinteraction and is exactly what your designers should be striving to achieve.
3. Enhanced Navigation
In the past, it was easy to get lost in all the options of a feature-packed computer program, but thanks to UI animation, this is no longer an excuse for developing bewildering applications.
Most of a website’s buttons, for example, may be entirely hidden from view by thoughtfully binding them to a mouseover action. In this way, moving one’s cursor over a “Tools” button, for example, would quickly distinguish this active element from others, while revealing new options such as “Clone” and “Paintbrush”.
Likewise, playing with shimmering colours and shifting opacity levels enables you to direct a user’s attention to a page’s most important features, further eliminating this unnecessary sense of information overload.
User navigation is further improved upon by aptly making use of animated transitions such as zooms and moving screens, as this will allow developers to help users understand exactly where they are at all times.
4. Streamlined communication
One of the most important aspects of any well-rounded application is the ability to convey a message without any fuss or frills, and perhaps the most ubiquitous example of animation employed in this manner is seen in progress bars.
Although showing a percentage of an ongoing task will indeed serve to get the job done, displaying a growing progress bar has readily been embraced by most software developers as the perfect way to offer a quick and accurate understanding of the state of a task.
But this concept can still be taken much further, and a great way to start is by taking a cue from other silent means of communication. For instance, because the shaking of one’s head means “no” in nearly every culture, shaking entered characters is an interesting approach to relaying the message that a password is incorrect.
Instead of taking users to a separate page or making them read additional text, the simple shaking animation will easily get the point across.
Conclusion: Animate with purpose
Adequately engaging with your customers should never be taken lightly, yet unfortunately, far too many companies today seem to either go overboard with or completely leave out animation. In reality, however, a delicate balance is called for.
The best way to achieve this, as the makers of the iPhone knew well, is to always animate with purpose. When an animation, however beautiful it may seem, appears to have no reason to back up its existence, it will stick out to end users like a sore thumb. Yet the opposite is true when every aspect of a software solution is created with careful thought and consideration.
So take the time to step back, deliberate and craft the best possible animations. As we have found at SPG, your customers will undoubtedly thank you for it in the end!
