Designing for Interesting Moments
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designing for Interesting Moments

on

  • 41,280 views

(Given at Google campus for IxDA, Microsoft campus in Redmond to UX team, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009. Will be giving again in Florida at Rich Web ...

(Given at Google campus for IxDA, Microsoft campus in Redmond to UX team, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009. Will be giving again in Florida at Rich Web Experience.)

Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience -- or worse to create confusion in the user's mind.

In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn't work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).

These are conveniently summarized in six over-arching design principles.

* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.

This talk goes hand-in-hand with Bill Scott & Theresa Neil's book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.

Statistics

Views

Total Views
41,280
Views on SlideShare
30,466
Embed Views
10,814

Actions

Likes
167
Downloads
1,250
Comments
5

94 Embeds 10,814

http://designingwebinterfaces.com 4163
http://theresaneil.wordpress.com 3326
http://looksgoodworkswell.blogspot.com 831
http://designgalleria.tumblr.com 662
http://www.usability.by 408
http://tardate.blogspot.com 220
http://interactivity.ysdn.ca 189
http://orana.info 154
http://tardate.blogspot.sg 151
http://greatmobileux.com 140
http://www.slideshare.net 62
http://tardate.blogspot.in 29
http://tardate.blogspot.com.au 28
http://tardate.blogspot.co.uk 22
http://know.namics.com 21
http://looksgoodworkswell.blogspot.co.uk 20
http://www.techgig.com 19
http://tardate.blogspot.ca 18
http://looksgoodworkswell.blogspot.in 17
http://looksgoodworkswell.blogspot.de 16
http://tardate.blogspot.de 15
http://tardate.blogspot.com.br 15
http://www.looksgoodworkswell.com 14
http://goingon.in 13
http://tardate.blogspot.cz 10
https://theresaneil.wordpress.com 10
http://tardate.blogspot.jp 10
http://tardate.blogspot.it 9
http://tardate.blogspot.fr 9
http://tardate.blogspot.ru 9
http://tardate.blogspot.com.es 8
http://looksgoodworkswell.blogspot.ca 8
http://looksgoodworkswell.blogspot.com.es 8
http://esouillat.wordpress.com 8
http://webcache.googleusercontent.com 8
http://translate.googleusercontent.com 8
http://julioprotzek.tumblr.com 7
http://www.memonic.com 7
http://looksgoodworkswell.blogspot.fr 6
http://tardate.blogspot.nl 6
http://tardate.blogspot.no 5
http://blog.office.wildom.com 5
http://looksgoodworkswell.blogspot.com.au 5
http://looksgoodworkswell.blogspot.com.br 5
http://tardate.blogspot.mx 5
http://a0.twimg.com 5
http://tardate.blogspot.ch 4
http://tardate.blogspot.pt 4
http://tardate.blogspot.be 4
http://www.linkedin.com 4
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good stuff! Found this cause you're 'hot on twitter' again.

    Where you at nowadays?
    Are you sure you want to
    Your message goes here
    Processing…
  • Update on credit for slides 105-107.
    http://www.psych.ubc.ca/~rensink/flicker/download/index.html
    Are you sure you want to
    Your message goes here
    Processing…
  • lovely !it spark me a lot
    Are you sure you want to
    Your message goes here
    Processing…
  • Just a few notes for those following along at home.

    Slide 29. I discuss how star bars got started at Netflix and how this illustrates input where you output.

    Slides 103-107 is example of change blindness. See http://www.usd.edu/psyc301/ChangeBlindness.htm for the live example. See http://en.wikipedia.org/wiki/Change_blindness for more details. Slide 183-184 see http://www.flickr.com/photos/designingwebinterfaces/3659839057/
    Are you sure you want to
    Your message goes here
    Processing…
  • Good stuff, Bill. Reads like an eBook of sorts and definitely apropos for the times we design in. Also great accompaniment for your book (and for those who have not quite made it all the way through---guilty!)

    Seriously though Thank you for posting this.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing for Interesting Moments Presentation Transcript

  • 1. Designing for Interesting Moments Bill Scott Director, UI Engineering Netflix Microsoft - August 24, 2009
  • 2. Me
  • 3. Simple Interaction?
  • 4. Simple Interaction? Events... Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag re-enters original location. Drag re-enters original location. Drag enters valid target. Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target. Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop rejected. Drop on parent container. 16+
  • 5. Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+
  • 6. Actors Events 96 Interesting Moments
  • 7. Interesting Moments
  • 8. Interesting Moments
  • 9. Interesting Moments
  • 10. Interesting Moments
  • 11. Interesting Moments
  • 12. Interesting Moments
  • 13. interaction (n). mutual or reciprocal action; interacting
  • 14. interaction. interplay between system and user
  • 15. interaction. interplay between system and user
  • 16. interaction. interplay between system and user
  • 17. interaction. sequence tells a story
  • 18. interactivity. cyclic process between two or more active agents in which each agent alternatively listens, thinks, and speaks. Chris Crawford Interactive Storytelling
  • 19. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 20. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 21. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 22. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 23. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 24. Interesting Moments Captures minute interplay Serves as tickler for nuances Speaks to the possibilities
  • 25. 6 principles
  • 26. 6 principles for designing interesting moments
  • 27. wh ere Input put. out you - Ala n Co oper
  • 28. In Page Editing inline editing. animoto.com
  • 29. In Page Editing Interesting Moments Page load Not editing: - Mouse enters edit area - Mouse exits edit area - Mouse click in edit area Editing: - Mouse exits edit area - Mouse click outside edit inline editing. animoto.com
  • 30. Analyzing the Moments Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background
  • 31. Analyzing the Moments 1 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1
  • 32. Analyzing the Moments 1 2 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2
  • 33. Analyzing the Moments 1 2 3 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2 3
  • 34. Analyzing the Moments 1 2 3 4 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2 3 4
  • 35. Analyzing the Moments 1 2 3 4 5 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2 3 4 5
  • 36. Analyzing the Moments 1 2 3 4 5 6 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2 3 4 5 6
  • 37. Analyzing the Moments 1 2 3 4 5 6 7 Not editing: Not editing: Editing: Editing: Mouse clicks Page Render Mouse in Mouse exits Mouse exits Mouse click in edit area edit area edit area edit area elsewhere Cursor link cursor normal i-beam normal normal dotted dotted Saving... hidden edit outline; hidden edit outline; Edit Area solid outline message; field invitational field white new value text background 1 2 3 4 5 6 7
  • 38. Refactoring the Moments Not editing: Editing: Not editing: Editing: Mouse Mouse clicks Mouse click Editing: Click Page Render Mouse exits Mouse exits enters edit in edit area outside edit Save Button edit area edit area area area Cursor link cursor normal i-beam normal normal normal dotted dotted Saving... Saving... hint at edit outline; hidden edit outline; Edit Area solid outline message; message; field invitational field white new value new value text background Show Save/ Hide Save/ Buttons? Cancel Cancel buttons buttons Show edit Edit Link? link?
  • 39. In Page Editing inline editing. fickr.com
  • 40. In Page Editing inline editing. fickr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons
  • 41. In Page Editing o Pay attention t ity discoverabil inline editing. fickr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons
  • 42. In Page Editing o Pay attention t ity discoverabil inline editing. fickr.com Use a clear “c all to action” Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons
  • 43. anti-pattern. non-symmetrical. iphone
  • 44. anti-pattern. non-symmetrical. iphone
  • 45. anti-pattern. non-symmetrical. iphone
  • 46. anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  • 47. anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  • 48. & Keep activation al deactivatio n symmetric anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  • 49. Drag, Open & Drop drag and drop. gmail
  • 50. Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Drop accepted What happened? Collapses immediately. drag and drop. gmail
  • 51. Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Reduce physical effort. Drop accepted What happened? Collapses immediately. drag and drop. gmail
  • 52. Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Reduce physical effort. Drop accepted What happened? Collapses immediately. Reduce m ental effort. drag and drop. gmail
  • 53. anti-pattern. artificial construct.
  • 54. rate an object. netflix.com anti-pattern. artificial construct.
  • 55. No artificia l constructs! rate an object. netflix.com anti-pattern. artificial construct.
  • 56. re a int. qui tpr Re foo li ght
  • 57. In Page Actions (always visible) original digg site. digg.com 1.0
  • 58. In Page Actions (always visible) original digg site. digg.com 1.0
  • 59. In Page Actions (always visible) original digg site. digg.com 1.0 in-page action. digg.com
  • 60. In Page Actions (always visible) original digg site. digg.com 1.0 in-page action. digg.com
  • 61. In Page Actions (always visible) original digg site. digg.com 1.0 ary actions. Use for prim in-page action. digg.com
  • 62. In Page Actions (always visible) in-page action. digg.com
  • 63. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix
  • 64. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix rating an object. y!movies, y!answers
  • 65. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix remembered collections. gap.com rating an object. y!movies, y!answers
  • 66. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix t.” he “click weigh Use to reduce t •# of interaction steps •Decision time •Seek time •Second guessing •Wait time remembered collections. gap.com http://genesisconduit.wordpress.com/2008/07/13/click-weight/ rating an object. y!movies, y!answers http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513
  • 67. Contextual Tools (inline on hover) contextual tool menu. flickr.com
  • 68. Contextual Tools (inline on hover) contextual tool menu. flickr.com contextual tool actions. backpackit
  • 69. Contextual Tools (inline on hover) ns Use for sec ondary actio ity. or to prese rve readabil contextual tool menu. flickr.com contextual tool actions. backpackit
  • 70. Contextual Tools (overlay on hover) contextual tool overlay. bing.com
  • 71. Contextual Tools (overlay on hover) ctivity. readab ility & intera Balance contextual tool overlay. bing.com
  • 72. Anti-Pattern: Hover & Cover anti-pattern. hover & cover. yahoo! teachers
  • 73. Anti-Pattern: Hover & Cover Mouse Mouse Page Tool over leaves tool In Progress Complete Render selected object layer Cursor link cursor Wrapped Normal Normal Actionable by tool display display Object layer mode mode Contextual Show tool Hide tool Hide tool Tools layer layer layer anti-pattern. hover & cover. yahoo! teachers
  • 74. Anti-Pattern: Hover & Cover Mouse Mouse Page Tool over leaves tool In Progress Complete Render selected object layer ext Don’t obscure contCursor link cursor . o r navigation Wrapped Normal Normal Actionable by tool display display Object layer mode mode Contextual Show tool Hide tool Hide tool Tools layer layer layer anti-pattern. hover & cover. yahoo! teachers
  • 75. Hover & Cover Refactored hover & cover resolved. y! teachers
  • 76. Hover & Cover Refactored hover & cover resolved. y! teachers
  • 77. Contextual Tools (overlay on hover) hover details. linkedin.com
  • 78. Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de hover details. linkedin.com
  • 79. Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de Time-based y. targeting is trick hover details. linkedin.com
  • 80. Contextual Tools (overlay on hover) uld Hover a ctivation sho lay be 1 /2 second de Time-based y. targeting is trick Mouse path . targe ting is tricky hover details. linkedin.com
  • 81. anti-pattern. double duty. amazon.com
  • 82. Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com
  • 83. Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com l. Do one thing wel
  • 84. Contextual Tools (overlay on click) google maps
  • 85. Contextual Tools (overlay on click) google maps bing.com
  • 86. Contextual Tools (overlay on click) google maps bing.com everyblock.com
  • 87. Contextual Tools (overlay on click) ol Open c ontextual to k. ys with a clic google maps overla bing.com everyblock.com
  • 88. What about new Yahoo page? embedded application overlay - hover activated. yahoo.com 2009
  • 89. What about new Yahoo page? Overlay stays open. embedded application overlay - hover activated. yahoo.com 2009
  • 90. What about new Yahoo page? Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009
  • 91. What about new Yahoo page? Mouse exits. Overlay closes. Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009
  • 92. What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. Overlay stays open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009
  • 93. What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. The not so good? • Activation delay feels sluggish (however delay is necessary). • Not all menus activate a panel. • Accidental triggering (result in obscuring content). Overlay stays • Gigantic overlays activated by hover open. On mouse hover/delay switches to new app. embedded application overlay - hover activated. yahoo.com 2009
  • 94. What about new Yahoo page? Mouse exits. Overlay closes. The good? • Doesn’t obscure other navigation. • Doesn’t collapse erratically. The not so good? • Activation delay feels sluggish (however delay is necessary). • Not all menus activate a panel. • Accidental triggering (result in obscuring content). Overlay stays • Gigantic overlays activated by hover open. On mouse hover/delay switches to new app. See also: Jakob Nielsen’s research on embedded application overlay - hover activated. yahoo.com“Mega Menus”: http://tr.im/twnC 2009
  • 95. in flow. Mainta
  • 96. Exploratorium Exhibit
  • 97. Spot the differences
  • 98. Spot the differences
  • 99. Now try again...
  • 100. Now try again...
  • 101. Now try again... e. oments wi thin the pag Keep the m
  • 102. epage. me nts within th Keep the mo
  • 103. Overlays hover details. netflix.com hover dialog. netflix.com
  • 104. Overlays hover details. netflix.com hover dialog. netflix.com
  • 105. Overlays o Wait 1/2 second t s. activate hover detail hover details. netflix.com hover dialog. netflix.com
  • 106. Overlays o Wait 1/2 second t s. activate hover detail Immediately ver d eactivate ho details on mouse exit. hover details. netflix.com hover dialog. netflix.com
  • 107. Overlays o Wait 1/2 second t s. activate hover detail Immediately ver d eactivate ho details on mouse exit. re hover details. netflix.com Change con text or captu . flow in o verlay dialog hover dialog. netflix.com
  • 108. Anti-Pattern: Idiot Boxes anti-pattern. idiot box. yelp.com
  • 109. Anti-Pattern: Idiot Boxes anti-pattern. idiot box. yahoo! photos
  • 110. Anti-Pattern: Idiot Boxes s h e proceeding “Don’t stop t - Alan Cooper with idiocy.” anti-pattern. idiot box. yahoo! photos
  • 111. Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com
  • 112. Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
  • 113. Overlays: Hover Initiated anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables anti-pattern. shifting overlay. wikirank
  • 114. Overlays: Hover Initiated ouse . ot follow the m Over lays should n anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables anti-pattern. shifting overlay. wikirank
  • 115. Inlays click activated inlay. roost.com
  • 116. Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com
  • 117. Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com hover activated accordian. nasa.gov
  • 118. Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com hover activated accordian. nasa.gov
  • 119. Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com hover activated accordian. nasa.gov hover activated accordian. apple.com
  • 120. Inlays g Use inl ays for stron . l association hover activated accordian. brown.edu contextua click activated inlay. roost.com k, Activate in lays with clic not hover. hover activated accordian. nasa.gov hover activated accordian. apple.com
  • 121. ch Don’t infer too mu about the user’s intent er. from a mouse hov
  • 122. Virtual Space endless scrolling. bing.com
  • 123. Virtual Space carousel. paging. gallery. bing.com endless scrolling. bing.com
  • 124. Virtual Space e. Consider the backstag carousel. paging. gallery. bing.com endless scrolling. bing.com
  • 125. Seamless Context you are here. idea.org
  • 126. Seamless Context you are here. idea.org seamless paging. magcloud
  • 127. Seamless Context you are here. idea.org ext M aintain cont . across pages seamless paging. magcloud
  • 128. Nav Bars: Extend the moment nav status bar. thesixtyone.com nav status bar. facebook.com nav status bar. digg.com
  • 129. Nav Bars: Extend the moment nav status bar. thesixtyone.com nav status bar. facebook.com nav status bar. digg.com
  • 130. Nav Bars: Extend the moment nav status bar. thesixtyone.com . ain context across pages Maint nav status bar. facebook.com nav status bar. digg.com
  • 131. acti on. e in ter In vit
  • 132. http://dustincurtis.com/images/twitter/green_spill.jpg
  • 133. http://dustincurtis.com/images/twitter/green_spill.jpg
  • 134. http://dustincurtis.com/images/twitter/green_spill.jpg
  • 135. http://dustincurtis.com/images/twitter/green_spill.jpg
  • 136. all to action. Use a clear c http://dustincurtis.com/images/twitter/green_spill.jpg
  • 137. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 138. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 139. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 140. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 141. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 142. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 143. Anti-Pattern: No clear action anti-pattern. no clear action. bing.com
  • 144. Anti-Pattern: No clear action tion . Use a cl ear call to ac anti-pattern. no clear action. bing.com
  • 145. Hover Invitations hover invitation. y!movies
  • 146. Hover Invitations hover invitation. y!movies tooltip, hover & cursor invitation. flickr.com
  • 147. Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit tooltip, hover & cursor invitation. flickr.com
  • 148. Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit h Aid discov erability wit hover invitations. tooltip, hover & cursor invitation. flickr.com
  • 149. Blank Slate Invitation dog-ear invitation. login.yahoo.com
  • 150. Blank Slate Invitation fill-in-the-blanks invitation. netflix dog-ear invitation. login.yahoo.com
  • 151. Blank Slate Invitation fill-in-the-blanks invitation. netflix dog-ear invitation. login.yahoo.com blank-slate invitation. backpackit
  • 152. Blank Slate Invitation for Recycle blank areas . our features promoting y fill-in-the-blanks invitation. netflix dog-ear invitation. login.yahoo.com blank-slate invitation. backpackit
  • 153. Tour Invitation tour invitation. gmail
  • 154. Tour Invitation tour invitation. yahoo.com tour invitation. gmail
  • 155. Tour Invitation tour invitation. yahoo.com Use new visits to es. e new featur tour invitation. gmail promot
  • 156. Drag & Drop Invitation drag invitation. google maps drag invitation. google maps
  • 157. Drag & Drop Invitation drop invitation. google maps drag invitation. google maps drag invitation. google maps
  • 158. Drag & Drop Invitation s. Mind y our moment drop invitation. google maps drag invitation. google maps drag invitation. google maps
  • 159. Prompt Invitation facebook.com
  • 160. Prompt Invitation facebook.com
  • 161. Prompt Invitation facebook.com delicious.com
  • 162. Prompt Invitation s s or command Use question facebook.com t. to pro mpt for inpu delicious.com
  • 163. button. the gap
  • 164. button. the gap
  • 165. hyperlink. backpackit button. the gap
  • 166. hyperlink. backpackit button. the gap
  • 167. hyperlink. backpackit button. the gap drop down arrow. flickr
  • 168. hyperlink. backpackit button. the gap drop down arrow. flickr
  • 169. hyperlink. backpackit n button. the gap Bridge n ew interactio s. amiliar idiom styles with f drop down arrow. flickr
  • 170. itio ns. ans Show tr
  • 171. anti-pattern. needless fanfare. macintosh turbo tax
  • 172. anti-pattern. needless fanfare. macintosh turbo tax again in slow-motion...
  • 173. anti-pattern. needless fanfare. macintosh turbo tax again in slow-motion...
  • 174. anti-pattern. needless fanfare. macintosh turbo tax Always qu estion “why” . when usin g transitions again in slow-motion...
  • 175. Attention processing is hard-wired into the brain It is chemistry. You can’t help it.
  • 176. Attention processing is hard-wired into the brain lp looking at It is chemistry. You can’t You can’t he ads “dancing” mortgage help it.
  • 177. anti-pattern. needless fanfare. roost.com Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  • 178. anti-pattern. needless fanfare. roost.com anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  • 179. anti-pattern. needless fanfare. pbs.org anti-pattern. needless fanfare. roost.com anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  • 180. anti-pattern. needless fanfare. pbs.org anti-pattern. needless fanfare. roost.com b. n imation kno Imagine an a y. a tion carefull Dial in anim anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  • 181. original. animation on drop. my yahoo!
  • 182. original. animation on drop. my yahoo! current. no animation on drop. my yahoo!
  • 183. original. animation on drop. my yahoo! alf” Use the “cut it in-h b. rule of thum current. no animation on drop. my yahoo!
  • 184. Moments Communicate
  • 185. Moments Communicate progress indicator
  • 186. Moments Communicate Speed up time. progress indicator
  • 187. Moments Communicate Speed up time. progress indicator earlier version of my yahoo!
  • 188. Moments Communicate Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  • 189. Moments Communicate mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  • 190. Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  • 191. Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time the gap earlier version of my yahoo!
  • 192. Moments Communicate . Show state change mint.com Speed up time. hips. Sh ow relations progress indicator . Slow down time the gap earlier version of my yahoo!
  • 193. Moments Communicate . Show state change mint.com Speed up time. hips. Sh ow relations progress indicator . Slow down time the gap flickr organizr earlier version of my yahoo!
  • 194. Moments Communicate . Show state change mint.com Speed up time. hip s. Sh ow relations progress indicator . Slow down time the gap ion. Focus attent flickr organizr earlier version of my yahoo!
  • 195. active. e Be r
  • 196. experiment on home page
  • 197. experiment on home page dedicated area
  • 198. Live Feedback live feedback. wundrbar
  • 199. Live Feedback live feedback. flickr live feedback. wundrbar
  • 200. Live Feedback live feedback. flickr live feedback. wundrbar live feedback. google maps
  • 201. Live Feedback k Create a t ight feedbac loop w ith the user. live feedback. flickr live feedback. wundrbar live feedback. google maps
  • 202. Live Suggest live suggest. google (early version)
  • 203. Live Suggest live suggest. google (early version) live suggest. yahoo search
  • 204. Live Suggest live suggest. google (early version) live suggest. yahoo search live suggest. early yahoo search experiment
  • 205. Live Suggest live suggest. google (early version) live suggest. yahoo search live suggest. early yahoo search experiment l Narrow toward a goa . dis tract from it rather than
  • 206. Live Previews live preview. volkswagen car configurator
  • 207. Live Previews live preview. volkswagen car configurator live suggest. apple search
  • 208. Live Previews live preview. volkswagen car configurator ws. Us e live previe live suggest. apple search
  • 209. Live Filtering refining search. bing tweets
  • 210. Live Filtering Reduce search effort g. wit h live filterin refining search. bing tweets
  • 211. Live Forms live forms. yahoo! small business
  • 212. Live Forms live forms. yahoo! small business live forms. google account creation
  • 213. Live Forms and live forms. yahoo! small business Prevent er rors beforeh . wi th live forms live forms. google account creation
  • 214. Auto Complete auto complete. kayak
  • 215. Auto Complete by Reduc e user effort tly. autocompl eting correc auto complete. kayak
  • 216. Input where you output. Maintain flow. Require a light footprint. Invite interaction. Show transitions. Be reactive.
  • 217. Flickr Credits http://tr.im/t6Ew Presentation billwscott.com/share/ presentations/2009/ms Blog looksgoodworkswell.com Web username billwscott Book designingwebinterfaces.com O’Reilly