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
   

   View Slide

2. © Warner Bros.
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. © Warner Bros.
   

   View Slide

8. © Warner Bros.
   

   View Slide

9. © Warner Bros.
   

   View Slide

10. © Warner Bros.
    

    View Slide

11. 1. Story sketches
    !
    !
    !
    

    View Slide

12. !
    2. Storyboard
    !
    !
    1. Story sketches
    !
    !
    !
    

    View Slide

13. View Slide

14. 1. Story sketches
    !
    !
    !
    !
    !
    3. Character Layouts
    !
    !
    2. Storyboard
    !
    !
    

    View Slide

15. View Slide

16. 24fps
    

    View Slide

17. !
    2. Storyboard
    !
    !
    !
    !
    3. Character Layouts
    !
    !
    !
    !
    4. Extremes
    1. Story sketches
    !
    !
    !
    

    View Slide

18. !
    !
    !
    !
    5. In-Betweeners
    !
    !
    3. Character Layouts
    !
    !
    2. Storyboard
    !
    !
    1. Story sketches
    !
    !
    !
    !
    !
    !
    4. Extremes
    

    View Slide

19. View Slide

20. View Slide

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
    

    View Slide

22. “Just so; every point on a line is of equal
    importance. That is rule 1 of all great
    drawing.
    !
    Chuck Jones
    

    View Slide

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
    

    View Slide

24. in-between moments
    shape perception
    

    View Slide

25. View Slide

26. x
    y
    

    View Slide

27. the web has a z-axis
    

    View Slide

28. the web has a z-axis
    time
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. https://flic.kr/p/hthFjf
    

    View Slide

33. rub some
    dirt on it
    https://flic.kr/p/hthFjf
    

    View Slide

34. progress bars are the
    hold music of the internet
    

    View Slide

35. View Slide

36. progress bars focus
    on the waiting
    

    View Slide

37. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

38. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

39. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

40. skeleton screens
    focus on the progress
    

    View Slide

41. focus on what
    you don’t have
    

    View Slide

42. focus on what
    you’re going to get
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. “It’s solely intended to enhance
    the user’s perception of your
    app as quick to launch and
    immediately ready for use.
    

    View Slide

48. View Slide

49. eye candy
    

    View Slide

50. View Slide

51. people like
    beautiful things
    

    View Slide

52. https://flic.kr/p/9GkYGC
    perception
    of performance
    

    View Slide

53. View Slide

54. http://livingwithlag.com/
    

    View Slide

55. 100ms
    

    View Slide

56. 100ms
    

    View Slide

57. 100ms 1%
    

    View Slide

58. 400ms
    

    View Slide

59. 400ms 9%
    

    View Slide

60. creates
    a connection
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. eye candy

    perceived performance

    creates a connection
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. hard to value
    what you can’t see
    

    View Slide

69. View Slide

70. View Slide

71. tell people you’re
    working for them
    

    View Slide

72. feedback
    shows progress
    

    View Slide

73. feedback
    eases anxiety
    

    View Slide

74. View Slide

75. https://flic.kr/p/7WcQwA
    

    View Slide

76. address
    anxiety
    https://flic.kr/p/7bzcph
    

    View Slide

77. care
    

    View Slide

78. View Slide

79. `
    

    View Slide

80. `
    

    View Slide

81. http://bit.ly/1rfjmzU
    

    View Slide

82. <200ms
    http://bit.ly/1rfjmzU
    \
    

    View Slide

83. “A rule of thumb: However long you
    think you need, half it.
    !
    Rachel Nabors
    Award Winning Cartoonist
    

    View Slide

84. “A rule of thumb: However long you
    think you need, half it.
    !
    Then half it again!
    Rachel Nabors
    Award Winning Cartoonist
    

    View Slide

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
    

    View Slide

86. gradual
    reduction
    

    View Slide

87. http://bit.ly/1pgJ8OD
    

    View Slide

88. http://bit.ly/1pgJ8OD
    

    View Slide

89. http://bit.ly/1pgJ8OD
    

    View Slide

90. progress
    matters the most
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. task
    completion
    

    View Slide

97. https://flic.kr/p/5TmARq
    

    View Slide

98. choreography
    

    View Slide

99. https://flic.kr/p/9GkYGC
    

    View Slide

100. View Slide

101. © Warner Bros.
     

     View Slide

102. © Warner Bros.
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. http://omelekhin.ru/portfolio/web_navigation/
     

     View Slide

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
     

     View Slide

108. View Slide

109. © Warner Bros.
     

     View Slide

110. focus on
     the progress
     

     View Slide

111. address
     anxiety
     

     View Slide

112. be
     deliberate
     

     View Slide

113. when we get there
     

     View Slide

114. how we get there
     

     View Slide

115. https://flic.kr/p/9dCJNf
     

     View Slide

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
     

     View Slide