Using motion on the web to create unique experiences and enhance UX

Animated Web graphics are yet another way to tell your story in the digital space. Every great story, piece of content, product description has a good visual to support it and give more context. Some of the best long-form content on the web is made so much better by beautiful design and brilliant visuals.

These visuals can be a combination of photos, videos, infographics and animation - it’s all about choosing the right format to support your content.

Motion graphics are one of the more flexible formats for web graphics as they can combine so much information and make it easy to understand.

Interactive digital experiences

The idea of a ‘digital experience’ might feel quite ‘marketing-y’ but it’s actually an incredibly powerful way to sell your message. Which sounds better: a digital interactive experience or a static webpage.

Consider your website to be your shop window - it doesn’t matter which of the windows a user looks through, they should all catch their eye, make it clear what your business does and then interest them enough to come in.

Once they’re in and they’re looking at the products, that experience has to continue in order to keep them interested. In all honesty, that experience has to remain consistent across your marketing from the website to your social media to and forms of advertising and promotion - much in the same way a shop TV advert matches the branding of the shop window.

Interactive digital experiences are created to: look great, enhance the user journey and importantly, improve website performance, whether it be reducing bounce rates, increasing time on the website or actually converting people through sales or sales enquiries depending on your business.

Whenever Apple launches a new flagship product (think of them as you will), they go beyond a simple shop page that says ‘Buy Now’, they create an experience for the user that shows the product features in exciting interactive ways, creating a narrative throughout the page that explains why they’ve done things the way they have.

Through cleverly placed motion graphics and a well-designed digital experience, you can continue to tell your story in a way that makes people stop and think and further still, it makes people feel good about the brand!

Now this is probably the most markety title in this whole guide. And I hate myself a little bit for writing it but it’s kinda true. Think how cool that sounds compared to a static webpage. I certainly know which one I’d rather spend my “precious” time exploring.

UI Elements

Add feedback to buttons to communicate with the user what effect their action has or to communicate what state the application is in. Download bar. Loading bar. Product moving into a bag once added to the basket. Items fading away when deleted. Status indicators.

All of these indicators, no matter how small, keep the user engaged and let them know that something is happening. It’s easy to get frustrated with an online experience when it’s not clear as a user what action has been taken.

Formats and distribution

If we’re being brutal - web video formats suck! From the compression of the video to make it load faster through to the issues you get from each individual web browser on different operating systems. Just as one thing works perfectly on Chrome, it breaks on Safari.

With the caveats that come with different web video formats, it makes it hard to know what format you should choose for your project. While videographers can advise on what they think is best, if they don’t have coding skills or knowledge of content management systems (CMS), they might be advising on the best format for quality and not distribution.

Here are some of the pros and cons of the different web video formats:

MP4
Pros:

Cons:


GIF
Pros:

Cons:


SVG/CSS/JS
Pros:

Cons:


Lottie
Pros:

Cons:

Next Chatper: Testing The Waters