Effective Animation

You may want to download the video files for this presentation: https://www.dropbox.com/sh/5vo23399zmsfdfr/AAAw4_pQpmefexB3xx6G3P0Na?dl=0

Over the years, animation evolved from a nice-to-have concept to a must-have. Now, the best companies use animation to inform, delight, and reward the people using their products. Let's talk about how to use it effectively in your work.

We’ll cover
• Using animation as a teaching tool
• Best practices for timing and presentation
• Using animation to help people love your product
• Using animation to reinforce a brandHow to avoid overdoing it

Audience
• UX and UI Designers
• People who appreciate a good (or bad) pun

Transcript

1. Hi there.
2. 1. How Animation Helps 2. Best Practices 3. Q&A/Public Shaming for My Terrible Puns Effective Animation Outline
3. 1. Animation Provides Guidance How Animation Helps
5. - Steve Krug, Don’t Make Me Think “We don’t read pages. We scan them.”
9. How Animation Helps / Hot Tips • Show, don’t tell. • Use animation to reduce cognitive load.
10. 2. Animation Gives Feedback How Animation Helps
11. - Don Norman, “The Design of Everyday Things” “Feedback must be immediate: even a delay of a tenth of a second can be disconcerting.”
12. How Animation Helps / Giving Feedback
16. How Animation Helps / Hot Tips • Use animation to show changing contexts. • Use animation to show your project is working 
 on it.
17. 3. Animation Decreases Abandonment How Animation Helps
18. I would if my 56k modem let me!
19. • Google saw a 20% drop-off for adding half a second to their page load time • Amazon saw a significant drop in sales for every tenth of a second they added to page load time How Animation Helps / Decreasing Abandonment
20. How Animation Helps / Decreasing Abandonment https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait
21. How Animation Helps / Decreasing Abandonment https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait Dinky versions
22. Providing Guidance How Animation Helps / Decreasing Abandonment https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait
25. How Animation Helps / Hot Tips • Speedy Loaders = Higher Perceived Speed • Higher Perceived Speed = Less Abandonment
26. 4. Animation Makes an Emotional Connection How Animation Helps
27. - John Medina, Brain Rules “Emotionally arousing events tend to do be"er remembered than neutral events… Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories.”
28. How Animation Helps / Emotional Connections
29. How Animation Helps / Emotional Connections
33. • Deliver WOW #rough Service • Embrace and Drive Change • Create Fun and A Li"le Weirdness • Be Adventurous, Creative, and Open-Minded • Pursue Growth and Learning • Build Open and Honest Relationships With Communication • Build a Positive Team and Family Spirit • Do More With Less • Be Passionate and Determined • Be Humble How Animation Helps / Emotional Connections Zappos Mission Statement
34. • Deliver WOW #rough Service • Embrace and Drive Change • Create Fun and A Li"le Weirdness • Be Adventurous, Creative, and Open-Minded • Pursue Growth and Learning • Build Open and Honest Relationships With Communication • Build a Positive Team and Family Spirit • Do More With Less • Be Passionate and Determined • Be Humble How Animation Helps / Emotional Connections Zappos Mission Statement
35. Best Practices
36. 1. Be intentional. Best Practices
37. Best Practices / Be Intentional
38. 2. Help, don’t hinder. Best Practices
39. Best Practices / Help, Don’t Hinder Remember “Do No Harm?” Totally applicable.
40. 3. Timing is everything. Best Practices
41. Best Practices 500–100ms 0–100ms 100ms – 500ms Sweet spot! (Instant) Adapted from Val Head, NNG
42. 4. Don’t break accessibility. Best Practices
43. • Add a low-animation se"ing • Avoid excessive flashes of color more than twice a second • Avoid overly-complex parallax effects and scrolljacking Best Practices / Accessibility
46. 5. Understand the basic principles. Best Practices
48. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
49. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
50. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
51. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
52. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
53. Exa$eration Squash & Stretch Anticipation Follow #rough Timing http://the12principles.tumblr.com/
54. • Videos used in this presentation (Dropbox) • History of Animation (Webflow) • Response Times: 3 Important Limits (NNG) • Designing Interface Animation (Val Head) • #e Illusion of Life (Cento Lodigiani) • 12 Basic Principles of Animation (Wikipedia) Resources
55. • Principle (proto%ping tool) • Origami (proto%ping tool) • Framer (proto%ping tool) • Giving Your Product a Soul (on emotional connections and the effort/impact graph) Resources / From the Q&A
56. Thanks!