The Psychology of Speed

Why does speed matter?

It's all about the wait... and we know a lot about waiting ...

The Psychology of Waiting Lines [PDF]

Waiting is frustrating, demoralizing, agonizing, aggravating, annoying, time consuming and incredibly expensive.

Three rules for waiting times

1. Unoccupied time feels longer than occupied time
2. Anxiety makes waits seem longer
3. Unknown waits feel longer than known waits

Humans hate wasted time

• Give feedback within 100ms
• Update every 1,000ms
• Complete actions within 3,000ms

Miller, R. B. (1968). Response time in man-computer conversational transactions.

Occupying time on the web

• Show something, fast
• Fill UX gaps
• Prioritise what matters

Show what you've got!

Show what you've got!

Show what you've got!

• No blocking scripts
• No external CSS
• HTML doc < 50kB

Fill UX gaps

Learn from Games?

Loading screen patent finally expires.

Fill UX gaps

Dino?

press 'q' to jump!

Prioritise what matters

Breaking News at 1000ms

Measuring time to start

• Time to Title
• First Contentful Paint
• Hero Element timers

Anxiety on the Web

• Did that work?
• Can I click on it yet?
• Is it broken?

Reducing Anxiety

• Maintain Visual Stability
• Use optimistic UI patterns
• Give user feedback

Maintaining stability

Reducing layout shifts

• font-display: [ optional | block ] 😕
• pre-allocate ad slots
• size attributes on images
• box-sizing: border-box
• overflow-y: scroll

Optimistic UI (2)

Give user feedback

Give user feedback

• Keep it in context
• Animation buys you 250 - 500ms
• :active is a quick fix

Reducing Anxiety

• Maintain Visual Stability
• Use optimistic UI patterns
• Give user feedback

Uncertainty on the web

• Am I in the right place?
• How long is this going to take?
• Is it broken?

Creating certainty

• Anchor your user
• Give timelines
• Active listening / feedback

Site logos are user anchors

Forbes Article WPT Result

Provide visual feedback

Humanise the Task

Explain the wait

Explain the value of the wait

autotrader.co.uk

Combined wait strategy

skyscanner.net

What about when things go wrong?

Sometimes, simply naming what the person is probably feeling is a way of communicating the validity of that feeling.

Parent Effectiveness Training: The Tested New Way to Raise Responsible Children

appreciate that offering no support for the user's emotional state during or after a system failure is tantamount to ignoring emotion, which can lead to a loss of opportunity for continued interaction

This computer responds to user frustration: Theory, design and results

Simply recognising a poor experience
resulted in 50% longer game play

Active feedback strategy

• Measure how long it normally takes
• Set a budget based on 90th - 95th percentile
• Show an apologetic message after this time

Active feedback in the wild

Measuring how long it takes

4.7s?

Measuring how long it takes

2.4s?

Reducing unexplained waits

• Show your logo early
• Humanise the wait
• Use progress indicators
• Acknowledge when UX is slow

How do we measure waits?

Web wait types

1. Page loads
2. In-app Navigations
3. User Actions

Goals for maximum engagement

Based on aggregate data - what are yours?

Layout Shift Impacts Bounce

Cumulative Layout Shift in the Real World

Goals for maximum engagement

Based on aggregate data - what are yours?

🤔 this sounds familiar...

Google is measuring these for SEO

web.dev/vitals

Are Core Web Vitals the holy grail?

Core Web Vitals are proxies for UX

• Only on Chromium-based browsers
• Designed to be universal
• FID might not be actionable
• SPA soft navigations not supported in CRUX

Core Web Vitals provide a bridge between business and technology, but may not be the best metrics for your application.

What about user interactions?

performance.mark('spinner-start');
//... waiting ...
performance.mark('spinner-end');
performance.measure('wait-duration','spinner-start','spinner-end');
						

performance.mark() | MDN

RUM is critical

• Capture data in the client
• Support 100% data capture
• Custom percentiles
• User Timing support
• XHR / Fetch capture

Akamai mPulse

Measuring & Improving Core Web Vitals

Hacking perceived waitsAKA: making waits feel less waity

Anticipate Behaviourcheat with mouse events

Use to anticipate navigations, product viewer actions etc.

Use skeleton UI with caution 💀

Implementing Skeleton Screens in React

Non-linear progress indicators

Use the platform

• Native lazy-loading
• Responsive images (with size)
• Pure HTML render
• CSS animation & active states
• Preload (sparingly)