Designing for
Interesting
Moments
Bill Scott
Director, UI Engineering
Netflix
Microsoft - August 24, 2009

Me

Simple Interaction?

Simple Interaction? Events...
Page load. Mouse hover. Mouse down. Drag
initiated. Drag leaves original location. Drag
re-enters original location. Drag re-enters
original location. Drag enters valid target.
Drag exits valid target. Drag enters specific
invalid target. Drag is over no specific target.
Drag hovers over valid target. Drag hovers
over invalid target. Drop accepted. Drop
rejected. Drop on parent container.
16+

Simple Interaction? Actors...
Page. Cursor. Tool Tip. Drag
Object. Drag Object’s Parent
Container. Drop Target.
6+

Actors Events
96
Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

Interesting Moments

interaction (n).
mutual or
reciprocal action;
interacting

interaction.
interplay between
system and user

interaction.
interplay between
system and user

interaction.
interplay between
system and user

interaction.
sequence
tells a story

interactivity.
cyclic process
between two or
more active agents
in which each agent
alternatively
listens, thinks, and
speaks.
Chris Crawford
Interactive Storytelling

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities

6 principles

6 principles
for designing interesting moments

wh ere
Input put.
out
you - Ala
n Co
oper

In Page Editing
inline editing. animoto.com

In Page Editing
Interesting Moments
Page load
Not editing:
- Mouse enters edit area
- Mouse exits edit area
- Mouse click in edit area
Editing:
- Mouse exits edit area
- Mouse click outside edit
inline editing. animoto.com

Analyzing the Moments
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background

Analyzing the Moments
1
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1

Analyzing the Moments
1 2
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2

Analyzing the Moments
1 2 3
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3

Analyzing the Moments
1 2 3 4
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4

Analyzing the Moments
1 2 3 4 5
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5

Analyzing the Moments
1 2 3 4 5 6
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5
6

Analyzing the Moments
1 2 3 4 5 6 7
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5
6
7

Refactoring the Moments
Not editing: Editing:
Not editing: Editing:
Mouse Mouse clicks Mouse click Editing: Click
Page Render Mouse exits Mouse exits
enters edit in edit area outside edit Save Button
edit area edit area
area area
Cursor link cursor normal i-beam normal normal normal
dotted dotted
Saving... Saving...
hint at edit outline; hidden edit outline;
Edit Area solid outline message; message;
field invitational field white
new value new value
text background
Show Save/ Hide Save/
Buttons? Cancel Cancel
buttons buttons
Show edit
Edit Link?
link?

In Page Editing
inline editing. fickr.com

In Page Editing
inline editing. fickr.com
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons

In Page Editing
o
Pay attention t
ity
discoverabil
inline editing. fickr.com
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons

In Page Editing
o
Pay attention t
ity
discoverabil
inline editing. fickr.com
Use a clear
“c all to action”
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone

anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

&
Keep activation al
deactivatio n symmetric
anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

Drag, Open & Drop
drag and drop. gmail

Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail

Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Reduce physical effort.
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail

Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Reduce physical effort.
Drop accepted
What happened?
Collapses immediately.
Reduce m ental effort.
drag and drop. gmail

anti-pattern. artificial construct.

rate an object. netflix.com
anti-pattern. artificial construct.

No artificia l constructs!
rate an object. netflix.com
anti-pattern. artificial construct.

re a int.
qui tpr
Re foo
li ght

In Page Actions (always visible)
original digg site. digg.com 1.0

In Page Actions (always visible)
original digg site. digg.com 1.0

In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com

In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com

In Page Actions (always visible)
original digg site. digg.com 1.0
ary actions.
Use for prim
in-page action. digg.com

In Page Actions (always visible)
in-page action. digg.com

In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix

In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers

In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
remembered collections. gap.com
rating an object. y!movies, y!answers

