An Introduction to Motion Graphics Animation

Motion design is a thriving creative discipline that merges animation with graphic design elements to create dynamic digital content called motion graphics. Broadly speaking, these graphics encompass typography, illustrations, pictures, and other graphic design elements, brought to life through animation principles, such as movement, timing, and sequencing. Motion design finds its application in various digital mediums, be it short-form video, infographic or web design, serving to better convey messages, enrich visuals, and enhance the overall user experience.

UX Motion Design vs. UI Animations: Key Distinctions

When discussing motion graphics in web design, there's an important distinction to be made between UX motion design and UI animations. Issara Willenskomer prefaces his The UX in Motion Manifesto by encouraging the readers not to think of motion design as 'UI animations'. What he means by this is that some people perceive movement as an afterthought, something that is added to the interface later on solely for visual appeal.

However, the reality is far from it. Motion design isn't just about aesthetics, as it dictates how components function and behave. From motion graphics, to transition animations and micro-interactions, movement is a fundamental force that shapes the user experience, requiring consideration from the earliest stages of the UX design process.

Principles of Effective Motion Design

If you've ever explored the topic, you've probably come across Disney's 12 Principles of Animation. Undeniably, these guidelines have empowered countless animators to create more realistic and awe-inspiring films and motion graphics. However, when it comes to crafting animation for user interfaces, usability plays an even more critical role than visual appeal. Let's delve into some key principles of highly functional, purposeful, and engaging motion design.

Timing

Arguably, one of the most apparent distinctions between experienced motion designers and amateurs lies in how they handle animation speed and duration. Achieving perfect timing requires walking a fine line: animations that are too fast can feel abrupt or distracting, while those that are too slow may frustrate users and disrupt their flow. To ensure a seamless user experience, apply easing functions to control the rate of acceleration and deceleration. As opposed to linear motion that seems unnatural to an average person, eased motion feels exceedingly smoother and lifelike to the human eye.

Hierarchy

Motion is a powerful tool for establishing visual relationships between UI components. Consider this thought experiment: imagine two abstract shapes sliding in perfect unison from left to right. Don't you just feel an inherent connection between these objects? Now, add a third shape moving at a slower pace. Intuitively, you perceive the third shape as separate from the others in some way. Once a relation is established, leverage size, proximity, overlay or sequencing to communicate hierarchies that effortlessly guide users through the interface.

Continuity & Consistency

The general idea behind the continuity principle involves viewing animations as one uninterrupted and logical flow, rather than isolated designs. Your animated sequences should feel intuitive, purposeful, and interconnected. The use of smooth transitions, like sliding or fading, enhance this notion of continuous progression. Additionally, establishing a consistent visual language is paramount in creating a cohesive user experience. With each repeated or similar interaction, the predictability of the interface rises, which reduces the cognitive load and increases usability.

Responsiveness

In his manifesto, Issara Willenskomer distinguishes between realtime and non-realtime motion in UX. Realtime motion happens as users directly interact with the interface, while non-realtime motion occurs after user input. Although they serve a different purpose, both types of animated graphic design are invaluable tools for enhancing the user experience. However, a skilled UX/UI designer must strike a delicate balance between user interactivity and autoplay. A digital product's motion design becomes truly responsive when animations respond appropriately to user actions without creating a sense of disconnection.

Multimodality

When designing motion graphics animation, remember that movement isn't the sole means of communication with users. Combining motion with words, sounds, and haptic effects makes for a more immersive and impactful user experience. For instance, consider what happens when you enter a wrong password on your phone – the dots at the top of the screen shake, and the device vibrates. This multimodal approach conveys information more effectively than a mere error microcopy that the user has to read. That's because engaging multiple senses through multimodality strengthens the message being conveyed.

How Motion Design Enhances UX: Common Scenarios

First Impressions

The hero section, located at the top of the page, serves as the primary introduction to the brand, product, or content. Imagine this: you arrive on a webpage and are instantly mesmerised by a stunning welcome animation. Those types of motion graphic videos are specifically designed to captivate viewers' attention and make a strong first impression, often being the most visually striking element of the page. But here's a word of advice: make sure your welcome animation is relevant to the website's or page's content and perfectly aligns with the brand identity. Have a look at our own hero section:

Our welcome animation presents hero/dot's three main services (development, design, and engagement) through three animated circles elegantly combining into one in various ways. A claim with a subheading and a compelling CTA button appear to reinforce the message and provide more information. This motion graphics video sets the tone for the entire page and introduces the motive of three dots, a signature element of our brand identity.

