SilvaFUG Session from Chet Haase ‘Animation Rules and How they apply to RIAs’

I was at SilvaFUG Tuesday, Nov 10th session and thought Chet’s presentation was excellent because it was not only full of great technical information (code and demos) but also some very informative material on the rules/principles for cartooning/animation and how they apply to GUI applications UI design. This is something that I have not seen before and very valuable for those exploring/using RIA and what differentiates a RIA from a regular web application.

Chet’s preso raised a question in my mind, ‘where is there guidance or commentary on the design rules, principles and guidelines for RIA development?’ All the books I have perused at the local (Borders) library on interface design largely work within the constraints of non-RIA website or application design. Typically this principles stress:

  • Consistency and standards
  • task/use-case orientation and logical/work flow
  • use the right widget for the right task
  • users need to know how to work with the application you built
  • keep it simple and focused
  • etc

As an example, the typical well designed interface will move logically and progressive from one task or use case to another. However, currently the screen ‘pages’ will essentially ‘snap’ from one layout to another. This is an un-natural and abrupt change that you can get used to, but is mentally disruptive. In bad UIs you will spend time looking at the new page to understand where the next thing is you are interested in or need to do. The things (buttons, controls, information,…) that you should be able to follow from one screen to the next can get lost in the clutter and page ‘snap’. Apple in the design of its products and particularly the iPhone has employed a natural flow and movement to the UI – transitions are animated and employ more natural-physics based movements, fades and scales (things growing and shrinking).

As Chet pointed out, Flash and now Flex provide developers with built-in and easy-to-use animation features that require gobs of coding to achieve in Java (improving in JavaFX) or other languages. These are facilities that are largely new to developers and completely new to enterprise developers. These new capabilities are appearing in internet sites because differentiation can give a new service a competitive edge. This is not the case in (meaning internal to) the enterprise it is hard to come up with an ROI in ‘making things look cooler’. This is not entirely true because some of these capabilities improve usability, speed, accuracy, efficiency and ultimately productivity and cost effectiveness, which can be measured.

As food for thought (and not wanting to scoop Chet’s blog on the subject too much), here are some of his ‘rules’ derived from accepted cartooning rules:

  • Timing – effects happen within an appropriate time and do not become drawn-out, tiresome and ultimately irritating;
  • Designed – color choices, look & feel, consistency;
  • Smooth – natural and liquid
  • Transitioning – flow from one state/page to another should not only be logical intellectually but also visually keeping the users attention on the things that are common from one state to the next;
  • Realistic – learn to use the natural physics-engines available in Flash/Flex and including graphical hints that are analogous to real-life
  • Anticipation – give user hints about what is going to happen (example, appropriate hover effects);
  • Simple – keep it simple and clearly communicate what is happening and important

See Chets blogs:

Other commentary:

Great UI Style Guides listing (but nothing on RIA)


2 Responses to SilvaFUG Session from Chet Haase ‘Animation Rules and How they apply to RIAs’

  1. Vivian says:

    Wow!!! Keith excellent posting. Looks like you are going to be famous blogger soon :-). Cheers.

  2. […] and Flash Developer of linkedin | blog Possibly related posts: (automatically generated)SilvaFUG Session from Chet Haase ‘Animation Rules and How they apply to R…The Evolution of a Flex DeveloperWHY USE FLEXTry before you buy User […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: