This follows closely to my upcoming O'Reilly book Designing Web Interfaces. Pre-order here: http://tinyurl.com/6azn99

1. Designing Web Interfaces
Principles & Patterns for Rich Interaction
Bill Scott
Director, UI Engineering
1

2. background
2

3. Newton’s Third Law of Motion
For every action, there is an equal and opposite reaction
interesting moments abound to engage the user
it’s the nuance stupid
make “less” become “more”
Interaction
(action)
+ Feedback
(reaction)
3

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

5. make it direct
5

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

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

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

9. make it direct
inline editing
Yahoo! Bookmarks
7

10. make it direct. inline editing
discoverability
invitations
8

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

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

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

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

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

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

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

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

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

20. make it direct. inline editing
considerations
complex editing
blending modes
9

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

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

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

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

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

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

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

28. make it direct. inline editing
accessibility
10

29. make it direct. inline editing
accessibility
flickr. alternate edit path
10

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

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

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

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

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

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

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

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

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

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

40. make it direct
drag and drop
My Yahoo! drag and drop
12

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

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

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

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

45. 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.
14

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

47. 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
15

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
15

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
15

50. keep it lightweight
16

51. keep it lightweight. contextual tools
digg. in page action
17

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

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

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

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

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

57. 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
17

58. 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
17

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
17

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

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

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

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

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

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

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
netflix. ratings
19

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
digg. vote
click-weight
seek time
decision time
second guessing
wait time
netflix. ratings
interaction steps
cost/benefit tradeoff
19

68. keep it lightweight. anti-patterns
20

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

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

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

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

73. keep it lightweight. anti-patterns
21

74. keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
21

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

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

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

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

79. stay on the page
22

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

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

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

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

84. stay on the page. overlay
24

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

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

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

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

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

90. 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
25

91. 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
25

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
25

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 roost. in-context insight
25

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
25

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
25

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
25

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

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

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
y! health. carousel
26

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
y! mail. on-demand scrolling
26

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
microsoft live. paged scrolling y! mail. on-demand scrolling
26

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

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

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

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

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

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

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

109. 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
27

110. 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
28

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
the gap. inline assistant
28

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 checkout
the gap. inline assistant
28

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
28

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 broadmoor hotel. one page checkout
28

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

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

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

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

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

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

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

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

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

124. 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
29

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

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

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

128. offer an invitation
31

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

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

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

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

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

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

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
yahoo! tour invitation
33

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
starz play! sneak peek in carousel
33

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

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
flickr. hover invitation
34

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
34

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
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation
34

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 y! movies. hover invitation
34

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 (fake). being too explicit
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation y! movies. hover invitation
34

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

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

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

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

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

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

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

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

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

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 flickr. drop down affordance
36

153. offer an invitation. anti-patterns
37

154. offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
37

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

156. use transitions
38

157. use transitions
39

158. use transitions
39

159. use transitions
Speak to the brain
Understanding attention processing
40

160. use transitions
Speak to the brain
Understanding attention processing
40

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

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

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

164. use transitions
42

165. use transitions
backpackit. fade transition + self-healing transition.
42

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

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

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

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

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

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

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

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

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

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

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

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

178. use transitions. anti-patterns
45

179. use transitions. anti-patterns
anti-pattern. borders. needless fanfare
45

180. use transitions. anti-patterns
46

181. use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
46

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

183. use transitions. anti-patterns
47

184. use transitions. anti-patterns
anti-pattern. y! local. stalker
47

185. react immediately
48

186. react immediately
49

187. react immediately
50

188. react immediately
y! answers. live suggest
50

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

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

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

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

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

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

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

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

197. 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
52

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
52

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
53

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
roost
53

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

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

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

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

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

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

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

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

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

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

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

212. react immediately
Keep feedback focused
Use nuance
57

213. react immediately
Keep feedback focused
Use nuance
57

214. react immediately
Keep feedback focused
Use nuance
57

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

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

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

218. 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
59

219. And I am Hiring!
60