Motion design can be used in user interfaces to guide users, tell stories, and provide feedback. It focuses users' attention, shows them how to perform actions, and helps explain data. Motion helps with navigation, disguises latency, supports branding, and makes better use of limited screen space. It acknowledges user input, directs their flow through an experience, and communicates a product's identity.

1. Motion Design and UX

2. ⁃ Keep users focused on a certain thing, which you want every user to notice
⁃ Guide users on how to move forward on your website or to perform a specific action.
⁃ Tell a story
Purpose
http://videos.sproutvideo.com/embed
/d49bdab51b17ebc65c/4c52d2a3619e
e006?

3. Taken from Benjamin De Cock’s talk http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/

4. When the user says…
“I don’t know where to focus.”
“What’s most important here?”
“I have no desire to use this tool.”
“How do I know what to do next?”
“How do I know I have completed my task?”
“I don’t understand what this data is telling me.”
When to use

5. http://motionographer.com/2015/01/05/how-google-uses-motion-design-to-make-tangible-tech/
As a guide

6. http://thekineticui.com/your-app-login-is-boring/
Feedback
http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/

7. Navigation/UI
https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.kztjemdn4

8. Disguising Latency
https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.kztjemdn4
“Actual speed barely matters. Perceived speed truly matters.”
Benjamin De Cock (Stripe)
http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/

9. Supporting
Identity
http://www.effectiveui.com/blog/2015/11/02/driving-the-
experience-motion-graphics-for-ui/

10. Screen Real-Estate
https://dribbble.com/shots/1928659-Delivery-Card

11. Resources
https://www.smashingmagazine.com/2016/03/integrate-motion-design-
animation-ux-
workflow/?ref=webdesignernews.com&utm_content=buffere6417&utm_medium
=social&utm_source=twitter.com&utm_campaign=buffer

12. Orient users within their environment
Provide a deeper level of clarity
Provide useful feedback to the user
Allow for more imaginative use of screen real estate (on and off canvas)
Direct the user’s focus
Hint at what to do next
Smoothly transport the user between navigational contexts
Explain changes in the arrangement of elements on screen
Provide visual cues that acknowledge user input immediately
Better communicate a brand’s message
Create affordances that look and feel like direct manipulation of the screen
Create visceral aesthetics and appeal that encourage usage and increase adoption
http://videos.sproutvideo.com/embed/a09bdab51b17e8c428/b2dd908b61e20cf4?