SlideShare a Scribd company logo
The
Perception
of Speed
@souders
The Perception of Speed
nytimes.com/2004/02/27/nyregion/27BUTT.html
2,500 of 3,250
buttons deactivated
nytimes.com/2004/02/27/nyregion/27BUTT.html
on every Underground
train, the doors are
operated by the driver
londonist.com/2013/04/why-are-there-buttons-on-tube-train-doors.php
The Perception of Speed
half the horsepower
of a Ford Fiesta
nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
increased distance
from gate to bags 6x
nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
uie.com/articles/download_time/
placed mirrors & TVs
in elevators & lobbies
uie.com/articles/download_time/
overestimate waittime
hide length of line
nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
speed
goodness
(work)
Creating your blog…
news.ycombinator.com/item?id=2007385
update coin count
at slower rate
news.ycombinator.com/item?id=2007385
The Perception of Speed
uie.com/articles/download_time/
“Amazon.com, rated as one of
the fastest sites by users, was
really the slowest”
The Perception of Speed
connect
DNS time to first byte content
previous page isn’t cleared
until BODY is created
click link create BODY start render
stevesouders.com/blog/2012/12/05/clear-current-page-ux/
<html><script <body><script
1. tab icon
5. reload icon
2. status bar
6. network
4. progress bar
3. cursor
stevesouders.com/blog/2013/06/16/browser-busy-indicators/
Busy Indicators
stevesouders.com/blog/2013/06/16/browser-busy-indicators/
tests
click link
<SCRIPT ASYNC ...>
dynamic script before onload
dynamic iframe
dynamic script
dynamic stylesheet
dynamic image
dynamic CSS background image
XHR
long JS execution
stevesouders.com/blog/2013/06/16/browser-busy-indicators/
tests
click link
<SCRIPT ASYNC ...>
dynamic script before onload
dynamic iframe
dynamic script
dynamic stylesheet
dynamic image
dynamic CSS background image
XHR
long JS execution
}
}
sync UX
async UX
no busy indicators
Google Plus
Facebook
Twitter
WebView:non-standard busy
Native Apps: no busy indicators!
The Perception of Speed
play.google.com/store/apps/details?id=com.linkbubble.playstore
play.google.com/store/apps/details?id=com.linkbubble.playstore
“natural” progress indicators
The Perception of Speed
The Perception of Speed
optimistic actions
Instagram
• “Like” button changes immediately
• server update happens in background
lukew.com/ff/entry.asp?1759
skeleton screens
blank page that is gradually filled
lukew.com/ff/entry.asp?1797
The Perception of Speed
The Perception of Speed
The Perception of Speed
The Perception of Speed
The Perception of Speed
The Perception of Speed
“Perception
Brokers!”
Steve Souders
@souders

More Related Content

PDF
Metrics of Joy
PDF
(2006) The Challenge of Forgeries and Perception of Dynamic Signature Verific...
PDF
Dynamic balance concept
PDF
Colour perception
PPTX
Dynamics of perception
PPTX
How fast are we going now?
DOC
A study of consumer perception on big bazaar
PPT
Chapter 6 Consumer Perception
Metrics of Joy
(2006) The Challenge of Forgeries and Perception of Dynamic Signature Verific...
Dynamic balance concept
Colour perception
Dynamics of perception
How fast are we going now?
A study of consumer perception on big bazaar
Chapter 6 Consumer Perception

More from Steve Souders (20)

