Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Space Between at Beyond Tellerand Berlin, 2014

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.

Tim Kadlec

November 03, 2014
Tweet

More Decks by Tim Kadlec

Other Decks in Design

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
    [email protected]

    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. 1024
    768

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

    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
    [email protected]

    View Slide