SlideShare a Scribd company logo
1 of 63
Download to read offline
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
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 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
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. 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
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
interaction. feedback. information.


                         page

    Interaction

                  Info
                                Info


     Feedback


       refresh boundary




                                       11
interaction + feedback + information = richness



    Interaction


                  Info

     Feedback




                                                  12
Interaction     Feedback       Info




   design principles for richness




                                      13
Interaction            Feedback        Info




              interaction principles




                                              14
principle. make it direct.



   pattern. in-page action.




                                pattern. inline editing.




pattern. drag & drop.           pattern. in-context tools.


                                                             15
make it direct

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




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




                               17
make it direct




Use Drag & Drop where appropriate
           Not for simply setting an attribute
    Don’t construct artificial visual constructs




                                                  18
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
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
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
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
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
keep a light footprint

Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events




                                                                      24
keep a light footprint



Design for engagement
  Use invitations & feedback
 Treat it like an impusle aisle
              Do it in context




                                  25
principle. cross borders reluctantly.
pattern. on-demand scrolling.   pattern. in-context expand.      pattern. inline assistant.




pattern. hover details.                              pattern. lightweight popup + lightbox.




                                                                                              26
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
cross borders reluctantly



             Re-think paging
   Use scrolling for “owned” data
Watch out for dual scroll bar issue
     Hybrid of paging & scrolling




                                      28
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
cross borders relunctantly




Use in-context expands
For editing part of a collection
Need to see surrounding context
For managing content modules




                                                                31
cross borders relunctantly

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




                                                          32
key principle                     Interaction




               prefer direct,
                lightweight,
            in-page interaction




                                                33
Interaction          Feedback       Info




              feedback principles




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




pattern. auto complete.




                          pattern. busy indicator.




                          pattern. live previews.




                                                                                  35
give live feedback

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




                                                      36
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
give live feedback



             Shape user perception
                     Make time pass faster
    Make application feel more responsive
Continuous feedback: just-in-time directions




                                               39
give live feedback




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
                                      Use live-previews



                                                            40
give live feedback




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth




                                                                  41
principle. offer an invitation.
pattern. hover invitation.        pattern. drag invitation. drop invitation.




pattern. tour invitation.




pattern. tooltip invitation + hover invitation + cursor invitation.




                                                                               42
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
offer an invitation



Bridge the new with the old
            Hyperlinks as actions
             Reveal with hovers
              Drop down clues




                                      44
offer an invitation




              Make it inviting
       Treat it as a welcome mat
Use hover, cursor, tooltip, and page
             Keep the noise down



                                       45
offer an invitation




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




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




pattern. slide transition.                            pattern. zoom box.




pattern. active spotlight.




                                                                           47
show transitions

Speak to the brain
Understanding attention processing




                                                        48
show transitions

Speak to the brain
Understanding attention processing
Sending the wrong message




                                                        49
show transitions




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




                                   50
show transitions



What you can communicate...
                      Speed up time
              Slow down interaction
                  Show state change
 Show relationships between objects
                     Focus attention




                                       51
key principle                     Feedback




    Provide invitations beforehand,
          transitions during,
    and feedback after interaction




                                             52
Interaction            Feedback        Info




              information principles




                                              53
principle. think in objects.




pattern. shareable object.




                               54
think in objects




                   55
principle. tie information to interactivity.




pattern. multi-variate views.



                                               56
tie information to interactivity

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




                                                                57
tie information to interactivity

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




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




                             59
key principle                       Info




         Think in objects,
 tie information to interactivity




                                           60
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
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
my blog.	 looksgoodworkswell.com
this prez. billwscott.com/share/presentations/2007/wb2.0/


NETFLIX is hiring!

UI Engineers
Visual/Interaction Designers
Graphic Designer

                                                            63

More Related Content

What's hot

500 Startups Lean UX Bootcamp
500 Startups Lean UX Bootcamp500 Startups Lean UX Bootcamp
500 Startups Lean UX BootcampEnrique Allen
 
Getting unstuck: content strategy for the future
Getting unstuck: content strategy for the futureGetting unstuck: content strategy for the future
Getting unstuck: content strategy for the futureSara Wachter-Boettcher
 
Pondera - How it works
Pondera - How it worksPondera - How it works
Pondera - How it worksCarl Petrou
 
