SlideShare a Scribd company logo

Designing Web Interfaces Book - O'Reilly Webcast

This is an update to the previous Designing Web Interfaces talk. This presentation was given on Feb. 3, 2009 over a live webcast via an O'Reilly Author Webcast special. This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction. This presentation is much better suited for Slideshare than previous presentations as I took a lot of time to turn the movie screencasts into individual keyframes. All interactions now show in this presentation (that is why there are 300+ slides; in reality the presentation was more like 50 slides.) You can see the recorded video & audio of the webcast in high resolution on YouTube at: http://www.youtube.com/watch?v=LW4MwvgW_ww&fmt=18 http://designingwebinterfaces.com http://looksgoodworkswell.com http://designgenie.org (Also this is similar to the Big D 09 presentation on 5/30/2009. You can find that exact presentation at http://billwscott.com/share/presentations/2009/bigd/DWI.pdf)

1 of 327
Download to read offline
Designing Web Interfaces
Principles & Patterns for Rich Interaction
Bill Scott & Theresa Neil




O’Reilly Webcast - February 3, 2009
Bill Scott
Director, UI Engineering
Netflix
background
Newton’s Third Law of Motion
For every action, there is an equal and opposite reaction

interesting moments abound to engage the user
it’s the nuance stupid
make “less” become “more”




                                  +        Feedback
                    Interaction
                                           (reaction)
                      (action)
6 principles for Designing Rich Web
Experiences
 1.   make it direct
 2.   keep it lightweight
 3.   stay on the page
 4.   provide invitations
 5.   use transitions
 6.   react immediately
In-Page Editing. Single-Field Inline Edit. Multi-Field Inline Edit. Overlay Edit.
 Table Edit. Group Edit. Module Configuration. Drag and Drop. Drag and
  Drop Module. Drag and Drop List. Drag and Drop Object. Drag and
     Drop Action. Drag and Drop Collection. Direct Selection. Toggle
    Selection. Collected Selection. Object Selection. Hybrid Selection.
 Contextual Tools. Always-Visible Tools. Hover-Reveal Tools. Toggle-Reveal
Tools. Multi-Level Tools. Secondary Menu. Overlays. Dialog Overlay. Detail
   Overlay. Input Overlay. Inlays. Dialog Inlay. List Inlay. Detail Inlay. Tabs.
  Virtual Pages. Virtual Scrolling. Inline Paging. Scrolled Paging. Carousels
    Virtual Panning. Zoomable User Interface. Process Flow. Interactive
   Single-Page. Process Inline Assistant. Process Dialog Overlay. Process
 Configurator. Static Single-Page Process. Invitation. Static Invitations. Call
 to Action Invitation. Tour Invitation. Dynamic Invitation. Hover Invitation.
Affordance Invitation. Drag and Drop Invitation. Inference Invitation. More
 Content Invitation. Transitions. Brighten and Dim. Expand/Collapse. Self-
Healing. Fade. Animation. Spotlight. Lookup Patterns. Auto Complete. Live
  Suggest. Live Search. Refining Search. Feedback Patterns. Live Preview.
        Progressive Disclosure. Progress Indicator. Periodic Refresh.
make it direct

Recommended

HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3Alan Dix
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channelN.Jagadish Kumar
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2Alan Dix
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
HCI 3e - Ch 14: Communication and collaboration models
HCI 3e - Ch 14:  Communication and collaboration modelsHCI 3e - Ch 14:  Communication and collaboration models
HCI 3e - Ch 14: Communication and collaboration modelsAlan Dix
 
Iteration and prototyping
Iteration and prototypingIteration and prototyping
Iteration and prototypingHafizMImran1
 
HCI 3e - Ch 20: Ubiquitous computing and augmented realities
HCI 3e - Ch 20:  Ubiquitous computing and augmented realitiesHCI 3e - Ch 20:  Ubiquitous computing and augmented realities
HCI 3e - Ch 20: Ubiquitous computing and augmented realitiesAlan Dix
 

More Related Content

What's hot

Wimp interface
Wimp interfaceWimp interface
Wimp interfaceAbrish06
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessbrindaN
 
User Interface Design-Module 4 Windows
User Interface Design-Module 4  WindowsUser Interface Design-Module 4  Windows
User Interface Design-Module 4 WindowsbrindaN
 
