HOW TO USE MOTION TO IMPROVE YOUR UX
THE BODY LANGUAGE OF YOUR PRODUCT
WHO AM I
WHAT MOTION IS NOT
Slow
Source: https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2
Confusing
Source: https://material.io/guidelines/motion/material-motion.html
Linear
Source: https://medium.com/motion-in-interaction/animation-principles-in-ui-design-understanding-easing-bea05243fe3
WHAT IS MOTION
WHAT CAN MOTION DO FOR YOU
ORIENT USER FOCUS
Material Design
Source: https://material.io/guidelines/motion/material-motion.html
No animation
Source: https://material.io/guidelines/motion/material-motion.html
Slide from the bottom
Source: https://material.io/guidelines/motion/material-motion.html
Material Design
Responsive
Natural
Aware
Intentional
Source: https://material.io/guidelines/motion/material-motion.html
Responsive
Source: https://material.io/guidelines/motion/material-motion.html
Natural
Source: https://material.io/guidelines/motion/material-motion.html
Aware
Source: https://material.io/guidelines/motion/material-motion.html
Intentional
Source: https://material.io/guidelines/motion/material-motion.html
Provide orientation
Source: https://dribbble.com/shots/2580453-Health-App-Login
Instant feedback
Source: https://uxplanet.org/motion-in-ux-design-90f6da5c32fe
Spatial awareness
Source: https://www.kickbase.com/landingpage
Provide context
Source: www.slides.com
Create
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
Delete
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
PERCEIVED SPEED
Hold user attention
Source: www.kayak.com
Content loading
Source:https://medium.freecodecamp.org/the-principles-of-ux-choreography-69c91c2cbc2a
Hide latency
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
REFLECT BRAND PERSONALITY
Which one reflects your brand?
Source: https://dribbble.com/shots/1482812-Walk-cycles
Snappy
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
Speed
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
Bouncy
Source: http://thekineticui.com/motion-design-is-the-future-of-ui/
Storytelling
DELIGHT
Thinking about the user
SUMMARY
Soften harsh cuts
vs
No transition
Horizontal slide transition
Animation must feel natural
vs
Linear animation
Ease-in & out
Make the content feel alive
vs
No transition
Slide from the top
Provide orientation
vs
Entering from the bottom
Entering from the right
Provide instant feedback
vs
Subtle color change
Quick animation
Provide context
vs
No transition
Slide in from the bottom
Hold user attention
Break your loading process in a few separate animations
Animation must reflect the brand
Quick & snappy
Smooth & natural
Bouncy
Storytelling
Bring a smile to the user’s face
THANK YOU
MADE WITH A LOT OF
UX Meetup - Motion (Share)
By Daniel