The Space Between at Beyond Tellerand Berlin, 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 Beyond Tellerand Berlin, 2014 in Berlin, Germany on November 3rd, 2014.

Transcript

1. The Space Between Images of Looney Tunes Courtesy Chuck Jones Center for Creativity. All rights reserved. http:/ /www.directedbychuckjones.tumblr.com/ November 3, 2014 at BTConf, Berlin ! Tim Kadlec
 @tkadlec tim@timkadlec.com
2. © Warner Bros.
7. © Warner Bros.
8. © Warner Bros.
9. © Warner Bros.
10. © Warner Bros.
11. 1. Story sketches ! ! !
12. ! 2. Storyboard ! ! 1. Story sketches ! ! !
14. 1. Story sketches ! ! ! ! ! 3. Character Layouts ! ! 2. Storyboard ! !
16. 24fps
17. ! 2. Storyboard ! ! ! ! 3. Character Layouts ! ! ! ! 4. Extremes 1. Story sketches ! ! !
18. ! ! ! ! 5. In-Betweeners ! ! 3. Character Layouts ! ! 2. Storyboard ! ! 1. Story sketches ! ! ! ! ! ! 4. Extremes
21. “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
22. “Just so; every point on a line is of equal importance. That is rule 1 of all great drawing. ! Chuck Jones
23. “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
24. in-between moments shape perception
25. 1024 768
26. x y
27. the web has a z-axis
28. the web has a z-axis time
32. https://flic.kr/p/hthFjf
33. rub some dirt on it https://flic.kr/p/hthFjf
34. progress bars are the hold music of the internet
36. progress bars focus on the waiting
37. http://www.lukew.com/ff/entry.asp?1797
38. http://www.lukew.com/ff/entry.asp?1797
39. http://www.lukew.com/ff/entry.asp?1797
40. skeleton screens focus on the progress
41. focus on what you don’t have
42. focus on what you’re going to get
47. “It’s solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use.
49. eye candy
51. people like beautiful things
52. https://flic.kr/p/9GkYGC perception of performance
54. http://livingwithlag.com/
55. 100ms
56. 100ms
57. 100ms 1%
58. 400ms
59. 400ms 9%
60. creates a connection
64. eye candy
 perceived performance
 creates a connection
68. hard to value what you can’t see
71. tell people you’re working for them
72. feedback shows progress
73. feedback eases anxiety
75. https://flic.kr/p/7WcQwA
76. address anxiety https://flic.kr/p/7bzcph
77. care
79. `
80. `
81. http://bit.ly/1rfjmzU
82. <200ms http://bit.ly/1rfjmzU \
83. “A rule of thumb: However long you think you need, half it. ! Rachel Nabors Award Winning Cartoonist
84. “A rule of thumb: However long you think you need, half it. ! Then half it again! Rachel Nabors Award Winning Cartoonist
85. “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
86. gradual reduction
87. http://bit.ly/1pgJ8OD
88. http://bit.ly/1pgJ8OD
89. http://bit.ly/1pgJ8OD
90. progress matters the most
95. 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
96. task completion
97. https://flic.kr/p/5TmARq
98. choreography
99. https://flic.kr/p/9GkYGC
101. © Warner Bros.
102. © Warner Bros.
106. http://omelekhin.ru/portfolio/web_navigation/
107. “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
109. © Warner Bros.
110. focus on the progress
111. address anxiety
112. be deliberate
113. when we get there
114. how we get there
115. https://flic.kr/p/9dCJNf
116. 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