Designing Web Interfaces

47,015 views

Published on

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

Published in: Design, Business, Technology
4 Comments
146 Likes
Statistics
Notes
No Downloads
Views
Total views
47,015
On SlideShare
0
From Embeds
0
Number of Embeds
1,844
Actions
Shares
0
Downloads
2,155
Comments
4
Likes
146
Embeds 0
No embeds

No notes for slide

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

×