Safari launching on an iPhone (it took many tries to get this screenshot right!)
More and more gadgets use fancy animated graphics. From your cellphone to your high-end Linux box running Compiz Fusion, they’re all looking better than ever. But animation is more than looks. And today I’m going to cover many of the benefits of animations in software, from multiple angles.
Animations are exciting
Animations makes people go “Ooh” and “Aah”. This makes people happy, and they’ll be more likely to like the software. Even Vista with all its problems was famous for its Aero flip 3D. Bringing animations to your software also makes it seem more professional and complete. Static software is boring, animations are not. Too much is not good either, so finding a place in the middle is important.
Using animation to hide slowness
Everybody hates slow software. Animation is a great way to hide this. Of course, the best solution is to make software faster. But when this is not possible because of limitations in hardware, animations can be a great solution.
A very good example of this is launching apps on an iPhone. You zoom from the springboard (desktop) to the app. It may only take milliseconds, but it gives the app some extra time to start that doesn’t annoy you. Many apps are ready to use when the animation is done, making the launch seem instantaneous instead of having a tiny delay. This gives a great user experience, and is one of the “secrets” to why people love the iPhone.
Using animation to give feedback
Animations is a great way to give users feedback on their actions. When you click something, you expect something to happen. A good example is the jumping dock icon on Macs when you launch a program. Another one is minimizing windows on almost any operating system.
On Windows 7, you get outlines when dragging windows to the edge of the screen, highlighting that you are about to invoke the Snap feature.
Using animation to show relations
Animation is a great way to show how things are connected. A perfect example is switching screens in a table-based iPhone app. When you press an item in a table, the table slides off to the left and a detailed view comes in from the right. When you go back, the opposite happens. This gives the user a sense of relations between objects on and of the screen. The app seems more logical and self explanatory.
This works so well because we humans are wired to see relations between objects. This is also the reason why interfaces inspired by real world examples often work well (provided they are well executed).
How to implement the correct animations in your software
Knowing that animations can be used for many things is good and well, but how do you use them the right way? The easiest way to know if animating something is the right thing to do, ask yourself these questions:
- Are you sure it won’t impact performance too much?
- Will it help users understand what happened?
- Will it make the software look better?
- Will it make the software seem faster?
- Are users going to be excited by it?
- Is it fast to implement?
If the answer to at least three of these questions are yes, you should really consider implementing animations.
Finding the right animation for the task is even harder, but this is so different from case to case that I won’t recommend anything specific. A great general tip is to look at software you love to use and learn from it.
Often used animations most people undestand are zooming, bouncing and sliding. Be careful not to let the animations become the main focus. They should generally last for under 1 second and be gone. A bouncing icon that repeats over and over until you click is not a good user experience.
Debate, test and ask
Are you unsure about animations in your software? Do you want to learn more? Debate with friends, test software yourself and ask people what they think. Hit me up at twitter if you have any specific questions, or leave a comment below.