HCI - Chapter 1
HCI - Chapter 1HCI - Chapter 1
HCI - Chapter 1Alan Dix
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Lahiru Danushka
 
Mobile Design
Mobile DesignMobile Design
Mobile DesignLifna C.S
 
HCI 3e - Ch 4 (extra):
HCI 3e - Ch 4 (extra):HCI 3e - Ch 4 (extra):
HCI 3e - Ch 4 (extra):Alan Dix
 
Communication and collaboration models
Communication and collaboration modelsCommunication and collaboration models
Communication and collaboration modelsPhD Research Scholar
 
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...VijiPriya Jeyamani
 
Interaction styles
Interaction stylesInteraction styles
Interaction stylesDavid Lamas
 
Design rules and usability requirements
Design rules and usability requirementsDesign rules and usability requirements
Design rules and usability requirementsAndres Baravalle
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4Alan Dix
 
User Interface Design Module 5 screen based controls
User Interface Design Module 5  screen based controlsUser Interface Design Module 5  screen based controls
User Interface Design Module 5 screen based controlsbrindaN
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL Um e Farwa
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6Alan Dix
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rulesAlan Dix
 

What's hot (20)

Wimp interface
Wimp interfaceWimp interface
Wimp interface
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
Mobile hci
Mobile hciMobile hci
Mobile hci
 
User Interface Design-Module 4 Windows
User Interface Design-Module 4  WindowsUser Interface Design-Module 4  Windows
User Interface Design-Module 4 Windows
 
HCI - Chapter 1
HCI - Chapter 1HCI - Chapter 1
HCI - Chapter 1
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
HCI 3e - Ch 4 (extra):
HCI 3e - Ch 4 (extra):HCI 3e - Ch 4 (extra):
HCI 3e - Ch 4 (extra):
 
Communication and collaboration models
Communication and collaboration modelsCommunication and collaboration models
Communication and collaboration models
 
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
Human Computer Interaction Chapter 4 Implementation Support and Evaluation Te...
 
Interaction styles
Interaction stylesInteraction styles
Interaction styles
 
Design rules and usability requirements
Design rules and usability requirementsDesign rules and usability requirements
Design rules and usability requirements
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4
 
The computer HCI
The computer HCIThe computer HCI
The computer HCI
 
User Interface Design Module 5 screen based controls
User Interface Design Module 5  screen based controlsUser Interface Design Module 5  screen based controls
User Interface Design Module 5 screen based controls
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
Hci activity#3
Hci activity#3Hci activity#3
Hci activity#3
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 

Viewers also liked

Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesBill Scott
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopBrian Fling
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen LayoutsTheresa Neil
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Brian Fling
 
IA templates_mobile
IA templates_mobileIA templates_mobile
IA templates_mobileUXclub
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesMark Wagner
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patternsDCU_MPIUA
 
Mobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneMobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneDamon Kiesow
 
Designing for Web 2.0 (BarCamp Delhi)
Designing for Web 2.0 (BarCamp Delhi)Designing for Web 2.0 (BarCamp Delhi)
Designing for Web 2.0 (BarCamp Delhi)Rashmi Sinha
 
Designing Web Interfaces for Kids (Front-Trends 2015)
Designing Web Interfaces for Kids (Front-Trends 2015)Designing Web Interfaces for Kids (Front-Trends 2015)
Designing Web Interfaces for Kids (Front-Trends 2015)Trine Falbe
 
Mobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningMobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningJames Brittain
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
 

Viewers also liked (19)

Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development Workshop
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
 
IA templates_mobile
IA templates_mobileIA templates_mobile
IA templates_mobile
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
 
Mobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneMobile Tools - SPJ Region One
Mobile Tools - SPJ Region One
 
Web designing
Web designingWeb designing
Web designing
 
Designing for Web 2.0 (BarCamp Delhi)
Designing for Web 2.0 (BarCamp Delhi)Designing for Web 2.0 (BarCamp Delhi)
Designing for Web 2.0 (BarCamp Delhi)
 
Designing Web Interfaces for Kids (Front-Trends 2015)
Designing Web Interfaces for Kids (Front-Trends 2015)Designing Web Interfaces for Kids (Front-Trends 2015)
Designing Web Interfaces for Kids (Front-Trends 2015)
 
Mobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningMobile Tools For Teaching And Learning
Mobile Tools For Teaching And Learning
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
Trends in web designing. Not only about how to create but also how to sell be...
Trends in web designing. Not only about how to create but also how to sell be...Trends in web designing. Not only about how to create but also how to sell be...
Trends in web designing. Not only about how to create but also how to sell be...
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
 

Similar to Designing Web Interfaces Book - O'Reilly Webcast

Crafting Rich Web Experiences
Crafting Rich Web ExperiencesCrafting Rich Web Experiences
Crafting Rich Web Experiencesrajivmordani
 
Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Librarygoodfriday
 
Holocene intro1
Holocene intro1Holocene intro1
Holocene intro1David Brin
 
How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion
How to: Accessible iPhone/iPad apps that the blind can use with RubymotionHow to: Accessible iPhone/iPad apps that the blind can use with Rubymotion
How to: Accessible iPhone/iPad apps that the blind can use with RubymotionItalianlabel
 
Ruby motion and-ios-accessibility
Ruby motion and-ios-accessibilityRuby motion and-ios-accessibility
Ruby motion and-ios-accessibilityMartino Branding
 
Vibeke hansen ECBN presentation
Vibeke hansen ECBN presentationVibeke hansen ECBN presentation
Vibeke hansen ECBN presentationswscreen
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008Ross Lawley
 
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scriptingProtoscript - Simplified prototype scripting
Protoscript - Simplified prototype scriptingBill Scott
 

Similar to Designing Web Interfaces Book - O'Reilly Webcast (10)

Crafting Rich Web Experiences
Crafting Rich Web ExperiencesCrafting Rich Web Experiences
Crafting Rich Web Experiences
 
Designing Rich Web Experience
Designing Rich Web ExperienceDesigning Rich Web Experience
Designing Rich Web Experience
 
Bill Scott Presentation
Bill Scott PresentationBill Scott Presentation
Bill Scott Presentation
 
Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Library
 
Holocene intro1
Holocene intro1Holocene intro1
Holocene intro1
 
How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion
How to: Accessible iPhone/iPad apps that the blind can use with RubymotionHow to: Accessible iPhone/iPad apps that the blind can use with Rubymotion
How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion
 
Ruby motion and-ios-accessibility
Ruby motion and-ios-accessibilityRuby motion and-ios-accessibility
Ruby motion and-ios-accessibility
 
Vibeke hansen ECBN presentation
Vibeke hansen ECBN presentationVibeke hansen ECBN presentation
Vibeke hansen ECBN presentation
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
 
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scriptingProtoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
 

More from Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsBill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting MomentsBill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill Scott
 
Back To The Future
Back To The FutureBack To The Future
Back To The FutureBill Scott
 
Hacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsHacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsBill Scott
 
Improving Netflix Performance Experience
Improving Netflix Performance ExperienceImproving Netflix Performance Experience
Improving Netflix Performance ExperienceBill Scott
 
Design Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web ExperienceDesign Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web ExperienceBill Scott
 
Ajax 101 Workshop
Ajax 101 WorkshopAjax 101 Workshop
Ajax 101 WorkshopBill Scott
 
Designing For Ajax
Designing For AjaxDesigning For Ajax
Designing For AjaxBill Scott
 

More from Bill Scott (19)

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting Moments
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
 
Hacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsHacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIs
 
Improving Netflix Performance Experience
Improving Netflix Performance ExperienceImproving Netflix Performance Experience
Improving Netflix Performance Experience
 
Design Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web ExperienceDesign Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web Experience
 
Ajax 101 Workshop
Ajax 101 WorkshopAjax 101 Workshop
Ajax 101 Workshop
 
Designing For Ajax
Designing For AjaxDesigning For Ajax
Designing For Ajax
 

Recently uploaded

Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxTafshirul Alam
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxTafshirul Alam
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfLizShek
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfLizShek
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxRawalRafiqLeghari
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 

Recently uploaded (20)

Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptx
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdf
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdf
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptx
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 

