Designing for
Interesting
Moments
Bill Scott
Director, UI Engineering
Netflix

Ajax Experience - Boston - September 2009
Simple Interaction?
Simple Interaction? Events...

 Page load. Mouse hover. Mouse down. Drag
initiated. Drag leaves original location. Drag
  ...
Simple Interaction? Actors...



 Page. Cursor. Tool Tip. Drag
 Object. Drag Object’s Parent
   Container. Drop Target.


...
Actors   Events




                  96
                  Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments



                       es
    Captur es microstat
Interesting Moments



                           es
       Captur es microstat

                        ties
 Speaks to t...
Interesting Moments



                               es
       Captur es microstat

                         ties
 Speaks...
interaction (n).
mutual or
reciprocal action;
interacting
6 principles
6 principles
for designing interesting moments
wh ere
Input put.
     out
 you     - Ala
               n Co
                   oper
In Page Editing




inline editing. fickr.com
In Page Editing




inline editing. fickr.com



Additions:

•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Sav...
In Page Editing
                                                o
                                Pay attention t
        ...
In Page Editing
                                                o
                                Pay attention t
        ...
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone



                                        symmetrical interaction. basecamp
anti-pattern. non-symmetrical. iphone



                                        symmetrical interaction. basecamp
&
                               Keep activation         al
                               deactivatio n symmetric




ant...
Drag, Open & Drop




drag and drop. gmail
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets




  ...
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets



   ...
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets



   ...
anti-pattern. artificial construct.
rate an object. netflix.com



anti-pattern. artificial construct.
ia l constructs!
          Avoid artific
                                     rate an object. netflix.com



anti-pattern. a...
re a int.
    qui tpr
Re foo
li ght
In Page Actions (always visible)



                       original digg site. digg.com 1.0
In Page Actions (always visible)



                       original digg site. digg.com 1.0
In Page Actions (always visible)



                       original digg site. digg.com 1.0




                          ...
In Page Actions (always visible)



                       original digg site. digg.com 1.0




                          ...
In Page Actions (always visible)



                                original digg site. digg.com 1.0



                 a...
In Page Actions (always visible)
in-page action. digg.com
In Page Actions (always visible)
in-page action. digg.com   rating an object. y!news, netflix
In Page Actions (always visible)
in-page action. digg.com   rating an object. y!news, netflix




                         ...
In Page Actions (always visible)
in-page action. digg.com          rating an object. y!news, netflix




remembered collect...
In Page Actions (always visible)
in-page action. digg.com                                                      rating an o...
Contextual Tools (inline on hover)




contextual tool menu. flickr.com
Contextual Tools (inline on hover)




contextual tool menu. flickr.com




contextual tool actions. backpackit
Contextual Tools (inline on hover)

                                                                ns
                   ...
Contextual Tools (overlay on hover)




contextual tool overlay. bing.com
Contextual Tools (overlay on hover)

                                                                    ctivity.
        ...
Anti-Pattern: Hover & Cover




anti-pattern. hover & cover. yahoo! teachers
Anti-Pattern: Hover & Cover
                                                                      Mouse          Mouse
   ...
Anti-Pattern: Hover & Cover
                                                                      Mouse          Mouse
   ...
Hover & Cover Refactored




hover & cover resolved. y! teachers
Hover & Cover Refactored




hover & cover resolved. y! teachers
anti-pattern. double duty. amazon.com
Hover: shows contextual
         tool overlay.
         Click: goes to details page.




anti-pattern. double duty. amazon...
Hover: shows contextual
                      tool overlay.
                      Click: goes to details page.




       ...
in flow.
Mainta
Exploratorium Exhibit
Spot the differences
Spot the differences
Now try again...
Now try again...
Now try again...
                                e.
          oments wi thin the pag
Keep the m
epage.
            me nts within th
Keep the mo
Virtual Space




endless scrolling. bing.com
Virtual Space




                              carousel. paging. gallery. bing.com




endless scrolling. bing.com
Virtual Space



                                    e.
               Consider the backstag




                         ...
Inlays




click activated inlay. roost.com
Inlays

                                   g
             Use inl ays for stron
                                      .
  ...
Inlays

                                   g
             Use inl ays for stron
                                      .
  ...
Inlays

                                   g
             Use inl ays for stron
                                      .
  ...
Inlays

                                   g
             Use inl ays for stron
                                      .
  ...
Inlays

                                   g
             Use inl ays for stron
                                      .
  ...
Overlays




hover details. netflix.com




                            hover dialog. netflix.com
Overlays




hover details. netflix.com




                            hover dialog. netflix.com
