The Psychology of Web Performance [Beyond Tellerrand 2023]

Transcript

1. 1
   Image: Control Vectors by Vecteezy
   

   View Slide

2. View Slide

3. Impact of latency
   on human-computer interaction
   

   View Slide

4. Impact of latency
   on human-computer interaction
   That time Dad broke the stereo
   

   View Slide

5. @tameverts
   webperf.social/@tammy
   

   View Slide

6. View Slide

7. Alarm Vectors by Vecteezy
   

   View Slide

8. usability expert
   

   View Slide

9. student
   usability expert
   

   View Slide

10. web performance?!?!?
    

    View Slide

11. If you do not consider time
    a crucial usability factor,
    you’re missing a huge aspect
    of the user experience.
    

    View Slide

12. 80-90% of end-user response time
    happens at the front end
    

    View Slide

13. 80-90% of end-user response time
    happens at the front end
    code
    

    View Slide

14. 80-90% of end-user response time
    happens at the front end
    code
    design
    

    View Slide

15. 80-90% of end-user response time
    happens at the front end
    code
    design
    content
    

    View Slide

16. 80-90% of end-user response time
    happens at the front end
    code
    design
    content
    third parties
    

    View Slide

17. View Slide

18. Made pages 1.9 seconds faster, increased
    conversion rate by 94%
    1-second improvement, 14% decrease in
    bounce rate and 13% increase in conversions
    Improved Largest Contentful Paint by 31%,
    increased sales by 8%
    WPOstats.com
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. Waiting is hard
    

    View Slide

23. Passive waiting is harder
    

    View Slide

24. Perception is more important
    than reality
    

    View Slide

25. Perception is more important
    than reality
    

    View Slide

26. How do we perceive time?
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. 31
    

    View Slide

32. View Slide

33. When the span between heartbeats
    is longer, time feels slower*
    *by milliseconds
    

    View Slide

34. Women tend to underestimate
    prospective time estimations compared to men,
    suggesting they may perceive time
    to be passing by more slowly
    

    View Slide

35. View Slide

36. 36
    

    View Slide

37. Have you ever thought
    time is speeding up as you get older?
    

    View Slide

38. Have you ever thought
    time is speeding up as you get older?
    It is.
    

    View Slide

39. Over time, the rate at which we process
    visual information slows down.
    This is what makes time ‘speed up’
    as we grow older.
    

    View Slide

40. Users aged 65+
    are 43% slower
    at using websites
    than users aged 21-55
    nngroup.com/articles/usability-for-senior-citizens/
    

    View Slide

41. 86,400 seconds
    1,440 minutes
    

    View Slide

42. 86,400 seconds
    1,440 minutes
    1 day
    

    View Slide

43. View Slide

44. 44
    

    View Slide

45. 35 minutes
    7 Sharonas
    

    View Slide

46. sex
    age
    boredom
    pain
    heart rate
    colour
    

    View Slide

47. View Slide

48. How does memory work?
    

    View Slide

49. 49
    

    View Slide

50. View Slide

51. 51
    

    View Slide

52. What is “flow”?
    

    View Slide

53. “…a state in which people are so involved
    in an activity that nothing else seems to matter;
    the experience is so enjoyable that people
    will continue to do it even at great cost,
    for the sheer sake of doing it”
    Mihály Csíkszentmihályi
    Flow: The Psychology of Optimal Experience (1990)
    

    View Slide

54. 54
    

    View Slide

55. 55
    

    View Slide

56. 56
    Image by BalashMirzabey on Freepik
    It can take up to 23 minutes
    to regain focus after an interruption
    

    View Slide

57. 57
    Productivity
    It can take up to 23 minutes
    to regain focus after an interruption
    

    View Slide

58. 58
    Productivity
    Wellbeing
    It can take up to 23 minutes
    to regain focus after an interruption
    

    View Slide

59. How does all this apply
    to how we use technology?
    

    View Slide

60. 60
    

    View Slide

61. The average web user believes they waste
    two days a year waiting for pages to load
    

    View Slide

62. What we say we want vs. what we need
    1999 • 8 seconds
    2006 • 4 seconds
    Now • 2 seconds
    

    View Slide

63. A wait longer than 2 seconds
    breaks concentration and affects productivity
    Robert Miller
    Response Time in Man-Computer Conversational Transactions
    

    View Slide

64. A wait longer than 2 seconds
    breaks concentration and affects productivity
    Robert Miller
    Response Time in Man-Computer Conversational Transactions
    1968
    

    View Slide

65. 65
    “We want you to be able to flick
    from one page to another as quickly
    as you can flick a page on a book.
    So, we’re really aiming very, very high
    here… at something like 100 milliseconds.”
    Urs Hölzle
    SVP Engineering, Google
    

    View Slide

66. View Slide

67. What do we know about
    how people perceive speed
    on the web?
    

    View Slide

68. 68
    Jakob Nielsen, Website Response Times
    

    View Slide

69. 69
    When do we start to interact with a page?
    

    View Slide

70. 70
    Jakob Nielsen, Website Response Times
    

    View Slide

71. “web stress”
    When apps or sites are slow,
    we concentrate up to 50% harder
    to stay on task
    

    View Slide

72. View Slide

73. People experience slowness
    in the moment
    

    View Slide

74. Frustration peaks between 11.5 and 26%
    during browsing and checkout
    

    View Slide

