"Psychology of performance" slides from Velocity 2010. http://en.oreilly.com/velocity2010/public/schedule/detail/13019 Running 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.

1. Psychology of
performance
Stoyan Stefanov, @stoyanstefanov
June 23, 2010
Velocity

2. Perception

3. Perception

4. Perception

5. Perception

8. Durations
actual
expected
perceived
rem’d
time

9. Time perception
• UCLA – 53s -> 67s -> 91s
(dopamine)
• Age
• Geography - NY vs. LA
• Culture, climate
• Time of day, day the week
• Body temperature

10. Time perception
• Clock is usually faster
• Long durations are harder
to judge

11. When the time stops
• Athletes
• Martial arts

12. Remembered time
• Emotional state
• Pleasant vs. painful
memories
• “hit vs. smash” speed –
34/40.5 mph

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

14. Temporal illusions
• Kappa effect
time 1 = time 2
Longer part of a journey feels
slower

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

16. Study of frustrations
• University of Maryland
• Slow worse than pop ups
• 1/3 to ½ the time lost in
frustrations
• Frustrations affect all else

17. Effect of waiting
• Irritation
• Stress
• High cholesterol
• ☠

18. Feels faster when…
• Task is successful
• Responsive system
• Progress
• Informed

19. Expectations
Maister’s first law of service:
Service =
Perception - Expectation

20. Expectations
• Brand name
• Pre-existing bias

21. Managing expectations
• Provide feedback
• Wait with a warning is
shorter

22. Flow
Mihaly Csikszentmihalyi:
“Positive state of
consciousness…
We lose sense of
self and time
distorts”

23. Flow
• Learning through failure
• Doing is the reward

24. Some numbers

25. PARC research
• 0.1s – instantaneous
• 1s – flow
• 10s – attention

27. A framework
• 0.1 - 0.2s – instantaneous
• 0.5 - 1s – immediate
• 2 - 5s – flow
• 7 - 10s – captivity
- conversation

28. RTT – response time test
• 190ms college students
• Slower when go/no-go
• Correlation to IQ

29. Blink of an eye
• 0.3 - 0.4s

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

31. Tips?

32. Progressive rendering
Chunk
#1
Chunk
#2
Chunk
#3

33. Worst enemy?
CSS

34. CSS

35. CSS

36. Progress indication
• We learn the hints
• Status bar, page title
• What we hate to see:

37. Too many indicators

38. Progress indication
• Progress is good, not ugly
• Flicker-free rendering?

39. Progress indication
• Immediate responses
don’t require indicator
• Lazy drop-downs?
• TMI: 4-5 words a second
• Wording: “Please wait”,
“Stand by” vs. “Saving…”

40. Prefetch
• Components
• DNS
• favicon

41. Keep the flow
• “Idiot” box
• Back, undo
• No uncertainty
• Responsive to commands

42. Intuitions lie
• Are you a user?
• Surprising expectations
• “Where’s the rest”
• Paging

43. Colors and time
• White feels faster
• But higher expectations

44. Help remembered durations
• Negate effects of waits
• Show benefits
• WIIFM

45. Help remembered durations
• Reporting time?

46. Long-running tasks
• WebWorkers, setTimeout
• After 10s let people stop or
leave and come back
• Don’t report elapsed time

47. First time experience
• Unfamiliar = slow
• Optimize empty cache or
there will be no full cache

48. Too fast
• Edit-in-place
• Yellow fades

49. Distractimations

50. Good/bad animations
• Short and sweet
• Transitions – nothing pops
in life
• Easing animations

51. Thank you!
Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com