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.)

If there’s interest, I could create a CS4 version also.

Click here to download for CS5

UPDATE! The CS4 version is now available (finally).

Click here to download for CS4

The Father from fla on Vimeo.

The tour lasted about four hours. We got to talk to a multitude of employees who showed us what they were working on and answered all our questions. Overall, it was pretty inspiring to me to get to see the whole process and get a better understanding of how the commercials I see on TV get made, and it motivated me to work a little harder at school so I’ll be more up to snuff for employers like Sol Design by the time I graduate.

I enjoyed the course greatly. Topics covered included interface design, integration of graphics with text, the importance of resolution, what makes a graphic engaging and communicative vs boring or confusing or irrelevant, and why PowerPoint is the most god-awful way to present information ever. A lot of time was dedicated to that last point. Too much time, in fact. I guess it was justifiable considering that the audience consisted mostly of business types who probably give PowerPoint presentations all the time. I, however, wanted to hear more about the graphics.

Overall, I would say that my biggest take-away from the seminar can be summed up in a quote that Tufte said toward the beginning of the day,

There is no such thing as information overload, only failure of design.