The Power of Motion Graphics in App Development

Motion graphics were first used by the broadcast industry back in the 1950s.

But fast forward 60 years and motion graphics are now an integral part of how we all consume and interact with content.

Aside from being visually stimulating, motion graphics can also trigger alternative senses. For example, can you hear the ‘boom’ in the animation below?

Motion in app development

It hasn’t taken long for designers to recognise that motion used within apps is a powerful tool.

With the addition of a little movement, motion graphics create a more engaging experience for your users.

Much of what we produce is designed to replicate every day motions or interactions. A great example of this is the use of the card system in Google’s Material design guidelines to support user’s mental models.

Paper has been used for centuries as a presentation form and by using transitions that imitate paper or cards we can reduce mental fatigue.This enables users to focus more on the content instead of trying to understand the interface providing this content.

An example of card animation we explored at WorldRemit. Cards are helpful for allowing users to control the position of elements on a list.

Making a good first impression

People don’t read content, they scan it. If used well, animation can make your content more appealing to your audience.

For example if you want to create an onboarding experience for your app or a new feature — animation can help to explain core values or functionalities in a friendlier way.

This allows users to consume the content in a shorter space of time, and according to Therese Fessenden:

‘The first visceral reaction to a site’s design influence how users perceive relevance, credibility, and even usability.’

Animation as visually appealing content has a high potential to attract attention and delight users when first testing a product.

At the same time, animation can tell a story and explains a process without having to use complex language about what your product does.

We’ve designed our on-boarding journey to make it both welcoming and informative to the user. Animations controlled by swipe help make this more engaging and interactive.

How motion can reduce pain points and manipulate time

Application design is about more than just pretty graphics; its goal is a good user experience.

Very often an app is perceived by how it handles errors, pain points or loading time.

Of course, in an ideal world everything would work smoothly. But as responsible UX designers we want to make sure that if we can’t deliver a great experience due to technical issues we have backup options.

Animations can be effective when:

Providing feedback: Give feedback to users when something goes wrong. Animations should explain the problem without being invasive.

Whenever our users face an issue within the app, we try to brighten up this less-than-pleasant experience.

Easing the pain of loading times: Time slower when you see a basic spinner, and likewise faster when you add storytelling animation to entertain the user.

For our core transactions screens in the app, we provide bespoke loading animations.

Skeleton animations: Providing skeleton animations for loading content — so users see content fragmented and in continuous manner instead of waiting for it to load in one go.

Some of the WorldRemit app screens make many API calls, resulting in some data fields requiring additional time to load. (WorldRemit demo by Syeef Karim)

Peripheral notifications: Any movement in a user’s peripheral vision naturally alerts their brain. Through the use of peripheral notifications designers can increase the chance that a notification or alert is noticed.

We use principles of peripheral vision to notify our users about any live changes to their account or transfers. Small animations like this easily grab the attention of the user, but aren’t invasive.

Celebrate with your users

Any time your user successfully completes a journey, you should celebrate with them!

This not only adds a human element to your application, but also ensures a positive connection with your brand — increasing the chance they’ll return to you again.

Animation is a fantastic tool to mark these moments. It can help provide context on where the user is in the journey, and associates the actions they complete with success.

When our customers have to go through lengthy journeys that are legally required to transfer money, we celebrate their successful completion of the steps with a happy “moment” of animation.

Theory of invisible animation

There are plenty of occasions where you can show a little bit of character and entertain users — onboarding, confirmation of action, completion of transaction.

Let’s be honest — we all love colours and motion and if it were up to us designers, we would stick a racing unicorn on every screen.

But we don’t design for ourselves — we design for people.

The role of animation is to provide continuity of flow, explain relationships between elements, provide context and make the experience feel more natural and organic. Without being noticed.

How can I put this to use though…

You might be thinking, why bother to put in so much effort to create transitions and animations that won’t even be noticed by users?

Well the answer is the more invisible and natural the animation, the better it is for a user. The main goal is to create an interface that doesn’t need any mental effort to understand it.

Only the best-crafted transitions can provide an immersive experience in which the user doesn’t even notice them - enabling complete focus on the task they are conducting.

Motion is a powerful tool. Not only will it make your app experience smoother and more organic, when used intentionally and responsibly it can bring your app to life.

References and interesting reads:

[1] https://www.nngroup.com/articles/first-impressions-human-automaticity/