This post originally appeared on Built In Chicago.
The gist of this post can be summed up in the following three lines:
Abrupt change is inherently disorienting.
Reorientation requires mental effort.
Motion (i.e. animation) explains change.
Let’s unpack those three lines.
You’re probably familiar with this quote from Steve Jobs,
“Computers are bicycles for our minds.”
Bicycles are useful because they allow you to travel greater distances in less time and with less effort than walking or running. In other words: small effort, big results. This is common to all tools, including your app. Tools allow you to accomplish more with less. We can express that in an equation:
utility = increase in results – effort required
The effort required to use a bicycle is mostly physical effort, but computers and apps require mental effort. So how do you decrease the mental effort required to use your app? This is where animation comes in. (Actually, this is where design in general comes in, but I’ll just focus on animation since that is my area of expertise).
First, let’s look at what happens when an app does not have animation. Whenever something changes, the change is abrupt. The user clicks on something, and *boom* it’s different. It happens suddenly and without any visible transition. And whenever there is abrupt change, the user becomes momentarily disoriented, and will ask the question,
“What just happened?”
Answering that question requires mental effort. Usually, the user is able to figure it out within a fraction of a second without ever becoming conscious of the small uptick in mental effort. But the uptick is there, and over time, those upticks add up. Returning to our equation, utility = increase in results – effort required, every uptick in mental effort is a downtick in the utility of your app.
Animation, when used properly, prevents the user from ever asking, “What just happened?” because they can see what just happened. It’s obvious what happened, and no (or very little) mental effort is required. They click on something, and a new menu comes in from the left while the original page fades into the background, or whatever it happens to be. The change is explained visually and spatially, within a fraction of a second, so that your users don’t have to spend that fraction of a second figuring it out for themselves.
(If you want to delve deeper into these concepts, I recommend the book Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug.)
