designing web interfaces book - o'reilly webcast
DESCRIPTION
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)TRANSCRIPT
![Page 1: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/1.jpg)
Designing Web InterfacesPrinciples & Patterns for Rich InteractionBill Scott & Theresa Neil
O’Reilly Webcast - February 3, 2009Bill ScottDirector, UI EngineeringNetflix
![Page 2: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/2.jpg)
background
![Page 3: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/3.jpg)
For every action, there is an equal and opposite reaction
interesting moments abound to engage the userit’s the nuance stupidmake “less” become “more”
Newton’s Third Law of Motion
Interaction(action)
Feedback(reaction)+
![Page 4: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/4.jpg)
6 principles for Designing Rich Web Experiences
1. make it direct2. keep it lightweight3. stay on the page4. provide invitations5. use transitions6. react immediately
![Page 5: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/5.jpg)
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.
![Page 6: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/6.jpg)
make it direct
![Page 7: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/7.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 8: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/8.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 9: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/9.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 10: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/10.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 11: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/11.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 12: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/12.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
![Page 13: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/13.jpg)
inline editing
make it direct
Yahoo! Bookmarks
![Page 14: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/14.jpg)
inline editing
make it direct
Yahoo! Bookmarks
![Page 15: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/15.jpg)
inline editing
make it direct
Yahoo! Bookmarks
![Page 16: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/16.jpg)
inline editing
make it direct
Yahoo! Bookmarks
![Page 17: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/17.jpg)
inline editing
make it direct
Yahoo! Bookmarks
![Page 18: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/18.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
![Page 19: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/19.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
![Page 20: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/20.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
![Page 21: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/21.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
![Page 22: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/22.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
![Page 23: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/23.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
![Page 24: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/24.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
![Page 25: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/25.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
![Page 26: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/26.jpg)
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modesaccessibility
![Page 27: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/27.jpg)
make it direct. inline editing
flickr. alternate edit path
considerationsdiscoverabilitycomplex editingblending modesaccessibility
![Page 28: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/28.jpg)
make it direct. inline editing
flickr. alternate edit path
considerationsdiscoverabilitycomplex editingblending modesaccessibility
![Page 29: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/29.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
![Page 30: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/30.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
![Page 31: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/31.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
![Page 32: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/32.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
![Page 33: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/33.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
![Page 34: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/34.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
![Page 35: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/35.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
“If readability is more important than editing then keep the editing action hidden
until the user interacts with the content.”
![Page 36: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/36.jpg)
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
![Page 37: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/37.jpg)
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
![Page 38: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/38.jpg)
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
![Page 39: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/39.jpg)
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
![Page 40: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/40.jpg)
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
![Page 41: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/41.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
![Page 42: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/42.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
yahoo! teachers. hints during interesting moments
![Page 43: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/43.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
yahoo! teachers. hints during interesting moments
![Page 44: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/44.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
yahoo! teachers. hints during interesting moments
![Page 45: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/45.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
yahoo! teachers. hints during interesting moments
![Page 46: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/46.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
yahoo! teachers. hints during interesting moments
![Page 47: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/47.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. not enough hints.
yahoo! teachers. hints during interesting moments
![Page 48: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/48.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. not enough hints.
yahoo! teachers. hints during interesting moments
![Page 49: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/49.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. not enough hints.
yahoo! teachers. hints during interesting moments
![Page 50: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/50.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. not enough hints.
yahoo! teachers. hints during interesting moments
![Page 51: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/51.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
![Page 52: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/52.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
![Page 53: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/53.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
![Page 54: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/54.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
![Page 55: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/55.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
![Page 56: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/56.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
![Page 57: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/57.jpg)
keep it lightweight
![Page 58: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/58.jpg)
keep it lightweight. contextual tools
![Page 59: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/59.jpg)
digg. in page action
keep it lightweight. contextual tools
![Page 60: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/60.jpg)
digg. in page action
keep it lightweight. contextual tools
![Page 61: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/61.jpg)
digg. in page action
keep it lightweight. contextual tools
Key to digg’s early success -
Kevin Rose
![Page 62: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/62.jpg)
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
![Page 63: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/63.jpg)
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
![Page 64: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/64.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 65: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/65.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 66: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/66.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 67: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/67.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 68: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/68.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 69: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/69.jpg)
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 70: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/70.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 71: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/71.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 72: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/72.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 73: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/73.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 74: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/74.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
![Page 75: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/75.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
![Page 76: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/76.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
![Page 77: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/77.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
![Page 78: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/78.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
![Page 79: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/79.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
![Page 80: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/80.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 81: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/81.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 82: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/82.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 83: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/83.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 84: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/84.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 85: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/85.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 86: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/86.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 87: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/87.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
![Page 88: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/88.jpg)
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
![Page 89: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/89.jpg)
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
netflix. ratings
![Page 90: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/90.jpg)
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
click-weightseek time
decision timesecond guessing
wait timeinteraction steps
cost/benefit tradeoff
keep it lightweight. contextual tools
netflix. ratings
digg. vote
![Page 91: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/91.jpg)
keep it lightweight. anti-patterns
![Page 92: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/92.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
![Page 93: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/93.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
![Page 94: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/94.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
![Page 95: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/95.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
![Page 96: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/96.jpg)
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
![Page 97: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/97.jpg)
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
![Page 98: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/98.jpg)
keep it lightweight. anti-patterns
![Page 99: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/99.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
![Page 100: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/100.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
![Page 101: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/101.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
![Page 102: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/102.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
![Page 103: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/103.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
![Page 104: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/104.jpg)
stay on the page
![Page 105: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/105.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
![Page 106: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/106.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
![Page 107: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/107.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
![Page 108: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/108.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
![Page 109: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/109.jpg)
stay on the page. overlay
![Page 110: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/110.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 111: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/111.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 112: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/112.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 113: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/113.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 114: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/114.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 115: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/115.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 116: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/116.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 117: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/117.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
![Page 118: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/118.jpg)
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
![Page 119: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/119.jpg)
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
![Page 120: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/120.jpg)
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
anti-pattern. amazon. mouse trap
![Page 121: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/121.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
![Page 122: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/122.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
![Page 123: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/123.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
![Page 124: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/124.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
![Page 125: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/125.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
![Page 126: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/126.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
![Page 127: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/127.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
y! autos. accordion
![Page 128: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/128.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
y! autos. accordion
![Page 129: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/129.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration
my y!. in-context configuration
y! autos. accordion
![Page 130: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/130.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration
my y!. in-context configuration
y! autos. accordion
![Page 131: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/131.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration
my y!. in-context configuration
y! autos. accordion
![Page 132: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/132.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration roost. in-context insight
my y!. in-context configuration
y! autos. accordion
![Page 133: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/133.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration roost. in-context insight
my y!. in-context configuration
y! autos. accordion
![Page 134: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/134.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration roost. in-context insight
my y!. in-context configuration
y! autos. accordion
![Page 135: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/135.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration roost. in-context insight
my y!. in-context configuration
y! autos. accordion
![Page 136: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/136.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
![Page 137: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/137.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
![Page 138: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/138.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
![Page 139: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/139.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
![Page 140: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/140.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
![Page 141: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/141.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
![Page 142: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/142.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
![Page 143: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/143.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
y! mail. on-demand scrolling
![Page 144: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/144.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
y! mail. on-demand scrolling
![Page 145: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/145.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
y! mail. on-demand scrolling
![Page 146: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/146.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
![Page 147: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/147.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
![Page 148: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/148.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
![Page 149: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/149.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
![Page 150: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/150.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
![Page 151: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/151.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
![Page 152: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/152.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
![Page 153: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/153.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui cool iris (piclens). zui
![Page 154: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/154.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
![Page 155: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/155.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
the gap. inline assistant
![Page 156: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/156.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
the gap. inline assistant
![Page 157: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/157.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
the gap. inline assistant
![Page 158: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/158.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
the gap. inline assistant
the gap. inline checkout
![Page 159: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/159.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
the gap. inline assistant
the gap. inline checkout
![Page 160: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/160.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
broadmoor hotel. one page checkout
the gap. inline assistant
the gap. inline checkout
![Page 161: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/161.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
broadmoor hotel. one page checkout
the gap. inline assistant
the gap. inline checkout
![Page 162: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/162.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
![Page 163: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/163.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 164: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/164.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 165: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/165.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 166: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/166.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 167: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/167.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 168: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/168.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
![Page 169: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/169.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
netflix. step by step
discover card. step by step
![Page 170: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/170.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
netflix. step by step
discover card. step by step
ebay. single page flow
![Page 171: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/171.jpg)
the answer is in testing
stay on the page. anti-patterns
![Page 172: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/172.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
![Page 173: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/173.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
![Page 174: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/174.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
![Page 175: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/175.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
![Page 176: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/176.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
![Page 177: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/177.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
netflix. simpler overlay
![Page 178: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/178.jpg)
offer an invitation
![Page 179: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/179.jpg)
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
![Page 180: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/180.jpg)
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
yahoo login! dog-ear invite
![Page 181: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/181.jpg)
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
![Page 182: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/182.jpg)
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
backpackit. blank slate invitation
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
![Page 183: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/183.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
![Page 184: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/184.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
discover! 1-2-3 call to action
![Page 185: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/185.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
yahoo! tour invitation
discover! 1-2-3 call to action
![Page 186: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/186.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
yahoo! tour invitation
discover! 1-2-3 call to action
starz play! sneak peek in carousel
![Page 187: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/187.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
![Page 188: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/188.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
![Page 189: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/189.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
![Page 190: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/190.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
![Page 191: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/191.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
![Page 192: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/192.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
![Page 193: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/193.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
![Page 194: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/194.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
![Page 195: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/195.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
![Page 196: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/196.jpg)
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover
![Page 197: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/197.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
![Page 198: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/198.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
flickr. hover invitation
![Page 199: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/199.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
flickr. hover invitation
backpackit (fake). being too explicit
![Page 200: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/200.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
backpackit. tooltip invitation + hover invitation + cursor invitation
offer an invitation. dynamic invitation
flickr. hover invitation
backpackit (fake). being too explicit
![Page 201: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/201.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
y! movies. hover invitation
backpackit. tooltip invitation + hover invitation + cursor invitation
offer an invitation. dynamic invitation
flickr. hover invitation
backpackit (fake). being too explicit
![Page 202: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/202.jpg)
drag and dropuse the interesting momentsbefore, during and after
offer an invitation. dynamic invitation
![Page 203: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/203.jpg)
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
![Page 204: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/204.jpg)
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
![Page 205: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/205.jpg)
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
![Page 206: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/206.jpg)
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (static)
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
![Page 207: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/207.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
![Page 208: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/208.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
the gap. button
![Page 209: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/209.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
y! mail. embedded buttons
the gap. button
![Page 210: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/210.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
y! mail. embedded buttons
backpackit. revealed hyperlinks/icons
the gap. button
![Page 211: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/211.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
y! mail. embedded buttons
backpackit. revealed hyperlinks/icons
flickr. drop down affordance
the gap. button
![Page 212: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/212.jpg)
offer an invitation. anti-patterns
![Page 213: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/213.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
![Page 214: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/214.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
![Page 215: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/215.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
![Page 216: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/216.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
![Page 217: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/217.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
![Page 218: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/218.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
![Page 219: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/219.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
![Page 220: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/220.jpg)
use transitions
![Page 221: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/221.jpg)
use transitions
![Page 222: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/222.jpg)
use transitions
![Page 223: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/223.jpg)
use transitions
Speak to the brainUnderstanding attention processing
![Page 224: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/224.jpg)
use transitions
Speak to the brainUnderstanding attention processing
![Page 225: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/225.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
![Page 226: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/226.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 227: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/227.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 228: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/228.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 229: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/229.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 230: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/230.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 231: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/231.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
![Page 232: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/232.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 233: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/233.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 234: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/234.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 235: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/235.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 236: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/236.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 237: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/237.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 238: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/238.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
![Page 239: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/239.jpg)
use transitions
![Page 240: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/240.jpg)
backpackit. fade transition + self-healing transition.
use transitions
![Page 241: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/241.jpg)
backpackit. fade transition + self-healing transition.
use transitions
![Page 242: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/242.jpg)
backpackit. fade transition + self-healing transition.
use transitions
![Page 243: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/243.jpg)
backpackit. fade transition + self-healing transition.
use transitions
![Page 244: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/244.jpg)
backpackit. fade transition + self-healing transition.
use transitions
![Page 245: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/245.jpg)
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
![Page 246: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/246.jpg)
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
![Page 247: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/247.jpg)
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
![Page 248: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/248.jpg)
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
![Page 249: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/249.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
the gap. zoom box.
use transitions
![Page 250: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/250.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
the gap. zoom box.
use transitions
![Page 251: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/251.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
![Page 252: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/252.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
![Page 253: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/253.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
![Page 254: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/254.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
![Page 255: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/255.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
![Page 256: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/256.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 257: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/257.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 258: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/258.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 259: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/259.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 260: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/260.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 261: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/261.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 262: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/262.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 263: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/263.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 264: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/264.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 265: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/265.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 266: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/266.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 267: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/267.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 268: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/268.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
![Page 269: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/269.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
![Page 270: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/270.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
![Page 271: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/271.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
![Page 272: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/272.jpg)
use transitions. anti-patterns
![Page 273: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/273.jpg)
use transitions. anti-patterns
![Page 274: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/274.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
![Page 275: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/275.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
![Page 276: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/276.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
![Page 277: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/277.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
![Page 278: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/278.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
![Page 279: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/279.jpg)
use transitions. anti-patterns
![Page 280: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/280.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 281: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/281.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 282: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/282.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 283: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/283.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 284: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/284.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 285: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/285.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
![Page 286: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/286.jpg)
react immediately
![Page 287: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/287.jpg)
react immediately
wundrbar. live preview.
![Page 288: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/288.jpg)
react immediately
wundrbar. live preview.
![Page 289: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/289.jpg)
react immediately
wundrbar. live preview.
![Page 290: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/290.jpg)
react immediately
wundrbar. live preview.
![Page 291: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/291.jpg)
react immediately
wundrbar. live preview.
![Page 292: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/292.jpg)
react immediately
wundrbar. live preview.
![Page 293: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/293.jpg)
react immediately
![Page 294: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/294.jpg)
y! answers. live suggest
react immediately
![Page 295: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/295.jpg)
y! answers. live suggest
react immediately
![Page 296: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/296.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
![Page 297: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/297.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
![Page 298: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/298.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
y!mail. busy indicator
react immediately
![Page 299: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/299.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 300: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/300.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 301: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/301.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 302: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/302.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 303: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/303.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 304: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/304.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
![Page 305: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/305.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
![Page 306: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/306.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
![Page 307: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/307.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
![Page 308: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/308.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
![Page 309: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/309.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
![Page 310: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/310.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
![Page 311: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/311.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
![Page 312: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/312.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
roost
react immediately
![Page 313: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/313.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
![Page 314: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/314.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
![Page 315: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/315.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
![Page 316: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/316.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 317: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/317.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 318: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/318.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 319: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/319.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 320: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/320.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 321: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/321.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
![Page 322: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/322.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
![Page 323: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/323.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
![Page 324: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/324.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
![Page 325: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/325.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
![Page 326: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/326.jpg)
6 principles for Designing Rich Web Experiences
make it directkeep it lightweightstay on the pageprovide invitationsuse transitionsreact immediately
Based on the Book:Designing Web Interfaces: Principles & Patterns for Rich InterfacesO’Reilly by Bill Scott & Theresa Neil
This Presentation: Look for location on next blog post: http://designingwebinterfaces.com
![Page 327: Designing Web Interfaces Book - O'Reilly Webcast](https://reader037.vdocuments.mx/reader037/viewer/2022102823/53f098438d7f72e94b8b465f/html5/thumbnails/327.jpg)
I am Hiring!