Modern operating systems use animations constantly to engage their users and to create a more compelling computing experience. When used in the right way, animations provide assistance to the users of the system, to lead and guide them through different tasks, provide context or feedback, and reinforce positive actions.
A good example of this is the way that applications are minimized in Windows 7 or OS X—the application appears to squish down into the icon on the taskbar/dock, which shows the user where to go when they want to return to the application. It's the simple details like this that can be most effective.
Good animations can lend an air of sleek professionalism to an interface and make it appear more advanced or more modern. Apple's iPhone (or iPad) is a perfect example—the seamless use of subtle animations and transitions within the operating system and its applications allow the user to connect with the device in a profoundly satisfying and immersive way. Anything that appears or disappears is faded smoothly in or out, and menus and content panels slide in or out from the top or the sides. Sudden events can unsettle or distract users, but a well-timed animation can help to make them aware that something is happening or something is about to happen.
Be warned though, badly executed, clumsy, or overly pointless animations can do the opposite, making your interface appear basic, poorly designed, or inferior. No animation can be better than poor animation. Even if your application works perfectly, superfluous animations can leave your users feeling frustrated and cause them to forgo your application or website.
Desktop computers and a rapidly growing number of mobile and handheld devices are easily powerful enough to handle quite complex animations, and with integrated hardware acceleration and more refined CSS3 and HTML5 making its way into the latest browsers, the possibilities of what can be achieved on the Web are increasing exponentially.
Animations can make a great impression and enhance the user experience in the following situations:
When showing or hiding windows, pop ups, and content panels
When something is moved to a different area of the window or page
When something has changed state on the page as a result of the action of the user
To lead the user to a specific call to action or bring their attention to something important
Too many animations in unnecessary places can be damaging. Try and avoid animations, or at least give them serious consideration, in the following situations:
When an action needs to be repeated very frequently by the user
Where the devices known to use the system are likely to be incapable of displaying the animation adequately
On time-sensitive actions or processes
Note
Bear in mind that these are guidelines only, not laws which must be obeyed at all costs, and they are certainly not definitive. There are few situations where animations should never, ever be used and few situations where they must always be used.
Use your judgment to determine whether an animation is suitable for your application or page and its intended audience. If possible, give your users the chance to enable or disable animations based on their own personal preferences.
Before implementing an animation in our pages or applications, consider the following checklist of questions:
Is the animation appropriate for your target users?
Is the animation practical?
Does the animation add value or enhance the user experience?
Will the animation run at appropriate speeds on the devices that are most likely to be used?
If you can answer yes to all of the above questions, the animation will probably be a positive feature. If you answered no to any of these questions, you probably need to stop and think about what you are trying to achieve by adding the animation, and whether or not it could be better achieved in some other manner.