In Between at Smashing Conf Whistler, 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
December 11, 2014

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

December 11, 2014
Tweet

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.

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. © Warner Bros.

  13. © Warner Bros.

  14. None
  15. © Warner Bros.

  16. © Warner Bros.

  17. 1. Story sketches ! ! !

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

    !
  19. None
  20. 1. Story sketches ! ! ! ! ! 3. Character

    Layouts ! ! 2. Storyboard ! !
  21. None
  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
  25. None
  26. None
  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

  35. None
  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

  39. None
  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

  47. None
  48. None
  49. None
  50. None
  51. “It’s solely intended to enhance the user’s perception of your

    app as quick to launch and immediately ready for use.
  52. None
  53. eye candy

  54. None
  55. people like beautiful things

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

  58. None
  59. http://livingwithlag.com/

  60. 100ms

  61. 100ms

  62. 100ms 1%

  63. 400ms

  64. 400ms 9%

  65. creates a connection

  66. None
  67. None
  68. eye candy
 perceived performance
 creates a connection

  69. None
  70. None
  71. None
  72. hard to value what you can’t see

  73. None
  74. tell people you’re working for them

  75. feedback shows progress

  76. feedback eases anxiety

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

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

  80. care

  81. None
  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

  95. None
  96. None
  97. None
  98. None
  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

  104. None
  105. © Warner Bros.

  106. © Warner Bros.

  107. None
  108. None
  109. None
  110. None
  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
  114. None
  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