The Psychology of Interaction Animation

Using subtle motion in our development is helpful to our users. This is an exploration of why and how to tap into that. The live versions of the slides had some animation that don't quite work in a pdf. Sorry about that. You'll just have to imagine them.

Transcript

1. The Psychology of Interaction Animation Monday, October 21, 13
2. This is not a code talk. Monday, October 21, 13
3. Motion in User Interfaces Monday, October 21, 13
4. How Things Respond Monday, October 21, 13
5. 1. Why Move? Monday, October 21, 13
6. I’m not talking about Flash-esque motion Monday, October 21, 13
7. Transitory & Communicative Monday, October 21, 13
8. Tell the User “Look here!” “This was supposed to happen!” Monday, October 21, 13
9. Let’s get this party moving! Monday, October 21, 13
10. What’s the Basis? Monday, October 21, 13
11. A. Users are Scared. THINGS JUMP STATES CHANGE MODALS APPEAR BACK BUTTONS FAIL Monday, October 21, 13
12. B. Users are Smart. Monday, October 21, 13
13. We assume causality Monday, October 21, 13
14. Monday, October 21, 13
15. We wrap a narrative around movement Monday, October 21, 13
16. C. Users get frustrated, unnecessarily. Monday, October 21, 13
17. We should try to avoid frustrating our users Monday, October 21, 13
18. Movement is Communication Monday, October 21, 13
19. “The problem with this assumption, however, is that causes are a strange kind of knowledge. This was first pointed out by David Hume, the 18th-century Scottish philosopher. Hume realized that, although people talk about causes as if they are real facts—tangible things that can be discovered—they’re actually not at all factual. Instead, Hume said, every cause is just a slippery story, a catchy conjecture, a “lively conception produced by habit.” When an apple falls from a tree, the cause is obvious: gravity. Hume’s skeptical insight was that we don’t see gravity—we see only an object tugged toward the earth. We look at X and then at Y, and invent a story about what happened in between. We can measure facts, but a cause is not a fact—it’s a fiction that helps us make sense of facts.” http://www.wired.com/magazine/2011/12/ff_causation/all/ Monday, October 21, 13
20. “A cause is not a fact—it’s a fiction that helps us make sense of facts.” Monday, October 21, 13
21. Movement is Communication Monday, October 21, 13
22. State Change Connection Progress Weight Monday, October 21, 13
23. 1. How Move? Monday, October 21, 13
24. transition: all .2s linear; Monday, October 21, 13
25. Attribute + Time + Style Monday, October 21, 13
26. a note about Current Design Trends Monday, October 21, 13
27. “Flat” Design Monday, October 21, 13
28. “Flat” Design http://fltdsgn.com/ Monday, October 21, 13
29. “Light” Design Monday, October 21, 13
30. “In shedding this faux-3D skin, iOS has transformed into something remarkable, with a new kind of depth and motion. Apple has given up the artificial 3D image techniques of deep shadows, strong highlights, and gloss in favor of relying on spry animation and the parallax effects of flat planes to convey the sensation of depth.” http://www.macworld.com/article/2043265/why-ios-7s-design-is-bold-but-flawed.html Monday, October 21, 13
31. “Relying on spry animation [...] to convey the sensation of depth.” Monday, October 21, 13
32. Use Contextual Communication Monday, October 21, 13
33. A. Relational Movement Monday, October 21, 13
34. Instant Feedback Monday, October 21, 13
35. Slight Directional Movement Monday, October 21, 13
36. Faux 3D Monday, October 21, 13
37. Monday, October 21, 13
38. If you’re going to use this relational metaphor STICK TO IT. Monday, October 21, 13
39. This can be difficult! Monday, October 21, 13
40. B. Stylistic Movement Monday, October 21, 13
41. transition: all .2s linear; Monday, October 21, 13
42. We can see the difference between .2s and .4s Monday, October 21, 13
43. Trial and Error Monday, October 21, 13
44. Easing Functions Monday, October 21, 13
45. c*(t/=d)*t*t + b Monday, October 21, 13
46. Linear Function Monday, October 21, 13
47. easings.net Monday, October 21, 13
48. Monday, October 21, 13
49. Monday, October 21, 13
50. Ease-In Monday, October 21, 13
51. Ease-Out Monday, October 21, 13
52. Ease-In-Out Monday, October 21, 13
53. Custom css3beziercurve.net Monday, October 21, 13
54. Use Cases Monday, October 21, 13
55. Takeaways Monday, October 21, 13
56. 1. Motion isn’t just icing Monday, October 21, 13
57. 2. Users will use the information available to them to understand how to use our creations Monday, October 21, 13
58. 3. Intentional use of motion can give them information that is otherwise hard to obtain Monday, October 21, 13
59. 4. If you choose to use the z-axis metaphor, stick to it and be consistent Monday, October 21, 13
60. 5. Have fun! Monday, October 21, 13
61. Recommended Resources Effeckt.css https://github.com/h5bp/Effeckt.css Animate.css http://daneden.me/animate/ Jank-Free Web http://jankfree.org/ Monday, October 21, 13