Web animations are making a comeback
08/11/2019
Animations have been used in web designs since 1995 and started life as simple pixel art, typically in a GIF format, that was created using frame-by-frame animation. In the early 90’s and 00’s web animation was often used to add some fun to a page or to draw attention towards specific parts of a website, such as a special offer or call-to-action. During this time of wonder over what the World Wide Web could offer, user experience (UX) was rarely thought about or considered a top priority, which meant that animations were often overused and distracting.
Back to the present - animations are smooth, sleek and often used subtly to provide additional information or generally improve the overall user experience. For small animations, whilst GIFs can still be used, animationed content is more often created using code, such as HTML5, CSS3, JavaScript and SVGs. The benefit of using code as opposed to classic frame-by-frame animation is that the animation can be more scalable (for different screen sizes), smaller in file size (and therefore quicker to download on a slow connection), and also more interactive. GIFs of course still have an important role - how else would we share our favourite memes on social media to perfectly capture our feelings!
Even though the technology has vastly improved, animation should still only be added when it is believed it will improve the experience for the user. It’s important to always weigh up the pros and cons before deciding whether to add animation to your website. For example, if parts of your website take time to fully load (e.g. after a complex search has been made), instead of your users staring at a blank page, you could use a loading animation such as a spinner, loading bar or just a fun image to let them know something is happening and keep them engaged. If your user completes a key goal on your website, such as making a purchase, signing up for a newsletter or filling out a form, you could reward them with a playful animation to congratulate them and say thank you.
Animation can be an used as an effective way to hold users' attention for longer than static content often can. It can also help to showcase your brand's personality in an more effective way, whether it's a bouncy, colourful animation for a childcare provider, or an instructional animation showing you how to use a technical product or service. You can even tell a story as you scroll down a web page by triggering animations as the user gets to them. In the many ways animation can be used, it has the power to evoke emotions that resonate with a user and encourage them to pay closer attention to your key call-to-actions.
Some brands have animated their main logo that sits at the top of their website to create a more memorable experience and to encourage their website to be shared and talked about. This can be another effective way of injecting more personality into your website with minimal effort required from your users in order to engage with it. The animated logo can then be used across other marketing channels such as in online ads, social media posts or videos to increase brand awareness and recognition.
Whether you use small, subtle animations to draw attention, or make animations the primary way you communicate with your users, remember the words of Uncle Ben in Spiderman: with great power comes great responsibility. Make sure your animations improve the overall user experience of your website and are sympathetic to your target audience.
If you would like to speak to a member of the team about adding animated content to your website or email communications, give us a call on 01732 460243, or contact us here.