the perception of speed

40
The Perception of Speed @souders

Upload: steve-souders

Post on 16-Apr-2017

3.412 views

Category:

Software


0 download

TRANSCRIPT

Page 1: The Perception of Speed

The Perceptionof Speed

@souders

Page 2: The Perception of Speed
Page 3: The Perception of Speed

nytimes.com/2004/02/27/nyregion/27BUTT.html

Page 4: The Perception of Speed

2,500 of 3,250 buttons

deactivatednytimes.com/2004/02/27/nyregion/27BUTT.html

Page 5: The Perception of Speed

on every Underground train,

the doors are operated by the

driverlondonist.com/2013/04/why-are-there-buttons-on-tube-train-doors.php

Page 6: The Perception of Speed
Page 7: The Perception of Speed

half the horsepower of a

Ford Fiesta

Page 8: The Perception of Speed

nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html

Page 9: The Perception of Speed

increased distance from gate to bags

6x

nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html

Page 10: The Perception of Speed

uie.com/articles/download_time/

Page 11: The Perception of Speed

placed mirrors & TVs in elevators &

lobbies

uie.com/articles/download_time/

Page 12: The Perception of Speed

overestimate waittime hide length of line

nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html

Page 13: The Perception of Speed

speed

good

ness

(work)

?

Page 14: The Perception of Speed

Creating your blog…news.ycombinator.com/item?id=2007385

Page 15: The Perception of Speed

update coin count at slower

ratenews.ycombinator.com/item?id=2007385

Page 16: The Perception of Speed
Page 17: The Perception of Speed

uie.com/articles/download_time/

“Amazon.com, rated as one of the fastest sites by users, was really the slowest”

Page 18: The Perception of Speed
Page 19: The Perception of Speed

connectDNS 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

Page 20: The Perception of Speed

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

Page 21: The Perception of Speed

stevesouders.com/blog/2013/06/16/browser-busy-indicators/

testsclick link<SCRIPT ASYNC ...>dynamic script before onloaddynamic iframedynamic scriptdynamic stylesheetdynamic imagedynamic CSS background imageXHRlong JS execution

Page 22: The Perception of Speed

stevesouders.com/blog/2013/06/16/browser-busy-indicators/

testsclick link<SCRIPT ASYNC ...>dynamic script before onloaddynamic iframedynamic scriptdynamic stylesheetdynamic imagedynamic CSS background imageXHRlong JS execution

}}

sync UX

async UX

no busy indicators

Page 23: The Perception of Speed

Google Plus

Facebook

Twitter

WebView:non-standard busy indicators!

Page 24: The Perception of Speed

Native Apps:

no busy indicators!

Page 25: The Perception of Speed
Page 26: The Perception of Speed

play.google.com/store/apps/details?id=com.linkbubble.playstore

Page 27: The Perception of Speed

play.google.com/store/apps/details?id=com.linkbubble.playstore

Page 28: The Perception of Speed

“natural” progress indicators

Page 29: The Perception of Speed
Page 30: The Perception of Speed
Page 31: The Perception of Speed

optimistic actions

Instagram• “Like” button changes

immediately• server update happens in

background lukew.com/ff/entry.asp?1759

Page 32: The Perception of Speed

skeleton screens

blank page that is gradually filledlukew.com/ff/entry.asp?1797

Page 33: The Perception of Speed
Page 34: The Perception of Speed
Page 35: The Perception of Speed
Page 36: The Perception of Speed
Page 37: The Perception of Speed
Page 38: The Perception of Speed
Page 39: The Perception of Speed

“PerceptionBrokers!”

Page 40: The Perception of Speed

Steve Souders@souders