In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
t.”
he “click weigh
Use to reduce t
•# of interaction steps
•Decision time
•Seek time
•Second guessing
•Wait time
remembered collections. gap.com
http://genesisconduit.wordpress.com/2008/07/13/click-weight/ rating an object. y!movies, y!answers
http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513

Contextual Tools (inline on hover)
contextual tool menu. flickr.com

Contextual Tools (inline on hover)
contextual tool menu. flickr.com
contextual tool actions. backpackit

Contextual Tools (inline on hover)
ns
Use for sec ondary actio
ity.
or to prese rve readabil
contextual tool menu. flickr.com
contextual tool actions. backpackit

Contextual Tools (overlay on hover)
contextual tool overlay. bing.com

Contextual Tools (overlay on hover)
ctivity.
readab ility & intera
Balance
contextual tool overlay. bing.com

Anti-Pattern: Hover & Cover
anti-pattern. hover & cover. yahoo! teachers

Anti-Pattern: Hover & Cover
Mouse Mouse
Page Tool
over leaves tool In Progress Complete
Render selected
object layer
Cursor link cursor
Wrapped Normal Normal
Actionable
by tool display display
Object
layer mode mode
Contextual Show tool Hide tool Hide tool
Tools layer layer layer
anti-pattern. hover & cover. yahoo! teachers

Anti-Pattern: Hover & Cover
Mouse Mouse
Page Tool
over leaves tool In Progress Complete
Render selected
object layer
ext
Don’t obscure contCursor link cursor
.
o r navigation
Wrapped Normal Normal
Actionable
by tool display display
Object
layer mode mode
Contextual Show tool Hide tool Hide tool
Tools layer layer layer
anti-pattern. hover & cover. yahoo! teachers

Hover & Cover Refactored
hover & cover resolved. y! teachers

Hover & Cover Refactored
hover & cover resolved. y! teachers

Contextual Tools (overlay on hover)
hover details. linkedin.com

Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
hover details. linkedin.com

Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
Time-based y.
targeting is trick
hover details. linkedin.com

Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
Time-based y.
targeting is trick
Mouse path .
targe ting is tricky
hover details. linkedin.com

anti-pattern. double duty. amazon.com

Hover: shows contextual
tool overlay.
Click: goes to details page.
anti-pattern. double duty. amazon.com

Hover: shows contextual
tool overlay.
Click: goes to details page.
anti-pattern. double duty. amazon.com
l.
Do one thing wel

Contextual Tools (overlay on click)
google maps

Contextual Tools (overlay on click)
google maps
bing.com

Contextual Tools (overlay on click)
google maps
bing.com
everyblock.com

Contextual Tools (overlay on click)
ol
Open c ontextual to
k.
ys with a clic
google maps
overla
bing.com
everyblock.com

What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Overlay stays
open.
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Mouse exits.
Overlay closes.
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
The not so good?
• Activation delay feels sluggish
(however delay is necessary).
• Not all menus activate a panel.
• Accidental triggering
(result in obscuring content).
Overlay stays
• Gigantic overlays activated by hover
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009

What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
The not so good?
• Activation delay feels sluggish
(however delay is necessary).
• Not all menus activate a panel.
• Accidental triggering
(result in obscuring content).
Overlay stays
• Gigantic overlays activated by hover
open.
On mouse hover/delay
switches to new app.
See also: Jakob Nielsen’s research on
embedded application overlay - hover activated. yahoo.com“Mega Menus”: http://tr.im/twnC
2009

in flow.
Mainta

Exploratorium Exhibit

Spot the differences

Spot the differences

Now try again...

Now try again...

Now try again...
e.
oments wi thin the pag
Keep the m

epage.
me nts within th
Keep the mo

Overlays
hover details. netflix.com
hover dialog. netflix.com

Overlays
hover details. netflix.com
hover dialog. netflix.com

Overlays
o
Wait 1/2 second t
s.
activate hover detail
hover details. netflix.com
hover dialog. netflix.com

