Frank and Ollie

Sarah Allen's blog entry "time as a design element" reminded me of a book that every user interface/interaction designer should have, though few are even aware of it: Disney Animation: The Illusion of Life, by Frank Thomas and Ollie Johnston.

The Illusion of Life is a beautiful book, full of incredible, full-color bits of Disney cartoons. But more importantly, it captures a big portion of the principles that the Disney team used to create those cartoons. And almost all of those principles are relevant to computer user interface design.

Frank and Ollie were two of the key people in the original animation group at Disney. I had the pleasure of hearing them give a talk some years ago at Microsoft Research (where Linda Stone used to bring in all manner of fascinating people to give lectures). They were sharp, funny, great story tellers, obviously life-long friends, and willing to share the insights that made their work so great. This book has all the same characteristics.

Perhaps the heart of the book, at least from the UI perspective, is chapter three, The Principles of Animation, which lists twelve basic principles. Although obviously intended for animators, it's not hard to repurpose them to UI design. Here they are (with some selected quotes):

1. Squash and stretch. In real life, things are almost never static or of fixed size and shape. They change to reflect the forced acting on them.

2. Anticipation. "People in the audience watching an animated scene will not be able to understand the events on the screen unless there is a planned sequence of actions that leads them clearly from one activity to the next."

3. Staging. "...the presentation of any idea so that it is completely and unmistakably clear."

4. Straight ahead action and pose to pose. "Straight ahead" is when the animator simply takes off animating, with no plan or destination. "Pose to pose" is preplanned. Pose to pose "is always easy to follow and works well because the relationships have been carefully considered before the animator gets too far into the drawing." But "both methods are still in use because they each offer certain advantages for different types of action."

5. Follow through and overlapping action. This principle includes several techniques to keep the action from coming to a complete stop and then restarting when going from one scene to the next.

6. Slow in and slow out. Slowing down the action around the important poses, so the audience sees these, and isn't bored by the in between pieces.

7. Arcs. "Very few living organisms are capable of moves that have a mechanical in and out or up and down precision... most movements will describe an arc of some kind."

8. Secondary action. "Often, the one idea being put over in a scene can be fortified by subsidiary actions within the body."

9. Timing. "Neither acting nor attitude could be portrayed without paying very close attention to timing."

10. Exaggeration. I think that one's obvious...

11. Solid drawing. "Drawing is giving a performance; an artist is an actor who is not limited by his body, only by his ability and, perhaps, experience."

12. Appeal. "...a quality of charm, pleasing design, simplicity, communication, and magnetism."

For some of these principles, the application within UI design is obvious and established (2, 3, 4, 9, 11, 12). The others may seem to apply only to animation, but I suspect the real truth is that we just haven't gotten there yet.

Comments

[Ken Kahn]

Someone once handed me a draft of a paper entitled "Walt Disney and Computer User Interface Design" by Harry R. Chesley, Dec 13, 1988 soon after it was written. I was very impressed but because it was a draft that I knew I wasn't supposed to have I filed it away. I found it today and reread it.

In it you make a nice connection with how these principles of animation might apply to the Finder (and a future user interface).

I'd love to see an updated version of that paper now that some of the ideas have become mainstream but only some.

[3D Animation Movie on Lord Ayyappa]

Saranam Ayyappa Animation movie is making a foray into the competitive space with the hope of hitting the headlines with our first 3D animation movie on saranam Ayyappa. This 3D animation saranam ayyappa movie in India is flourishing witha a pretty quick pace.