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
   

   View Slide

2. –everybody
   “Waiting sucks”
   

   View Slide

3. Photo: http://goo.gl/D3J4n9
   

   View Slide

4. ©Laura Berman | greenfusephotos.com | 416-887-2655
   36%
   OVERESTIMATION
   

   View Slide

5. 0.35 0.01 0.06 0.05 0.07
   5.30
   4.76
   

   View Slide

6. View Slide

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

   View Slide

8. View Slide

9. View Slide

10. –Lewis Carroll, “Alice in Wonderland”
    Alice: How long is forever?
    White Rabbit: Sometimes, just one
    second.
    

    View Slide

11. CHOOSE THE RIGHT TIME
    D0
    A
    D2
    B
    B
    D1
    A
    B
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

14. CHOOSE THE RIGHT TIME
    D0
    A
    D2
    B
    B
    D1
    A
    B
    

    View Slide

15. “The just-noticeable
    difference between two
    stimuli is proportional
    to the magnitude of the
    stimuli”
    WEBER-FECHNER LAW
    

    View Slide

16. WEBER-FECHNER LAW
    JND
    

    View Slide

17. WEBER-FECHNER LAW
    jnd = k% of D
    jnd
    D
    Photo: http://goo.gl/jQnZlP
    

    View Slide

18. 20% RULE
    jnd = 20% of D
    jnd
    D < 30s
    Photo: http://goo.gl/jQnZlP
    

    View Slide

19. jnd = 20% of D
    20% RULE
    20% RULE
    10s
    8s 12s
    -20% +20%
    Photo: http://goo.gl/jQnZlP
    

    View Slide

20. MEANINGFUL
    NOTICEABLE
    !==
    20% RULE
    

    View Slide

21. CHOOSE THE RIGHT TIME
    D0
    A
    D2
    B
    B
    D1
    A
    B
    

    View Slide

22. NEUTRALISATION
    

    View Slide

23. View Slide

24. ≈5s
    

    View Slide

25. View Slide

26. ≈2s
    

    View Slide

27. NEUTRALISATION
    5s
    2s
    2.4s
    +20% rule
    3.2s
    √5×2
    Geometric bisection
    

    View Slide

28. ≈2s
    

    View Slide

29. ≈3.2s
    

    View Slide

30. SUBJECTIVE
    TIME
    OBJECTIVE
    TIME
    

    View Slide

31. TOLERANCE
    PERCEPTION
    OBJECTIVE
    TIME
    

    View Slide

32. TIME MANAGEMENT
    Perception
    Management
    Tolerance
    Management
    Operational
    Management
    

    View Slide

33. OPERATIONAL
    MANAGEMENT
    real time
    Operational Management
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

37. –Lewis Carroll, “Alice in Wonderland”
    “If everybody minded
    their own business,
    the world would go
    around a great deal
    faster than it does.”
    

    View Slide

38. LIMITATIONS
    Technical limitations
    Financial/time costs
    Users usually don’t care about your objective
    time
    Operational Management
    

    View Slide

39. LIMITATIONS
    Users don’t care
    Operational Management
    

    View Slide

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”
    

    View Slide

41. TIME MANAGEMENT
    Operational
    Management
    Tolerance
    Management
    Perception
    Management
    

    View Slide

42. PERCEPTION
    MANAGEMENT
    psychological time
    Perception Management
    

    View Slide

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
    

    View Slide

44. EVENT MARKERS
    Perception Management
    EVENT1 EVENT2 EVENT3
    

    View Slide

45. EVENT MARKERS
    Perception Management
    EVENT1
    start
    Event Marker
    end
    Event Marker
    inner
    Event Marker
    start end|start end
    

    View Slide

46. Perception Management
    PREEMPTIVE START
    

    View Slide

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

    View Slide

48. View Slide

49. View Slide

50. Perception Management
    EARLY COMPLETION
    magic*
    * – things user does not need to know about
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. LIMITATIONS
    When process is really long and there is no
    chance to make user think differently
    Perception Management
    

    View Slide

57. TIME MANAGEMENT
    Operational
    Management
    Perception
    Management
    Tolerance
    Management
    

    View Slide

58. TOLERANCE
    MANAGEMENT
    valued time
    Tolerance Management
    

    View Slide

59. http://goo.gl/AkcpvU
    

    View Slide

60. View Slide

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

    View Slide

62. UNCERTAINTY
    Tolerance Management
    

    View Slide

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
    

    View Slide

64. 5s 10s
    PROGRESS INDICATORS FOR WEB
    2s
    Class D Class A
    0
    

    View Slide

65. TIME ANCHORS MATRIX
    1 2 3
    5 10 15
    10 20 30
    Tolerance Management
    

    View Slide

66. http://goo.gl/tn8TiG
    Tolerance Management
    

    View Slide

67. PURPOSE & VALUE
    Tolerance Management
    

    View Slide

68. Tolerance Management
    

    View Slide

69. WORTH THE WAIT
    Tolerance Management
    

    View Slide

70. To: DENYS.MISHUNOV@gmail.com
    

    View Slide

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

    View Slide

72. LIMITATIONS
    The sky is the limit?
    Tolerance Management
    

    View Slide

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
    

    View Slide

74. 0.43
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. THANK YOU
    end
    Event Marker
    

    View Slide