Using Motion Graphic Design for a Better User Experience

You must have heard the term motion graphic design thrown around. But what is motion graphic design anyway? Is it just the next big thing in design and marketing, or can it add real value to business? Let’s explore.

Motion graphics are by no means a new thing. However, recently they’ve exploded in the world of digital marketing.

Even if you are reluctant to jump on every bandwagon marketing trendsetters send your way, this is an area of graphic design you should consider. Motion graphics can tremendously improve your user experience, which is a significant concern for any business with an online presence.

But let’s start from the beginning and clear up the terminology first.

What is motion graphic design?

As the name suggests, motion graphic design encompasses three components: motion, graphics, and design - the art of communicating a message through visual means.

It’s a vast field that includes everything from simple GIFs and animated text to complex graphic videos.

Videos, I say? Then what’s the difference between motion graphic design and animation?

The two terms are sometimes used interchangeably; however, the difference comes down to complexity. Motion designers add movement to graphics, and animators create longer projects, such as cartoons, longer videos, and claymation (animated plasticine animation, e.g., films like Nightmare Before Christmas and Coraline). An easy way to think about animation is that it’s a collection of many motion graphic elements.

However, for digital marketing and user experience design, you’ll likely need to hire a motion graphics designer rather than an experienced animator.

What is user experience design?

User experience (UX) is the process of designing relevant experiences for people using a product or service. Since “experiences” come in many shapes and forms, you might already suspect this complex field includes elements of different disciplines: psychology, graphic design, statistics, computer science, etc.

It has its applications in the digital as well as the real world. An example of a good user experience in the real world is traffic lights that change color to signal stop and go. Colors are universally recognizable, unlike words, and lights ensure visibility even at night.

However, these days, UX is most commonly referred to in the context of website or application design  In that context, user experience means creating the users' process of using a website or application. It shouldn’t be confused with user interface design, though, which is the term for designing the look and feel of a website or app.

Here’s a quick rundown of what user interface and experience design entail.

By tubikUX

By Leonid Arestov

By Mateeffects

Logo animations also allow you to go a step further from your primary design and add elements that further strengthen your brand image (but might make the logo design too busy in static form). This cute example of a mortgage logo illustrates the point perfectly.

By Mauricio Bucardo

And here’s another terrific example that demonstrates the power of visual cues in UI/UX design.

By Aaron Iker

Or how about this cool shot that suggests you’re about to explore a tasty burger menu without any text necessary.

By Aaron Iker

By Mateusz Nieckarz

Although you can add voice narration to your video, remember that most people view videos on mute. So it’s always a good idea to include closed captions or have the main points as text in your animated video.  

With that in mind, let’s move on to understand how motion graphics design can boost user experience on your website, landing pages or app.

With that in mind, let’s move on to understand how motion graphics design can boost user experience on your website, landing pages, or app.

The ultimate goal of user experience design is always to meet users’ requirements in a specific context. Anything that disregards either of these considerations will likely harm rather than improve UX.

The one thing to remember about user experience is that it’s user-centric. Many marketers and even designers tend to forget, especially when introducing “cool” new features such as motion design.

How to improve your UX with motion graphic design

Now that we have the theory out of the way let’s look at 6 creative ideas for improving user experience with motion graphic design.

1. Explainer video

Let’s start with the big one. According to Wyzowl’s 2020 survey,  84% of people say watching an explainer video has convinced them to purchase. According to the same survey, a convincing 85% of businesses already use videos in their marketing strategy, and explainer videos are the most common.

And there’s more. Homepages with videos are 53 times more likely to be discovered by Google. At the same time, your organic search traffic will likely rise by up to 157%! According to Unbounce, a video on your landing page can boost conversions by up to 80%.

But, having to record an explainer video yourself isn’t just tricky; it can be pretty costly. You’d need to have professional recording equipment, a video editor, and, possibly, hire a professional to be in the video if you’re camera shy.

That’s where motion graphics come in! A motion graphics designer can create a fun and engaging explainer video to help you convert website visitors into customers. Here’s an example of how we did it for our unlimited design service ManyPixels.

2. Transitions

People have a notoriously short attention span these days. It takes about 50 milliseconds for us to form an impression of a website. And the average time spent on a website across all industries is a meager 54 seconds.

So, how to keep people around for long enough to get them interested in your offer? One great way are page transitions. Here are some types of transitions you might want to consider.

