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 expectations. It’s an illusion. It’s magic.

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.075.30
4.76

7. https://blog.kissmetrics.com/loading-time/

8. 2011

9. 20112014

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 D20% RULE
20% RULE
10s8s 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
OperationalManagement

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.”
OperationalManagement

35. FRONT END
Delay blocking
request (onLoad)
WebWorkers
AJAXify
navigation
…
you-name-it
HTML JavascriptImagesCSS
Minification & Concatination
Sprites
Responsive sizes
Lo-Fi background
JPG images
…
Fewer HTTP
requests
CDN
DNS prefetching
…
No CDN
Inline top-screen
CSS
…
OperationalManagement

36. BACK END
CDN
Caching
Faster *
mod_deflate/mod_gzip
HTTP2/SPDY
OperationalManagement

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
OperationalManagement

39. LIMITATIONS
Users don’t care
OperationalManagement

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
PerceptionManagement

43. –Martin Heidegger, German philosopher
“…time persists merely as a
consequence of the events
taking place in it [space]”
PerceptionManagement
http://goo.gl/9wXHL9

44. EVENT MARKERS
PerceptionManagement
EVENT1 EVENT2 EVENT3

45. EVENT MARKERS
PerceptionManagement
EVENT1
start
Event Marker
end
Event Marker
inner
Event Marker
start end|start end

46. PerceptionManagement
PREEMPTIVE START

47. PREEMPTIVE START
PerceptionManagement
magic*
* – things user does not need to know about

50. PerceptionManagement
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
PerceptionManagement

57. TIME MANAGEMENT
Operational
Management
Perception
Management
Tolerance
Management

58. TOLERANCE
MANAGEMENT
valued time
ToleranceManagement

59. http://goo.gl/AkcpvU

61. –basic principle of psychology
“If you can not change the situation,
change the attitude”
ToleranceManagement

62. UNCERTAINTY
ToleranceManagement

63. ToleranceManagement 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
ToleranceManagement

66. http://goo.gl/tn8TiG
ToleranceManagement

67. PURPOSE & VALUE
ToleranceManagement

68. ToleranceManagement

69. WORTH THE WAIT
ToleranceManagement

70. To: DENYS.MISHUNOV@gmail.com

71. http://coub.com/view/2pgyb5js

72. LIMITATIONS
The sky is the limit?
ToleranceManagement

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.
PerceptionOperation

74. 0.43

78. THANK YOU
end
Event Marker