PPTX
Make JavaScript Faster
PPTX
Design+Performance
PPTX
Design+Performance Velocity 2015
PPTX
do u webview?
PPTX
High Performance Web Components
PPTX
High Performance Web Components
PDF
Prebrowsing - Velocity NY 2013
PPTX
Cache is King
PPTX
High Performance Snippets
PPTX
Your Script Just Killed My Site
PPTX
JavaScript Performance (at SFJS)
PPTX
High Performance Mobile (SF/SV Web Perf)
PPTX
High Performance HTML5 (SF HTML5 UG)
PPTX
Web Directions South - Even Faster Web Sites
PPTX
@media - Even Faster Web Sites
PPTX
Souders WPO Web 2.0 Expo
PPTX
JSConf US 2010
PDF
CouchDB Google
PPT
Even Faster Web Sites at jQuery Conference '09
PPTX
Browserscope Launch at TAE
Make JavaScript Faster
Design+Performance
Design+Performance Velocity 2015
do u webview?
High Performance Web Components
High Performance Web Components
Prebrowsing - Velocity NY 2013
Cache is King
High Performance Snippets
Your Script Just Killed My Site
JavaScript Performance (at SFJS)
High Performance Mobile (SF/SV Web Perf)
High Performance HTML5 (SF HTML5 UG)
Web Directions South - Even Faster Web Sites
@media - Even Faster Web Sites
Souders WPO Web 2.0 Expo
JSConf US 2010
CouchDB Google
Even Faster Web Sites at jQuery Conference '09
Browserscope Launch at TAE
Ad

Recently uploaded (20)

PPTX
Operating system designcfffgfgggggggvggggggggg
PDF
Design an Analysis of Algorithms I-SECS-1021-03
PPTX
Transform Your Business with a Software ERP System
PDF
How to Choose the Right IT Partner for Your Business in Malaysia
PPTX
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
PDF
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
PDF
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PDF
PTS Company Brochure 2025 (1).pdf.......
PPT
Introduction Database Management System for Course Database
PDF
Upgrade and Innovation Strategies for SAP ERP Customers
PDF
Softaken Excel to vCard Converter Software.pdf
PDF
medical staffing services at VALiNTRY
PDF
System and Network Administraation Chapter 3
PPTX
Online Work Permit System for Fast Permit Processing
PPTX
ai tools demonstartion for schools and inter college
PDF
Digital Strategies for Manufacturing Companies
PDF
top salesforce developer skills in 2025.pdf
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
Operating system designcfffgfgggggggvggggggggg
Design an Analysis of Algorithms I-SECS-1021-03
Transform Your Business with a Software ERP System
How to Choose the Right IT Partner for Your Business in Malaysia
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PTS Company Brochure 2025 (1).pdf.......
Introduction Database Management System for Course Database
Upgrade and Innovation Strategies for SAP ERP Customers
Softaken Excel to vCard Converter Software.pdf
medical staffing services at VALiNTRY
System and Network Administraation Chapter 3
Online Work Permit System for Fast Permit Processing
ai tools demonstartion for schools and inter college
Digital Strategies for Manufacturing Companies
top salesforce developer skills in 2025.pdf
Navsoft: AI-Powered Business Solutions & Custom Software Development
Ad

The Perception of Speed

