Design Tips

How To Use Animation Effectively On Your Website or Mobile App

By May 28, 2019 May 31st, 2019 No Comments

Animation is a fantastic way to bring your design to life and engage your user.

However, there’s definitely a time and a place for whizzing and whirring motion graphics.

Good animation has a reason to be there. It has a purpose, whether that’s to give the user a sense of direction, to help the website or application be more interactive or to support storytelling.

On the flip side, excessive, distracting animation can mean that your product is confusing, which is offputting for any user.

People want to glide through your website or app with ease, not fight their way through a bunch of meaningless moving elements.

It’s all about balance.

Today, we’ve rounded up some places on your site where animation works wonders.

Loading screens.

Most people quickly get fed up with waiting around for something to load. In fact, if a page doesn’t load in three seconds or less, some will abandon your site and head elsewhere to find what they’re looking for.

Entertain them – even if it’s only for a few seconds – with a moving visual to count down the time until the page loads.

If you want to see some more examples of loading screens, as well as find out how you can improve your page load times, read one of our previous blog posts.

User feedback.

Small – or micro – animations to let the user know they’ve done something on your app or website is an excellent use of animation.

This could be anything from a button changing colour when selected to a burst of confetti when the user completes a task.

This type of animation subtly interacts with the user and helps your digital product appear as though it’s part of the real, tangible world.

Scrolling.

On average, we use our thumbs to scroll around 70 feet per day – annually, that adds up to the height of Mount Everest.

Make your scroll memorable by injecting some fun into it with animation.

Navigation.

Your main goal is to encourage users to navigate with ease around your site or app. Animation can help to simplify user experience and assist them in finding what they are looking for, whether this is a product, sign up page or to make an enquiry.

However, you need to be extra cautious with using animation in navigation bars. It’s essential to ensure the design is clean, clear and straightforward for someone to get around without too much distraction.

Storytelling.

If you have a story to tell, motion graphics are a brilliant way of doing so.

Visuals boost your content, making it more appealing to the eye.

Nevertheless, they shouldn’t dominate your content; too many animations and videos take up too much time, which could cause a potential customer to lose interest quickly.

The key to using animation effectively on a website or mobile application is balance.

Even though they’re usually stunning to look at, it’s crucial that you don’t get too “animated”, cluttering up your site with so many moving images that your user doesn’t know where to look first.

Animate with purpose to guide your customer, tell your story and add to your user’s experience.


Want to know more about animation in web design? We’d love to hear about your project, get in touch with us today.

T: 01482 755 303 | E: hello@mattixdesign.com