Dolores Joya

Designing User Interfaces has always been more exciting to me than traditional Art or traditional Print Design. The reason being, User Interfaces (U.I.’s) combine Graphic Design with Interactivity and Animation. Subjects I’ve studied, worked with, and loved for years. U.I.’s combine these things in a very usable and functional way. In my eyes and in simple terms, “User Interfaces are alive”. They respond to you. They have states of being. They do stuff for you (very quickly hopefully). They have memory’s to store things. They can mimic the qualities of physics. They have identities (Brands) which give them uniqueness. They are way more than just a static image. Together these characteristics breath life into a U.I. and when combined with the principles of animation, can make the user’s experience more immersive.

Caveat: Before I continue, it’s worth noting that the use of animation in user interfaces has been debatable and should be used to enhance, not distract from the user experience. Striking a good balance between entertainment and usability takes wise teamwork and consideration. For this article creative license has been taken for demo purposes.

Origin of the Principles of Animation
The principles of animation were developed by Disney animators at the Walt Disney Studio’s in the 1930’s. These principles are covered in the famous animation book: Disney Animation: The Illusion of Life by Ollie Johnston and Frank Thomas. When learning how to become an Animator, these principles become part of your vocabulary.

The Principles of Animation:

Reference: John Lasseter, “Principles of Traditional Animation Applied to 3D Computer Animation”, Computer Graphics, pp. 35-44, 21:4, July 1987 (SIGGRAPH 87).

1. Squash and Stretch
   defining the rigidity and mass of an object by distorting its shape during an action
2. Timing and Motion
   spacing actions to define the weight and size of objects and the personality of characters
3. Anticipation
   the preparation for an action
4. Staging
   presenting an idea so that it is unmistakably clear
5. Follow Through and Overlapping Action
   the termination of an action and establishing its relationship to the next action
6. Straight Ahead Action and Pose-to-Pose Action
   The two contrasting approaches to the creation of movement
7. Slow In and Out
   the spacing of the in-between frames to achieve subtlety of timing and movement
8. Arcs
   the visual path of action for natural movement
9. Exaggeration
   Accentuating the essence of an idea via the design and the action
10. Secondary Action
    the action of an object resulting from another action
11. Appeal
    creating a design or an action that the audience enjoys watching

Source:
Principles of Traditional Animation Applied to 3D Computer Animation

Another book which is an essential tool for animators is “The Animator’s Survival Kit” by Richard Williams. It is valuable manual for understanding practical application of the Principles of Animation.

Applying the Principles of Animation to User Interface Design
For this article I took the above principles and applied them to various Adobe Flex U.I. Components, Icons, Screens and Interactions where possible to demonstrate how these principles can be applied. For the keyframe animation and skin artwork I use Flash CS3. For screen/view state level animations I use Flexs’ Behaviors and Easing Functions.

Principles of Animation applied to User Interface Icons
- A Quick Overview –
Below left is an example of the graphics used in the Halo theme for each state of a default Flex Button Component. On the right are the keyframes of an example animation which is applied to the Button component to replace the default “Over” state. Flash animations can be applied to each state of Flex UI components. In this illustration, when a user mouses over the button, the over state will play the blue icon animation.

Applying the Principles of Animation to User Interfaces :Icons – Sample Flex Project
Below I’ve put together some examples of icon animations skinned over Flex Builder Button components. Each icon shows a different animation principle. Click the image below to launch. Matching descriptions are contained in each tooltip.

Applying the Principles of Animation to User Interfaces :Components
In this example below, I created a new Flex project that contains the same principles of animation applied to various user interface elements. Click the image below to launch.

Animated User Interfaces in the Mobile World
Mobile devices make heavy use of animation in their interfaces. Examples of animated interfaces can be seen on the Apple iPhone, HTC Hero, and Palm Pre. It is my theory that these devices employ more animation than full blown applications because mobile device interactions and tasks are specific and limited. The scope of the interactions are focused to 1 or 2 things that a user can do. Also, mobile devices are meant to entertain and be fun. Lastly, touch screen gestures such as: “wipe” and “tap” have a natural Physics based characteristic about them in real life which call out for “easing”, “bounce” and “timing” principles to be applied as a visual correspondence.

Videos of User Interface Animation on Mobile Devices

• A video of the Animated User Interface of the HTC Hero Mobile Device
• A video of the creation of the interface for “Beats” for the Apple iphone

User Interfaces which Help to Create Animation
Another wonderful intertwining of User Interfaces and Animation for which I’d be daft to leave out, is the use of U.I.’s to manipulate 3D Characters in the 3D Animation World. Obviously, 3D Animators employ the Principles of Animation to their keyframe animations to bring their characters to life. Without the use of these custom built U.I.’s, the manipulation of these parts would be much more time consuming and way less fun. Although, these sliders and interface elements are simple box’s and lines that are not animated themselves there is a parallel to be drawn here…”U.I.’s and Animation are explicitly linked”.

Note: The job of binding these User Interfaces to the 3D Character usually rests in the “Character Rigger’s” hands. Special care is taken to apply these controls to moving joints, blendshapes, and other parts of the 3D character in order to make the life of a 3D Animator more about applying the principles of animation as opposed to worrying about the technical details of the binding process. Ironically enough, when a Character’s outer skin is bound to it’s skeleton and joints, the command is called “Bind Skin” in Maya. Not unlike binding the “Skin” of vector artwork to a U.I. component in Flex, which is also called “Skinning”.

This screen capture below depicts a 3D Character and its corresponding custom built User Interface in Autodesk Maya. Moving the sliders in the X or Y directions applies various deformations to the 3D model. Click the image to see full size.

This 3D Character is generously built and given away for free for budding 3D animators to practice with. It is available at HighEnd3D along with many others.

In summary, the subject of User Interface Animation contains many exciting new and noteworthy evolutions which feed my passion as a UI Designer and Animator. Hopefully, this brief article can expand the subject a bit further and provide some new insights to others who are interested in the subject.

by Dolores Joya.

Additional Reading about User Interface Animation
Further Examples of Easing Functions in Flex:

• James Ward – Fun with Flex Easing Functions

Further reading on the principles of animation

• Animation Toolworks Library
• Siggraph Principles of Animation Applied to 3D

Further reading on animation applied to user interfaces

• From Cartoons to the User Interface (pdf)