Editor's Notes

  • #2: http://www.flickr.com/photos/photohype/288124023/
  • #3: http://www.flickr.com/photos/shashachu/443215138/
  • #4: http://www.flickr.com/photos/35094885@N08/4390813150/in/photolist-7G14M1-d6BXUy75%+ disconnected according to NYC Dept of Transporation (2,500 of 3,250)mechanical placebos leftover from switch to computer-controlled signals in 1980sThe city deactivated most of the pedestrian buttons long ago with the emergence of computer-controlled traffic signals, even as an unwitting public continued to push on, according to city Department of Transportation officials. More than 2,500 of the 3,250 walk buttons that still exist function essentially as mechanical placebos, city figures show. Any benefit from them is only imagined.Most of the buttons scattered through the city, mainly outside of Manhattan, are relics of the 1970&apos;s, before computers began tightly choreographing traffic signal patterns on major arteries. They were installed at a time when traffic was much lighter, said Michael Primeggia, deputy commissioner of traffic operations for the city&apos;s Transportation Department.Typically, semi-actuated signals were positioned at intersections of a major thoroughfare and a minor street. The major road would have a green light until someone pressed the button or a sensor in the roadway detected a car on the minor street. Then, after 90 seconds or so, the light would change.By the late 1980&apos;s, most of the buttons had been deactivated, their steel exteriors masking the lie within. But city officials say they do not remember ever publishing an obituary, and the white and black signs stayed up, many of them looking as new and official as ever.
  • #5: http://www.flickr.com/photos/escapefromyonkers/4847397650/75%+ disconnected according to NYC Dept of Transporation (2,500 of 3,250)mechanical placebos leftover from switch to computer-controlled signals in 1980sThe city deactivated most of the pedestrian buttons long ago with the emergence of computer-controlled traffic signals, even as an unwitting public continued to push on, according to city Department of Transportation officials. More than 2,500 of the 3,250 walk buttons that still exist function essentially as mechanical placebos, city figures show. Any benefit from them is only imagined.Most of the buttons scattered through the city, mainly outside of Manhattan, are relics of the 1970&apos;s, before computers began tightly choreographing traffic signal patterns on major arteries. They were installed at a time when traffic was much lighter, said Michael Primeggia, deputy commissioner of traffic operations for the city&apos;s Transportation Department.Typically, semi-actuated signals were positioned at intersections of a major thoroughfare and a minor street. The major road would have a green light until someone pressed the button or a sensor in the roadway detected a car on the minor street. Then, after 90 seconds or so, the light would change.By the late 1980&apos;s, most of the buttons had been deactivated, their steel exteriors masking the lie within. But city officials say they do not remember ever publishing an obituary, and the white and black signs stayed up, many of them looking as new and official as ever.
  • #7: 1.4 liter, 101 hp0-60 in 12.4 secondsFord Fiesta: 1.6L, 197 hpHonda Fit: 1.5L, 117 hpSmart Passion: 1L, 70 hp“Engaging Sport mode does quicken throttle response and tightens up the electric power steering, giving the 500 an even zippier feel” - http://www.motorweek.org/reviews/road_tests/2012_fiat_500
  • #8: 1.4 liter, 101 hp0-60 in 12.4 secondsFord Fiesta: 1.6L, 197 hpHonda Fit: 1.5L, 117 hpSmart Passion: 1L, 70 hp“Engaging Sport mode does quicken throttle response and tightens up the electric power steering, giving the 500 an even zippier feel” - http://www.motorweek.org/reviews/road_tests/2012_fiat_500
  • #9: http://www.flickr.com/photos/dougww/2608181637/Houston Airportbefore: 1 min walk to baggage claim, 7 min wait for bagsafter: 6 min walk, 2 min wait
  • #10: http://www.flickr.com/photos/hdz/8292495879/Houston Airportbefore: 1 min walk to baggage claim, 7 min wait for bagsafter: 6 min walk, 2 min wait
  • #11: http://www.asktog.com/basics/03Performance.htmlA classic example occurred in the 1930s in New York City, where &quot;users&quot; in a large new high-rise office building consistently complained about the wait times at the elevators. Engineers consulted concluded that there was no way to either speed up the elevators or to increase the number or capacity of the elevators. A designer was then called in, and he was able to solve the problem.What the designer understood was that the real problem was not that wait time was too long, but that the wait time was perceived as too long. The designer solved the perception problem by placing floor-to-ceiling mirrors all around the elevator lobbies. People now engaged in looking at themselves and in surreptitiously looking at others, through the bounce off multiple mirrors. Their minds were fully occupied and time flew by.
  • #12: http://www.medialifemagazine.com/your-clients-message-rising-to-the-top/
  • #13: http://megowan.wordpress.com/2011/01/04/the-secret-objectives-of-queues/Waiting less than expected makes people happier. =&gt; so Disney overestimates the wait timeAnd people are more concerned about the LENGTH of a line than how fast it moves. =&gt; so Disney hides the length of lines by wrapping them around buildings“Disney…overestimates times for rides.”“beating expectations buoys our mood.”“people who wait less than they anticipated leave happier than those who wait longer than expected”“we are more concerned with how long a line is than how fast it’s moving. Given a choice between a slow-moving short line and a fast-moving long one, we will often opt for the former, even if the waits are identical. (This is why Disney hides the lengths of its lines by wrapping them around buildings and using serpentine queues.)
  • #15: http://www.flickr.com/photos/laughingsquid/2744068499/Jeff Veen – redesigning Blogger – the blog wizard was TOO fast
  • #16: http://www.flickr.com/photos/calamity_hane/4655070224/Customers thought it was impossible for a machine to count change accurately at such a high rate. =&gt; Displayed results at a slower rate. =&gt; Sound of change counting is a recording.The machine is able to calculate the total change deposited almost instantly. Yet, during testing the company learned that consumers did not trust the machines. Customers though it was impossible for a machine to count change accurately at such a high rate.Faced with the issues of trust and preconceived expectations of necessary effort, the company began to rework the user experience.The solution was fairly simple. The machine still counted at the same pace but displayed the results at a significantly slower rate. In fact, the sound of change working the way through the machine is just a recording that is played through a speaker.
  • #17: http://soslocksmithny.com/
  • #18: http://www.flickr.com/photos/dullhunk/3930915541/
  • #19: “There was still another surprising finding from our study: a strong correlation between perceived download time and whether users successfully completed their tasks on a site.”“when people accomplish what they set out to do on a site, they perceive that site to be fast.”“When users are complaining about the download speed of your site, what are they actually complaining about? Are you better off making the site load faster or ensuring that users complete their tasks?”
  • #20: http://www.flickr.com/photos/shashachu/443215138/
  • #21: Opera and Chrome also have a timeout, so sometimes they’ll clear the screen BEFORE the body is created.
  • #22: The network indicator is only applicable for Mobile Safari.The progress bar indicator is only applicable for Opera, Safari, Android, Chrome Mobile, and Mobile Safari.Mobile browsers don’t have tabs, status bars, nor cursors (currently) so those indicators aren’t applicable.
  • #24: Many of the test cases didn’t trigger any of the browser busy indicators.(Except on iOS the network spinner was triggered for every test that involved an HTTP request.)sync – get mailasync – update stock quotes or friends’ statusGOOD NEWS for all those image beacons!
  • #25: The network indicator is only applicable for Mobile Safari.The progress bar indicator is only applicable for Opera, Safari, Android, Chrome Mobile, and Mobile Safari.Mobile browsers don’t have tabs, status bars, nor cursors (currently) so those indicators aren’t applicable.
  • #26: The network indicator is only applicable for Mobile Safari.The progress bar indicator is only applicable for Opera, Safari, Android, Chrome Mobile, and Mobile Safari.Mobile browsers don’t have tabs, status bars, nor cursors (currently) so those indicators aren’t applicable.
  • #27: The network indicator is only applicable for Mobile Safari.The progress bar indicator is only applicable for Opera, Safari, Android, Chrome Mobile, and Mobile Safari.Mobile browsers don’t have tabs, status bars, nor cursors (currently) so those indicators aren’t applicable.
  • #28: iPhone4 iOS6
  • #31: https://play.google.com/store/apps/details?id=com.linkbubble.playstore
  • #32: https://play.google.com/store/apps/details?id=com.linkbubble.playstore
  • #33: Google Search App on iOS
  • #36: Instragram co-founder Mike Krieger calls this technique “performing actions optimistically”.
  • #37: Instragram co-founder Mike Krieger calls this technique “performing actions optimistically”.
  • #40: Thanks to Emily Nakashima for this example.
  • #44: https://www.google.com/analytics/web/?et=reset#report/content-site-speed-overview/a15026169w31046415p30049615/
  • #45: flickr.com/photos/66176388@N00/3804806568/Otherideas: - clicked linkfeedback - clearpage on paint (NOT body created) - JS API to getpercentage of resourcesdownloaded for betterprogressbars
  • #46: http://thomaspluck.com/2008/07/24/80s-trash-of-the-week-night-shift-2/
  • #47: &quot;thank you&quot; by nj dodge: http://flickr.com/photos/nj_dodge/187190601/Verrazano-Narrows Bridge