The force of motion in UX

February 2, 2016 | by Oliver Gonzalez

In App development, Mac, Microsoft, UX, creative services

Animations deserve more consideration when we are talking about UX design. This article will explain the purpose and importance of motion in websites and apps.

Did you know that using motion in apps and websites can improve user engagement?

Let’s start by defining the word animation.  Its etymology comes from the Latin word anima, which essentially means life.  That’s exactly the idea we want to portray with our digital experiences as they emulate real life more and more every day.  Animation is the process of making the illusion of motion and change, which makes motion an incredible asset for improving User Experience.

Animation has been around for ages in paintings, photography, and even now in cartoons and films. The digital world was not one to fall behind, and it began to implement the use of motion, as well. Thanks to animation, it is becoming easier for people to understand computers and technology.

Types of animation

The first type of animation is microinteraction.  This is the most used and the most known in User Interface environments.  It imitates physical interactions in digital media. It is any single task-based engagement with a device.  You may have started your day with a microinteraction by turning off the alarm on your mobile phone. Designers and developers, however, have to be really careful with this type of animation and have a really sharp attention to detail.

Microinteraction is the most used motion technique

The second type of animation is Process Animation, which shows the status of a process.  This is an extension of a microinteraction potential.  You’ll see this maybe when you are uploading or downloading something: that bar that starts to fill out, depending on the process.

This is the perfect motion example for process animation

An explanatory animation is that animation that provides the user with instructions for making an interaction . This animation invites the user to perform imperceptible actions and complicated processes. An explanatory animation provides extra information to let the user fulfill his or her objectives while in the app or webpage.

Motions like this guide the user throught the app

Another type of animation, decorative animation, enhances an action, promotes something special, or just make it look better.

A motion that is more appealing uses decorative animation

Transition animation is used to make the user notice those elements that come and go. This animation brings things to the user’s attention.

As I said, motion has become a really important asset to enhance UX, and it could bring a lot of benefits. But, there’s a counterpart. Sometimes using so much motion can be a hindrance.  It can affect the loading time of a webpage and, in the long run, create issues in marketing like SEO and ASO.

We have to be extremely careful to not saturate our apps or webpages. Details are important, and designers and developers should pay close attention to a healthy amount of detail.

Here’s a really good example of staying in context and adding motion. Click the picture and you’ll see a really sophisticated yet animated MacPro webpage accomplishing what the brand image is all about: elegance.

In this example Mac uses motion in a great way

My advice to avoid making mistakes when including animation in your apps or websites is:

  • Lean on the information hierarchy. Make your animation show the most important things first.
  • Choreography is important, just like in dancing. If animations are perfectly coordinated and choreographed, they will look amazing, thrilling their audience. The same happens in UX and interactive design.
  • Always, always, always find the most creative and smart ways to keep your users attention. Of course, never let go of that special attention to detail.

This is why I love graphic design, you know? It never ceases to surprise us and it is constantly changing and evolving.  It demands us designers to make intelligent decisions and find that great balance between creativity and cleverness.