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 the
Rich Web Experience
Principles and patterns for rich interaction design on the web




                     ...
background




             2
developer.yahoo.com/ypatterns




                                3
background




             4
protoscript.com




                  5
7,000,000                   5,000
Netflix subscribers          Instant Watching titles

55,000,000                  2 billi...
surfacing vocabulary




                       7
current patterns. developer.yahoo.com/ypatterns




                                                  8
rich patterns
   Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom
  Editing. Direct State Editing. Gr...
classic model. rich model.

                         Http
   My Profile
                       Response


   Photo
   Name ...
interaction. feedback. information.


                         page

    Interaction

                  Info
             ...
interaction + feedback + information = richness



    Interaction


                  Info

     Feedback




           ...
Interaction     Feedback       Info




   design principles for richness




                                      13
Interaction            Feedback        Info




              interaction principles




                                 ...
principle. make it direct.



   pattern. in-page action.




                                pattern. inline editing.



...
make it direct

Inline Editing
Use inline forms where possible
Use lightweight popups for ancillary
information




      ...
make it direct
      In-context tools
    Same as context menus
Only good for single objects
Can actually slow you down


...
make it direct




Use Drag & Drop where appropriate
           Not for simply setting an attribute
    Don’t construct ar...
make it direct




Use Drag & Drop where appropriate
           Not for simply setting an attribute
    Don’t construct ar...
make it direct




Use Drag & Drop where appropriate
           Not for simply setting an attribute
    Don’t construct ar...
make it direct
                                                                                                           ...
Drag and Drop Modules - Interesting Moments Grid

            ID: Bill Scott & Eric Miraglia                              ...
principle. keep a light footprint.
pattern. in page action.                                      pattern. rating an object...
keep a light footprint

Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus;...
keep a light footprint



Design for engagement
  Use invitations & feedback
 Treat it like an impusle aisle
             ...
principle. cross borders reluctantly.
pattern. on-demand scrolling.   pattern. in-context expand.      pattern. inline ass...
cross borders reluctantly

Rethink process flows
It’s the user’s mental model, not the page model
Every page jump is a ment...
cross borders reluctantly



             Re-think paging
   Use scrolling for “owned” data
Watch out for dual scroll bar ...
cross borders relunctantly




                              Use Overlays
                         For more information
  ...
30
cross borders relunctantly




Use in-context expands
For editing part of a collection
Need to see surrounding context
For...
cross borders relunctantly

Use real-estate creatively
Use slideouts
Use in-place zoom
Remember the backstage




        ...
key principle                     Interaction




               prefer direct,
                lightweight,
            i...
Interaction          Feedback       Info




              feedback principles




                                       ...
principle. give live feedback.
pattern. live suggest.                               pattern. periodic refresh.




pattern...
give live feedback

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting




                        ...
give live feedback

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confid...
38
give live feedback



             Shape user perception
                     Make time pass faster
    Make application f...
give live feedback




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-ha...
give live feedback




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context f...
principle. offer an invitation.
pattern. hover invitation.        pattern. drag invitation. drop invitation.




pattern. ...
offer an invitation

Discoverability
No easy answer
Use the hover to reveal interaction
Use the familar to teach the new
T...
offer an invitation



Bridge the new with the old
            Hyperlinks as actions
             Reveal with hovers
     ...
offer an invitation




              Make it inviting
       Treat it as a welcome mat
Use hover, cursor, tooltip, and pa...
offer an invitation




Keep actions out of it
Let the user feel free to explore
Don’t proselytize




                   ...
principle. show transitions.
pattern. fade transition + self-healing transition.




pattern. slide transition.           ...
show transitions

Speak to the brain
Understanding attention processing




                                              ...
show transitions

Speak to the brain
Understanding attention processing
Sending the wrong message




                    ...
show transitions




                Less is more
 “Cut it in-half ” rule of thumb
Use “contrast knob” approach




      ...
show transitions



What you can communicate...
                      Speed up time
              Slow down interaction
  ...
key principle                     Feedback




    Provide invitations beforehand,
          transitions during,
    and f...
Interaction            Feedback        Info




              information principles




                                 ...
principle. think in objects.




pattern. shareable object.




                               54
