Our guide to website animation: the good and the bad.

Overview: What is web animation?

When someone hears the word animation they often think of their favourite cartoon or Disney character. However, in web design, the term animation can refer to anything from full-screen page transitions to making a button move when it’s clicked. Modern technology is making it easier to add animations to websites and offers designers a way to make websites more dynamic and fluid. Not only can it enhance a website visually but it can improve user engagement and conversion.

On the other hand, it is important to consider when animation can become too much of a distraction to a user and stops them from reaching their end goal. Find out how we successfully utilise animation on our websites.

 

Examples of good web animation:

1. Visual feedback.

Animation can give users visual feedback to inform them that their actions have been successful. This is important because it eliminates uncertainty from a user’s point of view.

For example, in the video below from Aardvark, one of our recent E-commerce websites, you can see that once a user has added an item to their cart instant feedback is given with the shopping cart sliding in, telling them that their item was successfully added.

 

2. Loading screens.

Nowadays with super fast internet speeds, users expect content to load instantly and will often leave a website when they become impatient. Therefore, loading animations are used to help hide load issues and keep visitors engaged.

The designs are often kept simple, light and reflect the brand/company. Check out our example below that uses a slick loading animation of the SuperYachtsMonaco logo.

 

3. Hover effects.

Hover states on buttons and links in web design are a micro-animation that offer a cue to visitors with what is actionable. It is essentially a way to tell a user that clicking this will result in something happening.

Alternatively, designers often use hover states to keep users engaged with content or use them to reveal more. Check out our hover effects on these project thumbnails for Tangerine, a global pioneer in customer experiences.

 

4. Animated navigation menus.

Animating a navigation menu is an effective way to help designers liven up a page. A neatly animated navigation menu will make your website stand out from others.

Although this isn’t a page that most visitors will remember, it is an important page in terms of them navigating the site, so simple animations that guide a user are appropriate. Our example below on Martin Building website shows how a subtle reveal animation can liven up a navigation menu.

 

 

Things to avoid:

1. Slow loading speeds.

Although animation on a website may look great, you must consider the effect it has on your website’s page loading speed. Complex animations will increase its size, therefore, making it harder for networks to download resulting in a slower load.

Slower page loading times will unsettle a user’s experience, increase bounce rates and negatively impact SEO.

 

2. Too much animation.

Overcrowding a website with a lot of animated elements can irritate users and will likely result in them leaving your site for another.

Adding animation when not required will lose a user’s focus from the important information such as copy and buttons that they were looking for.

 

3. Unnatural animations.

Avoid adding animations to your website that feel unnatural or that don’t convey the personality/goal of your website. For example, it would be inappropriate to add elegant and decorative image fades to an E-commerce website when you want a user to digest your products instantly.

 

Conclusion.

It is without question that animation can enhance a website visually and also help improve user engagement. However, you must properly consider the pros and cons to figure out if they are completely necessary to a user’s end goal.

At KOTA, we strongly believe that website animations have a positive effect on a user’s experience if done right.