Animations are becoming more and more common in our applications. With technologies like WPF, Silverlight and jQuery, animations are becoming easier for developers to use (and abuse). When used properly, animation can augment the user experience. When used improperly, animation can degrade the user experience. Sometimes, the differences can be very subtle.
I have recently made use of animations in a few projects and I very quickly realized how easy it is to abuse animation techniques. Here are a few things I have learned along the way.
1) Don’t animate for the sake of animating
We’ve all seen the PowerPoint slides with annoying slide transitions that animate 20 different ways. It’s distracting and tacky. The same holds true for your application. While animations are fun and becoming easy to implement, resist the urge to use the technology just because you think the technology is amazing.
2) Animations should (and do) have meaning
I recently built a simple Windows Phone 7 (WP7) application, Steeped (download it here). The application has 2 pages. The first page lists a number of tea types. When the user taps on one of the tea types, the application navigates to the second page with information about that tea type and some options for the user to choose from.
One of the last things I did before submitting Steeped to the marketplace was add a page transition between the 2 pages. I choose the Slide / Fade Out transition. When the user selects a tea type, the main page slides to the left and fades out. At the same time, the details page slides in from the right and fades in. I tested it and thought it looked great so I submitted the app. A few days later, I asked a friend to try the app. He selected a tea type, and I was a little surprised by how he used the app. When he wanted to navigate back to the main page, instead of pressing the back button on the phone, he tried to use a swiping gesture. Of course, the swiping gesture did nothing because I had not implemented that feature.
After thinking about it for a while, I realized that the page transition I had chosen implied a particular behaviour. As a user, if an action I perform causes an item (in this case the page) to move, then my expectation is that I should be able to move it back. I have since added logic to handle the swipe gesture and I think the app flows much better now.
When using animation, it pays to ask yourself: What story does this animation tell my users?
3) Watch the replay
Some animations might seem great initially but can get annoying over time. When you use an animation in your application, make sure you try using it over and over again to make sure it doesn’t get annoying. When I add an animation, I try watch it at least 25 times in a row. After watching the animation repeatedly, I can make a more informed decision whether or not I should keep the animation. Often, I end up shortening the length of the animations.
4) Don’t get in the users way
An animation should never slow the user down. When implemented properly, an animation can give a perceived bump in performance. A good example of this is a the page transitions in most of the built in apps on WP7. Obviously, these page animations don’t make the phone any faster, but they do provide a more responsive user experience. Why? Because most of the animations begin as soon as the user has performed some action. The destination page might not be fully loaded yet, but the system responded immediately to user action, giving the impression that the system is more responsive. If the user did not see anything happen until after the destination page was fully loaded, the application would feel clumsy and slow. Also, it is important to make sure the animation does not degrade the performance (or perceived performance) of the application.
Jut a few things to consider when using animations. As is the case with many technologies, we often learn how to misuse it before we learn how to use it effectively.