Overlays
                                              o
                            Wait 1/2 second t
                   ...
Overlays
                                              o
                            Wait 1/2 second t
                   ...
Overlays
                                              o
                            Wait 1/2 second t
                   ...
Anti-Pattern: Idiot Boxes




anti-pattern. idiot box. yahoo! photos
Anti-Pattern: Idiot Boxes


                                                  s
                                   h e pro...
Nav Bars: Seamless Context



                                       nav status bar. thesixtyone.com




nav status bar. f...
Nav Bars: Seamless Context



                                       nav status bar. thesixtyone.com




nav status bar. f...
Nav Bars: Seamless Context



                                                       nav status bar. thesixtyone.com
     ...
acti on.
      e in ter
In vit
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
all to action.
                  Use a clear c

http://dustincurtis.com/images/twitter/green_spill.jpg
Hover Invitations
hover invitation. y!movies
Hover Invitations
hover invitation. y!movies




tooltip, hover & cursor invitation. flickr.com
Hover Invitations
hover invitation. y!movies                  hover & tool invitation. backpackit




tooltip, hover & cur...
Hover Invitations
hover invitation. y!movies                  hover & tool invitation. backpackit




                    ...
Blank Slate Invitation




dog-ear invitation. login.yahoo.com
Blank Slate Invitation




                                      fill-in-the-blanks invitation. netflix

dog-ear invitation....
Blank Slate Invitation




                                      fill-in-the-blanks invitation. netflix

dog-ear invitation....
Blank Slate Invitation


                                      for
                  Recycle blank areas      .
          ...
Tour Invitation




tour invitation. gmail
Tour Invitation




                         tour invitation. yahoo.com


tour invitation. gmail
Tour Invitation




                                          tour invitation. yahoo.com


                         Use ne...
Prompt Invitation


facebook.com
Prompt Invitation


facebook.com
Prompt Invitation


facebook.com




delicious.com
Prompt Invitation

                                         s
                             s or command
                Us...
button. the gap
button. the gap
hyperlink. backpackit




button. the gap
hyperlink. backpackit




button. the gap
hyperlink. backpackit




button. the gap




                  drop down arrow. flickr
hyperlink. backpackit




button. the gap




                  drop down arrow. flickr
hyperlink. backpackit



                                         n
button. the gap   Bridge n ew interactio     s.
      ...
itio ns.
        ans
Show tr
anti-pattern. needless fanfare. macintosh turbo tax
anti-pattern. needless fanfare. macintosh turbo tax




again in slow-motion...
anti-pattern. needless fanfare. macintosh turbo tax




again in slow-motion...
anti-pattern. needless fanfare. macintosh turbo tax




                                             Always qu estion “why...
Attention processing is
hard-wired into the brain

It is chemistry. You can’t
help it.
Attention processing is
                             hard-wired into the brain

             lp looking at   It is chemist...
anti-pattern. needless fanfare. roost.com




                                            Designing Visual Interfaces. Kev...
anti-pattern. needless fanfare. roost.com




anti-pattern. needless fanfare. nasa.gov
                                   ...
anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com




anti-pattern. needless fanfare. nasa...
anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
                                        ...
original. animation on drop. my yahoo!
original. animation on drop. my yahoo!




                                         current. no animation on drop. my yaho...
original. animation on drop. my yahoo!



                       alf”
  Use the “cut it in-h
               b.
  rule of t...
Moments Communicate
Moments Communicate



             progress indicator
Moments Communicate


                                  Speed up time.

             progress indicator
Moments Communicate


                                        Speed up time.

             progress indicator




        ...
Moments Communicate


                                        Speed up time.

             progress indicator



         ...
Moments Communicate

mint.com


                                        Speed up time.

             progress indicator


...
Moments Communicate
                             .
           Show state change

mint.com


                              ...
Moments Communicate
                             .
           Show state change

mint.com


                              ...
Moments Communicate
                              .
            Show state change

mint.com


                            ...
Moments Communicate
                                    .
                  Show state change

mint.com


                ...
Moments Communicate
                                    .
                  Show state change

mint.com


                ...
active.
    e
Be r
experiment on home page
experiment on home page




dedicated area
Live Feedback




live feedback. wundrbar
Live Feedback



                          live feedback. flickr




live feedback. wundrbar
Live Feedback



                          live feedback. flickr




live feedback. wundrbar   live feedback. google maps
Live Feedback
                         k
  Create a t ight feedbac
  loop w ith the user.


                             l...
Live Suggest




live suggest. google (early version)
Live Suggest




