+44 (0)1242 512629
Menu Close
Posted by Kenny Foster
on Feb 22 2017

Using animation in web pages

We are always seeking new and innovative ways to improve websites. Aesthetics, functionality and user interactivity all contribute to developing unique user experiences.

Menus, contact forms and other key elements can be a subtle way to introduce animation. This post focuses on these rather than animated content such as images and videos – we’ll touch on those another time.

Load Sequences

Load sequences are subtle animations which show when the page loads or is refreshed. Not every aspect of the page should have animation applied to it but, instead, key elements or information you want the user to initially focus on.

They also disguise load times for the user, particularly if their internet connection is slow. The rest of the page loads simultaneously meaning the user isn’t drawn to load speeds and an interesting detail instead.

Navigation

If the user clicks a link to navigate to another page, it is usually obvious that they have done so as the page will load again and the title will change.

It can be confusing for the user if they click a link that takes them to another section on the page. Without animation, it will ‘jump’ straight to that section without the user knowing how they got there.

This is where animation comes in. If the page scrolls slowly to its destination then the user is able to visually see where the link has taken them in relation to their starting point.

Again, this adds to the visual aspect and enhances the user experience.

Show/Hide Content

Pages shouldn’t be overcrowded with content, especially if certain aspects aren’t specific or relevant to every user.

Some less important information should be hidden from the user with an option to make the content appear / disappear based on their input, usually by clicking a title or button – especially useful for web forms.

Only the necessary information should be displayed by default, then the user can select certain items to appear if it applies to them. This is an example of animation for both function and aesthetics.

Feedback

Another good application of animations is for shopping carts on e-commerce sites. If the user isn’t taken away from the page it can be difficult to tell whether the action has been completed; whether it was successful or where they can find additional information.

An animated element can draw the users focus to where the shopping cart is so they can locate it for later use.

Final thoughts

Animation on a webpage, no matter how you display it, should be subtle and minimalistic. You want the user to notice it but not to be the only thing they notice on your page. If implemented correctly, animation could prove to be hugely beneficial to the overall user experience.

best websites of the world