Designing interesting moments

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

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. 96Interesting Moments
EventsActors

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. Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments

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

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

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

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

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

26. 6 principles

27. 6 principles
for designing interesting moments

28. Input where
you output.
- Alan Cooper

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

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

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

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

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

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

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

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

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

41. In Page Editing
inline editing. fickr.com

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

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

44. In Page Editing
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
Pay attention to
discoverability
Use a clear
“call to action”
inline editing. fickr.com

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. anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp
Keep activation &
deactivation symmetrical

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

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

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

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

59. anti-pattern. artificial construct.

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

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

62. Require a
light footprint.

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
in-page action. digg.com
Use for primary actions.

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
rating an object. y!movies, y!answers
remembered collections. gap.com

73. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers
remembered collections. gap.com
Use to reduce the “click weight.”
•# of interaction steps
•Decision time
•Seek time
•Second guessing
•Wait time
http://genesisconduit.wordpress.com/2008/07/13/click-weight/
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)
contextual tool menu. flickr.com
contextual tool actions. backpackit
Use for secondary actions
or to preserve readability.

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

78. Contextual Tools (overlay on hover)
contextual tool overlay. bing.com
Balance readability & interactivity.

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

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

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

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

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

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

85. Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay

86. Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay
Time-based
targeting is tricky.

87. Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay
Time-based
targeting is tricky.
Mouse path
targeting is tricky.

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.
Do one thing well.
anti-pattern. double duty. amazon.com

91. Contextual Tools (overlay on click)
google maps

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

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

94. Contextual Tools (overlay on click)
bing.com
everyblock.com
google maps Open contextual tool
overlays with a click.

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

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

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

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

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

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

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

102. Maintain flow.

103. Exploratorium Exhibit

104. Spot the differences

105. Spot the differences

106. Now try again...

107. Now try again...

108. Now try again...
Keep the moments within the page.

110. Keep the moments within the page.

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

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

113. Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
hover dialog. netflix.com

114. Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
Immediately
deactivate hover
details on mouse exit.
hover dialog. netflix.com

115. Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
Immediately
deactivate hover
details on mouse exit.
Change context or capture
flow in overlay 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
“Don’t stop the proceedings
with idiocy.” - Alan Cooper
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
Overlays should not follow the mouse.
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
Use inlays for strong
contextual association.
click activated inlay. roost.com

125. Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov
click activated inlay. roost.com

126. Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov
hover activated accordian. brown.edu
click activated inlay. roost.com

127. Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov
hover activated accordian. apple.com
hover activated accordian. brown.edu
click activated inlay. roost.com

128. Inlays
Use inlays for strong
contextual association.
Activate inlays with click,
not hover.
hover activated accordian. nasa.gov
hover activated accordian. apple.com
hover activated accordian. brown.edu
click activated inlay. roost.com

130. Don’t infer too much
about the user’s intent
from a mouse hover.

131. Virtual Space
endless scrolling. bing.com

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

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

134. Seamless Context
you are here. idea.org

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

136. Seamless Context
Maintain context
across pages.
you are here. idea.org
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
nav status bar. facebook.com
nav status bar. digg.com
Maintain context across pages.

140. Invite interaction.

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. Use a clear call to action.
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
Use a clear call to action.
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
tooltip, hover & cursor invitation. flickr.com
hover & tool invitation. backpackit

158. Hover Invitations
hover invitation. y!movies
Aid discoverability with
hover invitations.
tooltip, hover & cursor invitation. flickr.com
hover & tool invitation. backpackit

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

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

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

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

163. Tour Invitation
tour invitation. gmail

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

165. Tour Invitation
tour invitation. gmail
tour invitation. yahoo.com
Use new visits to
promote new features.

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

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

168. Drag & Drop Invitation
drag invitation. google mapsdrag invitation. google maps
drop invitation. google mapsMind your moments.

169. Prompt Invitation
facebook.com

170. Prompt Invitation
facebook.com

171. Prompt Invitation
delicious.com
facebook.com

172. Prompt Invitation
delicious.com
facebook.com
Use questions or commands
to prompt for input.

173. button. the gap

174. button. the gap

175. button. the gap
hyperlink. backpackit

176. button. the gap
hyperlink. backpackit

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

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

179. Bridge new interaction
styles with familiar idioms.button. the gap
hyperlink. backpackit
drop down arrow. flickr

180. Show transitions.

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. Always question “why”
when using transitions.
anti-pattern. needless fanfare. macintosh turbo tax
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
It is chemistry. You can’t
help it.You can’t help looking at
“dancing” mortgage ads

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

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

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

192. Imagine an animation knob.
Dial in animation carefully.
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.gov
DesigningVisual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. pbs.org

193. original. animation on drop. my yahoo!

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

195. Use the “cut it in-half”
rule of thumb.
current. no animation on drop. my yahoo!
original. 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.
earlier version of my yahoo!
progress indicator

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

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

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

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

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

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

206. Moments Communicate
Speed up time.
Slow down time.
Focus attention.
Show relationships.
Show state change.
mint.com
the gap
flickr organizr earlier version of my yahoo!
progress indicator

207. Be reactive.

208. experiment on home page

209. experiment on home page
dedicated area

210. live feedback. wundrbar
Live Feedback

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

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

213. Create a tight feedback
loop with the user.
live feedback. wundrbar
live feedback. flickr
live feedback. google maps
Live Feedback

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

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

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

217. Narrow toward a goal
rather than distract from it.
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
Live Suggest

218. live preview. volkswagen car configurator
Live Previews

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

220. Use live previews.
live preview. volkswagen car configurator
live suggest. apple search
Live Previews

221. Live Filtering
refining search. bing tweets

222. Live Filtering
Reduce search effort
with live filtering.
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
live forms. yahoo! small business
Prevent errors beforehand
with live forms.
live forms. google account creation

226. Auto Complete
auto complete. kayak

227. Auto Complete
Reduce user effort by
autocompleting correctly.
auto complete. kayak

228. Input where you output.
Require a light footprint.
Maintain flow.
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