Post on 17-Aug-2014
description
Designing Web InterfacesPrinciples & Patterns for Rich Interaction
Bill ScottDirector, UI Engineering
1
background
2
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
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
make it direct
5
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
6
inline editing
make it direct
Yahoo! Bookmarks
7
make it direct. inline editing
discoverabilityinvitations
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
8
make it direct. inline editing
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover
8
make it direct. inline editing
considerationscomplex editingblending modes
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
make it direct. inline editing
considerationscomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
9
accessibility
make it direct. inline editing
10
accessibility
make it direct. inline editing
flickr. alternate edit path
10
accessibility
make it direct. inline editing
flickr. alternate edit path
10
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
11
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
drag and drop
make it direct
My Yahoo! drag and drop
12
make it direct. drag and drop
Take care of the interesting moments
13
make it direct. drag and drop
Take care of the interesting moments
13
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
14
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
netflix. few hints.
14
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
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
15
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
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
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
keep it lightweight
16
digg. in page action
keep it lightweight. contextual tools
17
digg. in page action
Key to digg’s early success -
Kevin Rose
keep it lightweight. contextual tools
17
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
17
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
keep it lightweight. contextual tools
17
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
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
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
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
18
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
19
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
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
keep it lightweight. anti-patterns
20
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
20
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
20
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
20
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
20
keep it lightweight. anti-patterns
21
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
21
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
21
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
21
stay on the page
22
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
23
stay on the page. overlay
24
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
24
stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes
24
stay on the page. overlay
anti-pattern. borders. hover & cover
anti-pattern. y! photos. idiot boxes
anti-pattern. amazon. mouse trap24
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
25
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
25
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
bbc. in-context configuration
my y!. in-context configuration
25
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
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
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
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
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
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
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
26
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid of paging & scrolling
mlslistings. pagination
26
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
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
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
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
27
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
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
28
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
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
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
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
step by step?yes, sometimes works best
stay on the page. process flow
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
29
step by step?yes, sometimes works best
stay on the page. process flow
netflix. step by step
discover card. step by step
29
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
the answer is in testing
stay on the page. anti-patterns
30
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
30
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
netflix. simpler overlay
30
offer an invitation
31
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
32
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
yahoo login! dog-ear invite
32
offer an invitation. static invitation
unfinished lookdog-earempty slotsblank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
32
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
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
33
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
discover! 1-2-3 call to action
33
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
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
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
34
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
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
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
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
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
drag and dropuse the interesting momentsbefore, during and after
offer an invitation. dynamic invitation
35
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (static)
offer an invitation. dynamic invitation
35
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
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
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
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
36
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
the gap. button
36
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
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
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
offer an invitation. anti-patterns
37
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
37
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
37
use transitions
38
use transitions
39
use transitions
39
use transitions
Speak to the brainUnderstanding attention processing
40
use transitions
Speak to the brainUnderstanding attention processing
40
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
41
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
flickr zeitgeist
41
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
flickr zeitgeist
41
use transitions
42
backpackit. fade transition + self-healing transition.
use transitions
42
backpackit. fade transition + self-healing transition.
flickr. slide transition.
use transitions
42
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
use transitions
42
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
42
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
43
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
44
use transitions. anti-patterns
45
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
45
use transitions. anti-patterns
46
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
46
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
anti-pattern. afi. animation gone wild
46
use transitions. anti-patterns
47
use transitions. anti-patterns
anti-pattern. y! local. stalker
47
react immediately
48
react immediately
49
react immediately
50
y! answers. live suggest
react immediately
50
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
50
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
50
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
react immediately
50
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y!mail. busy indicator
react immediately
50
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
50
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
51
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
52
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
52
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
53
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
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
54
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
55
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
56
Keep feedback focusedUse nuance
react immediately
57
Keep feedback focusedUse nuance
react immediately
57
Keep feedback focusedUse nuance
react immediately
57
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
Think “deeper interaction”Multi-variate datafocus + context
react immediately
58
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
And I am Hiring!
60