Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing for
Interesting
Moments
Bill Scott
Director, UI Engineering
Netflix

Microsoft - August 24, 2009
Me
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
interaction (n).
mutual or
reciprocal action;
interacting
interaction.
interplay between
system and user
interaction.
interplay between
system and user
interaction.
interplay between
system and user
interaction.
sequence
tells a story
interactivity.
cyclic process
between two or
more active agents
in which each agent
alternatively
listens, thinks, and
spe...
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
6 principles
6 principles
for designing interesting moments
wh ere
Input put.
     out
 you     - Ala
               n Co
                   oper
In Page Editing




inline editing. animoto.com
In Page Editing
                              Interesting Moments

                              Page load

              ...
Analyzing the Moments
                        Not editing: Not editing:               Editing:    Editing:
               ...
Analyzing the Moments
                1
                        Not editing: Not editing:               Editing:    Editin...
Analyzing the Moments
                1             2
                        Not editing: Not editing:               Edit...
Analyzing the Moments
                1             2                        3
                        Not editing: Not ed...
Analyzing the Moments
                1             2                        3 4
                        Not editing: Not ...
Analyzing the Moments
                1             2                        3 4            5
                        Not ...
Analyzing the Moments
                1             2                        3 4            5          6
                 ...
Analyzing the Moments
                1             2                        3 4            5          6 7
               ...
Refactoring the Moments
                         Not editing:                                         Editing:
           ...
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.
No artificia l constructs!




                                     rate an object. netflix.com



anti-pattern. artificial c...
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
Contextual Tools (overlay on hover)




hover details. linkedin.com
Contextual Tools (overlay on hover)
                                                     uld
                             ...
Contextual Tools (overlay on hover)
                                                     uld
                             ...
Contextual Tools (overlay on hover)
                                                     uld
                             ...
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.




       ...
Contextual Tools (overlay on click)




google maps
Contextual Tools (overlay on click)




google maps




                                 bing.com
Contextual Tools (overlay on click)




google maps




                                 bing.com




              everyb...
Contextual Tools (overlay on click)



                                  ol
              Open c ontextual to
            ...
What about new Yahoo page?




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?




                                   Overlay stays
                                   open.

...
What about new Yahoo page?




                                   Overlay stays
                                   open.

...
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes....
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes....
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes....
What about new Yahoo page?
                                 Mouse exits.
                                Overlay closes.  ...
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
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. yelp.com
Anti-Pattern: Idiot Boxes




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


                                                  s
                                   h e pro...
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com   better implementation of shifting overlay....
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com   better implementation of shifting overlay....
Overlays: Hover Initiated


                                          ouse                     .
                         ...
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
                                      .
  ...
ch
Don’t infer too mu
about the  user’s intent
                    er.
from  a mouse hov
Virtual Space




endless scrolling. bing.com
Virtual Space




                              carousel. paging. gallery. bing.com




endless scrolling. bing.com
Virtual Space



                                    e.
               Consider the backstag




                         ...
Seamless Context
         you are here. idea.org
Seamless Context
         you are here. idea.org




         seamless paging. magcloud
Seamless Context  you are here. idea.org




                  ext
   M aintain cont
                .
   across pages



...
Nav Bars: Extend the moment



                                       nav status bar. thesixtyone.com




nav status bar. ...
Nav Bars: Extend the moment



                                       nav status bar. thesixtyone.com




nav status bar. ...
Nav Bars: Extend the moment



                                                       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
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




                             tion   .
     Use a cl ear call to ac




                 ...
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...
Drag & Drop Invitation




drag invitation. google maps   drag invitation. google maps
Drag & Drop Invitation



                                                     drop invitation. google maps




drag invit...
Drag & Drop Invitation


                                                     s.
                               Mind y our...
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/ms

Blog
looksgoodworkswell.com

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

Designing for Interesting Moments

85,677 views

Published on

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

Published in: Design, Technology, Business

Designing for Interesting Moments

  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

×