Animations, interactions, and why we'd use 'em

gistfile1.md

Animations, interactions, and why we'd use 'em

• good animations you see, great animations you don’t
• the best ones work at the subconscious level where you don’t even realize what happened, it just makes the UX better and more predictable/stable
• they can provide guidance of what to do / where to click (think animated down arrow)
• they can inform users of something happening to the UI (think form submit)
• they can provide unexpected delight in the UI (think mailchimp’s email schedule animation, our checkmark growing when a purchase is made, or loving an item in Closets)
• they can give our system a more polished, native-like feel (think toggling an iOS yes/no slider)
• they can reduce confusion when a large change happens — instead of just hiding / showing content, animating it can help to add clarity in a UI and help reduce FUD for users

and what can interactions do for us?

• it helps give them user context as to what they are about to do (:hover), what they are doing (:focus), and what they have just done (:active)
• it's not 2005, so let's not only design for :hover states with buttons, but more so for :active and :focus

Disney’s principles of animation:

• Communicate status and providing feedback
• Enhance the sense of direct manipulation
• Help people visualize the results of their actions

Material Design

• The motion of a UI element should always feel authentic

Never animate because we can. Only animate because it provides useful context and clarity to a UI.

• Nothing feels more unnatural than a sudden change, because sudden changes just don’t exist in the real world. (http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/)