In the past, web animation got a bad rap, and for good reason – it was known to be distracting and usually had no purpose. Think: banner ads, animated gifts and flash intros that didn’t always have a skip button. Need an example? Check out the self-proclaimed ‘world’s worst website’.
Thankfully, animation on the web these days is more thought out, in fact it is designed to help communicate something to the user, it has a purpose.
To create more realistic animations designers are drawing on Disney’s 12 basic principles of animation shown in the video below.
Some principles are more relevant to web design than others, like timing. Timing not only applies to the speed of an action but also its responsiveness to user action. Make an animation too slow and your user may think your website itself is too slow or they may start clicking repeatedly wondering why their clicks aren’t having an effect, when really the animation is just slow to start off.
A little animation has the potential to make your website easier to use and understand, leading to happy site visitors. 🙂 Of course, animation still has the potential to be distracting and frustrating like it used to. Here are some dos and don’ts when adding animation to your website.
- Be purposeful
- Provide meaningful context
- Give control to users
- Get in the way of a user completing a task
- Make an animation too slow or ease-in too slowly
- Choose animations that don’t fit your brand—animations have personality too!
Animations aren’t just for fun, and it’s important to choose and design them carefully. It’s also important to keep in mind that sometimes animations can be more than just annoying. Large scale motion on screen can actually cause dizziness, nausea or headaches for some users. But overall, animations are a fresh way to increase usability and add a little coolness to your website.
Interested in a fresh, animated website to help grow your brand? Give us a shout or stop by our downtown Vancouver agency, we always have chocolate.