Illusion of Time. When 60 sec is not 1 minute
A presentation at Frontend DEV Conf in in Minsk, Belarus by Denys Mishunov
of Denys Mishunov· @mishunov Photo: http://goo.gl/WSLWvE
“Waiting sucks” –everybody
Photo: http://goo.gl/D3J4n9
36% ©Laura Berman | greenfusephotos.com | 416-887-2655 OVERESTIMATION
4.76 5.30 0.35 0.01 0.06 0.05 0.07
https://blog.kissmetrics.com/loading-time/
2011
2011 2014
Alice: How long is forever? White Rabbit: Sometimes, just one second. –Lewis Carroll, “Alice in Wonderland”
CHOOSE THE RIGHT TIME A D0 A B B B D1 D2
WEB TIME LINE 0.2s 1s 5s Instant (0,1-0,2s) Immediate (0,5-1s) User Flow (2-5s) Attention Span (7-10s) 10s
PLATFORM SUCCESS MODEL 1. loading 1000ms 2. finger down 4. finger up max: 100ms idle/cleanup in 50ms chunks Immediate (0,5-1s) Instant (0,1-0,2s) http://goo.gl/GlxjdN
CHOOSE THE RIGHT TIME A D0 A B B B D1 D2
WEBER-FECHNER LAW “The just-noticeable difference between two stimuli is proportional to the magnitude of the stimuli”
WEBER-FECHNER LAW JND
WEBER-FECHNER LAW jnd Photo: http://goo.gl/jQnZlP D jnd = k% of D
20% RULE jnd Photo: http://goo.gl/jQnZlP D < 30s jnd = 20% of D
20% RULE Photo: http://goo.gl/jQnZlP -20% 8s +20% 10s 12s jnd = 20% of RULE D
20% RULE NOTICEABLE = = ! MEANINGFUL
CHOOSE THE RIGHT TIME A D0 A B B B D1 D2
NEUTRALISATION
≈5s
≈2s
NEUTRALISATION Geometric bisection √5×2 +20% rule 5s 2s 2.4s 3.2s
≈2s
≈3.2s
OBJECTIVE TIME SUBJECTIVE TIME
PERCEPTION OBJECTIVE TIME TOLERANCE
Operational Management Perception Management TIME MANAGEMENT Tolerance Management
Operational Management OPERATIONAL MANAGEMENT real time
Operational Management “My dear, here we must run as fast as we can, just to stay in place. And if you wish to go anywhere you must run twice as fast as that.” –Lewis Carroll, “Alice in Wonderland”
Operational Management FRONT END HTML CSS Images Javascript Minification & Concatination Fewer HTTP requests No CDN Sprites Responsive sizes CDN Inline top-screen CSS DNS prefetching … … Lo-Fi background JPG images … Delay blocking request (onLoad) WebWorkers AJAXify navigation … you-name-it
BACK END Operational Management CDN Caching Faster * mod_deflate/mod_gzip HTTP2/SPDY
“If everybody minded their own business, the world would go around a great deal faster than it does.” –Lewis Carroll, “Alice in Wonderland”
Operational Management LIMITATIONS Technical limitations Financial/time costs Users usually don’t care about your objective time
Operational Management LIMITATIONS Users don’t care
“Performance is not just milliseconds, frames and megabytes. It’s also how these milliseconds, frames and megabytes translate to how the user perceives the application” – Ilya Grigorik, Web Performance Engineer, Google
Operational Management Perception Management TIME MANAGEMENT Tolerance Management
Perception Management PERCEPTION MANAGEMENT psychological time
Perception Management “…time persists merely as a consequence of the events taking place in it [space]” –Martin Heidegger, German philosopher http://goo.gl/9wXHL9
Perception Management EVENT MARKERS EVENT1 EVENT2 EVENT3
Perception Management EVENT MARKERS start end|start end EVENT1 start inner Event Marker Event Marker end Event Marker
Perception Management PREEMPTIVE START
Perception Management PREEMPTIVE START
- ig c a m
- – things user does not need to know about
Perception Management EARLY COMPLETION ma gic *
- – things user does not need to know about
Perception Management LIMITATIONS When process is really long and there is no chance to make user think differently
Operational Management Perception Management TIME MANAGEMENT Tolerance Management
Tolerance Management TOLERANCE MANAGEMENT valued time
http://goo.gl/AkcpvU
Tolerance Management “If you can not change the situation, change the attitude” –basic principle of psychology
Tolerance Management UNCERTAINTY
Tolerance Management Determinate Dynamic Static Provides periodic current status during mid-process Does not provide any info during mid-process Class A Class C Your porn will be downloaded in less than 1 second. PLEASE wait Projects completion by work units or time Download file blah-blah.mov (25GB)? Cancel Download Class D Indeterminate Doesn’t project completion Class B Files scanned: 1250 Viruses found: 55 “Designing and Engineering Time”, Steven C.Seow. © 2008 Pearson Education Inc.
PROGRESS INDICATORS FOR WEB 0 2s 5s Class D 10s Class A
Tolerance Management TIME ANCHORS MATRIX 1 2 3 5 10 15 10 20 30
Tolerance Management http://goo.gl/tn8TiG
Tolerance Management PURPOSE & VALUE
Tolerance Management
Tolerance Management WORTH THE WAIT
To: DENYS.MISHUNOV@gmail.com
http://coub.com/view/2pgyb5js
Tolerance Management LIMITATIONS The sky is the limit?
SUMMARY Deliver objectively fast; Operation If not possible to deliver fast, make user think it is fast; Perception If it is really long process, make user want to wait. Tolerance
0.43
THANK YOU end Event Marker
The magician takes the ordinary something and makes it do something extraordinary. Now you’re looking for the secret… but you won’t find it, because of course you’re not really looking. You don’t really want to know. You want to be fooled”. These lines from the cult film “Prestige” are about a magic trick. Modern frontend developers have to be a little bit of magicians too – show something that people want to see while doing real work behind the scene. Developers these days have to manage user’s perception and influence user’s expectations.
for free. You
can too.
