Illusion of Time. When 60 sec is not 1 minute

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.

Transcript

1. of Denys Mishunov· @mishunov Photo: http://goo.gl/WSLWvE
2. –everybody “Waiting sucks”
3. Photo: http://goo.gl/D3J4n9
4. ©Laura Berman | greenfusephotos.com | 416-887-2655 36% OVERESTIMATION
5. 0.35 0.01 0.06 0.05 0.07 5.30 4.76
7. https://blog.kissmetrics.com/loading-time/
9. 2011 2014
10. –Lewis Carroll, “Alice in Wonderland” Alice: How long is forever? White Rabbit: Sometimes, just one second.
11. CHOOSE THE RIGHT TIME D0 A D2 B B D1 A B
12. WEB TIME LINE 0.2s 1s 5s 10s User Flow (2-5s) Attention Span (7-10s) Instant (0,1-0,2s) Immediate (0,5-1s)
13. PLATFORM SUCCESS MODEL http://goo.gl/GlxjdN 1. loading 2. finger down 4. finger up 1000ms max: 100ms idle/cleanup in 50ms chunks Instant (0,1-0,2s) Immediate (0,5-1s)
14. CHOOSE THE RIGHT TIME D0 A D2 B B D1 A B
15. “The just-noticeable difference between two stimuli is proportional to the magnitude of the stimuli” WEBER-FECHNER LAW
16. WEBER-FECHNER LAW JND
17. WEBER-FECHNER LAW jnd = k% of D jnd D Photo: http://goo.gl/jQnZlP
18. 20% RULE jnd = 20% of D jnd D < 30s Photo: http://goo.gl/jQnZlP
19. jnd = 20% of D 20% RULE 20% RULE 10s 8s 12s -20% +20% Photo: http://goo.gl/jQnZlP
20. MEANINGFUL NOTICEABLE !== 20% RULE
21. CHOOSE THE RIGHT TIME D0 A D2 B B D1 A B
22. NEUTRALISATION
24. ≈5s
26. ≈2s
27. NEUTRALISATION 5s 2s 2.4s +20% rule 3.2s √5×2 Geometric bisection
28. ≈2s
29. ≈3.2s
30. SUBJECTIVE TIME OBJECTIVE TIME
31. TOLERANCE PERCEPTION OBJECTIVE TIME
32. TIME MANAGEMENT Perception Management Tolerance Management Operational Management
33. OPERATIONAL MANAGEMENT real time Operational Management
34. –Lewis Carroll, “Alice in Wonderland” “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.” Operational Management
35. FRONT END Delay blocking request (onLoad) WebWorkers AJAXify navigation … you-name-it HTML Javascript Images CSS Minification & Concatination Sprites Responsive sizes Lo-Fi background JPG images … Fewer HTTP requests CDN DNS prefetching … No CDN Inline top-screen CSS … Operational Management
36. BACK END CDN Caching Faster * mod_deflate/mod_gzip HTTP2/SPDY Operational Management
37. –Lewis Carroll, “Alice in Wonderland” “If everybody minded their own business, the world would go around a great deal faster than it does.”
38. LIMITATIONS Technical limitations Financial/time costs Users usually don’t care about your objective time Operational Management
39. LIMITATIONS Users don’t care Operational Management
40. – Ilya Grigorik, Web Performance Engineer, Google “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”
41. TIME MANAGEMENT Operational Management Tolerance Management Perception Management
42. PERCEPTION MANAGEMENT psychological time Perception Management
43. –Martin Heidegger, German philosopher “…time persists merely as a consequence of the events taking place in it [space]” Perception Management http://goo.gl/9wXHL9
44. EVENT MARKERS Perception Management EVENT1 EVENT2 EVENT3
45. EVENT MARKERS Perception Management EVENT1 start Event Marker end Event Marker inner Event Marker start end|start end
46. Perception Management PREEMPTIVE START
47. PREEMPTIVE START Perception Management magic* * – things user does not need to know about
50. Perception Management EARLY COMPLETION magic* * – things user does not need to know about
56. LIMITATIONS When process is really long and there is no chance to make user think differently Perception Management
57. TIME MANAGEMENT Operational Management Perception Management Tolerance Management
58. TOLERANCE MANAGEMENT valued time Tolerance Management
59. http://goo.gl/AkcpvU
61. –basic principle of psychology “If you can not change the situation, change the attitude” Tolerance Management
62. UNCERTAINTY Tolerance Management
63. Tolerance Management Dynamic Determinate “Designing and Engineering Time”, Steven C.Seow. © 2008 Pearson Education Inc. Provides periodic current status during mid-process Projects completion by work units or time Static Indeterminate Doesn’t project completion Does not provide any info during mid-process Download file blah-blah.mov (25GB)? Cancel Download Files scanned: 1250 Viruses found: 55 Your porn will be downloaded in less than 1 second. PLEASE wait Class A Class B Class D Class C
64. 5s 10s PROGRESS INDICATORS FOR WEB 2s Class D Class A 0
65. TIME ANCHORS MATRIX 1 2 3 5 10 15 10 20 30 Tolerance Management
66. http://goo.gl/tn8TiG Tolerance Management
67. PURPOSE & VALUE Tolerance Management
68. Tolerance Management
69. WORTH THE WAIT Tolerance Management
70. To: DENYS.MISHUNOV@gmail.com
71. http://coub.com/view/2pgyb5js
72. LIMITATIONS The sky is the limit? Tolerance Management
73. Tolerance SUMMARY Deliver objectively fast; If not possible to deliver fast, make user think it is fast; If it is really long process, make user want to wait. Perception Operation
74. 0.43
78. THANK YOU end Event Marker