Animation can be a great little trick for your design toolkit if used correctly. It needs to serve a purpose for the user and not get in the way of the contents. Animations should be smooth and seamless, not jumpy and mechanical.
The primary reason to use animations is to increase usability. Animations can be a great decoration. Sometimes the goal of an animated element is purely to spark visual interest and keep a user engaged with your website for a longer period of time.
When I first learnt about animations, I used it everywhere on my pages. At that time I'd animate almost every elements I could; headings, paragraphs, images, buttons, with on-scroll effects. I was happy implementing it because I just learnt how to implement animations at that point in time. But I was using it wrongly, I must have been too excited about learning something new and wanting to show it off.
Gradually I came to understand animations doesn't really have to do with only on-scroll effects, it is how we want web pages to react or respond when users interact with them. I know you might be thinking if web pages are supposed to react or respond to users if being interacted with.
The point is just to keep users engaged and not bored waiting for a page to load. I recently just updated my phone, the update took awhile but there was a loader on my screen, I was just observing how the loader was moving that I even forgot I was updating my device.
Now imagine there was no loader, I would have thought maybe my phone had hanged without knowing it was updating itself in the background. Every animation has a purpose, and in this case it was telling me my phone was not hanging but only updating itself in the background.
You don’t need to overhaul your site to take advantage of animations. Just about any site can utilize basic animation in its loading sequence, calls-to-action, or navigation. New web development capabilities allow for animations to be implemented easily especially with CSS3.
You need to understand first that there are different types of animation effects and it goes beyond an on-scroll effect, understanding when to use them and how to combine two or more animations together can provide a good user experience and help keep users more engaged.
When considering animations it is important that these questions are asked :
- Will the animation(s) add to the user experience or take away from it? Yes?
- How will they add to the user experience?
- Will they influence a user’s behavior and help conversions and CTA clicks?
Knowing your personas is important so that animations truly help achieve your company’s business goals.