Being fairly busy this week, I am going to skip over the regular Friday Review. Instead, I will offer my thoughts on the use of animation in user interface (UI) design.

Today, OS X Leopard is released for the Mac. It’s a new operating system that offers many upgrades, one of them being Core Animation—a technology that allows for complex animations to be integrated easily into the UI. As technologies like these become more common, as we gain more processing power and as developers realize the importance of visual quality in their interfaces it is important not to jump in and implement eye candy for the sake of it. Animating the user interface is a risky business because it is very easy to get it wrong.

The most obvious risk is the delay that the animation may cause between the user activating a certain function, and then that function fulfilling its task. A good example of this is the “genie” effect when you minimize windows in Mac OS X where the window gets visually ’sucked’ into the Dock. The whole effect takes about a second to complete, and while it is visually impressive, it still produces a delay—a delay that can potentially have negative effects on users’ productivity.

I think the delay in the genie effect may even be intentional, aimed at slowing you down, giving you time to catch your breath if you will—if only for a second. Sometimes it works just fine. Other times you feel that the window does not go away fast enough. During those times you really begin to feel the friction the interface creates between you and your work. Adding a 1 second delay to a function can add up to a lot of time…say you use a function 20 times an hour. If you work for 7 hours a day, this will add up to 140 seconds a day. If you work 5 days a week, it will add up to 700 seconds—over 11 minutes. This will further add up to about 12 hours a year of lost time, all because of one single animation. What if there are 10 animations? A split second of time may not be a lot, but if you use a function not 20 times an hour, but 100 times an hour, the lost time will add up real fast—and the user will feel it as they continue using your application.

Animations should thus be used sparingly and with care. The more frequently the function you apply the animation to is used, the quicker and more subtle the animation should be. Very frequently used functions should not be animated at all—or there should be no delay. The worst thing the interface can do is waste the precious time of its users, especially if that time is being wasted on visuals that serve no function.

Having said this, I think animations can work, and indeed, I recommend using subtle animations throughout a visual UI. Animations can look beautiful, and beautiful interfaces are pleasant to use. If the person enjoys using the UI, they will be less stressed and more focused—they will like using your application, and that is of course very important if you wish to gain happy users and customers. Animations are not only used for eye candy, they can be used for function. Animations can attract the user’s attention to an area of the interface, indicating something has changed or needs changing. Intelligently designed, animations can be used to grab the users hand and lead them through the interface—all by catching their attention from one item to the next. Be careful not to overdo it, as you will risk causing delay and/or confusion.

Another point to note is that if the animation is fairly complex or powerful, it may get repetitive really fast. Things that people notice get boring quick because people keep looking at them all of the time. To create an animation that will pass the test of time you have to make it so simple that the user will hardly notice it. It must be very subtle—enough power in it to attract the users attention if required—but not so potent that it screams for attention every time it plays. As a general guideline, keep the number of animations low, keep them short and keep them subtle.