Image for post
Image for post

Creating Usability with Motion: The UX in Motion Manifesto

Issara Willenskomer
Mar 31, 2017 · 21 min read

It’s not about UI Animation


Realtime vs non-realtime interactions

Image for post
Image for post
Image for post
Image for post

Motion supports usability in four ways

Expectation

Continuity

Narrative

Relationship


Principles, Techniques, Properties, and Values


The 12 Principles of UX in Motion

Image for post
Image for post

Principle 1: Easing

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Principle 2: Offset & Delay

Image for post
Image for post
Image for post
Image for post
Credit: InVision
Image for post
Image for post
Credit: Jordi Verdu

Principle 3: Parenting

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Delayed Parenting (Credit: AgenceMe) & Inverse Parenting (Credit: AgenceMe)

Principle 4: Transformation

Image for post
Image for post
Image for post
Image for post
Credit: Colin Garven

Principle 5: Value change

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Credit: Barthelemy Chalvet, Gal Shir, Unknown

Principle 6: Masking

Image for post
Image for post
Image for post
Image for post
Credit: Anish Chandran

Principle 7: Overlay

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Credit: Bady, Javi Pérez

Principle 8: Cloning

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Credit: Jakub Antalík, Jakub Antalík, Unknown

Principle 9: Obscuration

Image for post
Image for post

Principle 10: Parallax

Image for post
Image for post

Principle 11: Dimensionality

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Examples of Origami Dimensionality (Credit: Eddie Lobanovskiy, Virgil Pana)
Image for post
Image for post
Example of Floating Dimensionality (Credit: Virgil Pana)
Image for post
Image for post
Image for post
Image for post
Examples of Object Dimensionality (Credit: Issara Willenskomer, Creativedash)

Principle 12: Dolly & Zoom

Image for post
Image for post
Image for post
Image for post
Is the layer dollying, zooming, or is the camera moving?
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
The two images on the left are dollying, while the image on the right is zooming
Image for post
Image for post
Credit: Apple
Image for post
Image for post
Credit: Apple

UX in Motion

Creating usability with motion.

Issara Willenskomer

Written by

I teach UX/UI & Product Designers how to use animation to create better apps and websites: www.uxinmotion.com

UX in Motion

Creating usability with motion. Learn more at uxinmotion.com

Issara Willenskomer

Written by

I teach UX/UI & Product Designers how to use animation to create better apps and websites: www.uxinmotion.com

UX in Motion

Creating usability with motion. Learn more at uxinmotion.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store