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.

80da88fa0ee72ef38bf344cda8a51d82?s=128

Denys Mishunov

April 20, 2015
Tweet

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

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

  8. 2011

  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

  23. None
  24. ≈5s

  25. None
  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
  48. None
  49. None
  50. Perception Management EARLY COMPLETION magic* * – things user does

    not need to know about
  51. None
  52. None
  53. None
  54. None
  55. None
  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

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

  75. None
  76. None
  77. None
  78. THANK YOU end Event Marker