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

The Psychology Of Speed

The Psychology Of Speed

The positive correlation between web performance and more conversions on websites is obvious. Results of many studies were unanimous: fast websites win.

But what are the key timings that make a website seem fast? And what are their origins?

Gain insight into the "Psychology of Speed": human computer interaction timings and their importance for great user experiences. Learn how you can leverage these timings to improve usability, making users stay longer & come back sooner.

Tobias Baldauf

February 05, 2015
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. "The Psychology
    of Speed"
    Tobias Baldauf | [email protected] | @tbaldauf 1

    View full-size slide

  2. Speed &
    Usability
    Tobias Baldauf | [email protected] | @tbaldauf 2

    View full-size slide

  3. Where We Are Headed
    Tobias Baldauf | [email protected] | @tbaldauf 3

    View full-size slide

  4. 1.
    Human computer
    interaction thresholds &
    their origins
    Tobias Baldauf | [email protected] | @tbaldauf 4

    View full-size slide

  5. 2.
    Implications for
    web performance &
    user experience
    Tobias Baldauf | [email protected] | @tbaldauf 5

    View full-size slide

  6. Tobias Baldauf | [email protected] | @tbaldauf 6

    View full-size slide

  7. At 15km
    Light: ~1/20.000s
    Sound: ~44s
    Tobias Baldauf | [email protected] | @tbaldauf 7

    View full-size slide

  8. Tobias Baldauf | [email protected] | @tbaldauf 8

    View full-size slide

  9. Thor
    Lighting: Hammer
    Thunder: Hooves
    Tobias Baldauf | [email protected] | @tbaldauf 9

    View full-size slide

  10. Mere Mortals
    Cause to Effect > 100ms
    No Causality
    Tobias Baldauf | [email protected] | @tbaldauf 10

    View full-size slide

  11. Anything < 100ms
    however...
    Tobias Baldauf | [email protected] | @tbaldauf 11

    View full-size slide

  12. Tobias Baldauf | [email protected] | @tbaldauf 12

    View full-size slide

  13. Direct Attribution
    of Causality
    Tobias Baldauf | [email protected] | @tbaldauf 13

    View full-size slide

  14. Tobias Baldauf | [email protected] | @tbaldauf 14

    View full-size slide

  15. Saltatory Conduction
    through Nodes of Ranvier
    1.2m in 100ms
    Tobias Baldauf | [email protected] | @tbaldauf 15

    View full-size slide

  16. "We're really aiming very, very high
    here… at something like 100
    milliseconds."
    — Urs Hölzle, Google Senior VP Operations, June 2010
    Tobias Baldauf | [email protected] | @tbaldauf 16

    View full-size slide

  17. "1 second. Highest acceptable
    response time. Download times
    above 1 second interrupt the user
    experience."
    — Wikipedia: "Word Wide Web", Speed Issues
    Tobias Baldauf | [email protected] | @tbaldauf 17

    View full-size slide

  18. Tobias Baldauf | [email protected] | @tbaldauf 18

    View full-size slide

  19. 1 Second
    Communication
    Threshold
    Tobias Baldauf | [email protected] | @tbaldauf 19

    View full-size slide

  20. Tobias Baldauf | [email protected] | @tbaldauf 20

    View full-size slide

  21. Experiment
    "Call me Ishmael. Some years ago, having little or no
    money in my purse, and nothing particular to interest me
    on shore, I thought I would sail about a little and see the
    watery part of the world."
    [...]
    "If they but knew it --[1s]-- almost all men in their degree
    --[1s]-- some time or other --[1s]-- cherish very nearly the
    same feelings towards the ocean with me."
    Tobias Baldauf | [email protected] | @tbaldauf 21

    View full-size slide

  22. Train of Thought
    Tobias Baldauf | [email protected] | @tbaldauf 22

    View full-size slide

  23. Communication
    is Control
    Tobias Baldauf | [email protected] | @tbaldauf 23

    View full-size slide

  24. Tobias Baldauf | [email protected] | @tbaldauf 24

    View full-size slide

  25. The Illusion
    of Choice
    Tobias Baldauf | [email protected] | @tbaldauf 25

    View full-size slide

  26. Tobias Baldauf | [email protected] | @tbaldauf 26

    View full-size slide

  27. Tobias Baldauf | [email protected] | @tbaldauf 27

    View full-size slide

  28. Tobias Baldauf | [email protected] | @tbaldauf 28

    View full-size slide

  29. Tobias Baldauf | [email protected] | @tbaldauf 29

    View full-size slide

  30. Tobias Baldauf | [email protected] | @tbaldauf 30

    View full-size slide

  31. 100ms
    1 Second
    The Illusion of Speed
    Tobias Baldauf | [email protected] | @tbaldauf 31

    View full-size slide

  32. Tobias Baldauf | [email protected] | @tbaldauf 32

    View full-size slide

  33. Tobias Baldauf | [email protected] | @tbaldauf 33

    View full-size slide

  34. Tobias Baldauf | [email protected] | @tbaldauf 34

    View full-size slide

  35. Tobias Baldauf | [email protected] | @tbaldauf 35

    View full-size slide

  36. Tobias Baldauf | [email protected] | @tbaldauf 36

    View full-size slide

  37. Tobias Baldauf | [email protected] | @tbaldauf 37

    View full-size slide

  38. Tobias Baldauf | [email protected] | @tbaldauf 38

    View full-size slide

  39. Tobias Baldauf | [email protected] | @tbaldauf 39

    View full-size slide

  40. Tobias Baldauf | [email protected] | @tbaldauf 40

    View full-size slide

  41. Tobias Baldauf | [email protected] | @tbaldauf 41

    View full-size slide

  42. Median Time To Interact
    (TTI) 2013 vs. 2014
    5.3s vs. 6.5s
    Tobias Baldauf | [email protected] | @tbaldauf 42

    View full-size slide

  43. Median Page Weight
    2013 vs. 2014
    1480kb vs. 1795kb
    Tobias Baldauf | [email protected] | @tbaldauf 43

    View full-size slide

  44. 100ms
    1 Second
    3.5 Seconds
    6.5 Seconds
    8+ Seconds
    Faster Users
    Slower Web
    Tobias Baldauf | [email protected] | @tbaldauf 44

    View full-size slide

  45. Tobias Baldauf | [email protected] | @tbaldauf 45

    View full-size slide

  46. Tobias Baldauf | [email protected] | @tbaldauf 46

    View full-size slide

  47. Tobias Baldauf | [email protected] | @tbaldauf 47

    View full-size slide

  48. Tobias Baldauf | [email protected] | @tbaldauf 48

    View full-size slide

  49. Tobias Baldauf | [email protected] | @tbaldauf 49

    View full-size slide

  50. Tobias Baldauf | [email protected] | @tbaldauf 50

    View full-size slide

  51. Tobias Baldauf | [email protected] | @tbaldauf 51

    View full-size slide

  52. Tobias Baldauf | [email protected] | @tbaldauf 52

    View full-size slide

  53. Tobias Baldauf | [email protected] | @tbaldauf 53

    View full-size slide

  54. Takeaways
    Tobias Baldauf | [email protected] | @tbaldauf 54

    View full-size slide

  55. Help create usable
    websites
    Tobias Baldauf | [email protected] | @tbaldauf 55

    View full-size slide

  56. Give positive,
    encouraging feedback
    Tobias Baldauf | [email protected] | @tbaldauf 56

    View full-size slide

  57. Tobias Baldauf | [email protected] | @tbaldauf 57

    View full-size slide

  58. Tobias Baldauf
    [email protected]
    @tbaldauf
    Tobias Baldauf | [email protected] | @tbaldauf 58

    View full-size slide