(Given at Google campus for IxDA, Microsoft campus in Redmond to UX team, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009. Will be giving again in Florida at Rich Web Experience.) Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience -- or worse to create confusion in the user's mind. In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn't work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns). These are conveniently summarized in six over-arching design principles. * Input where you output. * Require a light footprint. * Maintain flow. * Invite interaction. * Show transitions * Be reactive. This talk goes hand-in-hand with Bill Scott & Theresa Neil's book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.

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

2. Me

4. Simple Interaction?

5. 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+

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

7. Actors Events
96
Interesting Moments

8. Interesting Moments

9. Interesting Moments

10. Interesting Moments

11. Interesting Moments

12. Interesting Moments

13. Interesting Moments

14. interaction (n).
mutual or
reciprocal action;
interacting

15. interaction.
interplay between
system and user

16. interaction.
interplay between
system and user

17. interaction.
interplay between
system and user

18. interaction.
sequence
tells a story

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

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

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

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

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

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

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

26. 6 principles

27. 6 principles
for designing interesting moments

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

30. In Page Editing
inline editing. animoto.com

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

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

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

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

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

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

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

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

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

40. 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?

41. In Page Editing
inline editing. fickr.com

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

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

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

45. anti-pattern. non-symmetrical. iphone

46. anti-pattern. non-symmetrical. iphone

47. anti-pattern. non-symmetrical. iphone

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

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

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

51. Drag, Open & Drop
drag and drop. gmail

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

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

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

59. anti-pattern. artificial construct.

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

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

62. re a int.
qui tpr
Re foo
li ght

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

88. anti-pattern. double duty. amazon.com

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

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

91. Contextual Tools (overlay on click)
google maps

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

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

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

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

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

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

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

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

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

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

102. in flow.
Mainta

103. Exploratorium Exhibit

104. Spot the differences

105. Spot the differences

106. Now try again...

107. Now try again...

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

110. epage.
me nts within th
Keep the mo

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

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

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

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

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

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

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

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

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

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

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

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

123. Inlays
click activated inlay. roost.com

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

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

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

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

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

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

131. Virtual Space
endless scrolling. bing.com

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

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

134. Seamless Context
you are here. idea.org

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

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

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

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

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

140. acti on.
e in ter
In vit

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

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

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

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

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

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

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

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

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

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

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

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

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

155. Hover Invitations
hover invitation. y!movies

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

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

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

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

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

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

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

163. Tour Invitation
tour invitation. gmail

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

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

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

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

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

169. Prompt Invitation
facebook.com

170. Prompt Invitation
facebook.com

171. Prompt Invitation
facebook.com
delicious.com

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

173. button. the gap

174. button. the gap

175. hyperlink. backpackit
button. the gap

176. hyperlink. backpackit
button. the gap

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

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

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

180. itio ns.
ans
Show tr

183. anti-pattern. needless fanfare. macintosh turbo tax

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

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

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

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

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

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

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

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

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

193. original. animation on drop. my yahoo!

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

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

196. Moments Communicate

197. Moments Communicate
progress indicator

198. Moments Communicate
Speed up time.
progress indicator

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

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

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

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

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

204. 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!

205. 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!

206. 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!

207. active.
e
Be r

208. experiment on home page

209. experiment on home page
dedicated area

210. Live Feedback
live feedback. wundrbar

211. Live Feedback
live feedback. flickr
live feedback. wundrbar

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

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

214. Live Suggest
live suggest. google (early version)

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

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

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

218. Live Previews
live preview. volkswagen car configurator

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

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

221. Live Filtering
refining search. bing tweets

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

223. Live Forms
live forms. yahoo! small business

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

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

226. Auto Complete
auto complete. kayak

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

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

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