Designing Web Interfaces

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

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

19. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit ﬂickr. 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

25. 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 ﬂickr. alternate edit path 10

30. make it direct. inline editing accessibility ﬂickr. 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

35. 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 netﬂix. 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 netﬂix. few hints. 14

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

47. make it direct. drag and drop anti-pattern. artiﬁcial construct drag and drop Not for simply setting an attribute Don’t construct artiﬁcial 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, netﬂix. rating an object the gap. remembered collections 17

57. keep it lightweight. contextual tools digg. in page action y! news, netﬂix. 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, netﬂix. rating an object the gap. remembered collections ﬂickr. in-context tools y! movies, y! answers. rating an object 17

59. keep it lightweight. contextual tools digg. in page action y! news, netﬂix. rating an object the gap. remembered collections ﬂickr. 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

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 netﬂix. 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 netﬂix. ratings interaction steps cost/beneﬁt 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

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

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 conﬁguration in-context insight parallel content inlay vs. overlay 25

89. stay on the page. inlay inlays in-context conﬁguration in-context insight parallel content inlay vs. overlay my y!. in-context conﬁguration 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

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

106. 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 ﬂow rethink process ﬂows the user’s mental model vs page model every page jump is a mental speed bump 28

111. stay on the page. process ﬂow rethink process ﬂows 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 ﬂow rethink process ﬂows 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 ﬂow rethink process ﬂows 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 ﬂow rethink process ﬂows 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 ﬂow step by step? yes, sometimes works best 29

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

123. stay on the page. process ﬂow step by step? yes, sometimes works best discover card. step by step netﬂix. 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 netﬂix. stalker overlay 30

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

128. offer an invitation 31

129. offer an invitation. static invitation unﬁnished look dog-ear empty slots blank slate 32

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

131. offer an invitation. static invitation unﬁnished look dog-ear empty slots blank slate netﬂix. rate invitiation (blank slots) yahoo login! dog-ear invite 32

132. offer an invitation. static invitation unﬁnished look dog-ear empty slots blank slate netﬂix. 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 ﬂag 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 ﬂag all interactions ﬂickr. 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 ﬂag all interactions ﬂickr. 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 ﬂag all interactions backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂag all interactions backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂag all interactions backpackit (fake). being too explicit backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂickr. drop here invitation (static) 35

145. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after ﬂickr. drop here invitation (interactive) ﬂickr. 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 ﬂickr. 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

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 ﬂickr zeitgeist 41

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

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

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

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

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

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

178. use transitions. anti-patterns 45

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

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. aﬁ. animation gone wild 46

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

185. react immediately 48

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 netﬂix. periodic refresh y! mail, kayak. auto complete 50

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

193. react immediately y! answers. live suggest netﬂix. 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

197. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost conﬁdence Let the user iterate where possible 52

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

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

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

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

Designing Web Interfaces

Designing Web Interfaces

Recommended

More Related Content

What's hot

What's hot(15)

Viewers also liked

Viewers also liked(20)

More from Bill Scott

More from Bill Scott(20)

Recently uploaded

Recently uploaded(17)

Designing Web Interfaces