Why does the Genie effect of an OS X window minimizing to the Dock look so cartoony? Why is the pop! of an iChat invitation so exaggerated? When you unlock your iPhone, why do the icons dance?

The answers might lie in Animation: From Cartoons to the User Interface, a research paper written in 1995 by Bay-Wei Chang and David Ungar:

User interfaces are often based on static presentations, a model ill suited for conveying change. Consequently, events on the screen frequently startle and confuse users. Cartoon animation, in contrast, is exceedingly successful at engaging its audience; even the most bizarre events are easily comprehended.
— Animation: From Cartoons to the User Interface, March 1995

Chang and Ungar discuss cartoon-style animation with reference to the Self programming language popular in the 1980s and 1990s, but the points they make about how such animation can be used to improve transition and feedback apply uncannily well to Apple’s software designs. Without cartoon techniques, they say, user interfaces are hard because you have to think too hard to make sense of things appearing and disappearing, or jumping from point to point:

Users overcome obstacles like these by experience. The first few encounters are the worst; eventually users learn the behavior of the interface and come to interact with it efficiently. Yet while some of the cognitive load of interpreting changes in the interface may be reduced through repeated exposure, it is likely that some burden remains. For example, a user may know that clicking an icon will open a window, but the sudden change to the screen when the window opens may still require a moment of assessment. 

In the real world, the writers say, things don’t appear and disappear, and they don’t jump around instantly. In the real world, things are physical and have weight.

Cartoon characters do not simply disappear from one place and appear in another; they appear to move solidly and continuously. Cartoon objects do not flash suddenly into different sizes and shapes; they appear to grow and deform smoothly. Animation provides the visual cues necessary to understand what is happening before, during, and after the action. Unlike user interfaces which burden the user with the responsibility of relying on experience and deductive ability to interpret changes, cartoon animation leverages off of human experience of how objects change and move smoothly in the real world.

Drawing from classic animations texts, they discuss how things can made to seem more real by applying animation principals emphasizing solidity, exaggeration, and reinforcement. Read the paper to learn more about how these principals can be implemented, but it’s clear they’ve influenced Apple designers.

And to my knowledge, Apple hasn’t yet used two of the techniques mentioned by the writers. The first technique, motion blur, you know already from Warner Bros cartoons if you’ve seen the Road Runner speeding down the highway in a blue and red streak with Wile E. Coyote in hot pursuit, his own legs spinning furiously. Motion blur is useful to compensate for movement so rapid that an object moves from here to there too quickly for the eye to follow, making the glimpses of the movement you do catch seem disjointed and confusing. With motion blur, as with the Road Runner’s blistering speed, the sense and direction of movement are strengthened by clarifying the motion from here to there with a blurred representation of the moving object. This is already commonplace in Pixar movies. The next time you’re watching The Incredibles on DVD, slow down virtually any scene—especially Dash’s run through the forest and onto the water—and you’ll see a surprising amount of blur.

Apple hasn’t used motion blur in OS X yet, possibly due to the processing power needed, but it would be a natural addition.

Arcs, the second technique Apple has yet to use, capitalize on the simple fact that nature rarely moves in a straight line, but rather travels along smooth curves. When you throw a baseball to someone, you throw it high enough to arc across to the catcher; When you’re running and decide to go left, you lean and curve to your left. It’s so natural you don’t even notice it, because you’re used to dealing with the natural world and that’s how the natural world works.

Apple has hinted at these arcs in places such as the Genie effect as you minimize a window to the Dock, but not to the degree the writers advocate. To date, In OS X things usually move in a straight line. Hit F9 now to activate Expose and notice how the windows move in straight lines to their destinations. Now imagine how much more natural and organic it would look, how much more real it would look if the windows moved in gentle curves instead.

Perhaps Apple has already tried it and didn’t like it, but with Core Animation, applying gentle curves to these motions has never been easier. Maybe we’ll see more curves in future releases.

Wednesday, April 23rd, 2008, 1:55 am    Trackback.