Using Abstraction to Increase Clarity
Using Abstraction to Increase ClarityUsing Abstraction to Increase Clarity
Using Abstraction to Increase ClarityKaarin Hoff
 
Getting real
Getting realGetting real
Getting realhievan
 
Scrappy Startups Presentation
Scrappy Startups Presentation  Scrappy Startups Presentation
Scrappy Startups Presentation joanlundell
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked AcademicsJoyce Seitzinger
 
Koncept Konqueror Group3
Koncept Konqueror Group3Koncept Konqueror Group3
Koncept Konqueror Group3Divyan Kavdia
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked AcademicsColin Warren
 
Power Prospecting and Renewing Referrals Using Social Media
Power Prospecting and Renewing Referrals Using Social MediaPower Prospecting and Renewing Referrals Using Social Media
Power Prospecting and Renewing Referrals Using Social MediaDoug Devitre
 
Course Creation 101 with P2PU
Course Creation 101 with P2PUCourse Creation 101 with P2PU
Course Creation 101 with P2PUJane Park
 

What's hot (13)

Finding the Center
Finding the CenterFinding the Center
Finding the Center
 
500 Startups Lean UX Bootcamp
500 Startups Lean UX Bootcamp500 Startups Lean UX Bootcamp
500 Startups Lean UX Bootcamp
 
Getting unstuck: content strategy for the future
Getting unstuck: content strategy for the futureGetting unstuck: content strategy for the future
Getting unstuck: content strategy for the future
 
Pondera - How it works
Pondera - How it worksPondera - How it works
Pondera - How it works
 
Using Abstraction to Increase Clarity
Using Abstraction to Increase ClarityUsing Abstraction to Increase Clarity
Using Abstraction to Increase Clarity
 
Getting real
Getting realGetting real
Getting real
 
Scrappy Startups Presentation
Scrappy Startups Presentation  Scrappy Startups Presentation
Scrappy Startups Presentation
 
Happiness machines
Happiness machinesHappiness machines
Happiness machines
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked Academics
 
Koncept Konqueror Group3
Koncept Konqueror Group3Koncept Konqueror Group3
Koncept Konqueror Group3
 
7 Habits of Networked Academics
7 Habits of Networked Academics7 Habits of Networked Academics
7 Habits of Networked Academics
 
Power Prospecting and Renewing Referrals Using Social Media
Power Prospecting and Renewing Referrals Using Social MediaPower Prospecting and Renewing Referrals Using Social Media
Power Prospecting and Renewing Referrals Using Social Media
 
Course Creation 101 with P2PU
Course Creation 101 with P2PUCourse Creation 101 with P2PU
Course Creation 101 with P2PU
 

Similar to Designing Rich Web Experience

Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastBill Scott
 
Crafting Rich Web Experiences
Crafting Rich Web ExperiencesCrafting Rich Web Experiences
Crafting Rich Web Experiencesrajivmordani
 
Oracle Brownbag Patterns.Key
Oracle Brownbag Patterns.KeyOracle Brownbag Patterns.Key
Oracle Brownbag Patterns.Keygueste8cc560
 
Designing Ajax Principles And Patterns For Designing Rich Internet Appl...
Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Appl...Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Appl...
Designing Ajax Principles And Patterns For Designing Rich Internet Appl...Manikanda kumar
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008Ross Lawley
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceinteractionpatterns.org
 
SharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common MistakesSharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common MistakesNicolePullin
 
RIA Patterns - Best Practices for Common Patterns of Rich Interaction
RIA Patterns - Best Practices for Common Patterns of Rich InteractionRIA Patterns - Best Practices for Common Patterns of Rich Interaction
RIA Patterns - Best Practices for Common Patterns of Rich Interactioninteractionpatterns.org
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke WRoss Lawley
 
Sensus Uses Liferay to Strengthen Their Global Web Presence
Sensus Uses Liferay to Strengthen Their Global Web PresenceSensus Uses Liferay to Strengthen Their Global Web Presence
Sensus Uses Liferay to Strengthen Their Global Web Presencerivetlogic
 
Designinginterestingmoments 090918130401-phpapp01
Designinginterestingmoments 090918130401-phpapp01Designinginterestingmoments 090918130401-phpapp01
Designinginterestingmoments 090918130401-phpapp01Shivam Prajapati
 
