insights | 31.01.2018

When should you use animation in web design?

Using Motion in web design
Animation has become more and more ingrained in the web design of today and is a great addition to some websites. But it is vital that it is used sparingly and not just produced for the sake of having animation. It should be used in cases where it adds to the user experience and adds to the users understanding. If not implemented correctly you may end up distracting the user from the core messages or even worse completely confusing them.

Origin of animation in web design

Originally .gif files were used by web designers to add motion to their websites, catching the users eye. Those were the days of tons of flashing cards, dancing cats and various other items we wouldn’t dream of employing today. These tactics were mostly used for decorative effect or just for fun. Now animation is used to improve usability, understanding and user intrigue. Then came the age of Flash, introducing a revolutionary technology allowing web designers to include complex animations on their sites. However, it did have its downsides with heavy file size, increased website loading times and high processor load. This was the beginning of animation is considered a useful tool for improved website usability but had to be used sparingly in order to keep page loading times down. Flash has now become obsolete being replaced by lightweight JavaScript and CSS coding allowing web designers to add moving elements to a website without overloading it. The switch began when many designers started using JavaScript for smaller animations, like dropdown menus and other navigational elements, due to it being more SEO-friendly. Others only used JavaScript because that’s how FrontPage and Dreamweaver swapped button images, but still, this was progressing. The release of the CSS animation specification in 2009 pushed animation one step further allowing the simple animation to be implemented in CSS code. The introduction of code libraries has now given designers endless possibilities when it comes to adding motion to their web pages. Adding Animation to Web Pages

Improved usability with animation

Commonly animation is used to attract the user’s attention to certain important pieces of information or prompt the user to make the right decisions about ‘clickablilty’ of an element. For example, the use of a shake effect on login/sign in forms to inform the user that something is wrong with their submission which mimics the human head saying “no”. Animations can also be used to guide users through a website or even prompt them to buy. Web designers often envisage a journey they want the user to take when visiting their site and animation is a great way of leading a user on this journey. Many businesses have seen improved conversions and ROI (Return on investment) when introducing interactive elements and drawing the users eye to them using simple animation effects. Instances of Material design have become more and more common in various website designs. This is due to the high attention paid to the way in which an object or element is perceived and what this can tell the user about the element. Whether this is the purpose of the element /object or how the user can interact with it. This form of design is even recognised by companies such as Google that in its ‘Guidelines to Material Design’ states ‘Motion in the world of Material Design is used to describe spatial relationships, functionality, and intention with beauty and fluidity’. Animation should be used to provide the user with a better understanding of the nature of the object and how they can interact with it.

Tips

It is vital that if you wish to implement animation on your website that you take into account its pitfalls as well as its benefits. You should reconsider using animation if it adds to page loading times and decreases the overall performance of a page. Therefore, compare the performance of the site with animation to the site without animation, if there is a huge difference you may need to reconsider the use of some animation. Make sure you are using the most SEO-friendly method of animation. The use of CSS animation for your website keeps pages lightweight and will decrease loading times. Whereas JQuery although suitable for creating subtle animations, it will slow your website's performance. Animation must also be responsive if you want your website to succeed. If your website only performs well on a desktop you will lose users viewing the site on other devices. There are many tools out there to help you create responsive animations such as Adobe After Effects or Invision which include a wide variety of effects that can be used to further the user's experience. Your motion should not be time to consume, especially on elements that users frequently interact with as this will increase drop off rates as users lose interest. Also, your motion should draw attention but not distract from your core message. When introducing the motion to your site, just remember animation is the means to a goal, not a goal in itself. Meaning you shouldn’t just introduce it for the sake of it, it should help guide the user and better portray your message. It is better to include animation on elements that the users will interact with frequently, for example, navigation menus or forms. Think, will the animation improve the user’s interaction with the website and does it affect the performance of your site? Want to learn more about Animation and how it can be used on your website? Read how we use it on our customer's sites here.
Back