Overlays
o
Wait 1/2 second t
s.
activate hover detail
Immediately
ver
d eactivate ho
details on mouse exit.
hover details. netflix.com
hover dialog. netflix.com

Overlays
o
Wait 1/2 second t
s.
activate hover detail
Immediately
ver
d eactivate ho
details on mouse exit.
re
hover details. netflix.com
Change con text or captu
.
flow in o verlay dialog
hover dialog. netflix.com

Anti-Pattern: Idiot Boxes
anti-pattern. idiot box. yelp.com

Anti-Pattern: Idiot Boxes
anti-pattern. idiot box. yahoo! photos

Anti-Pattern: Idiot Boxes
s
h e proceeding
“Don’t stop t
- Alan Cooper
with idiocy.”
anti-pattern. idiot box. yahoo! photos

Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com

Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables

Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
anti-pattern. shifting overlay. wikirank

Overlays: Hover Initiated
ouse .
ot follow the m
Over lays should n
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
anti-pattern. shifting overlay. wikirank

Inlays
click activated inlay. roost.com

Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com

Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com
hover activated accordian. nasa.gov

Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
hover activated accordian. nasa.gov

Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
hover activated accordian. nasa.gov hover activated accordian. apple.com

Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
k,
Activate in lays with clic
not hover.
hover activated accordian. nasa.gov hover activated accordian. apple.com

ch
Don’t infer too mu
about the user’s intent
er.
from a mouse hov

Virtual Space
endless scrolling. bing.com

Virtual Space
carousel. paging. gallery. bing.com
endless scrolling. bing.com

Virtual Space
e.
Consider the backstag
carousel. paging. gallery. bing.com
endless scrolling. bing.com

Seamless Context
you are here. idea.org

Seamless Context
you are here. idea.org
seamless paging. magcloud

Seamless Context you are here. idea.org
ext
M aintain cont
.
across pages
seamless paging. magcloud

Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com

Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com

Nav Bars: Extend the moment
nav status bar. thesixtyone.com
.
ain context across pages
Maint
nav status bar. facebook.com
nav status bar. digg.com

acti on.
e in ter
In vit

http://dustincurtis.com/images/twitter/green_spill.jpg

http://dustincurtis.com/images/twitter/green_spill.jpg

http://dustincurtis.com/images/twitter/green_spill.jpg

http://dustincurtis.com/images/twitter/green_spill.jpg

all to action.
Use a clear c
http://dustincurtis.com/images/twitter/green_spill.jpg

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com

Anti-Pattern: No clear action
tion .
Use a cl ear call to ac
anti-pattern. no clear action. bing.com

Hover Invitations
hover invitation. y!movies

Hover Invitations
hover invitation. y!movies
tooltip, hover & cursor invitation. flickr.com

Hover Invitations
hover invitation. y!movies hover & tool invitation. backpackit
tooltip, hover & cursor invitation. flickr.com

Hover Invitations
hover invitation. y!movies hover & tool invitation. backpackit
h
Aid discov erability wit
hover invitations.
tooltip, hover & cursor invitation. flickr.com

Blank Slate Invitation
dog-ear invitation. login.yahoo.com

Blank Slate Invitation
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com

Blank Slate Invitation
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit

Blank Slate Invitation
for
Recycle blank areas .
our features
promoting y
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit

Tour Invitation
tour invitation. gmail

Tour Invitation
tour invitation. yahoo.com
tour invitation. gmail

Tour Invitation
tour invitation. yahoo.com
Use new visits to
es.
e new featur
tour invitation. gmail
promot

Drag & Drop Invitation
drag invitation. google maps drag invitation. google maps

Drag & Drop Invitation
drop invitation. google maps
drag invitation. google maps drag invitation. google maps

Drag & Drop Invitation
s.
Mind y our moment drop invitation. google maps
drag invitation. google maps drag invitation. google maps

Prompt Invitation
facebook.com

Prompt Invitation
facebook.com

Prompt Invitation
facebook.com
delicious.com

