Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Perception of Speed

3,721 views

Published on

Which would you rather have: a website that’s fast or a website that’s perceived as fast? The answer is “Both!” The list of performance best practices is long and well known, but there’s been less focus on the user’s perception of speed. In this presentation Steve Souders provides examples of how the perception of speed is completely independent of actual speed, and techniques for leveraging this perception gap to create websites that feel fast.

  • Be the first to comment

The Perception of Speed

  1. 1. The Perception of Speed @souders
  2. 2. nytimes.com/2004/02/27/nyregion/27BUTT.html
  3. 3. 2,500 of 3,250 buttons deactivated nytimes.com/2004/02/27/nyregion/27BUTT.html
  4. 4. on every Underground train, the doors are operated by the driver londonist.com/2013/04/why-are-there-buttons-on-tube-train-doors.php
  5. 5. half the horsepower of a Ford Fiesta
  6. 6. nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
  7. 7. increased distance from gate to bags 6x nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
  8. 8. uie.com/articles/download_time/
  9. 9. placed mirrors & TVs in elevators & lobbies uie.com/articles/download_time/
  10. 10. overestimate waittime hide length of line nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
  11. 11. speed goodness (work)
  12. 12. Creating your blog… news.ycombinator.com/item?id=2007385
  13. 13. update coin count at slower rate news.ycombinator.com/item?id=2007385
  14. 14. uie.com/articles/download_time/ “Amazon.com, rated as one of the fastest sites by users, was really the slowest”
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Google Plus Facebook Twitter WebView:non-standard busy
  20. 20. Native Apps: no busy indicators!
  21. 21. play.google.com/store/apps/details?id=com.linkbubble.playstore
  22. 22. play.google.com/store/apps/details?id=com.linkbubble.playstore
  23. 23. “natural” progress indicators
  24. 24. optimistic actions Instagram • “Like” button changes immediately • server update happens in background lukew.com/ff/entry.asp?1759
  25. 25. skeleton screens blank page that is gradually filled lukew.com/ff/entry.asp?1797
  26. 26. “Perception Brokers!”
  27. 27. Steve Souders @souders

×