Motion Design: 6 Tips on How to Benefit from Animation

Motion Design Header — Source: iStock/skynesher

We all know them. The funny little images or memes that move. The ones we like to send each other via Microsoft Teams to express our mood as accurately as possible.

An excellent tool to convey a message without too many words. And somehow, it works even better when the content is animated than when it is static. One could say: a picture is worth a thousand words – and an animation is worth a thousand pictures.

These GIFs are a great gimmick. So great that Teams added a separate button to the chat toolbar for them. But seriously, this form of communication is not wildly successful for no reason.

There are several good arguments for the use of GIFs, which can add value to your business even outside of chat messages. And there is no need to limit ourselves to GIFs, which is probably the most well-known, but only one of many common formats for displaying moving content on the web.

Instead, this article will focus on the general use of motion design in the digital context and show you how you can leverage it to optimise user experience, usability and your brand identity. But let us start from the beginning.

An Overview of Motion Design

Motion Design, Motion Graphics and Animation

Unlike any other design practice, motion design is about visualising movement. Static elements are brought to life through the use of »motion«. This term encompasses a lot of techniques and practices, which we will discuss in more detail later in the article.

Basically, motion design – or motion graphics – describes the movement of forms, colours and typography. The three basic elements of graphic design.

Another term that is often used alongside motion design is animation.
The distinction between these terms is not always clear and sometimes understood differently depending on the industry, e.g. film production, game development or web design.

Animation

We make the distinction as follows: animation is the general term used to describe the actual practice – that is, the creation of motion content, encompassing all types of moving images.

This can be stop motion, 3D, cartoon animation or web animation. A lot of the time, animation projects aim to tell an entire story visually.

Motion Design

Motion design, by contrast, focuses purely on graphic movement and tries to convey certain messages or give hints with simple, targeted and short animations. Motion design also involves animation, but the concept behind it is completely different.

Both motion design and animation describe the visualisation of movement and are therefore often associated with one another. Supplemented by auditory content, for example in the form of sound effects and atmospheric soundscapes, impressive user experiences can be created.

Added Value for Your Business with Motion Design

In digital business, you can leverage the benefits of animation particularly well in the area of corporate communications when designing digital products such as websites, online shops and apps.

For example, web animations can make abstract topics more comprehensible, tell stories in a lively way or highlight important interactive elements of your user interface.

Successful Content Creation and Communication

A typical example is the creation of content for different platforms and channels. Delivering important messages and complex issues to your target audience in an understandable and palatable way can quickly become a challenge.

Especially when it comes to large amounts of text and more difficult topics, we tend to get distracted more easily and turn our attention to other things.

Motion design allows you to use targeted text, shape and colour animations to breathe fresh air into messages that might otherwise seem boring. In turn, this can lead to more attention and receptivity on the part of your target audience. Animations can help you

communicate content in an understandable way
tell stories vividly and engagingly
make important points and place emphasis on certain aspects
command attention
direct users’ focus to what really matters

You can also use motion design to control the exact moment that information is displayed. This way, you can provide your target audience with the right content in the right place at the right time, without overwhelming them. This can

reduce the cognitive load
improve receptivity
increase the chances of your message really getting across to customers

It is not just your messages that can be perceived better – it is also your brand itself. Well-done motion design that goes hand in hand with your brand guidelines and conveys your brand identity to the outside world ensures

higher brand recognition
increased reach
stronger customer loyalty

Animated content generally attracts more attention than static content and can evoke stronger emotions, which in turn positively affects readiness to interact with your content.

Web animations are therefore especially suited to short-form content such as social media, where generating attention and engagement are crucial success criteria.

With a well thought out motion design concept that visually supports your brand messages and campaigns, you can ensure that you are actually seen and heard, giving you a decisive edge over the competition.

6 Tips for Improved Usability and User Experience

User experience describes the set of positive and negative interactions users go through before, during and after using a digital product.