Prompt Invitation
s
s or command
Use question
facebook.com
t.
to pro mpt for inpu
delicious.com

button. the gap

button. the gap

hyperlink. backpackit
button. the gap

hyperlink. backpackit
button. the gap

hyperlink. backpackit
button. the gap
drop down arrow. flickr

hyperlink. backpackit
button. the gap
drop down arrow. flickr

hyperlink. backpackit
n
button. the gap Bridge n ew interactio s.
amiliar idiom
styles with f
drop down arrow. flickr

itio ns.
ans
Show tr

anti-pattern. needless fanfare. macintosh turbo tax

anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...

anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...

anti-pattern. needless fanfare. macintosh turbo tax
Always qu estion “why”
.
when usin g transitions
again in slow-motion...

Attention processing is
hard-wired into the brain
It is chemistry. You can’t
help it.

Attention processing is
hard-wired into the brain
lp looking at It is chemistry. You can’t
You can’t he ads
“dancing” mortgage help it.

anti-pattern. needless fanfare. roost.com
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
b.
n imation kno
Imagine an a y.
a tion carefull
Dial in anim
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

original. animation on drop. my yahoo!

original. animation on drop. my yahoo!
current. no animation on drop. my yahoo!

original. animation on drop. my yahoo!
alf”
Use the “cut it in-h
b.
rule of thum
current. no animation on drop. my yahoo!

Moments Communicate

Moments Communicate
progress indicator

Moments Communicate
Speed up time.
progress indicator

Moments Communicate
Speed up time.
progress indicator
earlier version of my yahoo!

Moments Communicate
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

Moments Communicate
mint.com
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
the gap
earlier version of my yahoo!

Moments Communicate
.
Show state change
mint.com
Speed up time.
hips.
Sh ow relations
progress indicator
.
Slow down time
the gap
earlier version of my yahoo!

Moments Communicate
.
Show state change
mint.com
Speed up time.
hips.
Sh ow relations
progress indicator
.
Slow down time
the gap
flickr organizr earlier version of my yahoo!

Moments Communicate
.
Show state change
mint.com
Speed up time.
hip s.
Sh ow relations
progress indicator
.
Slow down time
the gap
ion.
Focus attent
flickr organizr earlier version of my yahoo!

active.
e
Be r

experiment on home page

experiment on home page
dedicated area

Live Feedback
live feedback. wundrbar

Live Feedback
live feedback. flickr
live feedback. wundrbar

Live Feedback
live feedback. flickr
live feedback. wundrbar live feedback. google maps

Live Feedback
k
Create a t ight feedbac
loop w ith the user.
live feedback. flickr
live feedback. wundrbar live feedback. google maps

Live Suggest
live suggest. google (early version)

Live Suggest
live suggest. google (early version) live suggest. yahoo search

Live Suggest
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment

Live Suggest
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
l
Narrow toward a goa .
dis tract from it
rather than

Live Previews
live preview. volkswagen car configurator

Live Previews
live preview. volkswagen car configurator
live suggest. apple search

Live Previews
live preview. volkswagen car configurator
ws.
Us e live previe
live suggest. apple search

Live Filtering
refining search. bing tweets

Live Filtering
Reduce search effort
g.
wit h live filterin
refining search. bing tweets

Live Forms
live forms. yahoo! small business

Live Forms
live forms. yahoo! small business
live forms. google account creation

Live Forms
and
live forms. yahoo! small business
Prevent er rors beforeh
.
wi th live forms
live forms. google account creation

Auto Complete
auto complete. kayak

Auto Complete
by
Reduc e user effort tly.
autocompl eting correc
auto complete. kayak

Input where you output.
Maintain flow.
Require a light footprint.
Invite interaction.
Show transitions.
Be reactive.

Flickr Credits
http://tr.im/t6Ew
Presentation
billwscott.com/share/
presentations/2009/ms
Blog
looksgoodworkswell.com
Web username
billwscott
Book
designingwebinterfaces.com
O’Reilly