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.
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.
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.
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.