live suggest. google (early version)   live suggest. yahoo search
Live Suggest




live suggest. google (early version)          live suggest. yahoo search

live suggest. early yahoo searc...
Live Suggest




live suggest. google (early version)          live suggest. yahoo search

live suggest. early yahoo searc...
Live Previews




live preview. volkswagen car configurator
Live Previews




live preview. volkswagen car configurator




                                           live suggest. ap...
Live Previews




live preview. volkswagen car configurator




                                 ws.
                Us e l...
Live Filtering




refining search. bing tweets
Live Filtering
                              Reduce   search effort
                                                 g.
  ...
Live Forms

live forms. yahoo! small business
Live Forms

live forms. yahoo! small business




live forms. google account creation
Live Forms

                                                                and
live forms. yahoo! small business
        ...
Auto Complete




auto complete. kayak
Auto Complete

                                           by
                       Reduc e user effort    tly.
          ...
Input where you output.

                                          Maintain flow.




      Require a light footprint.




...
Flickr Credits
http://tr.im/t6Ew


Presentation
billwscott.com/share/
presentations/2009/ae

Blog
looksgoodworkswell.com

...
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Bill Scott Presentation
Upcoming SlideShare
Loading in …5
×

Bill Scott Presentation

1,991 views
1,902 views

Published on

