Motion Design and UX

⁃ 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/4c52d2a3619ee006?

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

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

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

As a guide

http://thekineticui.com/your-app-login-is-boring/

Feedback

http://motionographer.com/2015/07/06/user-interface-design-why-motion-matters/

Navigation/UI

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

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/

Supporting Identity

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

Screen Real-Estate

https://dribbble.com/shots/1928659-Delivery-Card

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

Orient users within their environmentProvide a deeper level of clarityProvide useful feedback to the userAllow for more imaginative use of screen real estate (on and off canvas)Direct the user’s focusHint at what to do nextSmoothly transport the user between navigational contextsExplain changes in the arrangement of elements on screenProvide visual cues that acknowledge user input immediatelyBetter communicate a brand’s messageCreate affordances that look and feel like direct manipulation of the screenCreate visceral aesthetics and appeal that encourage usage and increase adoption

http://videos.sproutvideo.com/embed/a09bdab51b17e8c428/b2dd908b61e20cf4?