think in objects




                   55
principle. tie information to interactivity.




pattern. multi-variate views.



                                        ...
tie information to interactivity

Think “deeper interaction”
Multi-variate data
focus + context




                      ...
tie information to interactivity

Think “deeper interaction”
Multi-variate data
focus + context
Interesting relationships
...
Think “deeper interaction”
Multi-variate data
focus + context
Interesting relationships
Relevant recommendations




     ...
key principle                       Info




         Think in objects,
 tie information to interactivity




            ...
key principles for richness


 Interaction   Prefer direct, lightweight, in-page interactions



 Feedback
               ...
My talk at 4pm: Anti-Patterns
           big ball of mud. meandering way.
        borg idiom. tiny targets. mystery meat.
...
my blog.	 looksgoodworkswell.com
this prez. billwscott.com/share/presentations/2007/wb2.0/


NETFLIX is hiring!

UI Engine...
Upcoming SlideShare
Loading in …5
×

Designing Rich Web Experience

4,034 views

Published on

Bill Scott, Director from the UI Engineering team at Netflix shows ways to use RIA to enhance the User Experience. If you take more interest in the field of design patterns than drop by at www.interaction-patterns.org.

Published in: Technology, Education
  • Be the first to comment

Designing Rich Web Experience

  1. Designing the Rich Web Experience Principles and patterns for rich interaction design on the web Bill Scott Director, UI Engineering netflix.com b.scott@yahoo.com 1
  2. background 2
  3. developer.yahoo.com/ypatterns 3
  4. background 4
  5. protoscript.com 5
  6. 7,000,000 5,000 Netflix subscribers Instant Watching titles 55,000,000 2 billion+ DVDs in inventory user ratings 90,000 2 million DVD titles movies rated daily by users 1.6 million 100+ shipped on average daily shipping points 95% of inventory shipped each quarter 6
  7. surfacing vocabulary 7
  8. current patterns. developer.yahoo.com/ypatterns 8
  9. rich patterns Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. 9
  10. classic model. rich model. Http My Profile Response Photo Name Joe Smith Server Name Gender Male Gender Age 27 Age Submit Http Edit Request My Profile Name Joe Smith Tim Jones XHR Object Server Gender Male Age 27 Save 10
  11. interaction. feedback. information. page Interaction Info Info Feedback refresh boundary 11
  12. interaction + feedback + information = richness Interaction Info Feedback 12
  13. Interaction Feedback Info design principles for richness 13
  14. Interaction Feedback Info interaction principles 14
  15. principle. make it direct. pattern. in-page action. pattern. inline editing. pattern. drag & drop. pattern. in-context tools. 15
  16. make it direct Inline Editing Use inline forms where possible Use lightweight popups for ancillary information 16
  17. make it direct In-context tools Same as context menus Only good for single objects Can actually slow you down 17
  18. make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs 18
  19. make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs Good for layout changes/re-organizing 19
  20. make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs Good for layout changes/re-organizing Good for grabbing items 20
  21. make it direct Drag and Drop Modules - Interesting Moments Grid Currently on beta.my.yahoo.com ID: Bill Scott & Eric Miraglia Date: Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS CSS Move cursor Move cursor CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor N Tool Tip Drag Object Modules animates into the area Modules animates back to M Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area t Module comes to rest in new Module comes back to rest M area at full opacity r Modules slide up in a self-healing transition to close hole Drop Target I Insertion bar is removed as first Insertion bar is removed a No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation a Take care of the interesting moments 21
  22. Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Drag Over Drag Over Drag Over Drop Initiated Valid Target Invalid Target Parent Container Accepted CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor N Modules animates into the area M Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar t Module comes to rest in new M area a Modules slide up in a self-healing transition to close hole Insertion bar is removed as first I st a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation a 22
  23. principle. keep a light footprint. pattern. in page action. pattern. rating an object. Key to digg’s early success - Kevin Rose Netflix introduced in 2000. 2 billion+ ratings. 2 million per day pattern. remembered collections. 23
  24. keep a light footprint Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events 24
  25. keep a light footprint Design for engagement Use invitations & feedback Treat it like an impusle aisle Do it in context 25
  26. principle. cross borders reluctantly. pattern. on-demand scrolling. pattern. in-context expand. pattern. inline assistant. pattern. hover details. pattern. lightweight popup + lightbox. 26
  27. cross borders reluctantly Rethink process flows It’s the user’s mental model, not the page model Every page jump is a mental speed bump But some things are still step-by-step 27
  28. cross borders reluctantly Re-think paging Use scrolling for “owned” data Watch out for dual scroll bar issue Hybrid of paging & scrolling 28
  29. cross borders relunctantly Use Overlays For more information Replace page transition When editing an individual, more complex item Be symmetrical Try not to disturb the page 29
  30. 30
  31. cross borders relunctantly Use in-context expands For editing part of a collection Need to see surrounding context For managing content modules 31
  32. cross borders relunctantly Use real-estate creatively Use slideouts Use in-place zoom Remember the backstage 32
  33. key principle Interaction prefer direct, lightweight, in-page interaction 33
  34. Interaction Feedback Info feedback principles 34
  35. principle. give live feedback. pattern. live suggest. pattern. periodic refresh. pattern. auto complete. pattern. busy indicator. pattern. live previews. 35
  36. give live feedback Keep the goal in mind Design for relevancy Is it narrowing or distracting 36
  37. give live feedback Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible 37
  38. 38
  39. give live feedback Shape user perception Make time pass faster Make application feel more responsive Continuous feedback: just-in-time directions 39
  40. give live feedback Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap Use live-previews 40
  41. give live feedback Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth 41
  42. principle. offer an invitation. pattern. hover invitation. pattern. drag invitation. drop invitation. pattern. tour invitation. pattern. tooltip invitation + hover invitation + cursor invitation. 42
  43. offer an invitation Discoverability No easy answer Use the hover to reveal interaction Use the familar to teach the new Tours are generally a band-aid Can’t flag all interactions 43
  44. offer an invitation Bridge the new with the old Hyperlinks as actions Reveal with hovers Drop down clues 44
  45. offer an invitation Make it inviting Treat it as a welcome mat Use hover, cursor, tooltip, and page Keep the noise down 45
  46. offer an invitation Keep actions out of it Let the user feel free to explore Don’t proselytize 46
  47. principle. show transitions. pattern. fade transition + self-healing transition. pattern. slide transition. pattern. zoom box. pattern. active spotlight. 47
  48. show transitions Speak to the brain Understanding attention processing 48
  49. show transitions Speak to the brain Understanding attention processing Sending the wrong message 49
  50. show transitions Less is more “Cut it in-half ” rule of thumb Use “contrast knob” approach 50
  51. show transitions What you can communicate... Speed up time Slow down interaction Show state change Show relationships between objects Focus attention 51
  52. key principle Feedback Provide invitations beforehand, transitions during, and feedback after interaction 52
  53. Interaction Feedback Info information principles 53
  54. principle. think in objects. pattern. shareable object. 54
  55. think in objects 55
  56. principle. tie information to interactivity. pattern. multi-variate views. 56
  57. tie information to interactivity Think “deeper interaction” Multi-variate data focus + context 57
  58. tie information to interactivity Think “deeper interaction” Multi-variate data focus + context Interesting relationships 58
  59. Think “deeper interaction” Multi-variate data focus + context Interesting relationships Relevant recommendations 59
  60. key principle Info Think in objects, tie information to interactivity 60
  61. key principles for richness Interaction Prefer direct, lightweight, in-page interactions Feedback Provide invitations beforehand, transitions during and feedback after interaction Info Think in objects and tie information to interactivity 61
  62. My talk at 4pm: Anti-Patterns big ball of mud. meandering way. borg idiom. tiny targets. mystery meat. buried treasure. hover and cover. pogo stick navigation. novel notions. against the flow. metaphor mismatch. double duty. linkitus. blind type. windows aplenty. animation gone wild. misguided misdirections. unmarked hazards. missed moments. missing scene. one at a time. non-symmetrical actions. Note: anti-patterns denoted in bold are discussed in this talk. 62
  63. my blog. looksgoodworkswell.com this prez. billwscott.com/share/presentations/2007/wb2.0/ NETFLIX is hiring! UI Engineers Visual/Interaction Designers Graphic Designer 63

×