Going Through the Motions with UI Design

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.

An illustrations of five different shapes in five different colours to represent going through the motions.

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.

A video showing motion in a website through Parallax scrolling.

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: PrincipleAdobe After EffectsInVision Studio or the Anima plugin for Sketch.

A video showing another example of motion through a Mobile interface prototype.

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.

Do you need help with a Design project? We offer award-winning solutions. Contact us today.     

Stay in Touch

Keep up-to-date on our world of UX with Graphic Mint’s newsletter and social media.

info@graphicmint.com
+353 1 4788444

Graphic Mint
Unit 1C Corn Exchange,
Poolbeg Street,
Dublin 2, Ireland,
D02 C578

Copyright © 2010  –  2019 | Graphic Mint Ltd | Privacy Policy | All Rights Reserved

Graphic Mint Logo