75. Slowness affects
    perception of everything
    

    View Slide

76. fast slow
    

    View Slide

77. Content “boring”
    Visual design “tacky”
    “confusing”
    Usability “frustrating”
    “hard-to-navigate”
    

    View Slide

78. Slowness affects
    long-term behaviour
    

    View Slide

79. View Slide

80. What we think we want
    does not always make us happy
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. “When, as with the Progressive JPEG
    method, image rendition is a two-stage
    process in which an initially coarse image
    snaps into sharp focus, cognitive fluency is
    inhibited and the brain has to work slightly
    harder to make sense of what is being
    displayed.”
    Dr. David Lewis
    Chair, Mindlab International
    

    View Slide

86. View Slide

87. View Slide

88. Slowness is a feeling,
    not a thought
    

    View Slide

89. “Phone rage”: How people react to slow mobile sites
    Tealeaf/Harris Interactive
    

    View Slide

90. View Slide

91. nicj.net/measuring-continuity/
    

    View Slide

92. View Slide

93. nicj.net/measuring-continuity/
    

    View Slide

94. …and so we might be front-end engineers,
    we might be devs, we might be ops,
    but what we really are is perception brokers.”
    Steve Souders
    Author, High Performance Web Sites
    “The real thing we are after is to create
    a user experience that people love
    and they feel is fast…
    

    View Slide

95. How do you measure perception
    …at scale?
    

    View Slide

96. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    

    View Slide

97. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    

    View Slide

98. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).
    

    View Slide

99. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).
    4. Not monitoring real users
    Synthetic measurements are only snapshots.
    

    View Slide

100. Biggest measurement mistakes
     1. Not measuring at all
     You can’t fix what you don’t measure.
     2. Assuming your experience is universal
     “It’s fast enough on my desktop/phone.”
     3. Not monitoring continuously
     Things can change suddenly (e.g., server issues, third parties).
     4. Not monitoring real users
     Synthetic measurements are only snapshots.
     5. Not focusing on the right metrics
     e.g., “Load time” is dated; Core Web Vitals are only available in Chromium browsers
     

     View Slide

101. Biggest measurement mistakes
     1. Not measuring at all
     You can’t fix what you don’t measure.
     2. Assuming your experience is universal
     “It’s fast enough on my desktop/phone.”
     3. Not monitoring continuously
     Things can change suddenly (e.g., server issues, third parties).
     4. Not monitoring real users
     Synthetic measurements are only snapshots.
     5. Not focusing on the right metrics
     e.g., “Load time” is dated; Core Web Vitals are only available in Chromium browsers
     6. Looking only at averages or medians
     Measure at 75th and 95th percentiles to understand the breadth of user experiences.
     

     View Slide

102. Optimize the entire experience
     1. Eliminate confusion whenever possible
     Don Norman, Cofounder/emeritus, Nielsen Norman Group
     

     View Slide

103. Optimize the entire experience
     1. Eliminate confusion whenever possible
     2. Make the wait appropriate to the results
     Don Norman, Cofounder/emeritus, Nielsen Norman Group
     

     View Slide

104. Optimize the entire experience
     1. Eliminate confusion whenever possible
     2. Make the wait appropriate to the results
     3. Meet or exceed expectations
     Don Norman, Cofounder/emeritus, Nielsen Norman Group
     

     View Slide

105. Optimize the entire experience
     1. Eliminate confusion whenever possible
     2. Make the wait appropriate to the results
     3. Meet or exceed expectations
     4. End strong
     Don Norman, Cofounder/emeritus, Nielsen Norman Group
     

     View Slide

106. Made pages 1.9 seconds faster, increased
     conversion rate by 94%
     1-second improvement, 14% decrease in
     bounce rate and 13% increase in conversions
     Improved Largest Contentful Paint by 31%,
     increased sales by 8%
     WPOstats.com
     

     View Slide

107. 107
     Create an experience
     that isn’t just tolerable…
     it’s delightful
     

     View Slide

108. Time is life
     

     View Slide

109. Thank you!
     @tameverts
     webperf.social/@tammy
     

     View Slide

110. Why Waiting Is Torture
     nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
     Wrinkles in Subsecond Time Perception Are Synchronized to the Heart
     onlinelibrary.wiley.com/doi/abs/10.1111/psyp.14270
     Sex Differences in Time Perception During Self-paced Running
     ncbi.nlm.nih.gov/pmc/articles/PMC5065319/
     The Color Red Distorts Time Perception for Men, but Not for Women
     nature.com/articles/srep05899
     Why the Days Seem Shorter as We Get Older
     cambridge.org/core/journals/european-review/article/why-the-days-seem-shorter-as-we-get-older/
     Flow: The Psychology of Optimal Experience
     Mihaly Csikszentmihalyi
     The Cost of Interrupted Work: More Speed and Stress
     ics.uci.edu/~gmark/chi08-mark.pdf
     Response Time in Man-Computer Conversational Transactions
     dl.acm.org/doi/10.1145/1476589.1476628
     Website Response Times
     nngroup.com/articles/website-response-times/
     Progressive Image Rendering: Good or Evil?
     radware.com/blog/applicationdelivery/wpo/2014/09/progressive-image-rendering-good-evil/
     The Psychology of Waiting Lines
     Don Norman – jnd.org/the-psychology-of-waiting-lines/
     Sources
     

     View Slide