• Dolly zoom: Zooming in and out adds depth to the page and visual interest. It’s often used on product pages to give users a closer look.
• Transformation: It’s possibly the most complex type of transition, which involves one element transforming into another. Your “About Us” page might be an excellent place to include this to showcase your journey.
• Pan and tilt: This type of animation is a perfect way to create a better sense of space. You’ll often see it with interactive maps or, again, as a way of showcasing the product from different angles.

Mobile traffic currently accounts for about half of the web traffic worldwide. Moreover, mobile commerce has been increasing for years, and in 2021 was 3.5 times greater than just 5 years ago in 2016.

It goes without saying that a stellar mobile UX is a must. It’s also significant to note that people spend 40% more time viewing a page on a desktop versus mobile. So, seamless page transitions are necessary for decreasing bounce rates on mobile.

Here’s a superb example for a flower delivery mobile app. The motion graphics design creates a seamless experience for the user and helps them to quickly complete their order.

A further terrific application of motion graphics design is to depict loading time. If you haven’t heard already, loading time is a major concern in UX design. Website conversion rates drop by 4.42% for each additional second of loading time between 0 and 5 seconds. And around 40% of people will abandon a website if it takes longer than 3 seconds to load.

A fun little motion graphic like the one below assures the users there’s a process happening instead of the page being stuck.

3. Graphic cues

One characteristic of a positive user experience is predictability. That means users are always clear on what effect their actions will have.

Text usually provides users with enough information about the result of an action. However, enhancing this message with visual cues is never a bad idea. For example, you could add a fun glow effect on a CTA button to entice users to click.

4. Animated logo

A perfect user experience is all about meeting the needs of the user. So, what does enforcing your brand image have to do with that?

Well, presumably, the people who find themselves browsing through your interfaces are those who have a vested interest in your brand. In other words, they need your products/services and prefer your vision and values.

So, reminding them about these things is another component of a solid user experience.

If you know even a bit about graphic design and branding, you’ll know that a business logo is much more than just a piece of design. It’s a visual representation of your brand identity: it should communicate what you do, why, and for whom.

An example you’re probably familiar with is Netflix. The animation added to their brand mark is cinematic and meant to draw the viewers in. It’s also a nod to their move from a streaming-only service to more of a production company.

5. Infographics

Infographics are taking the world of digital marketing by storm as one of the top-performing pieces of content. They’re shared more than any other type of content on social media, and an overwhelming majority of marketers claim infographics have been an effective part of their strategy.

Moreover, people find information 70% faster in infographics than in text. And quick access to relevant information = excellent user experience.

And just imagine pairing that kind of potential with motion graphics!

6. Small animations

So far, we've discussed how to design motion graphics that actively improve the user experience. For example, making navigation more accessible, providing visual cues and feedback, and making content engaging and understandable.

However, don't underestimate the power of delighting your users. In UX design, this refers to users' positive emotions when interacting with an interface or device. It may not always have an outward action, such as clicking a CTA button. However, these positive feelings can impact things like session duration, bounce rates, and overall user experience.

Adding simple motion design elements to your interfaces can be a terrific way to delight users. Just think of all the times you've had that "how fun" moment browsing through a website with cute animations.

Not sure what I'm talking about? As before, let's look at an example to help us. If you're looking to make a motion graphic, templates and libraries are good places to start, and uMake is one of them.

Of course, to give visitors a taste of what they can come up with, the company decided to add a bit of motion to the 3D design in their hero section. And it works perfectly - it doesn't overwhelm viewers or slow down the page. Instead, it provides a powerful first impression and helps communicate the value proposition.

Conclusion

Motion design can greatly significantly user experience design. From simple hover animations to seamless page transitions, it’s a way to keep users engaged and help them navigate through the website/interface better.

These are the 5 main ways in which motion graphics design improves the user experience:

1. It draws users’ attention to a particular task/element.
2. It prompts users to take action.
3. It provides feedback on an action.
4. It improves the structure of information architecture and provides a sense of space or time.
5. It delights users.

Although it’s unlikely that you can learn how to design motion graphics yourself overnight, it’s easy to find good-quality templates online. Working with a skilled freelance motion graphics designer is also another terrific option.

Of course, don't forget that motion design starts with graphic design. Our unlimited design service allows you to work with a team of qualified designers and get all your graphic needs covered. Our core offer also includes simple motion graphics design. Alternatively, let our designers work on the basics, which you can later transform into compelling motion graphics for your UI/UX design.

Have some questions? Book a demo call, and we'd be happy to answer them!