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 full-size slide

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

    View full-size slide

  3. © Warner Bros.

    View full-size slide

  4. © Warner Bros.

    View full-size slide

  5. © Warner Bros.

    View full-size slide

  6. © Warner Bros.

    View full-size slide

  7. © Warner Bros.

    View full-size slide

  8. 1. Story sketches
    !
    !
    !

    View full-size slide

  9. !
    2. Storyboard
    !
    !
    1. Story sketches
    !
    !
    !

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. “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 full-size slide

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

    View full-size slide

  15. “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 full-size slide

  16. in-between moments
    shape perception

    View full-size slide

  17. the web has a z-axis

    View full-size slide

  18. the web has a z-axis
    time

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. progress bars are the
    hold music of the internet

    View full-size slide

  22. progress bars focus
    on the waiting

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. skeleton screens
    focus on the progress

    View full-size slide

  27. focus on what
    you don’t have

    View full-size slide

  28. focus on what
    you’re going to get

    View full-size slide

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

    View full-size slide

  30. people like
    beautiful things

    View full-size slide

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

    View full-size slide

  32. http://livingwithlag.com/

    View full-size slide

  33. creates
    a connection

    View full-size slide

  34. eye candy

    perceived performance

    creates a connection

    View full-size slide

  35. hard to value
    what you can’t see

    View full-size slide

  36. tell people you’re
    working for them

    View full-size slide

  37. feedback
    shows progress

    View full-size slide

  38. feedback
    eases anxiety

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. “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 full-size slide

  46. gradual
    reduction

    View full-size slide

  47. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. progress
    matters the most

    View full-size slide

  52. 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 full-size slide

  53. reduce
    friction

    View full-size slide

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

    View full-size slide

  55. choreography

    View full-size slide

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

    View full-size slide

  57. © Warner Bros.

    View full-size slide

  58. © Warner Bros.

    View full-size slide

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

    View full-size slide

  60. “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 full-size slide

  61. © Warner Bros.

    View full-size slide

  62. focus on
    the progress

    View full-size slide

  63. address
    anxiety

    View full-size slide

  64. be
    deliberate

    View full-size slide

  65. when we get there

    View full-size slide

  66. how we get there

    View full-size slide

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

    View full-size slide

  68. 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 full-size slide