Designing Web Interfaces Book - O'Reilly Webcast

60,527 views
55,838 views

Published on

This is an update to the previous Designing Web Interfaces talk. This presentation was given on Feb. 3, 2009 over a live webcast via an O'Reilly Author Webcast special.

This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.

This presentation is much better suited for Slideshare than previous presentations as I took a lot of time to turn the movie screencasts into individual keyframes. All interactions now show in this presentation (that is why there are 300+ slides; in reality the presentation was more like 50 slides.)

You can see the recorded video & audio of the webcast in high resolution on YouTube at: http://www.youtube.com/watch?v=LW4MwvgW_ww&fmt=18

http://designingwebinterfaces.com
http://looksgoodworkswell.com
http://designgenie.org

(Also this is similar to the Big D 09 presentation on 5/30/2009. You can find that exact presentation at http://billwscott.com/share/presentations/2009/bigd/DWI.pdf)

Published in: Design
11 Comments
237 Likes
Statistics
Notes
No Downloads
Views
Total views
60,527
On SlideShare
0
From Embeds
0
Number of Embeds
17,540
Actions
Shares
0
Downloads
2,825
Comments
11
Likes
237
Embeds 0
No embeds

No notes for slide

Designing Web Interfaces Book - O'Reilly Webcast

  1. Designing Web Interfaces Principles & Patterns for Rich Interaction Bill Scott & Theresa Neil O’Reilly Webcast - February 3, 2009 Bill Scott Director, UI Engineering Netflix
  2. background
  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” + Feedback Interaction (reaction) (action)
  4. 6 principles for Designing 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
  5. In-Page Editing. Single-Field Inline Edit. Multi-Field Inline Edit. Overlay Edit. Table Edit. Group Edit. Module Configuration. Drag and Drop. Drag and Drop Module. Drag and Drop List. Drag and Drop Object. Drag and Drop Action. Drag and Drop Collection. Direct Selection. Toggle Selection. Collected Selection. Object Selection. Hybrid Selection. Contextual Tools. Always-Visible Tools. Hover-Reveal Tools. Toggle-Reveal Tools. Multi-Level Tools. Secondary Menu. Overlays. Dialog Overlay. Detail Overlay. Input Overlay. Inlays. Dialog Inlay. List Inlay. Detail Inlay. Tabs. Virtual Pages. Virtual Scrolling. Inline Paging. Scrolled Paging. Carousels Virtual Panning. Zoomable User Interface. Process Flow. Interactive Single-Page. Process Inline Assistant. Process Dialog Overlay. Process Configurator. Static Single-Page Process. Invitation. Static Invitations. Call to Action Invitation. Tour Invitation. Dynamic Invitation. Hover Invitation. Affordance Invitation. Drag and Drop Invitation. Inference Invitation. More Content Invitation. Transitions. Brighten and Dim. Expand/Collapse. Self- Healing. Fade. Animation. Spotlight. Lookup Patterns. Auto Complete. Live Suggest. Live Search. Refining Search. Feedback Patterns. Live Preview. Progressive Disclosure. Progress Indicator. Periodic Refresh.
  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 Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  11. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  12. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  13. make it direct inline editing Yahoo! Bookmarks
  14. make it direct inline editing Yahoo! Bookmarks
  15. make it direct inline editing Yahoo! Bookmarks
  16. make it direct inline editing Yahoo! Bookmarks
  17. make it direct inline editing Yahoo! Bookmarks
  18. make it direct. inline editing considerations discoverability complex editing blending modes
  19. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  20. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  21. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  22. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  23. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  24. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  25. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  26. make it direct. inline editing considerations discoverability complex editing blending modes accessibility
  27. make it direct. inline editing considerations discoverability complex editing blending modes accessibility flickr. alternate edit path
  28. make it direct. inline editing considerations discoverability complex editing blending modes accessibility flickr. alternate edit path
  29. make it direct. inline editing group editing symmetry of interaction discoverability vs readability
  30. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  31. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  32. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  33. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction
  34. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction
  35. 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.”
  36. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  37. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  38. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  39. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  40. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  41. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances
  42. 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
  43. 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
  44. 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
  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
  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
  47. 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. not enough hints.
  48. 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. not enough hints.
  49. 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. not enough hints.
  50. 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. not enough hints.
  51. make it direct. drag and drop drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. keep it lightweight
  58. keep it lightweight. contextual tools
  59. keep it lightweight. contextual tools digg. in page action
  60. keep it lightweight. contextual tools digg. in page action
  61. keep it lightweight. contextual tools digg. in page action Key to digg’s early success - Kevin Rose
  62. keep it lightweight. contextual tools digg. in page action the gap. remembered collections
  63. keep it lightweight. contextual tools digg. in page action the gap. remembered collections
  64. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  65. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  66. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  67. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  68. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  69. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  70. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  71. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  72. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  73. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  74. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  75. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  76. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  77. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  78. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  79. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  80. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  81. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  82. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  83. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  84. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  85. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  86. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  87. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  88. keep it lightweight. contextual tools Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events
  89. 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
  90. 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
  91. keep it lightweight. anti-patterns
  92. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  93. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  94. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  95. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  96. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover. resolved y! teachers. anti-pattern. hover & cover
  97. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover. resolved y! teachers. anti-pattern. hover & cover
  98. keep it lightweight. anti-patterns
  99. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat
  100. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat
  101. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  102. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  103. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  104. stay on the page
  105. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  106. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  107. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  108. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  109. stay on the page. overlay
  110. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  111. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  112. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  113. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  114. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  115. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  116. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  117. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  118. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover
  119. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover
  120. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover anti-pattern. amazon. mouse trap
  121. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay
  122. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  123. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  124. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  125. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  126. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  127. 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
  128. 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
  129. 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
  130. 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
  131. 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
  132. 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
  133. 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
  134. 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
  135. 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
  136. stay on the page. virtual Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  137. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  138. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  139. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling microsoft live. paged scrolling
  140. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  141. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  142. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  143. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  144. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  145. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  146. stay on the page. virtual Rethink paging in-place paging zoomable user interface (zui)
  147. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  148. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  149. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  150. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  151. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  152. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  153. 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
  154. 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
  155. 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
  156. 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
  157. 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
  158. 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
  159. 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
  160. 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
  161. 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
  162. stay on the page. process flow step by step? yes, sometimes works best
  163. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  164. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  165. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  166. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  167. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  168. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  169. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step netflix. step by step
  170. 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
  171. stay on the page. anti-patterns the answer is in testing
  172. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  173. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  174. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  175. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  176. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  177. stay on the page. anti-patterns the answer is in testing netflix. simpler overlay netflix. stalker overlay
  178. offer an invitation
  179. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate
  180. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate yahoo login! dog-ear invite
  181. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite
  182. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite backpackit. blank slate invitation
  183. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek
  184. 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
  185. 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
  186. 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
  187. offer an invitation. dynamic invitation discoverability invitations
  188. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation
  189. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation
  190. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation
  191. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  192. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  193. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  194. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  195. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  196. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit flickr. on hover
  197. 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
  198. 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
  199. 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 flickr. hover invitation
  200. 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
  201. 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
  202. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after
  203. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  204. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  205. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  206. 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)
  207. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues
  208. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button
  209. 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
  210. 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
  211. 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
  212. offer an invitation. anti-patterns
  213. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  214. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  215. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  216. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  217. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  218. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  219. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  220. use transitions
  221. use transitions
  222. use transitions
  223. use transitions Speak to the brain Understanding attention processing
  224. use transitions Speak to the brain Understanding attention processing
  225. use transitions Speak to the brain Understanding attention processing Sending the wrong message
  226. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  227. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  228. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  229. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  230. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  231. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  232. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  233. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  234. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  235. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  236. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  237. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  238. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  239. use transitions
  240. use transitions backpackit. fade transition + self-healing transition.
  241. use transitions backpackit. fade transition + self-healing transition.
  242. use transitions backpackit. fade transition + self-healing transition.
  243. use transitions backpackit. fade transition + self-healing transition.
  244. use transitions backpackit. fade transition + self-healing transition.
  245. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  246. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  247. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  248. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  249. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition.
  250. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition.
  251. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  252. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  253. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  254. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  255. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  256. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  257. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  258. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  259. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  260. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  261. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  262. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  263. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  264. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  265. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  266. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  267. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  268. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  269. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  270. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  271. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  272. use transitions. anti-patterns
  273. use transitions. anti-patterns
  274. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  275. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  276. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  277. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  278. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  279. use transitions. anti-patterns
  280. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  281. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  282. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  283. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  284. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  285. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  286. react immediately
  287. react immediately wundrbar. live preview.
  288. react immediately wundrbar. live preview.
  289. react immediately wundrbar. live preview.
  290. react immediately wundrbar. live preview.
  291. react immediately wundrbar. live preview.
  292. react immediately wundrbar. live preview.
  293. react immediately
  294. react immediately y! answers. live suggest
  295. react immediately y! answers. live suggest
  296. react immediately y! answers. live suggest y! mail, kayak. auto complete
  297. react immediately y! answers. live suggest y! mail, kayak. auto complete
  298. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator
  299. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  300. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  301. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  302. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  303. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  304. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  305. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  306. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  307. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  308. 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
  309. 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
  310. 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
  311. 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
  312. 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
  313. react immediately Shape user perception Make time pass faster Make application feel more responsive
  314. react immediately Shape user perception Make time pass faster Make application feel more responsive
  315. react immediately Shape user perception Make time pass faster Make application feel more responsive
  316. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  317. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  318. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  319. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  320. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  321. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  322. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  323. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  324. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  325. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  326. 6 principles for Designing Rich Web Experiences make it direct keep it lightweight stay on the page provide invitations use transitions react immediately Based on the Book: Designing Web Interfaces: Principles & Patterns for Rich Interfaces O’Reilly by Bill Scott & Theresa Neil This Presentation: Look for location on next blog post: http://designingwebinterfaces.com
  327. I am Hiring!

×