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