Our Tips

• Keep in mind that some users may visit your page multiple times. There's no need to reintroduce yourself every single time. Consider adding a button that allows them to skip the welcome animation with just one click.
• Ask yourself: How can my motion graphic design continue to bring value to the user beyond their first encounter? By adding elements of interactivity, randomness, or surprise, you can delight viewers time and time again.

Page Transitions

When designing digital products, a motion graphics designer has the privilege of seeing the whole website or app from a bird's-eye view. A user, however, has to navigate through the interface and find their way. This is where motion design steps in, assisting the user on their journey by defining the spatial relationships between screens or individual elements as the view changes.

Transition animations act as friendly guides, providing users with an intuitive understanding of where they are and how they got there. The same applies to transitions within a page, such as parallax effects, fade-ins, or other scrolling animations. Off-page and on-page transitions create a seamless flow that not only adds dynamism to the design but also makes the navigation process more intuitive and logical.

Our Tip

• Remember the continuity & consistency principle. Although it might be tempting to use all those cool transitions and scrolling animations, crafting a consistent visual language is absolutely crucial to the product's success.

Emphasis & Instruction

In an otherwise static page view, a moving component instantly captures the viewer's attention. Once this happens, their curiosity is sparked, and they start investigating: What is it? Good motion design should not only answer this question but also hint at how the object behaves. Should I tap it, drag it, or perhaps hover over it? — the user wonders. The motion designer's role is to lighten the cognitive load of the user and provide them with a predictable interaction that matches their expectations. With the help of transition animations, the user can intuitively understand what will happen after they take action, eliminating any possibility of confusion or frustration.

Our Tip

• Embrace an empathetic, user-centred approach to motion graphic design by putting yourself in the user's shoes. Ask yourself the questions listed on the infographic above to better understand their point of view.

Feedback

Picture this: you're in the midst of scrolling through your favourite social media app, and suddenly a post catches your eye. You tap the tiny heart below, and it lights up a burst of red or pink, or maybe even does a playful shake. That's a perfect example of an immediate system reaction to a user action, or, in other words, a status change brought to life.

In his 10 Usability Heuristics for UI Design, Jakob Nielsen defines the visibility of a system status as keeping users informed about what is going on through appropriate feedback within a reasonable time. Enter motion design, an intuitive and versatile tool for upholding this visibility, be it through showing process progression or providing confirmation. A visual and dynamic system response not only reinforces the user's action but also boosts engagement and empowers them to feel in control of the interface.

Our tip

• On touchscreen devices, ensuring high visibility of a system status presents quite the challenge. Simply tapping a screen doesn't provide you with haptic and acoustic feedback like the trusty mouse or keyboard. In this case, great motion design becomes more paramount than ever.

Data Visualization

As humans, we often find big numbers puzzling or confusing. The problem lies in operationalization, or, in simpler terms, imagining the reality behind the data. But fear not, the secret to overcoming our own limitations is creating a narrative behind the numbers. In UX design, motion introduces an element of change to the values being displayed. A steady increase or a thrilling rise turns the numbers into a mesmerising story and sends a powerful message. Have a look at the counter section on hero/dot's website and see how using movement supports usability.

The counter showcases 4 crucial values, and as you scroll down to this section, they spring to life. While they count up to the present state, a dot jumps from one number to another, guiding the viewer's gaze. All of this tells you a story of a dynamic, growing company with soaring ambitions.

Our tip

• That's not to say that every number displayed on a screen should be animated. Always consider the tale you want to tell. Is it one of progress and change, or perhaps one of stability?

Micro Interactions

Usability, responsiveness, and intuitive navigation are all extremely vital, but let's not forget the icing on the UX cake: delight! So-called micro interactions bring an element of surprise, emotional connection, and humanity to an otherwise matter-of-fact software. Moreover, placing hidden easter-eggs or fun interactive elements in the interface is a subtle way of bringing the brand's personality to life. Even we couldn't resist and smuggled some light-hearted surprises to our website's design, too!

Our tip

• Go beyond mere functionality and let your creativity shine! Don't be afraid to experiment until you find a solution that makes the user experience truly delightful.

In conclusion

In this short but insightful exploration of motion's role in UX design, we've uncovered the underpinning principles of motion graphic design, their practical applications in common scenarios, and helpful tips from our designer's experience. As this creative discipline continues to evolve, its role in shaping user experiences will only grow. If you have an idea for a website, app, or any other digital products, contact us today to discuss how our team of skilled UX/UI designers can bring it to life.