Adding Animation to the User Experience

Animation - if used correctly - can boost the users experience and help draw attention to certain areas of you application. It can also inhibit a user’s experience if used incorrectly. The key to good animations is to barely notice them; that is not to say they aren't there but for them to seem natural. One of the keys to natural feeling animations is understanding basic animation techniques. Traditional character animation relies heavily on these techniques to give the character life. In your application consider some of these of these methods:

·         Squash and Stretch
One of the most essential techniques Squash and Stretch for instance can more naturally show a ball bouncing by "Squashing" on impact and "Stretching" on acceleration. In your app, instead of having a menu appear, try having it pop on to the scene. It will rapidly grow past its desired size and then shrink to its desired size. In Silverlight try playing with the "Bounce" and "Elastic" Easing. I find that the defaults are too extreme and need tweaking.

·         Anticipation
This technique is used to prepare you for an action, for instance when dancers jump they bend their knees. When showing movement in your app try compressing before the movement happens.

·         Staging
Use animation to draw attention to an important part of your application. Whether it be a notification or an alert. A simple pulsing animation can get the users attention.

·         Slow in and slow out
Everything needs to accelerate and decelerate. Using Easing allows for smooth transitions and avoids abrupt stops and accelerations.

·         Exaggeration
Exaggerating movement helps sell an effect. For a mouse over effect try enlarging the object using the example from Squash and Stretch. If an item simply grows it wouldn’t be as dramatic as if it "popped".

I hope you can figure out fun and creative ways to use these techniques in your application. Just a few things to remember:

·         Animations should be relatively quick and smooth; you don't want your user waiting or the animation getting in the way of productivity.

·         Avoid abrupt stops.

·         Animations are great ways of getting a user’s attention so use them wisely.