Jun 14
THIS is why Animation is Important in UI →
Check the video at around the 10:58 mark. Brain researcher Pawan Sinha discovered that motion is the crucial secret to how our brains interpret what we see. This, more than anything else I’ve seen or heard, explains in concrete terms why animation is a key tool in great UI.
Like anything else, overuse of animation can destroy the user experience. But, applied judiciously in the right places for the right reasons, it can make a big difference to the user’s intuition about what the software is doing, and how to control it.
To take a simple example, many iPhone apps include full-screen panels that slide up from the bottom of the screen. These are typically used when the developer/designer needs a large area to display the UI, but they want to reassure the user that this is temporary content, and when they tap “Done”, the panel will slide back down from whence it came, revealing everything just as the user left it.
As far as UI animation goes, nothing could be simpler. It’s just a basic slide movement in one direction, with no scaling, and the previous content is not animated at all, it just gets covered up. Yet when you imagine what the user experience would be like without the animation—the entire screen suddenly changing to a different UI—you can see how it would completely fail to give reassurance that their previous content is untouched. Instead of being a temporary excursion to a different, subordinate interface, it would feel like the app had suddenly and unexpectedly jumped to a completely different place. Like being transported instantly to an unfamiliar landscape, the user would feel lost, unable to get home.
You might think that this would be just the user’s first reaction, and once they realise they can get back easily through experience with the app, everything would be fine. Not so. While there may be less confusion each time it happens, it’s still uncomfortable. Like walking around the familiar rooms of your home blindfolded, to navigate successfully, you have to map out the path in your mind. In other words, to add the motion element in your imagination.
Sinha’s discovery helps to explain why. Our brains are simply not wired to easily comprehend static images and non-animated transitions. Keep this in mind when deciding when and where to add animation to UI:
Good animation: Your job is to lead the user through the experience. Eyes tend to track anything moving, and brains tend to try to predict where it is going and what will happen when it gets there. Use this to your advantage.
Bad animation: Motion that does nothing to help the user make sense of the UI will ultimately be distracting and detrimental to the user experience, and on mobile devices will just chew batteries. All animation should be 100% motivated by a desire to explain what the software is doing, and how it can be controlled.