Vibeke hansen ECBN presentation
Vibeke hansen ECBN presentationVibeke hansen ECBN presentation
Vibeke hansen ECBN presentationswscreen
 
Design Agility for Startups
Design Agility for StartupsDesign Agility for Startups
Design Agility for StartupsNeil Wehrle
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of InterfaceChristina Wodtke
 
Building a Prototype Without an Engineer
Building a Prototype Without an EngineerBuilding a Prototype Without an Engineer
Building a Prototype Without an Engineermsteciuk
 
Running Great Design Reviews With Clients & Partners
Running Great Design Reviews With Clients & PartnersRunning Great Design Reviews With Clients & Partners
Running Great Design Reviews With Clients & PartnersCraig Peters
 
Contextography
ContextographyContextography
ContextographyBen Watson
 

Similar to Designing Rich Web Experience (20)

Designing Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly WebcastDesigning Web Interfaces Book - O'Reilly Webcast
Designing Web Interfaces Book - O'Reilly Webcast
 
Crafting Rich Web Experiences
Crafting Rich Web ExperiencesCrafting Rich Web Experiences
Crafting Rich Web Experiences
 
Vocabulary Of Patterns
Vocabulary Of PatternsVocabulary Of Patterns
Vocabulary Of Patterns
 
Oracle Brownbag Patterns.Key
Oracle Brownbag Patterns.KeyOracle Brownbag Patterns.Key
Oracle Brownbag Patterns.Key
 
RIA
RIARIA
RIA
 
Designing Ajax Principles And Patterns For Designing Rich Internet Appl...
Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Appl...Designing  Ajax  Principles And  Patterns For Designing  Rich  Internet  Appl...
Designing Ajax Principles And Patterns For Designing Rich Internet Appl...
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experience
 
SharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common MistakesSharePoint Branding - 3 Most Common Mistakes
SharePoint Branding - 3 Most Common Mistakes
 
RIA Patterns - Best Practices for Common Patterns of Rich Interaction
RIA Patterns - Best Practices for Common Patterns of Rich InteractionRIA Patterns - Best Practices for Common Patterns of Rich Interaction
RIA Patterns - Best Practices for Common Patterns of Rich Interaction
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
 
Sensus Uses Liferay to Strengthen Their Global Web Presence
Sensus Uses Liferay to Strengthen Their Global Web PresenceSensus Uses Liferay to Strengthen Their Global Web Presence
Sensus Uses Liferay to Strengthen Their Global Web Presence
 
Designinginterestingmoments 090918130401-phpapp01
Designinginterestingmoments 090918130401-phpapp01Designinginterestingmoments 090918130401-phpapp01
Designinginterestingmoments 090918130401-phpapp01
 
Vibeke hansen ECBN presentation
Vibeke hansen ECBN presentationVibeke hansen ECBN presentation
Vibeke hansen ECBN presentation
 
Design Agility for Startups
Design Agility for StartupsDesign Agility for Startups
Design Agility for Startups
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 
Building a Prototype Without an Engineer
Building a Prototype Without an EngineerBuilding a Prototype Without an Engineer
Building a Prototype Without an Engineer
 
Running Great Design Reviews With Clients & Partners
Running Great Design Reviews With Clients & PartnersRunning Great Design Reviews With Clients & Partners
Running Great Design Reviews With Clients & Partners
 
Contextography
ContextographyContextography
Contextography
 
426 lecture2: AR Technology
426 lecture2: AR Technology426 lecture2: AR Technology
426 lecture2: AR Technology
 

More from interactionpatterns.org

More from interactionpatterns.org (7)

Interaction Patterns In User Interfaces
Interaction Patterns In User InterfacesInteraction Patterns In User Interfaces
Interaction Patterns In User Interfaces
 
Patterns as Tools for User Interface Design
Patterns as Tools for User Interface DesignPatterns as Tools for User Interface Design
Patterns as Tools for User Interface Design
 
Improving Tag Clouds
Improving Tag CloudsImproving Tag Clouds
Improving Tag Clouds
 
Wiki Design Considerations
Wiki Design ConsiderationsWiki Design Considerations
Wiki Design Considerations
 
Best Practices For Form Design
Best Practices For Form DesignBest Practices For Form Design
Best Practices For Form Design
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
 
Real World Design Patterns
Real World Design PatternsReal World Design Patterns
Real World Design Patterns
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

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