The soul of the UI
So, it’s late and you’re not sure whether or not you’ve missed the last train, but luckily you have an app with all the information you need. What’s this? A loading screen followed by an overlong animation. Why is the logo spinning around like that? Ah, finally, the menu. Now to find the timetable…ah it’s gone. Missed by a minute.
This is just one example of where animation in a GUI (Graphical User Interface) can actually damage user experience, rather than making it better. Good animation never gets in the way, and the time is truly noticed is when it goes for style over function.
So what makes good animation and how can we get them right?
The state of UI animation
To get a better idea of how animation is supposed to work, let’s use a metaphor to help us visualise it. Let’s take the human body and compare it to a GUI. The spine is the information architecture, supporting everything else. The skin and the muscles are visual design as they are on the surface and animation the soul that brings it all to life.
If information architecture is the skeleton…
…and visual design is the flesh & muscles…
…animation is the soul that brings all to life
Nowadays, User Interfaces have a lot more power behind them, which means we can produce higher quality motion behaviours. Sudden snap transitions are a thing of the past and are now replaced with much more fluid and sophisticated visuals.
Despite this, UI animation is still in it’s infancy and is influenced by character animation (as inspired by Disney’s 12 rules), sharing attributes with opening movie titles, physics and kinetics among others. While many interfaces have successfully applied these character principles, others have neglected the concept in a belief that animation is simply a ‘nice to have’, rather than an essential. Unfortunately for their users, they couldn’t be more wrong.
Animations with purpose
Animation principles aren’t just there to spice things up — they help identify a brand and fortify a connection between them and their audiences, as well as serving practical functions. Google was one of the first to include animation principles to their style guide (Google Material Design), recognising the potential it had to communicate more than just their name.
A signature motion behaviour is the animation that characterises the brand in the digital realm. In other words it’s the particular way in which an element moves that makes you distinguish it from other brands.
Google’s signature motion behaviour is visual continuity; a transition between screens where the element you tap scales up & morphs into a screen. That animation helps users form spacial awareness to better understand the relationship and transition between what’s on screen.
Personality and Functionality
Just like our life as a human being is, roughly speaking, a mix of action and emotion that hopefully has a meaning; animation has two broad aspects: personality and the functional side.
Going back to the body analogy, let’s look at what you could call ‘ the soul’ — that intangible thing that conveys deeper being and emotion. It makes up the mannerisms, facial expressions and reactions which people recognise us for. How we walk, how we talk and what makes us… us.
However, mannerisms, facial expressions and reactions are not just expressions of personality; they communicate our emotional states to those around us. Knowing how someone is feeling gives us a much better idea of how to react and communicate to them.
Questions for quality animations
So when I’m creating motion behaviours I ask myself these simple questions to understand both the personality and functional sides of the animations:
- If a brand was a character, how does it present to the audience? Is it serious, whimsical, funny, relaxed?
How does the brand make people feel when they are waiting for it to start up, or when it is retrieving requested information?
- How does animation help people see the state changes in the screen?
- Does animation help people understand how the GUI works?
- Does animation help people orientate through the interface?
- Where can use animation to simplify steps or better explain stories?
The Challenges
One of the most common misconceptions some designers have is that animations are for decoration. As a result, the animations they create are intended to “wow users” instead of helping them make sense and are unnecessary or even damaging to the overall user experience. That is what we refer as “Over-animation”.
“Over-animation” affects a brand’s tone of voice as it may not resemble the personality of the brand. If for any reason, designers don’t understand or ignore the brand tone of voice when creating motion behaviours, it will result in a disjointed message between the brand promise and what the users experience.
Giving up on attention to detail when creating motion behaviours can also negatively affect the UI. It is necessary to take into account how users would interact with the screen and the context of the transitions. It will save future headaches to the team if the animations are created thoroughly.
Animation is all around us
UI animation is constantly evolving alongside stronger harder and software. New tools and techniques are always around the corner and promise even more amazing user experiences.
For instance, new mediums like VR and AR are using UI animation to enhance storytelling in very interesting ways. Films are integrating UI interfaces in their shots, and science-fiction films in particular are hiring UI-UX designers to create futuristic interfaces in motion. How cool was Tony Stark’s Jarvis computer in Iron Man? Also, think about emojis. Static smiley faces are now animated on chat clients such as skype and really bring life to conversations.
Animation is more than just a vehicle for data — it’s what the soul that makes interactions more human, more expressive and more engaging. The next time you use something digital, take a moment to notice the feel of it and what kind of little touches there are. Those have been put there by someone, deliberately and hopefully, delicately. If you didn’t notice them at first, then their job is done.
