The Space Between at Beyond Tellerand Berlin, 2014

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
November 03, 2014

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.

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

November 03, 2014
Tweet

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.

  3. None
  4. None
  5. None
  6. None
  7. © Warner Bros.

  8. © Warner Bros.

  9. © Warner Bros.

  10. © Warner Bros.

  11. 1. Story sketches ! ! !

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

    !
  13. None
  14. 1. Story sketches ! ! ! ! ! 3. Character

    Layouts ! ! 2. Storyboard ! !
  15. None
  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
  19. None
  20. None
  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

  29. None
  30. None
  31. None
  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

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

  43. None
  44. None
  45. None
  46. None
  47. “It’s solely intended to enhance the user’s perception of your

    app as quick to launch and immediately ready for use.
  48. None
  49. eye candy

  50. None
  51. people like beautiful things

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

  53. None
  54. http://livingwithlag.com/

  55. 100ms

  56. 100ms

  57. 100ms 1%

  58. 400ms

  59. 400ms 9%

  60. creates a connection

  61. None
  62. None
  63. None
  64. eye candy
 perceived performance
 creates a connection

  65. None
  66. None
  67. None
  68. hard to value what you can’t see

  69. None
  70. None
  71. tell people you’re working for them

  72. feedback shows progress

  73. feedback eases anxiety

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

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

  77. care

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

  91. None
  92. None
  93. None
  94. None
  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

  100. None
  101. © Warner Bros.

  102. © Warner Bros.

  103. None
  104. None
  105. None
  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
  108. None
  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