The document discusses principles for crafting rich web experiences, including making interactions direct by allowing input wherever there is output, shortening interaction length, and making objects directly actionable. It provides examples of how several websites implement principles like inline editing, drag and drop, and providing discoverability through hints and invitations. The principles are intended to guide design of engaging and intuitive user interfaces.

1. Crafting Rich Web
Experiences
Designing Web Interfaces: Principles & patterns for rich interfaces
Bill Scott
Director, UI Engineering

2. background

3. background

4. background

5. 6 principles for Crafting Rich Web Experiences
make it direct
keep it lightweight
stay on the page
provide invitations
use transitions
react immediately

6. make it direct

7. make it direct
Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable

8. make it direct
Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable

9. make it direct
Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable

10. make it direct
inline editing
Yahoo! Bookmarks

11. make it direct. inline editing
discoverability
invitations

12. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation

13. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation

14. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation

15. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit

16. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit

17. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit

18. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit

19. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit

20. make it direct. inline editing
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover

21. make it direct. inline editing
considerations
complex editing
blending modes

22. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing

23. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing

24. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing

25. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing

26. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes

27. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes

28. make it direct. inline editing
considerations
complex editing
blending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes

29. make it direct. inline editing
accessibility

30. make it direct. inline editing
accessibility
flickr. alternate edit path

31. make it direct. inline editing
accessibility
flickr. alternate edit path

32. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability

33. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability

34. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability

35. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability

36. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction

37. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction

38. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction

39. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction

40. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
“If readability is more important than editing
then keep the editing action hidden
until the user interacts with the content.”

41. make it direct
drag and drop
My Yahoo! drag and drop

42. make it direct. drag and drop
Take care of the interesting moments

43. make it direct. drag and drop
Take care of the interesting moments

44. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances

45. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
netflix. few hints.

46. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
yahoo! teachers. hints during interesting moments
netflix. few hints.

47. make it direct. drag and drop
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs

48. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs

49. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs

50. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs

51. keep it lightweight

52. keep it lightweight. contextual tools
digg. in page action

53. keep it lightweight. contextual tools
digg. in page action
Key to digg’s
early success -
Kevin Rose

54. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections

55. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections

56. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections

57. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections

58. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
y! movies, y! answers. rating an object

59. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr. in-context tools y! movies, y! answers. rating an object

60. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr. in-context tools y! movies, y! answers. rating an object

61. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down

62. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down

63. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down

64. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down

65. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down

66. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events

67. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
netflix. ratings

68. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
digg. vote
click-weight
decision time
netflix. ratings seek time
second guessing
wait time

69. keep it lightweight. anti-patterns

70. keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover

71. keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover

72. keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved

73. keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved

74. keep it lightweight. anti-patterns

75. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat

76. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat

77. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets

78. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets

79. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets

80. stay on the page

81. stay on the page. overlay
overlays
dialog overlay
detail overlay
input overlay
considerations
lightbox effect
modality
activation

82. stay on the page. overlay
overlays
dialog overlay
detail overlay
input overlay
considerations
lightbox effect
modality
activation

83. stay on the page. overlay
overlays
dialog overlay
detail overlay
input overlay
considerations
lightbox effect
modality
activation

84. stay on the page. overlay
overlays
dialog overlay
detail overlay
input overlay
considerations
lightbox effect
modality
activation

85. stay on the page. overlay

86. stay on the page. overlay
anti-pattern. y! photos. idiot boxes

87. stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes

88. stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes
anti-pattern. amazon. mouse trap

89. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay

90. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration

91. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
bbc. in-context configuration

92. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration

93. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration

94. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight

95. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight

96. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight

97. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight

98. stay on the page. virtual
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling

99. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling

100. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel

101. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel
y! mail. on-demand scrolling

102. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel
microsoft live. paged scrolling y! mail. on-demand scrolling

103. stay on the page. virtual
Rethink paging
in-place paging
zoomable user interface (zui)

104. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)

105. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)

106. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)

107. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui

108. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui

109. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui

110. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui cool iris (piclens). zui

111. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump

112. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline assistant

113. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant

114. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant

115. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant broadmoor hotel. one page checkout

116. stay on the page. process flow
step by step?
yes, sometimes works best

117. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

118. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

119. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

120. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

121. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

122. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

123. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step

124. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
netflix. step by step

125. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
netflix. step by step ebay. single page flow

126. stay on the page. anti-patterns
the answer is in testing

127. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay

128. stay on the page. anti-patterns
the answer is in testing
netflix. simpler overlay
netflix. stalker overlay

129. offer an invitation

130. offer an invitation. static invitation
unfinished look
dog-ear
empty slots
blank slate

131. offer an invitation. static invitation
unfinished look
dog-ear
empty slots
blank slate
yahoo login! dog-ear invite

132. offer an invitation. static invitation
unfinished look
dog-ear
empty slots
blank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite

133. offer an invitation. static invitation
unfinished look
dog-ear
empty slots
blank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite backpackit. blank slate invitation

134. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek

135. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action

136. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action
yahoo! tour invitation

137. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action
yahoo! tour invitation
starz play! sneak peek in carousel

138. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions

139. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
flickr. hover invitation

140. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
flickr. hover invitation

141. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation

142. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation y! movies. hover invitation

143. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions backpackit (fake). being too explicit
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation y! movies. hover invitation

144. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after

145. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (static)

146. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)

147. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)

148. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)

149. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues

150. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button

151. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
y! mail. embedded buttons

152. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
backpackit. revealed hyperlinks/icons
y! mail. embedded buttons

153. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
backpackit. revealed hyperlinks/icons
y! mail. embedded buttons flickr. drop down affordance

154. offer an invitation. anti-patterns

155. offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap

156. offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap

157. use transitions

158. use transitions

159. use transitions

160. use transitions
Speak to the brain
Understanding attention processing

161. use transitions
Speak to the brain
Understanding attention processing

162. use transitions
Speak to the brain
Understanding attention processing
Sending the wrong message

163. use transitions
Speak to the brain
Understanding attention processing
Sending the wrong message
flickr zeitgeist

164. use transitions
Speak to the brain
Understanding attention processing
Sending the wrong message
flickr zeitgeist
mac widgets

165. use transitions

166. use transitions
backpackit. fade transition + self-healing transition.

167. use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.

168. use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.

169. use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition. the gap. zoom box.
flickr. active spotlight.

170. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

171. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

172. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

173. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

174. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

175. use transitions
you can...
speed up time
slow down interaction
show state change
show relationships between objects
focus attention

176. use transitions
Keep it sane
“Cut it in-half ” rule of thumb
Use “contrast knob” approach

177. use transitions
Keep it sane
“Cut it in-half ” rule of thumb
Use “contrast knob” approach

178. use transitions
Keep it sane
“Cut it in-half ” rule of thumb
Use “contrast knob” approach

179. use transitions. anti-patterns

180. use transitions. anti-patterns
anti-pattern. borders. needless fanfare

181. use transitions. anti-patterns

182. use transitions. anti-patterns
anti-pattern. amazon. animation gone wild

183. use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
anti-pattern. afi. animation gone wild

184. use transitions. anti-patterns

185. use transitions. anti-patterns
anti-pattern. y! local. stalker

186. react immediately

187. react immediately

188. react immediately

189. react immediately
y! answers. live suggest

190. react immediately
y! answers. live suggest
y! mail, kayak. auto complete

191. react immediately
y! answers. live suggest
y! mail, kayak. auto complete

192. react immediately
y! answers. live suggest netflix. periodic refresh
y! mail, kayak. auto complete

193. react immediately
y! answers. live suggest netflix. periodic refresh
y! mail, kayak. auto complete
y!mail. busy indicator

194. react immediately
y! answers. live suggest netflix. periodic refresh
y! mail, kayak. auto complete
y!mail. busy indicator
y! small biz. live previews

195. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting

196. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting

197. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting

198. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible

199. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible

200. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible

201. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
roost

202. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive

203. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive

204. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive

205. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap

206. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap

207. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap

208. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap

209. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth

210. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth

211. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth

212. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth

213. react immediately
Keep feedback focused
Use nuance

214. react immediately
Keep feedback focused
Use nuance

215. react immediately
Keep feedback focused
Use nuance

216. react immediately
Think “deeper interaction”
Multi-variate data
focus + context

217. react immediately
Think “deeper interaction”
Multi-variate data
focus + context

218. react immediately
Think “deeper interaction”
Multi-variate data
focus + context

219. 6 principles for Crafting Rich Web Experiences
make it direct
keep it lightweight
stay on the page
provide invitations
use transitions
react immediately
Upcoming Book:
Designing Web Interfaces: Principles & Patterns for Rich Interfaces
O’Reilly
This Presentation:
http://billwscott.com/share/presentations/2008/ajaxworld