Navigating the World of UX Motion Design
When I was first introduced to the world of UX, I was transitioning from a purely visual standpoint; (How can I make this attractive?) to digging deeper on the science of using visuals to create a usable and visually compelling experience. Upon sieving through the Material and iOS design guidelines, I started to realise that motion is a great way to complement our designs — it lends character and provide guidance to users even when we are limited by small screens.
If you’re someone who enjoys looking at the fascinating GIFs on Dribbble, often wondering how you can apply it to your designs — or someone like me when I started working on my first mobile app, unable to distinguish the difference between a “Push” and a “Slide” iOS page transition; I hope this article helps you.
Let’s Get Started
Motion in UX exists to complement and guide the conversation by providing timely feedback to the user, hierarchy and ultimately orient the user to the interface. It is also known as UX choreography:
UX Choreography is a combination of the how with the when and why — the proper techniques of applying motion and captivating an audience combined with the most integral moments in user experience where you can start engaging your user in a two-way dialogue. — Rebecca Ussai
Understanding When And Why We Should Animate
An integral part of visual design is avoiding clutter and keeping clarity. Motion design should be no different. According to Benjamin De Cock, there are two main reasons on why you should animate:
- When it aids the understanding of flow
- When it makes your application feel faster
Aids the understanding of flow by creating stories
Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows. — Craig Dehner
Aid comprehension by using animation to relate an element to other relevant elements. This effect must happen within 0.1 seconds of initial user action for the effect to be understood as a direct user manipulation.
With limited real estate, motion utilises the limited screen space available to communicate with clarity and timeliness. Animation simulates a regular conversation and story, where answers and feedback are processed one after another.
Also, aid comprehension by demanding attention with animation to guide the user to the first or primary action on the page. The stimulus guides the user attention and skips the need to skim through the entire page to understand what is actionable.
The speed and magnitude at which the element moves/shifts determines how quickly it captures attention. In the Fitbit example above, the motion is subtle and moderate, keeping it pleasant to look at.
Makes your application feel faster
As our attention spans and our tolerance for inefficiency drops, animations can be used to make your application appear and feel faster. This often results in a higher user engagement rate.
Actual speed barely matters. Perceived speed truly matters. — Benjamin De Cock
In reality, Stripe does not know if the text message has been received. It is timed according to the probability and estimated timing of when the text message is received. As a result, the user gets the impression that Stripe is a very efficient app thus being more likely to believe in and love the brand.
Why does this happen? Speed is one of the main factors that allow users to have a smooth experience, resulting in a more meaningful and satisfying engagement with the brand.
Choreographing For A Brand
Experience is the brand. Meaningful and shareable experiences are now forms of marketing. — Brian Solis
Besides being a factor in user experience, motion design patterns should become a part of the brand variable.
Netflix uses “The Stack” idea to represent their infinite and expansive catalogue of films. It is also designed to be easily adaptable to any format — be it print or digital’s variety of screen sizes. Most importantly, it is there to communicate its brand identity clearly by giving users the feeling of non-constraint and infinity when they are browsing through Netflix.
There are many opportunities where motion design patterns can be used. Screen transitions, for example, contain valuable opportunities to create a smooth experience and insert a brand experience.
Here are some neat examples I found off Dribbble:
Using motion as a brand variable is not something uncommon, but more of it can be incorporated into our existing brands to create a strong brand identity on digital experiences.
Basic Motion Design Guidelines
Performance and speed are key considerations when animating UI elements.
According to Benjamin De Cock, there are four rules for UI animation upon considering limitations of real-time rendering:
- Animate exclusively opacity and transform properties (animating other properties, like width or height, requires too much processing power and can slow things down)
- Keep animations fast (usually around 300ms)
- Animate elements independently
- Always use custom easing (avoid using stock animation easing.
Use animation only when necessary, do not have too many hidden navigations or repeated lengthy animations on actions that are frequently accessed. After all, one of the end goals of motion design is the ability to aid comprehension and understanding.
And… Our Motion Design Library!
Amongst discussions about our work process, my colleague Natacha Ruivo and I came up with an idea of creating a simple motion design library from the research we do on existing mobile applications. We believe that these realistic examples will be helpful to understand what can be done — to avoid compromising quality.
Please show us some love and let us know if it has helped your process. Feel free to suggest cool apps for us to include via our Twitter @MinitheoryHQ
Minitheory is a digital design studio based in sunny Singapore with a particular focus on UI and UX design. We make software simple, based on how people think and behave.
