Psychology of

performance

Stoyan Stefanov, @stoyanstefanov June 23, 2010 Velocity

Perception

Perception

Perception

Perception

Durations

actual expected

perceived rem’d

time

Time perception

•  UCLA – 53s -> 67s -> 91s (dopamine)

•  Age •  Geography - NY vs. LA •  Culture, climate •  Time of day, day the week •  Body temperature

Time perception

•  Clock is usually faster •  Long durations are harder

to judge

When the time stops

•  Athletes •  Martial arts

Remembered time

•  Emotional state •  Pleasant vs. painful

memories •  “hit vs. smash” speed –

34/40.5 mph

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

Temporal illusions

•  Kappa effect time 1 = time 2

Longer part of a journey feels slower

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

Study of frustrations

•  University of Maryland •  Slow worse than pop ups •  1/3 to ½ the time lost in

frustrations •  Frustrations affect all else

Effect of waiting

•  Irritation •  Stress •  High cholesterol

•  ☠

Feels faster when…

•  Task is successful •  Responsive system •  Progress •  Informed

Expectations

Maister’s first law of service:

Service = Perception - Expectation

Expectations

•  Brand name •  Pre-existing bias

Managing expectations

•  Provide feedback •  Wait with a warning is

shorter

Flow

Mihaly Csikszentmihalyi: “Positive state of

consciousness… We lose sense of self and time distorts”

Flow

•  Learning through failure •  Doing is the reward

Some numbers

PARC research

•  0.1s – instantaneous •  1s – flow •  10s – attention

A framework

•  0.1 - 0.2s – instantaneous •  0.5 - 1s – immediate •  2 - 5s – flow •  7 - 10s – captivity

- conversation

RTT – response time test

•  190ms college students •  Slower when go/no-go •  Correlation to IQ

Blink of an eye

•  0.3 - 0.4s

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

Tips?

Progressive rendering Chunk #1

Chunk #2

Chunk #3

Worst enemy?

CSS

CSS

CSS

Progress indication

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

Too many indicators

Progress indication

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

Progress indication

•  Immediate responses don’t require indicator

•  Lazy drop-downs? •  TMI: 4-5 words a second •  Wording: “Please wait”,

“Stand by” vs. “Saving…”

Prefetch

•  Components •  DNS •  favicon

Keep the flow

•  “Idiot” box •  Back, undo •  No uncertainty •  Responsive to commands

Intuitions lie

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

Colors and time

•  White feels faster •  But higher expectations

Help remembered durations

•  Negate effects of waits •  Show benefits •  WIIFM

Help remembered durations

•  Reporting time?

Long-running tasks

•  WebWorkers, setTimeout •  After 10s let people stop or

leave and come back •  Don’t report elapsed time

First time experience

•  Unfamiliar = slow •  Optimize empty cache or

there will be no full cache

Too fast

•  Edit-in-place •  Yellow fades

Distractimations

Good/bad animations

•  Short and sweet •  Transitions – nothing pops

in life •  Easing animations

Thank you!

Stoyan Stefanov @stoyanstefanov http://www.phpied.com