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
   

   View Slide

2. https://flic.kr/p/qnMjux
   What she said.
   

   View Slide

3. © Warner Bros.
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. © Warner Bros.
    

    View Slide

13. © Warner Bros.
    

    View Slide

14. View Slide

15. © Warner Bros.
    

    View Slide

16. © Warner Bros.
    

    View Slide

17. 1. Story sketches
    !
    !
    !
    

    View Slide

18. !
    2. Storyboard
    !
    !
    1. Story sketches
    !
    !
    !
    

    View Slide

19. View Slide

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

    View Slide

21. View Slide

22. 24fps
    

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

30. in-between moments
    shape perception
    

    View Slide

31. View Slide

32. x
    y
    

    View Slide

33. the web has a z-axis
    

    View Slide

34. the web has a z-axis
    time
    

    View Slide

35. View Slide

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

    View Slide

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

    View Slide

38. progress bars are the
    hold music of the internet
    

    View Slide

39. View Slide

40. progress bars focus
    on the waiting
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. skeleton screens
    focus on the progress
    

    View Slide

45. focus on what
    you don’t have
    

    View Slide

46. focus on what
    you’re going to get
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

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

    View Slide

52. View Slide

53. eye candy
    

    View Slide

54. View Slide

55. people like
    beautiful things
    

    View Slide

56. View Slide

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

    View Slide

58. View Slide

59. http://livingwithlag.com/
    

    View Slide

60. 100ms
    

    View Slide

61. 100ms
    

    View Slide

62. 100ms 1%
    

    View Slide

63. 400ms
    

    View Slide

64. 400ms 9%
    

    View Slide

65. creates
    a connection
    

    View Slide

66. View Slide

67. View Slide

68. eye candy

    perceived performance

    creates a connection
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. hard to value
    what you can’t see
    

    View Slide

73. View Slide

74. tell people you’re
    working for them
    

    View Slide

75. feedback
    shows progress
    

    View Slide

76. feedback
    eases anxiety
    

    View Slide

77. View Slide

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

    View Slide

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

    View Slide

80. care
    

    View Slide

81. View Slide

82. `
    

    View Slide

83. `
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

89. gradual
    reduction
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. progress
    matters the most
    

    View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. reduce
     friction
     

     View Slide

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

     View Slide

102. choreography
     

     View Slide

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

     View Slide

104. View Slide

105. © Warner Bros.
     

     View Slide

106. © Warner Bros.
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

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

     View Slide

112. Actual demo
     

     View Slide

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
     

     View Slide

114. View Slide

115. © Warner Bros.
     

     View Slide

116. focus on
     the progress
     

     View Slide

117. address
     anxiety
     

     View Slide

118. be
     deliberate
     

     View Slide

119. when we get there
     

     View Slide

120. how we get there
     

     View Slide

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

     View Slide

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
     

     View Slide