Improving UX through the use of animation

I have always had a love of the moving image, whether that be in blockbuster films, indy shorts, animation or stop motion and gifs. This continues to be an inspiration to me and since getting more into coding, I have found a place for my interest to expand, which has since grown into an opportunity for me to test my own skills in the field of moving image.

Smooth tile animation revealing more information on hover. Found on uimovement.com

Movement in websites is nothing new. Not in regards to modern CSS anyway. People have been adding subtle movement to websites for years and years in the form of hover effects with slight transitions. From subtle hover effects to fully animated logos, interfaces and loaders – animation is now playing a much larger role in the user experience of a website.

We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.ZURB Foundation

I find that things get really interesting when boundaries are being pushed. New technologies, and ones that are now well supported like SVG, allow designer–developers to get really creative and produce fantastic animations that can have a real affect on a user’s experience of a website and work across a wide spectrum of both desktop and mobile browsers.

Gif of UI animation created by InVision

Where animation can be useful

Animation can have very practical purposes as well as improve the look and feel of websites. For example, it can make a typical website loading experience feel much faster by convincing users that things are loading when in fact they might not be yet. The Facebook feed is a testament to this idea.

The Facebook feed loading animation helps to tell users that something is happening in the background

Balance is key to success

There is a delicate balance of animation that needs to be struck in website design and interaction. It doesn’t take much for a website to go from a graceful user experience to a mad cacophony of movement that is a horror to use. As designers and developers it is important to know where the level of movement can improve an experience and where it can become a distraction and actually hinder the usability of a website. There is no clear definition or level to measure against though, so putting this into a real life situation is occasionally trial and error, or in most cases a judgement of common sense and listening to your gut.

Animations are just one tool in a designer’s arsenal for improving a website’s experience and interaction. It’s not the be all and end all of a website. It can be tricky to get the right balance and can harm a website’s usability if done wrong. This is because animations can weigh heavy on a browsers processing power and therefore really slow down a website’s loading speed. They can also potentially distract users to the wrong area of the site, meaning a user could miss important information. Done right however, it can really help to make a website stand out from the crowd.

I always strive to create the best UX I can when designing and building websites for clients, and with the learning curve always on the move and browser compliance always improving, I’m positive that animation will play a larger part in website design in the future.

Or of course, you could just make animations for fun like this guy I created recently…