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

In Between at Smashing Conf Whistler, 2014

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.

Tim Kadlec

December 11, 2014
Tweet

More Decks by Tim Kadlec

Other Decks in Design

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

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

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

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

    View Slide