Designing Web Interfaces Book - O'Reilly Webcast

  • 1. Designing Web Interfaces Principles & Patterns for Rich Interaction Bill Scott & Theresa Neil O’Reilly Webcast - February 3, 2009 Bill Scott Director, UI Engineering Netflix
  • 3. Newton’s Third Law of Motion For every action, there is an equal and opposite reaction interesting moments abound to engage the user it’s the nuance stupid make “less” become “more” + Feedback Interaction (reaction) (action)
  • 4. 6 principles for Designing Rich Web Experiences 1. make it direct 2. keep it lightweight 3. stay on the page 4. provide invitations 5. use transitions 6. react immediately
  • 5. In-Page Editing. Single-Field Inline Edit. Multi-Field Inline Edit. Overlay Edit. Table Edit. Group Edit. Module Configuration. Drag and Drop. Drag and Drop Module. Drag and Drop List. Drag and Drop Object. Drag and Drop Action. Drag and Drop Collection. Direct Selection. Toggle Selection. Collected Selection. Object Selection. Hybrid Selection. Contextual Tools. Always-Visible Tools. Hover-Reveal Tools. Toggle-Reveal Tools. Multi-Level Tools. Secondary Menu. Overlays. Dialog Overlay. Detail Overlay. Input Overlay. Inlays. Dialog Inlay. List Inlay. Detail Inlay. Tabs. Virtual Pages. Virtual Scrolling. Inline Paging. Scrolled Paging. Carousels Virtual Panning. Zoomable User Interface. Process Flow. Interactive Single-Page. Process Inline Assistant. Process Dialog Overlay. Process Configurator. Static Single-Page Process. Invitation. Static Invitations. Call to Action Invitation. Tour Invitation. Dynamic Invitation. Hover Invitation. Affordance Invitation. Drag and Drop Invitation. Inference Invitation. More Content Invitation. Transitions. Brighten and Dim. Expand/Collapse. Self- Healing. Fade. Animation. Spotlight. Lookup Patterns. Auto Complete. Live Suggest. Live Search. Refining Search. Feedback Patterns. Live Preview. Progressive Disclosure. Progress Indicator. Periodic Refresh.
  • 7. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 8. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 9. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 10. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 11. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 12. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable
  • 13. make it direct inline editing Yahoo! Bookmarks
  • 14. make it direct inline editing Yahoo! Bookmarks
  • 15. make it direct inline editing Yahoo! Bookmarks
  • 16. make it direct inline editing Yahoo! Bookmarks
  • 17. make it direct inline editing Yahoo! Bookmarks
  • 18. make it direct. inline editing considerations discoverability complex editing blending modes
  • 19. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  • 20. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  • 21. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  • 22. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing
  • 23. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  • 24. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  • 25. make it direct. inline editing considerations discoverability complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes
  • 26. make it direct. inline editing considerations discoverability complex editing blending modes accessibility
  • 27. make it direct. inline editing considerations discoverability complex editing blending modes accessibility flickr. alternate edit path
  • 28. make it direct. inline editing considerations discoverability complex editing blending modes accessibility flickr. alternate edit path
  • 29. make it direct. inline editing group editing symmetry of interaction discoverability vs readability
  • 30. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  • 31. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  • 32. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability
  • 33. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction
  • 34. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction
  • 35. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction “If readability is more important than editing then keep the editing action hidden until the user interacts with the content.”
  • 36. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  • 37. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  • 38. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  • 39. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  • 40. make it direct. drag and drop Drag and Drop: Take care of the interesting moments My Yahoo! drag and drop
  • 41. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances
  • 42. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments
  • 43. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments
  • 44. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments
  • 45. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments
  • 46. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments
  • 47. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments netflix. not enough hints.
  • 48. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments netflix. not enough hints.
  • 49. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments netflix. not enough hints.
  • 50. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances yahoo! teachers. hints during interesting moments netflix. not enough hints.
  • 51. make it direct. drag and drop drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 52. make it direct. drag and drop anti-pattern. artificial construct drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 53. make it direct. drag and drop anti-pattern. artificial construct drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 54. make it direct. drag and drop anti-pattern. artificial construct drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 55. make it direct. drag and drop anti-pattern. artificial construct drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 56. make it direct. drag and drop anti-pattern. artificial construct drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs
  • 58. keep it lightweight. contextual tools
  • 59. keep it lightweight. contextual tools digg. in page action
  • 60. keep it lightweight. contextual tools digg. in page action
  • 61. keep it lightweight. contextual tools digg. in page action Key to digg’s early success - Kevin Rose
  • 62. keep it lightweight. contextual tools digg. in page action the gap. remembered collections
  • 63. keep it lightweight. contextual tools digg. in page action the gap. remembered collections
  • 64. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 65. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 66. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 67. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 68. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 69. keep it lightweight. contextual tools digg. in page action the gap. remembered collections flickr, backpackit. contextual tools
  • 70. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  • 71. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  • 72. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  • 73. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  • 74. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools
  • 75. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  • 76. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  • 77. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  • 78. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  • 79. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr, backpackit. contextual tools y! movies, y! answers. rating an object
  • 80. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 81. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 82. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 83. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 84. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 85. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 86. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 87. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down
  • 88. keep it lightweight. contextual tools Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events
  • 89. keep it lightweight. contextual tools Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events netflix. ratings
  • 90. keep it lightweight. contextual tools Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events digg. vote click-weight seek time decision time second guessing wait time netflix. ratings interaction steps cost/benefit tradeoff
  • 91. keep it lightweight. anti-patterns
  • 92. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  • 93. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  • 94. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  • 95. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover
  • 96. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover. resolved y! teachers. anti-pattern. hover & cover
  • 97. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover. resolved y! teachers. anti-pattern. hover & cover
  • 98. keep it lightweight. anti-patterns
  • 99. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat
  • 100. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat
  • 101. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  • 102. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  • 103. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets
  • 104. stay on the page
  • 105. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  • 106. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  • 107. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  • 108. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation
  • 109. stay on the page. overlay
  • 110. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 111. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 112. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 113. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 114. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 115. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 116. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 117. stay on the page. overlay anti-pattern. y! photos. idiot boxes
  • 118. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover
  • 119. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover
  • 120. stay on the page. overlay anti-pattern. y! photos. idiot boxes anti-pattern. barnes & nobles. hover & cover anti-pattern. amazon. mouse trap
  • 121. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay
  • 122. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  • 123. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  • 124. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  • 125. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  • 126. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration
  • 127. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion
  • 128. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion
  • 129. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration
  • 130. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration
  • 131. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration
  • 132. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration roost. in-context insight
  • 133. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration roost. in-context insight
  • 134. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration roost. in-context insight
  • 135. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration y! autos. accordion bbc. in-context configuration roost. in-context insight
  • 136. stay on the page. virtual Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  • 137. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  • 138. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling
  • 139. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling microsoft live. paged scrolling
  • 140. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  • 141. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  • 142. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling
  • 143. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  • 144. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  • 145. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling
  • 146. stay on the page. virtual Rethink paging in-place paging zoomable user interface (zui)
  • 147. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  • 148. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  • 149. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui)
  • 150. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  • 151. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  • 152. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui
  • 153. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui cool iris (piclens). zui
  • 154. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump
  • 155. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline assistant
  • 156. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline assistant
  • 157. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline assistant
  • 158. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline checkout the gap. inline assistant
  • 159. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline checkout the gap. inline assistant
  • 160. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline checkout the gap. inline assistant broadmoor hotel. one page checkout
  • 161. stay on the page. process flow rethink process flows the user’s mental model vs page model every page jump is a mental speed bump the gap. inline checkout the gap. inline assistant broadmoor hotel. one page checkout
  • 162. stay on the page. process flow step by step? yes, sometimes works best
  • 163. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 164. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 165. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 166. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 167. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 168. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step
  • 169. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step netflix. step by step
  • 170. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step netflix. step by step ebay. single page flow
  • 171. stay on the page. anti-patterns the answer is in testing
  • 172. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  • 173. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  • 174. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  • 175. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  • 176. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay
  • 177. stay on the page. anti-patterns the answer is in testing netflix. simpler overlay netflix. stalker overlay
  • 179. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate
  • 180. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate yahoo login! dog-ear invite
  • 181. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite
  • 182. offer an invitation. static invitation unfinished look dog-ear blank slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite backpackit. blank slate invitation
  • 183. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek
  • 184. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek discover! 1-2-3 call to action
  • 185. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek discover! 1-2-3 call to action yahoo! tour invitation
  • 186. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek discover! 1-2-3 call to action yahoo! tour invitation starz play! sneak peek in carousel
  • 187. offer an invitation. dynamic invitation discoverability invitations
  • 188. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation
  • 189. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation
  • 190. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation
  • 191. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  • 192. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  • 193. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  • 194. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  • 195. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit
  • 196. offer an invitation. dynamic invitation discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit flickr. on hover
  • 197. offer an invitation. dynamic invitation Discoverability No easy answer Use the hover to reveal interaction Use the familiar to teach the new Can’t flag all interactions
  • 198. offer an invitation. dynamic invitation Discoverability No easy answer Use the hover to reveal interaction Use the familiar to teach the new Can’t flag all interactions flickr. hover invitation
  • 199. offer an invitation. dynamic invitation Discoverability No easy answer Use the hover to reveal interaction Use the familiar to teach the new Can’t flag all interactions backpackit (fake). being too explicit flickr. hover invitation
  • 200. offer an invitation. dynamic invitation Discoverability No easy answer Use the hover to reveal interaction Use the familiar to teach the new Can’t flag all interactions backpackit (fake). being too explicit backpackit. tooltip invitation + hover invitation + cursor invitation flickr. hover invitation
  • 201. offer an invitation. dynamic invitation Discoverability No easy answer Use the hover to reveal interaction Use the familiar to teach the new Can’t flag all interactions backpackit (fake). being too explicit backpackit. tooltip invitation + hover invitation + cursor invitation flickr. hover invitation y! movies. hover invitation
  • 202. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after
  • 203. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  • 204. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  • 205. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive)
  • 206. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (interactive) flickr. drop here invitation (static)
  • 207. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues
  • 208. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button
  • 209. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button y! mail. embedded buttons
  • 210. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button backpackit. revealed hyperlinks/icons y! mail. embedded buttons
  • 211. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button backpackit. revealed hyperlinks/icons y! mail. embedded buttons flickr. drop down affordance
  • 212. offer an invitation. anti-patterns
  • 213. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  • 214. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  • 215. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap
  • 216. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  • 217. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  • 218. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  • 219. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap
  • 223. use transitions Speak to the brain Understanding attention processing
  • 224. use transitions Speak to the brain Understanding attention processing
  • 225. use transitions Speak to the brain Understanding attention processing Sending the wrong message
  • 226. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 227. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 228. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 229. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 230. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 231. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets
  • 232. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 233. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 234. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 235. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 236. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 237. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 238. use transitions Speak to the brain Understanding attention processing Sending the wrong message mac widgets flickr zeitgeist
  • 240. use transitions backpackit. fade transition + self-healing transition.
  • 241. use transitions backpackit. fade transition + self-healing transition.
  • 242. use transitions backpackit. fade transition + self-healing transition.
  • 243. use transitions backpackit. fade transition + self-healing transition.
  • 244. use transitions backpackit. fade transition + self-healing transition.
  • 245. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  • 246. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  • 247. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  • 248. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition.
  • 249. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition.
  • 250. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition.
  • 251. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  • 252. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  • 253. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  • 254. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  • 255. use transitions the gap. zoom box. backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight.
  • 256. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 257. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 258. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 259. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 260. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 261. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 262. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 263. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 264. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 265. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 266. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 267. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 268. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention
  • 269. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  • 270. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  • 271. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach
  • 274. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  • 275. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  • 276. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  • 277. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  • 278. use transitions. anti-patterns anti-pattern. borders. needless fanfare
  • 280. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 281. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 282. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 283. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 284. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 285. use transitions. anti-patterns anti-pattern. amazon. animation gone wild
  • 296. react immediately y! answers. live suggest y! mail, kayak. auto complete
  • 297. react immediately y! answers. live suggest y! mail, kayak. auto complete
  • 298. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator
  • 299. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 300. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 301. react immediately y! answers. live suggest y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 302. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 303. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 304. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews
  • 305. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  • 306. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  • 307. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting
  • 308. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible
  • 309. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible
  • 310. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible
  • 311. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible
  • 312. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible roost
  • 313. react immediately Shape user perception Make time pass faster Make application feel more responsive
  • 314. react immediately Shape user perception Make time pass faster Make application feel more responsive
  • 315. react immediately Shape user perception Make time pass faster Make application feel more responsive
  • 316. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 317. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 318. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 319. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 320. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 321. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap
  • 322. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  • 323. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  • 324. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  • 325. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth
  • 326. 6 principles for Designing Rich Web Experiences make it direct keep it lightweight stay on the page provide invitations use transitions react immediately Based on the Book: Designing Web Interfaces: Principles & Patterns for Rich Interfaces O’Reilly by Bill Scott & Theresa Neil This Presentation: Look for location on next blog post: http://designingwebinterfaces.com