Never Overlook Animation in UX
Most people think of animation as an aesthetic element, and not as a significant component that defines the user’s journey. Animation is usually the last thing that designers and developers will include in their app’s MVP; everyone agrees that it’s a nice-to-have element but still nobody prioritises animation over other tasks.
We should see animation as an integral part of product development that can help drive user engagement and satisfaction. Interface animation is about providing your users with the experience they expect.
The only way to have an engaged user is to provide a seamless experience, and animation can help you to accomplish that.
This post sets out to illustrate the importance of animation in UX Design and offers foundational knowledge to help build understanding.
Why is animation important anyway?
Humans tend to be visual creatures, with half of the human brain directly or indirectly devoted to processing visual information.
Since we’re attracted to visual stimulation, the impact of imagery increases with the addition of animation. Our brains and eyes are hardwired to pay attention to moving and colourful objects; they call for attention in order to effectively communicate user feedback, transport users between navigational contexts, explain changes in the arrangement of elements of an interface and reduce confusion.
Animation is no longer a luxury; it is one of the most important tools for successful digital product design.
Good Interface animations have a clear and logical purpose; they can communicate status, reduce cognitive load, guide the user’s attention, help the user see the results of their actions and sometimes when used well, even influence behaviour.
Most importantly, animations have to be both meaningful and functional.
Meaningful
Interface animations in design can only enhance the user experience, only if it’s incorporated at the right time and place. Thoughtfully put together, motion becomes a natural feel, augmented with artificial behaviour. The purpose of the animation is the most important thing to begin with. A meaningful animation can also delight a user; it can be used in ways beyond the standard scope of actions. It can encourage users to actually interact with the interface by creating empathy. Animation can also, communicate a company’s brand values and at the same time make user experience memorable and fun to use.
Functional
In user centred design, where the user is in the center of our attention, the user interface should feel intuitive and responsive. Functional animation helps the users to orient themselves within the interface, find their way around and establish visual relationships. Animation can help the eye see the introduction of a new object or where a hidden object goes and it helps users establish better recall in spatial relationships; but most importantly makes the user interface to feel more human.
Are all animations the same?
Animation can be used to tackle multiple user needs, because of its multifunctional nature. There are three categories that animation can fall under: Indicative, Navigational and Responsive.
Indicative
Indicative animation provides visibility of system status; a fundamental principle of interface design. Users should feel in control of the system that they are using, understand their current context at any given time, and especially when a system is busy doing work. There are a number of processes happening backstage in your app and while instant responses are what we are striving for, sometimes the system won’t be able to provide a response in the desired timeframe. In those cases, animation can be the medium to provide reassurance to the users that the app is working on their request and that progress is being made. Visual indication of progress gives users a sense of control over the system.
Navigational
Navigational animation is used to smoothly transport users between navigational contexts and explain changes in the arrangement of elements on an interface. It uses movements between states of an element in a screen; to give the user a sense of spatial orientation. Navigational animation guides users through moments of change; it clarifies changes on a screen by creating visual connections between transition states.
Responsive
Visual feedback is essential for any user interface. It provides to the user the control that they need while navigating through a digital experience; every user interface should quickly respond to user input precisely where the user triggers it and show the connection between the previous and the new state of the element that the user interacted with.
Conclusion
Animation can be used to enhance the user experience, engage users and give life to an element of an interface, that’s only possible when they are well thought and built with attention to detail, in order to do that you should include animation in the design process and make it a fundamental part of your product development.
However it’s very unlikely that a purely cosmetic animation will make a better product; if it doesn’t solve any problem it’s better not to be included at all, better leave only the essential elements without increasing user’s cognitive load.
John Anagnostou is a Senior Product Designer at Tigerspike.
Sources & Further Reading:
- Jedi Principles of UI Animation
By Kit Oliynyk - The Principles of UX Choreography
By Rebecca Ussai Henderson - The 12 Principles of UX in Motion
By Tony Jing - 3 Key Uses for Animation in Mobile UI Design
By Nick Babich - Interface Animation. The Force of Motion
By Tubik Studio
