Designing Web Interfaces
-
Upload
bill-scott -
Category
Design
-
view
31.885 -
download
4
description
Transcript of Designing Web Interfaces
![Page 1: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/1.jpg)
Designing Web InterfacesPrinciples & Patterns for Rich Interaction
Bill ScottDirector, UI Engineering
1
![Page 2: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/2.jpg)
background
2
![Page 3: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/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)+
3
![Page 4: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/4.jpg)
6 principles for Crafting Rich Web Experiences
1. make it direct2. keep it lightweight3. stay on the page4. provide invitations5. use transitions6. react immediately
4
![Page 5: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/5.jpg)
make it direct
5
![Page 6: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/6.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
![Page 7: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/7.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
![Page 8: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/8.jpg)
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
![Page 9: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/9.jpg)
inline editing
make it direct
Yahoo! Bookmarks
7
![Page 10: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/10.jpg)
make it direct. inline editing
discoverabilityinvitations
8
![Page 11: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/11.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
8
![Page 12: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/12.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
8
![Page 13: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/13.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
8
![Page 14: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/14.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
![Page 15: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/15.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
![Page 16: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/16.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
![Page 17: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/17.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
![Page 18: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/18.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
![Page 19: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/19.jpg)
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover
8
![Page 20: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/20.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
9
![Page 21: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/21.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
![Page 22: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/22.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
![Page 23: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/23.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
![Page 24: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/24.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
![Page 25: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/25.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
![Page 26: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/26.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
![Page 27: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/27.jpg)
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
![Page 28: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/28.jpg)
accessibility
make it direct. inline editing
10
![Page 29: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/29.jpg)
accessibility
make it direct. inline editing
flickr. alternate edit path
10
![Page 30: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/30.jpg)
accessibility
make it direct. inline editing
flickr. alternate edit path
10
![Page 31: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/31.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
11
![Page 32: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/32.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
![Page 33: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/33.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
![Page 34: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/34.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
![Page 35: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/35.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
![Page 36: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/36.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
![Page 37: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/37.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
![Page 38: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/38.jpg)
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
![Page 39: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/39.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.”
11
![Page 40: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/40.jpg)
drag and drop
make it direct
My Yahoo! drag and drop
12
![Page 41: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/41.jpg)
make it direct. drag and drop
Take care of the interesting moments
13
![Page 42: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/42.jpg)
make it direct. drag and drop
Take care of the interesting moments
13
![Page 43: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/43.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
14
![Page 44: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/44.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. few hints.
14
![Page 45: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/45.jpg)
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. few hints.
yahoo! teachers. hints during interesting moments
14
![Page 46: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/46.jpg)
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
15
![Page 47: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/47.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
15
![Page 48: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/48.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
15
![Page 49: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/49.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
15
![Page 50: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/50.jpg)
keep it lightweight
16
![Page 51: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/51.jpg)
digg. in page action
keep it lightweight. contextual tools
17
![Page 52: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/52.jpg)
digg. in page action
Key to digg’s early success -
Kevin Rose
keep it lightweight. contextual tools
17
![Page 53: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/53.jpg)
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
17
![Page 54: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/54.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
![Page 55: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/55.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
![Page 56: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/56.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
![Page 57: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/57.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
y! movies, y! answers. rating an object
keep it lightweight. contextual tools
17
![Page 58: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/58.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr. in-context tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
17
![Page 59: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/59.jpg)
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr. in-context tools y! movies, y! answers. rating an object
keep it lightweight. contextual tools
17
![Page 60: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/60.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
![Page 61: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/61.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
![Page 62: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/62.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
![Page 63: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/63.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
![Page 64: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/64.jpg)
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
![Page 65: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/65.jpg)
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
19
![Page 66: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/66.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
19
![Page 67: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/67.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
19
![Page 68: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/68.jpg)
keep it lightweight. anti-patterns
20
![Page 69: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/69.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
20
![Page 70: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/70.jpg)
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
20
![Page 71: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/71.jpg)
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
20
![Page 72: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/72.jpg)
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
20
![Page 73: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/73.jpg)
keep it lightweight. anti-patterns
21
![Page 74: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/74.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
21
![Page 75: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/75.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
21
![Page 76: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/76.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
![Page 77: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/77.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
![Page 78: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/78.jpg)
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
![Page 79: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/79.jpg)
stay on the page
22
![Page 80: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/80.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
![Page 81: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/81.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
![Page 82: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/82.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
![Page 83: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/83.jpg)
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
![Page 84: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/84.jpg)
stay on the page. overlay
24
![Page 85: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/85.jpg)
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
24
![Page 86: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/86.jpg)
stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes
24
![Page 87: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/87.jpg)
stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes
anti-pattern. amazon. mouse trap24
![Page 88: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/88.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
25
![Page 89: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/89.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
25
![Page 90: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/90.jpg)
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration
my y!. in-context configuration
25
![Page 91: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/91.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
25
![Page 92: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/92.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
25
![Page 93: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/93.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
25
![Page 94: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/94.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
25
![Page 95: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/95.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
25
![Page 96: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/96.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
25
![Page 97: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/97.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
26
![Page 98: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/98.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
mlslistings. pagination
26
![Page 99: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/99.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
mlslistings. pagination
y! health. carousel
26
![Page 100: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/100.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
mlslistings. pagination
y! health. carousel
y! mail. on-demand scrolling
26
![Page 101: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/101.jpg)
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
mlslistings. pagination
microsoft live. paged scrolling
y! health. carousel
y! mail. on-demand scrolling
26
![Page 102: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/102.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
27
![Page 103: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/103.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
![Page 104: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/104.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
![Page 105: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/105.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
![Page 106: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/106.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
![Page 107: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/107.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
![Page 108: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/108.jpg)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
![Page 109: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/109.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
27
![Page 110: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/110.jpg)
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
28
![Page 111: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/111.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 assistant28
![Page 112: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/112.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
28
![Page 113: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/113.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
28
![Page 114: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/114.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 checkoutthe gap. inline assistant
the gap. inline checkout
28
![Page 115: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/115.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
29
![Page 116: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/116.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 117: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/117.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 118: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/118.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 119: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/119.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 120: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/120.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 121: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/121.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 122: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/122.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
![Page 123: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/123.jpg)
step by step?yes, sometimes works best
stay on the page. process flow
netflix. step by step
discover card. step by step
29
![Page 124: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/124.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
29
![Page 125: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/125.jpg)
the answer is in testing
stay on the page. anti-patterns
30
![Page 126: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/126.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
30
![Page 127: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/127.jpg)
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
netflix. simpler overlay
30
![Page 128: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/128.jpg)
offer an invitation
31
![Page 129: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/129.jpg)
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
32
![Page 130: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/130.jpg)
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
yahoo login! dog-ear invite
32
![Page 131: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/131.jpg)
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
32
![Page 132: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/132.jpg)
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
backpackit. blank slate invitation
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
32
![Page 133: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/133.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
33
![Page 134: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/134.jpg)
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
discover! 1-2-3 call to action
33
![Page 135: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/135.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
33
![Page 136: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/136.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
33
![Page 137: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/137.jpg)
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
34
![Page 138: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/138.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
34
![Page 139: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/139.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
34
![Page 140: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/140.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
34
![Page 141: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/141.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
34
![Page 142: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/142.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
34
![Page 143: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/143.jpg)
drag and dropuse the interesting momentsbefore, during and after
offer an invitation. dynamic invitation
35
![Page 144: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/144.jpg)
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (static)
offer an invitation. dynamic invitation
35
![Page 145: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/145.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
35
![Page 146: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/146.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
35
![Page 147: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/147.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
35
![Page 148: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/148.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
36
![Page 149: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/149.jpg)
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
the gap. button
36
![Page 150: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/150.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
36
![Page 151: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/151.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
36
![Page 152: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/152.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
36
![Page 153: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/153.jpg)
offer an invitation. anti-patterns
37
![Page 154: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/154.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
37
![Page 155: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/155.jpg)
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
37
![Page 156: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/156.jpg)
use transitions
38
![Page 157: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/157.jpg)
use transitions
39
![Page 158: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/158.jpg)
use transitions
39
![Page 159: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/159.jpg)
use transitions
Speak to the brainUnderstanding attention processing
40
![Page 160: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/160.jpg)
use transitions
Speak to the brainUnderstanding attention processing
40
![Page 161: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/161.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
41
![Page 162: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/162.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
flickr zeitgeist
41
![Page 163: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/163.jpg)
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
flickr zeitgeist
41
![Page 164: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/164.jpg)
use transitions
42
![Page 165: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/165.jpg)
backpackit. fade transition + self-healing transition.
use transitions
42
![Page 166: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/166.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
use transitions
42
![Page 167: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/167.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
use transitions
42
![Page 168: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/168.jpg)
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
42
![Page 169: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/169.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 170: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/170.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 171: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/171.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 172: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/172.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 173: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/173.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 174: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/174.jpg)
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
![Page 175: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/175.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
![Page 176: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/176.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
![Page 177: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/177.jpg)
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
![Page 178: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/178.jpg)
use transitions. anti-patterns
45
![Page 179: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/179.jpg)
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
45
![Page 180: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/180.jpg)
use transitions. anti-patterns
46
![Page 181: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/181.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
46
![Page 182: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/182.jpg)
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
anti-pattern. afi. animation gone wild
46
![Page 183: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/183.jpg)
use transitions. anti-patterns
47
![Page 184: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/184.jpg)
use transitions. anti-patterns
anti-pattern. y! local. stalker
47
![Page 185: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/185.jpg)
react immediately
48
![Page 186: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/186.jpg)
react immediately
49
![Page 187: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/187.jpg)
react immediately
50
![Page 188: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/188.jpg)
y! answers. live suggest
react immediately
50
![Page 189: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/189.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
50
![Page 190: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/190.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
50
![Page 191: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/191.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
react immediately
50
![Page 192: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/192.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y!mail. busy indicator
react immediately
50
![Page 193: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/193.jpg)
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
50
![Page 194: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/194.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
![Page 195: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/195.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
![Page 196: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/196.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
![Page 197: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/197.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
52
![Page 198: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/198.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
52
![Page 199: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/199.jpg)
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
53
![Page 200: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/200.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
53
![Page 201: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/201.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
![Page 202: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/202.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
![Page 203: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/203.jpg)
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
![Page 204: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/204.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
![Page 205: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/205.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
![Page 206: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/206.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
![Page 207: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/207.jpg)
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
![Page 208: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/208.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
![Page 209: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/209.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
![Page 210: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/210.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
![Page 211: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/211.jpg)
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
![Page 212: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/212.jpg)
Keep feedback focusedUse nuance
react immediately
57
![Page 213: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/213.jpg)
Keep feedback focusedUse nuance
react immediately
57
![Page 214: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/214.jpg)
Keep feedback focusedUse nuance
react immediately
57
![Page 215: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/215.jpg)
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
![Page 216: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/216.jpg)
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
![Page 217: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/217.jpg)
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
![Page 218: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/218.jpg)
6 principles for Crafting Rich Web Experiences
make it directkeep it lightweightstay on the pageprovide invitationsuse transitionsreact immediately
Upcoming Book:Designing Web Interfaces: Principles & Patterns for Rich InterfacesO’Reilly
This Presentation: http://billwscott.com/share/presentations/2008/ajaxworld
59
![Page 219: Designing Web Interfaces](https://reader038.fdocuments.in/reader038/viewer/2022102618/53f0b58d8d7f72104c8b46c2/html5/thumbnails/219.jpg)
And I am Hiring!
60