Going Through the Motions with UI Design

Marc Brophy

UX Designer

In a sea of millions of apps and websites it can be hard to make your product stand out. Good User Interface (UI) Design no longer just ends with rigid grids, buttons and content. Motion Design elevates these elements and conveys further storytelling. It brings life and excitement to otherwise static objects which can be easily overlooked by the User. In real life we can manipulate objects in a variety of ways, and the same can be done online through animations and motions.

Illustration representing Motion Design

Key Motion Design Principles

Google’s Material Design outlines a series of key Motion Design principles. It’s important for designers to be aware of these when incorporating Motion Design into a product.

Hierarchy

Motion reinforces the hierarchy between UI elements. This helps better orientate a User in an interface as well as communicate the relationship between parent and child objects. Furthermore, hierarchy improves a product’s learnability and intuitiveness.

Feedback & Status

Motion can be used to provide real-time feedback. This adds a sense of realism to interactions. Motion can also replace the need for textual forms of feedback. Text can be a more lengthy way to communicate to a User and could break momentum in a Users flow. Motion Design in feedback and overall status can overcome this.

User Education

Motion can be used in the form of animations. These help educate a User on how various aspects of an interface work. Learning by example is often much better than learning through reading instructions. Who wants to read an instruction manual while using your product? Watching something instead can be far more effective.

Character

Motion can add personality, or character, to otherwise boring interactions. This can lower User frustration when encountering errors and keeps the User engaged. Finally, it helps convey storytelling in a simple visual format which can be used to reinforce brand identity.

Example of motion design on a webpage from dribble
Source: Awsmd – Dribbble

Other Tips When Using Motion Design

There is a lot more to Motion Design than what was discussed in the previous section, but it is enough to set you on the right path. In order to prevent bad Motion Design it is best to avoid:

  • Motions which are too fast or slow
  • Animating many objects in relation to one another
  • Letting the UI jump and shift abruptly
  • Delaying User flows to display animations
  • Inconsistencies between motions used on similar elements
  • Animating objects which may distract the User from their task

Software that can be used to render motion design in design mockups includes: Principle, Adobe After Effects, InVision Studio or the Anima plugin for Sketch.

Example of motion design on a mobile phone screen from Dribble
Source: Johny vino™ – Dribbble

Where to take your Motion Design?

So where can you begin by incorporating Motion Design into your product? Motion Design can easily be added to transitions when going from one screen to another, when the User interacts with objects, when the User has to wait for something to happen or when the User has completed a task. Successfully incorporating Motion Design into a digital product is a great way to not have the product feel like every other out-of-the-box design.

Want to learn more about UI Design? Check out our recent blog post on call-to-action buttons entitled Do You Have An Irresistible Call-To-Action? Don’t have the time or resources to incorporate Motion Design but want it in your product nevertheless? Contact us at Graphic Mint and see our UI Design offerings.