The Psychology of Web Performance [Beyond Tellerrand 2023]

What do the most successful websites and apps have in common? They're all fast. Faster sites have happier users, and those happy users visit longer and spend more. But why is that?

Enjoy a brief history of user experience and web performance, highlighting fascinating research into the neuroscience of speed and studies that connect the dots between site speed and user experience. You'll take away insights into why slow sites enrage you, and why you should prioritize making your own sites and apps as fast as possible for your own users.

Transcript

1. 1 Image: Control Vectors by Vecteezy
3. Impact of latency on human-computer interaction
4. Impact of latency on human-computer interaction That time Dad broke the stereo
5. @tameverts webperf.social/@tammy
7. Alarm Vectors by Vecteezy
8. usability expert
9. student usability expert
10. web performance?!?!?
11. If you do not consider time a crucial usability factor, you’re missing a huge aspect of the user experience.
12. 80-90% of end-user response time happens at the front end
13. 80-90% of end-user response time happens at the front end code
14. 80-90% of end-user response time happens at the front end code design
15. 80-90% of end-user response time happens at the front end code design content
16. 80-90% of end-user response time happens at the front end code design content third parties
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
22. Waiting is hard
23. Passive waiting is harder
24. Perception is more important than reality
25. Perception is more important than reality
26. How do we perceive time?
33. When the span between heartbeats is longer, time feels slower* *by milliseconds
34. Women tend to underestimate prospective time estimations compared to men, suggesting they may perceive time to be passing by more slowly
37. Have you ever thought time is speeding up as you get older?
38. Have you ever thought time is speeding up as you get older? It is.
39. Over time, the rate at which we process visual information slows down. This is what makes time ‘speed up’ as we grow older.
40. Users aged 65+ are 43% slower at using websites than users aged 21-55 nngroup.com/articles/usability-for-senior-citizens/
41. 86,400 seconds 1,440 minutes
42. 86,400 seconds 1,440 minutes 1 day
45. 35 minutes 7 Sharonas
46. sex age boredom pain heart rate colour
48. How does memory work?
52. What is “flow”?
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)
56. 56 Image by BalashMirzabey on Freepik It can take up to 23 minutes to regain focus after an interruption
57. 57 Productivity It can take up to 23 minutes to regain focus after an interruption
58. 58 Productivity Wellbeing It can take up to 23 minutes to regain focus after an interruption
59. How does all this apply to how we use technology?
61. The average web user believes they waste two days a year waiting for pages to load
62. What we say we want vs. what we need 1999 • 8 seconds 2006 • 4 seconds Now • 2 seconds
63. A wait longer than 2 seconds breaks concentration and affects productivity Robert Miller Response Time in Man-Computer Conversational Transactions
64. A wait longer than 2 seconds breaks concentration and affects productivity Robert Miller Response Time in Man-Computer Conversational Transactions 1968
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
67. What do we know about how people perceive speed on the web?
68. 68 Jakob Nielsen, Website Response Times
69. 69 When do we start to interact with a page?
70. 70 Jakob Nielsen, Website Response Times
71. “web stress” When apps or sites are slow, we concentrate up to 50% harder to stay on task
73. People experience slowness in the moment
74. Frustration peaks between 11.5 and 26% during browsing and checkout
75. Slowness affects perception of everything
76. fast slow
77. Content “boring” Visual design “tacky” “confusing” Usability “frustrating” “hard-to-navigate”
78. Slowness affects long-term behaviour
80. What we think we want does not always make us happy
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
88. Slowness is a feeling, not a thought
89. “Phone rage”: How people react to slow mobile sites Tealeaf/Harris Interactive
91. nicj.net/measuring-continuity/
93. nicj.net/measuring-continuity/
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…
95. How do you measure perception …at scale?
96. Biggest measurement mistakes 1. Not measuring at all You can’t fix what you don’t measure.
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.”
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).
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.
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
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.
102. Optimize the entire experience 1. Eliminate confusion whenever possible Don Norman, Cofounder/emeritus, Nielsen Norman Group
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
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
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
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
107. 107 Create an experience that isn’t just tolerable… it’s delightful
108. Time is life
109. Thank you! @tameverts webperf.social/@tammy
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