motion design exploring
TRANSCRIPT
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?