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

The Psychology Of Speed

Tobias Baldauf
February 05, 2015
Technology
2
230

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

See All by Tobias Baldauf
Actually Actionable Image Optimization
tbaldauf
0
28
Exciting WebPageTest Scripting - WebPerf Meetup Hamburg, 20230323
tbaldauf
0
590
Image Formats, Performance and Cognitive Load
tbaldauf
1
490
25% Faster Hotel Search. Web Performance? - trivago.
tbaldauf
1
250
Fake It 'Til You Make It - Prerendering Image Contents For Fun & Profit
tbaldauf
1
340
25% Faster Hotel Search. Web Performance? - trivago.
tbaldauf
3
670
Visual Quality Assessments for High Performance Images
tbaldauf
2
150
Your Hero Images Need You! Save the Day with HTTP2 Image Loading - HighLoad++ 2016
tbaldauf
2
140
Your Hero Images Need You! Save the Day with HTTP2 Image Loading - Akamai Edge Conference 2016
tbaldauf
1
120

Other Decks in Technology

See All in Technology
増え続ける公開アプリケーションへの悪意あるアクセス_多層防御を取り入れるSRE活動_.pdf
yoshiiryo1
0
280
LLM×Cloud Runでオンライン薬局の既存オペレーションを自動化した話
pharma_x_tech
0
710
ChatGPTを前に頭が真っ白を乗り越え人が答えることが困難な認知負荷MAXなタフクエスチョンをどんどん回答させてプロダクト価値を爆速探求するぞ/cognitive_load_question_and_chatgpt
moriyuya
2
340
AWS 初心者が取り組んだセキュリティ強化の2年間とこれから/Two years of security enhancement efforts by AWS beginners and the future
yayoi_dd
0
380
2023-09-05_OCIJP_まれによくあるマルチクラウドでDB-AP分離構成のこと
hk_shino
2
220
アジャイル開発と時代の流れに伴うサーバレスアーキテクチャの変化
yoshiitaka
6
3.4k
Chat & Shop Like Never Before Unleash LINE SHOPPING API
linedevth
0
200
"SMB vs. EP" プロダクト特性の違いから考える「何をつくる？つくらない？」
miyashino
0
430
Customer-Centricity Unleashed: Transforming Businesses with LINE Tech
linedevth
0
150
Develop Sales Automation Workflow on LINE
linedevth
0
170
Legacy Software: Not Really a Problem!
ewolff
2
120
cache rules everything
csswizardry
0
480

Featured

See All Featured
WebSockets: Embracing the real-time Web
robhawkes
58
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
16
1.4k
Code Review Best Practice
trishagee
53
13k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.8k
Rails Girls Zürich Keynote
gr2m
90
12k
A better future with KSS
kneath
230
16k
Product Roadmaps are Hard
iamctodd
42
8.7k
Web development in the modern age
philhawksworth
200
9.8k
Thoughts on Productivity
jonyablonski
55
3.1k
[Brighton Ruby 2023] The Magic of Rails
eileencodes
3
290
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
49
16k
Infographics Made Easy
chrislema
236
17k

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide