psychology of performance
DESCRIPTION
"Psychology of performance" slides from Velocity 2010.http://en.oreilly.com/velocity2010/public/schedule/detail/13019Running PageSpeed - all checks. YSlow - A. So what's next to do? Well, you can cheat! You know that time is relative - one hour with your mother-in-law feels much longer than one hour on the beach. The same way you can bend the perception of the page loading time and make the page feel faster, even though the RTT is the same.TRANSCRIPT
![Page 1: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/1.jpg)
Psychology of
performance
Stoyan Stefanov, @stoyanstefanov June 23, 2010 Velocity
![Page 2: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/2.jpg)
Perception
![Page 3: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/3.jpg)
Perception
![Page 4: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/4.jpg)
Perception
![Page 5: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/5.jpg)
Perception
![Page 6: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/6.jpg)
![Page 7: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/7.jpg)
![Page 8: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/8.jpg)
Durations
actual expected
perceived rem’d
time
![Page 9: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/9.jpg)
Time perception
• UCLA – 53s -> 67s -> 91s (dopamine)
• Age • Geography - NY vs. LA • Culture, climate • Time of day, day the week • Body temperature
![Page 10: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/10.jpg)
Time perception
• Clock is usually faster • Long durations are harder
to judge
![Page 11: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/11.jpg)
When the time stops
• Athletes • Martial arts
![Page 12: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/12.jpg)
Remembered time
• Emotional state • Pleasant vs. painful
memories • “hit vs. smash” speed –
34/40.5 mph
![Page 13: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/13.jpg)
Unpleasant memories
• 34sec fake assault on campus
-> 81 sec (~250% off) • 30 sec bank robbery video -> 2 day later.. -> 150 sec (500% off) -> ♀♂ - 50% diff
![Page 14: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/14.jpg)
Temporal illusions
• Kappa effect time 1 = time 2
Longer part of a journey feels slower
![Page 15: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/15.jpg)
It feels slower when… • Unpleasant • Unknown • Boring • Too much to keep track
• Never ever put too many • Bullets points • On a slide • Never • Harder to parse
![Page 16: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/16.jpg)
Study of frustrations
• University of Maryland • Slow worse than pop ups • 1/3 to ½ the time lost in
frustrations • Frustrations affect all else
![Page 17: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/17.jpg)
Effect of waiting
• Irritation • Stress • High cholesterol
• ☠
![Page 18: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/18.jpg)
Feels faster when…
• Task is successful • Responsive system • Progress • Informed
![Page 19: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/19.jpg)
Expectations
Maister’s first law of service:
Service = Perception - Expectation
![Page 20: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/20.jpg)
Expectations
• Brand name • Pre-existing bias
![Page 21: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/21.jpg)
Managing expectations
• Provide feedback • Wait with a warning is
shorter
![Page 22: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/22.jpg)
Flow
Mihaly Csikszentmihalyi: “Positive state of
consciousness… We lose sense of self and time distorts”
![Page 23: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/23.jpg)
Flow
• Learning through failure • Doing is the reward
![Page 24: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/24.jpg)
Some numbers
![Page 25: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/25.jpg)
PARC research
• 0.1s – instantaneous • 1s – flow • 10s – attention
![Page 26: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/26.jpg)
![Page 27: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/27.jpg)
A framework
• 0.1 - 0.2s – instantaneous • 0.5 - 1s – immediate • 2 - 5s – flow • 7 - 10s – captivity
- conversation
![Page 28: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/28.jpg)
RTT – response time test
• 190ms college students • Slower when go/no-go • Correlation to IQ
![Page 29: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/29.jpg)
Blink of an eye
• 0.3 - 0.4s
![Page 30: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/30.jpg)
Turning a page
Two attempts 1 minute each: • Kid A – 31, 27 • Kid B – 39, 38 • Dad – 44, 43
1.3 – 2.2 seconds a page
![Page 31: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/31.jpg)
Tips?
![Page 32: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/32.jpg)
Progressive rendering Chunk #1
Chunk #2
Chunk #3
![Page 33: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/33.jpg)
Worst enemy?
CSS
![Page 34: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/34.jpg)
CSS
![Page 35: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/35.jpg)
CSS
![Page 36: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/36.jpg)
Progress indication
• We learn the hints • Status bar, page title • What we hate to see:
![Page 37: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/37.jpg)
Too many indicators
![Page 38: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/38.jpg)
Progress indication
• Progress is good, not ugly • Flicker-free rendering?
![Page 39: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/39.jpg)
Progress indication
• Immediate responses don’t require indicator
• Lazy drop-downs? • TMI: 4-5 words a second • Wording: “Please wait”,
“Stand by” vs. “Saving…”
![Page 40: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/40.jpg)
Prefetch
• Components • DNS • favicon
![Page 41: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/41.jpg)
Keep the flow
• “Idiot” box • Back, undo • No uncertainty • Responsive to commands
![Page 42: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/42.jpg)
Intuitions lie
• Are you a user? • Surprising expectations • “Where’s the rest” • Paging
![Page 43: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/43.jpg)
Colors and time
• White feels faster • But higher expectations
![Page 44: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/44.jpg)
Help remembered durations
• Negate effects of waits • Show benefits • WIIFM
![Page 45: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/45.jpg)
Help remembered durations
• Reporting time?
![Page 46: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/46.jpg)
Long-running tasks
• WebWorkers, setTimeout • After 10s let people stop or
leave and come back • Don’t report elapsed time
![Page 47: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/47.jpg)
First time experience
• Unfamiliar = slow • Optimize empty cache or
there will be no full cache
![Page 48: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/48.jpg)
Too fast
• Edit-in-place • Yellow fades
![Page 49: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/49.jpg)
Distractimations
![Page 50: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/50.jpg)
Good/bad animations
• Short and sweet • Transitions – nothing pops
in life • Easing animations
![Page 51: Psychology of performance](https://reader030.vdocuments.site/reader030/viewer/2022020105/54c7a1d94a7959c0408b45d6/html5/thumbnails/51.jpg)
Thank you!
Stoyan Stefanov @stoyanstefanov http://www.phpied.com