GUI: Taking Lessons from Hand-Drawn Animation

Chuck Jones inspires UI designers in this classic paper from Ungar and Change.

Another paper about the SELF programming language, this time on its interface, "Animation: From Cartoon to the User Interface" by Bay-Wei Chang and David Ungar.

Chang and Ungar take lessons from traditional animation to inform the design of their own GUI. It opens with the observation that animators work with 24 frames of per second, and the audience is never confused from frame to frame, but even the simplest GUI can trip users up when things change unexpectedly. The solution, of course, to buy the ACME Web Development Framework. No, wait... The solution is to steal a few simple lessons from hand-drawn animation to make a GUI more intuitive. Everything from bouncing at the end of a move, to motion blur when an object moves more than its size in a single frame, to using non-linear easing.

The paper ends with three big categories of improvements, but I think they can be summarized in two.

  • Elements on the screen should feel solid. Specifically when created, dragged, and dismissed. This gives affordances to the user, making it obvious what they can do, and how the user can work with the items. Nothing should apparate without at least a little cloud of smoke.
  • Elements on the screen should reinforce what happened. Whether it's a little bounce at the end of a movement, a zoom when opening an application, or a gentle curve when moving on it's own. The UI should quickly reinforce what just happened, or even what's about to happen.

This 1993 paper was too late to have inspired the original Macintosh, but I can see its remnants in both the now-unfashionable skeuomorphic school of interface design and the entire iPhone interface, with its scrolling-bounces, and app-zoom-openings.

The flat school of design has definitely lost some of these lessons. Nothing is solid anymore, and there's little-to-no difference between a piece of text and a UI element. I don't miss the worse excesses of skeuomorphism, but I miss the affordances.

To sum it all up, use jQuery's easeInOutBack. Bam.


(Commenting is closed. Please tweet me at @landedstar instead.)