Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Illusion of Time. When 60 sec is not 1 minute

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.

Denys Mishunov

April 20, 2015
Tweet

More Decks by Denys Mishunov

Other Decks in Programming

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

    View Slide

  9. 2011
    2014

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