12 Principles of UX in Motion
Expectation, Continuity, Narrative and
Relationship are considered to be the four
pillars of Usability in motion However, these can
be achieved only after understanding and
applying the 12 Principles of UX in Motion.
Source: uninmotion.net
1. Easing results in reinforcing the ‘naturalism’
inherent in the seamlessness of user
experiences and creates a sense of continuity
when objects behave as users expect them to.
Disney refers to this phenomenon as ‘Slow In
and Slow Out.’
2. Offset & Delay is the second of the two UX
in motion principles that is influenced by
Disney’s animation principles, in this case, from
‘Follow Through and Overlapping Action.’ The
implementation is similar in execution; however,
it differs in purpose and outcome. While
Disney’s Principles result in ‘more appealing
animations,’ the UI Animation Principles result in
more usable experiences.
3. Parenting helps in creating spatial and
temporal hierarchal relationships by interacting
with multiple objects.
4. Transformation brings about a continuous
state of narrative flow when an object changes
its utility.
5. Value Change results in a dynamic and
continuous narrative relationship when the value
of a subject changes.
6. Masking creates continuity between an
object group and an interface object when
usability is determined by a particular part of the
object or group is revealed or concealed.
7. Overlay creates a narrative and objects
spatial relationship in visual flatland when
layered objects are location dependent.
8. Cloning results in continuity, relationship,
and narrative when new objects begin to origin
and depart.
9. Obscuration allows users to spatially orient
themselves with objects or scenes that are not
in the primary visual hierarchy.
10. Parallax creates a spatial hierarchy in visual
flatland when users scroll.
11. Dimensionality provides a spatial narrative
framework when new objects originate and
depart.
12. Dolly & Zoom safeguards continuity and
spatial narrative when navigating interface
objects and spaces.
Conclusion
Thus far, we have realised that animations play
a significant role in designing the UX of any
digital product. However, before its application,
one must consider the art’s strength, weakness
and make sure not to overdo it as that could kill
its actual purpose. It’s essential to have it in
appropriate proportions in order reap its full
benefits!
Reference
1. The importance of good animation in UX | Inside design blog. (n.d.).
InVision | Digital product design, workflow & collaboration. https://
www.invisionapp.com/inside-design/importance-good-animation-ux/
2. The role of animation and motion in UX. (n.d.). Nielsen Norman
Group. https://www.nngroup.com/articles/animation-purpose-ux/
3. Willenskomer, I. (2018, March 4). Creating usability with motion: The
UX in motion manifesto. Medium. https://medium.com/ux-in-motion/
creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
4. Change blindness. (n.d.). ScienceDirect.com | Science, health and
medical journals, full text articles and books. https://
www.sciencedirect.com/topics/neuroscience/change-blindness
About Author :
Rama Mitkari,
UX Content Writer
Rama Mitkari is a design enthusiast and an animation graduate from
MIT Institute of Design. She has a keen interest in UX, research, and
loves collecting interesting facts about everything in and around design.
The urge to help spread design knowledge across India has brought her
to work with ImaginXP as a UX Content Writer.
Connects :
linkedin.com/in/rama-mitkari-481456194
24