Published in: Technology, Business
1 Comment
14 Likes
Statistics
Notes
  • I saw this at the conference. One thing I liked is that instead of switching to a browser to show live demos, Bill had screen casts of the demos embedded in the presentation. Ironically, those very helpful demos do not work in the PDF version available here. Does anyone know of a different version available that doesn't have this problem?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,991
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
96
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Bill Scott Presentation

  1. 1. Designing for Interesting Moments Bill Scott Director, UI Engineering Netflix Ajax Experience - Boston - September 2009
  2. 2. Simple Interaction?
  3. 3. 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+
  4. 4. Simple Interaction? Actors... Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent Container. Drop Target. 6+
  5. 5. Actors Events 96 Interesting Moments
  6. 6. Interesting Moments
  7. 7. Interesting Moments
  8. 8. Interesting Moments
  9. 9. Interesting Moments
  10. 10. Interesting Moments
  11. 11. Interesting Moments
  12. 12. Interesting Moments es Captur es microstat
  13. 13. Interesting Moments es Captur es microstat ties Speaks to the possibili
  14. 14. Interesting Moments es Captur es microstat ties Speaks to the possibili le r Ser ves as a tick
  15. 15. interaction (n). mutual or reciprocal action; interacting
  16. 16. 6 principles
  17. 17. 6 principles for designing interesting moments
  18. 18. wh ere Input put. out you - Ala n Co oper
  19. 19. In Page Editing inline editing. fickr.com
  20. 20. In Page Editing inline editing. fickr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons
  21. 21. In Page Editing o Pay attention t ity discoverabil inline editing. fickr.com Additions: •Yellow spotlight/invitation •Tooltip invitation •Explicit Save/Cancel buttons
  22. 22. 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
  23. 23. anti-pattern. non-symmetrical. iphone
  24. 24. anti-pattern. non-symmetrical. iphone
  25. 25. anti-pattern. non-symmetrical. iphone
  26. 26. anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  27. 27. anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  28. 28. & Keep activation al deactivatio n symmetric anti-pattern. non-symmetrical. iphone symmetrical interaction. basecamp
  29. 29. Drag, Open & Drop drag and drop. gmail
  30. 30. Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Drop accepted What happened? Collapses immediately. drag and drop. gmail
  31. 31. Drag, Open & Drop Mouse hover & initiation Anti-pattern: Tiny Targets Reduce physical effort. Drop accepted What happened? Collapses immediately. drag and drop. gmail
  32. 32. 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
  33. 33. anti-pattern. artificial construct.
  34. 34. rate an object. netflix.com anti-pattern. artificial construct.
  35. 35. ia l constructs! Avoid artific rate an object. netflix.com anti-pattern. artificial construct.
  36. 36. re a int. qui tpr Re foo li ght
  37. 37. In Page Actions (always visible) original digg site. digg.com 1.0
  38. 38. In Page Actions (always visible) original digg site. digg.com 1.0
  39. 39. In Page Actions (always visible) original digg site. digg.com 1.0 in-page action. digg.com
  40. 40. In Page Actions (always visible) original digg site. digg.com 1.0 in-page action. digg.com
  41. 41. In Page Actions (always visible) original digg site. digg.com 1.0 ary actions. Use for prim in-page action. digg.com
  42. 42. In Page Actions (always visible) in-page action. digg.com
  43. 43. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix
  44. 44. In Page Actions (always visible) in-page action. digg.com rating an object. y!news, netflix rating an object. y!movies, y!answers
  45. 45. 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
  46. 46. 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
  47. 47. Contextual Tools (inline on hover) contextual tool menu. flickr.com
  48. 48. Contextual Tools (inline on hover) contextual tool menu. flickr.com contextual tool actions. backpackit
  49. 49. 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
  50. 50. Contextual Tools (overlay on hover) contextual tool overlay. bing.com
  51. 51. Contextual Tools (overlay on hover) ctivity. readab ility & intera Balance contextual tool overlay. bing.com
  52. 52. Anti-Pattern: Hover & Cover anti-pattern. hover & cover. yahoo! teachers
  53. 53. 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
  54. 54. 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
  55. 55. Hover & Cover Refactored hover & cover resolved. y! teachers
  56. 56. Hover & Cover Refactored hover & cover resolved. y! teachers
  57. 57. anti-pattern. double duty. amazon.com
  58. 58. Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com
  59. 59. Hover: shows contextual tool overlay. Click: goes to details page. anti-pattern. double duty. amazon.com l. Do one thing wel
  60. 60. in flow. Mainta
  61. 61. Exploratorium Exhibit
  62. 62. Spot the differences
  63. 63. Spot the differences
  64. 64. Now try again...
  65. 65. Now try again...
  66. 66. Now try again... e. oments wi thin the pag Keep the m
  67. 67. epage. me nts within th Keep the mo
  68. 68. Virtual Space endless scrolling. bing.com
  69. 69. Virtual Space carousel. paging. gallery. bing.com endless scrolling. bing.com
  70. 70. Virtual Space e. Consider the backstag carousel. paging. gallery. bing.com endless scrolling. bing.com
  71. 71. Inlays click activated inlay. roost.com
  72. 72. Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com
  73. 73. Inlays g Use inl ays for stron . contextua l association click activated inlay. roost.com hover activated accordian. nasa.gov
  74. 74. 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
  75. 75. 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
  76. 76. 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
  77. 77. Overlays hover details. netflix.com hover dialog. netflix.com
  78. 78. Overlays hover details. netflix.com hover dialog. netflix.com
  79. 79. Overlays o Wait 1/2 second t s. activate hover detail hover details. netflix.com hover dialog. netflix.com
  80. 80. 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
  81. 81. 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
  82. 82. Anti-Pattern: Idiot Boxes anti-pattern. idiot box. yahoo! photos
  83. 83. Anti-Pattern: Idiot Boxes s h e proceeding “Don’t stop t - Alan Cooper with idiocy.” anti-pattern. idiot box. yahoo! photos
  84. 84. Nav Bars: Seamless Context nav status bar. thesixtyone.com nav status bar. facebook.com nav status bar. digg.com
  85. 85. Nav Bars: Seamless Context nav status bar. thesixtyone.com nav status bar. facebook.com nav status bar. digg.com
  86. 86. Nav Bars: Seamless Context nav status bar. thesixtyone.com . ain context across pages Maint nav status bar. facebook.com nav status bar. digg.com
  87. 87. acti on. e in ter In vit
  88. 88. http://dustincurtis.com/images/twitter/green_spill.jpg
  89. 89. http://dustincurtis.com/images/twitter/green_spill.jpg
  90. 90. http://dustincurtis.com/images/twitter/green_spill.jpg
  91. 91. http://dustincurtis.com/images/twitter/green_spill.jpg
  92. 92. all to action. Use a clear c http://dustincurtis.com/images/twitter/green_spill.jpg
  93. 93. Hover Invitations hover invitation. y!movies
  94. 94. Hover Invitations hover invitation. y!movies tooltip, hover & cursor invitation. flickr.com
  95. 95. Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit tooltip, hover & cursor invitation. flickr.com
  96. 96. Hover Invitations hover invitation. y!movies hover & tool invitation. backpackit h Aid discov erability wit hover invitations. tooltip, hover & cursor invitation. flickr.com
  97. 97. Blank Slate Invitation dog-ear invitation. login.yahoo.com
  98. 98. Blank Slate Invitation fill-in-the-blanks invitation. netflix dog-ear invitation. login.yahoo.com
  99. 99. Blank Slate Invitation fill-in-the-blanks invitation. netflix dog-ear invitation. login.yahoo.com blank-slate invitation. backpackit
  100. 100. 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
  101. 101. Tour Invitation tour invitation. gmail
  102. 102. Tour Invitation tour invitation. yahoo.com tour invitation. gmail
  103. 103. Tour Invitation tour invitation. yahoo.com Use new visits to es. e new featur tour invitation. gmail promot
  104. 104. Prompt Invitation facebook.com
  105. 105. Prompt Invitation facebook.com
  106. 106. Prompt Invitation facebook.com delicious.com
  107. 107. Prompt Invitation s s or command Use question facebook.com t. to pro mpt for inpu delicious.com
  108. 108. button. the gap
  109. 109. button. the gap
  110. 110. hyperlink. backpackit button. the gap
  111. 111. hyperlink. backpackit button. the gap
  112. 112. hyperlink. backpackit button. the gap drop down arrow. flickr
  113. 113. hyperlink. backpackit button. the gap drop down arrow. flickr
  114. 114. hyperlink. backpackit n button. the gap Bridge n ew interactio s. amiliar idiom styles with f drop down arrow. flickr
  115. 115. itio ns. ans Show tr
  116. 116. anti-pattern. needless fanfare. macintosh turbo tax
  117. 117. anti-pattern. needless fanfare. macintosh turbo tax again in slow-motion...
  118. 118. anti-pattern. needless fanfare. macintosh turbo tax again in slow-motion...
  119. 119. anti-pattern. needless fanfare. macintosh turbo tax Always qu estion “why” . when usin g transitions again in slow-motion...
  120. 120. Attention processing is hard-wired into the brain It is chemistry. You can’t help it.
  121. 121. 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.
  122. 122. anti-pattern. needless fanfare. roost.com Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  123. 123. anti-pattern. needless fanfare. roost.com anti-pattern. needless fanfare. nasa.gov Designing Visual Interfaces. Kevin Mullet & Darrell Sano
  124. 124. 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
  125. 125. 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
  126. 126. original. animation on drop. my yahoo!
  127. 127. original. animation on drop. my yahoo! current. no animation on drop. my yahoo!
  128. 128. original. animation on drop. my yahoo! alf” Use the “cut it in-h b. rule of thum current. no animation on drop. my yahoo!
  129. 129. Moments Communicate
  130. 130. Moments Communicate progress indicator
  131. 131. Moments Communicate Speed up time. progress indicator
  132. 132. Moments Communicate Speed up time. progress indicator earlier version of my yahoo!
  133. 133. Moments Communicate Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  134. 134. Moments Communicate mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  135. 135. Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time earlier version of my yahoo!
  136. 136. Moments Communicate . Show state change mint.com Speed up time. progress indicator . Slow down time the gap earlier version of my yahoo!
  137. 137. 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!
  138. 138. 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!
  139. 139. 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!
  140. 140. active. e Be r
  141. 141. experiment on home page
  142. 142. experiment on home page dedicated area
  143. 143. Live Feedback live feedback. wundrbar
  144. 144. Live Feedback live feedback. flickr live feedback. wundrbar
  145. 145. Live Feedback live feedback. flickr live feedback. wundrbar live feedback. google maps
  146. 146. Live Feedback k Create a t ight feedbac loop w ith the user. live feedback. flickr live feedback. wundrbar live feedback. google maps
  147. 147. Live Suggest live suggest. google (early version)
  148. 148. Live Suggest live suggest. google (early version) live suggest. yahoo search
  149. 149. Live Suggest live suggest. google (early version) live suggest. yahoo search live suggest. early yahoo search experiment
  150. 150. 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
  151. 151. Live Previews live preview. volkswagen car configurator
  152. 152. Live Previews live preview. volkswagen car configurator live suggest. apple search
  153. 153. Live Previews live preview. volkswagen car configurator ws. Us e live previe live suggest. apple search
  154. 154. Live Filtering refining search. bing tweets
  155. 155. Live Filtering Reduce search effort g. wit h live filterin refining search. bing tweets
  156. 156. Live Forms live forms. yahoo! small business
  157. 157. Live Forms live forms. yahoo! small business live forms. google account creation
  158. 158. Live Forms and live forms. yahoo! small business Prevent er rors beforeh . wi th live forms live forms. google account creation
  159. 159. Auto Complete auto complete. kayak
  160. 160. Auto Complete by Reduc e user effort tly. autocompl eting correc auto complete. kayak
  161. 161. Input where you output. Maintain flow. Require a light footprint. Invite interaction. Show transitions. Be reactive.
  162. 162. Flickr Credits http://tr.im/t6Ew Presentation billwscott.com/share/ presentations/2009/ae Blog looksgoodworkswell.com Web username billwscott Book designingwebinterfaces.com O’Reilly

×