NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Friday, April 02, 2010

Animation Rules! Notes from Talk - Chet Haase & Romain Guy

I met Chet at the 360|Flex conference. We were on a panel together and talked about the UX of animation. Chet works on the Flex SDK especially focused on the animation/transition parts of the toolkit. Romain works on the UI toolkit for Android (including animation)

He & Romain spent some time last year studying the excellent book The Illusion of Life about Disney Animation by a couple of the masters of animation. The book discusses 12 rules of animation. They extracted a few principles from the book that apply directly to animating user experiences and shared them in the talk Animation Rules! they gave last year at Devoxx in Belgium.

They also mention Timing for Animation, another book I have on my shelf.

Some of the takeaways from the rules of animation:
  • Squash & Stretch. Lifelike objects deform in reaction to gravity & collision
  • Anticipation. Short actions just before the main one. Give hints to the user about what will or may happen.
  • Staging. Clearly communicate to the audience what is happening (poses, camera views, lighting, focus). Emphasize the important elements. Avoid too much noise.
  • Follow through, overlapping action. Realistic body physics. We are not rigid bodies.
  • Using Slow in & out.
  • Using Arcs in motion.
  • Secondary actions. Actions which emphasize or complement the main.
  • Timing. Careful timing of actions for realism, impact & effect.
  • Exaggeration. Making actions more lively, more obvious, more entertaining.
  • Solid drawing. Drawing has to be solid before you can animate well.
  • Appeal. Believable, appealing characters that the audience can enjoy.
Chet & Romain's Proposed Rules for GUI Animation:
  • Timed: Fast, realistic & appropriate
  • Designed: Use animations for good, not evil
  • Smooth: Don't make your users hate animations
  • Transitioning: Bring the users along
  • Realistic: Motion, timing, interactions.
  • Anticipatory: Hint what may happen
  • Simple: Help the user, don't confuse them.
This is just a summary. So make sure you watch the talk at Chet's blog.

2 comments:

Bryce said...

I'd also highly recommend this blog, for a good solid grounding in animation, illustration, framing, composition, and storyboarding. It really is an excellent resource: http://sevencamels.blogspot.com/

Bill Scott said...

@Bryce. Thanks so much. Wow you are right. Great tip.