In Between at Smashing Conf Whistler, 2014

Historically, the intermediary states of our sites have been neglected. The transition between the starting and ending points has been treated as an afterthought, one we begrudgingly fix because they’re there and they stick out like a sore thumb. But the web is maturing, and our roles are shifting as it does. Through careful choreography we can make sure that these intermediate states feel intentional. That they don’t break our users state of flow, but help to maintain it. The result will be more delightful experiences for our users—from start to finish and every step along the way.

Presented at Smashing Conf 2014 in Whistler, Canada on December 11th, 2014.

Transcript

1. In Between Images of Looney Tunes Courtesy Chuck Jones Center for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ December 11, 2014 at Smashing Conf 2014: Whistler ! Tim Kadlec
 @tkadlec tim@timkadlec.com
2. https://flic.kr/p/qnMjux What she said.
3. © Warner Bros.
12. © Warner Bros.
13. © Warner Bros.
15. © Warner Bros.
16. © Warner Bros.
17. 1. Story sketches ! ! !
18. ! 2. Storyboard ! ! 1. Story sketches ! ! !
20. 1. Story sketches ! ! ! ! ! 3. Character Layouts ! ! 2. Storyboard ! !
22. 24fps
23. ! 2. Storyboard ! ! ! ! 3. Character Layouts ! ! ! ! 4. Extremes 1. Story sketches ! ! !
24. ! ! ! ! 5. In-Betweeners ! ! 3. Character Layouts ! ! 2. Storyboard ! ! 1. Story sketches ! ! ! ! ! ! 4. Extremes
27. “You must learn to respect that golden atom, that single frame of action, that 1/24 of a second, because the difference between lightning and the lightning bug may hinge on that single frame. Chuck Jones
28. “Just so; every point on a line is of equal importance. That is rule 1 of all great drawing. ! Chuck Jones
29. “Just so; every point on a line is of equal importance. That is rule 1 of all great drawing. ! There is no rule 2. Chuck Jones
30. in-between moments shape perception
31. 1024 768
32. x y
33. the web has a z-axis
34. the web has a z-axis time
36. https://flic.kr/p/hthFjf
37. rub some dirt on it https://flic.kr/p/hthFjf
38. progress bars are the hold music of the internet
40. progress bars focus on the waiting
41. http://www.lukew.com/ff/entry.asp?1797
42. http://www.lukew.com/ff/entry.asp?1797
43. http://www.lukew.com/ff/entry.asp?1797
44. skeleton screens focus on the progress
45. focus on what you don’t have
46. focus on what you’re going to get
51. “It’s solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use.
53. eye candy
55. people like beautiful things
57. https://flic.kr/p/9GkYGC perception of performance
59. http://livingwithlag.com/
60. 100ms
61. 100ms
62. 100ms 1%
63. 400ms
64. 400ms 9%
65. creates a connection
68. eye candy
 perceived performance
 creates a connection
72. hard to value what you can’t see
74. tell people you’re working for them
75. feedback shows progress
76. feedback eases anxiety
78. https://flic.kr/p/7WcQwA
79. address anxiety https://flic.kr/p/7bzcph
80. care
82. `
83. `
84. http://bit.ly/1rfjmzU
85. <200ms http://bit.ly/1rfjmzU \
86. “A rule of thumb: However long you think you need, half it. ! Rachel Nabors Award Winning Cartoonist
87. “A rule of thumb: However long you think you need, half it. ! Then half it again! Rachel Nabors Award Winning Cartoonist
88. “Confession: sometimes when we release an update, I tighten up an old transition by ~50ms. ! Result: "Wow, this new version feels faster." Cenny Bowles
 Design Manager at Twitter
89. gradual reduction
90. “At the beginning of the film the director knows what is about to happen but the audience does not. The timing at the start of a film is, therefore, probably rather slow until the audience has been introduced to the location, the characters and the mood of the film. Timing for Animation, Second Edition
91. http://bit.ly/1pgJ8OD
92. http://bit.ly/1pgJ8OD
93. http://bit.ly/1pgJ8OD
94. progress matters the most
99. 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338 93993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932 02884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592 64338327950288419716939937510141592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993 97932384626433832795028841971693993751014159265358979323846264338327950288419716939937510141592653589793238462643383279502884 41592653589793238462643383279502884197169399375101415926535897932384626433832795028841971693993751014159265358979323846264338
100. reduce friction
101. https://flic.kr/p/5TmARq
102. choreography
103. https://flic.kr/p/9GkYGC
105. © Warner Bros.
106. © Warner Bros.
111. http://omelekhin.ru/portfolio/web_navigation/
112. Actual demo
113. “My current advice to UX/IxD designers: learn motion design. ! Rapidly becoming a required skill, and a huge multiplier for your work. Cenny Bowles
 Design Manager at Twitter
115. © Warner Bros.
116. focus on the progress
117. address anxiety
118. be deliberate
119. when we get there
120. how we get there
121. https://flic.kr/p/9dCJNf
122. thank you Images of Looney Tunes Courtesy Chuck Jones Center for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ Tim Kadlec
 @tkadlec tim@timkadlec.com