Crafting Rich Web Experiences

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

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

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

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

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

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

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

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

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, netﬂix. rating an object the gap. remembered collections

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

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

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

61. 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 netﬂix. 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 netﬂix. 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

80. stay on the page

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

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

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

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)

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

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 assistant

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

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

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

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

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

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

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

129. offer an invitation

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

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

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

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

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 ﬂag 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 ﬂag all interactions ﬂickr. 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 ﬂag all interactions ﬂickr. 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 ﬂag all interactions backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂag all interactions backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂag all interactions backpackit (fake). being too explicit backpackit. tooltip invitation + hover invitation + cursor invitation ﬂickr. 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 ﬂickr. drop here invitation (static)

146. 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)

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 ﬂickr. 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

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

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

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

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

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

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

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

179. use transitions. anti-patterns

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

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

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

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

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

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

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

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

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

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

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

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

Crafting Rich Web Experiences

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Andere mochten auch

Andere mochten auch (10)

Mehr von rajivmordani

Mehr von rajivmordani (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Crafting Rich Web Experiences