By contrast, usability only refers to the period of actual use of the product. It examines how efficiently users are able to achieve their goals with the product and how satisfied they are during use.

Developing a good user interface that not only looks great, but also ensures a high degree of usability and an excellent user experience is no easy task.
The challenge is to specify all the requirements to be met by the system precisely in order to develop the best possible design solutions, which in turn will optimally align with the expectations of users.

The targeted use of motion design can also offer you added value in terms of an improved user experience as well as usability.

Now, we will give you six tips directly from practice. The examples relate to general usability heuristics, e.g.

perceptual control
self-descriptiveness
suitability for learning
joy of use
task conformance

A sophisticated motion design concept that is applied in a user-oriented way can be particularly beneficial in these areas:

Tip 1: Improve Navigation

Animated page transitions and micro-animations can help illustrate dependencies between different user interface elements on a page.

Additionally, they can improve orientation when navigating across multiple user interfaces or pages by visualising correlations and pathways and steering users in the right direction.

Tip 2: Optimise Visibility of the System Status

Waiting times, error messages and success messages all fall under the term »system status«. With the help of animated status indicators or system messages, you can strengthen visual feedback. As a result, users can perceive this content more easily.

Tip 3: Increase Interaction Rates

Hover and scroll animations highlight the clickability of interactive elements. These web animations therefore increase the likelihood of visitors interacting with these elements on your website.

Tip 4: Provide Assistance and Guidance

Automatic scrolling is also a feature of web animation. Use it to minimise scrolling time – something no user enjoys. Especially when it comes to complex tasks or process steps, e.g. login or registration, motion design can help users reach their goals faster.

Tip 5: Increase Joy of Use and Session Time

Well-done animations are pleasing to the eye and increase the likelihood of customers spending more time with your digital product because, simply put, it is fun to use.

Apple sets an example with scrollytelling, for example for the new generation of AirPods Pro: every scroll excites. Instagram also offers good animations, e.g. 3D cube effects when swiping in stories, to provide users with an excellent experience.

Tip 6: Reduce the Cognitive Load

Web animations can help you deliver content dynamically, in a targeted way and with appropriate information content. This way, you can proactively avoid cognitive overload on the part of users.

Why is this important?

The average smartphone user is active on 30 apps a month and nine a day. If you want your apps and websites to be used more frequently, users need to quickly understand how they work.

Motion Design Requires a Strategy

The well-known saying »less is more« has a particularly important meaning in the context of motion design. Too much movement can make a design appear chaotic and will end up confusing your target audience more than being a real help to them.

You should therefore always use web animation in a well thought out, targeted way while keeping its added value in mind.

Otherwise, you run the risk of achieving the exact opposite – which brings us to the final, very important point we would like to mention: accessibility.
It is important to note that people with certain pre-existing conditions can feel extremely disturbed – and sometimes even suffer physically – due to movement, especially if it is used too frequently, too intensively and without proper consideration.

You should therefore always think about adding a feature to stop or globally deactivate animations. If you would like to learn more about accessibility, take a look at our article on digital accessibility.

If you really want to create high-quality, appealing and particularly user-friendly experiences in the digital world, there is no avoiding the topics of user experience (UX) and usability.

Motion design is still a fairly young field in many industries. Take advantage of that! Together with our UX and usability experts, we have compiled several good reasons to work with these technologies.
Find out more about UX and usability here: UX Design – Successful & User-Centred Implementation – dotSource

Have we sparked your interest with this article? Then get in touch with us and find out which web animations are right for you and how you can integrate them into your website.

A/B Testing for Better Usability: Download the White Paper Now!

Motion design can work wonders for the usability of your website. But how do you know which changes made the biggest impact? When it is time to put your motion design strategy to the test, our »A/B Testing – Methods and Tools for Performance and Usability Optimisation« white paper can teach you how to identify successful changes and achieve more conversions through intelligent, targeted testing.