View
51.009
Download
2
Category
Preview:
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)
Citation preview
Designing Web InterfacesPrinciples & Patterns for Rich InteractionBill Scott & Theresa Neil
O’Reilly Webcast - February 3, 2009Bill ScottDirector, UI EngineeringNetflix
background
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)+
6 principles for Designing Rich Web Experiences
1. make it direct2. keep it lightweight3. stay on the page4. provide invitations5. use transitions6. react immediately
In-Page Editing. Single-Field Inline Edit. Multi-Field Inline Edit. Overlay Edit. Table Edit. Group Edit. Module Configuration. Drag and Drop. Drag and
Drop Module. Drag and Drop List. Drag and Drop Object. Drag and Drop Action. Drag and Drop Collection. Direct Selection. Toggle Selection. Collected Selection. Object Selection. Hybrid Selection.
Contextual Tools. Always-Visible Tools. Hover-Reveal Tools. Toggle-Reveal Tools. Multi-Level Tools. Secondary Menu. Overlays. Dialog Overlay. Detail
Overlay. Input Overlay. Inlays. Dialog Inlay. List Inlay. Detail Inlay. Tabs. Virtual Pages. Virtual Scrolling. Inline Paging. Scrolled Paging. Carousels Virtual Panning. Zoomable User Interface. Process Flow. Interactive Single-Page. Process Inline Assistant. Process Dialog Overlay. Process
Configurator. Static Single-Page Process. Invitation. Static Invitations. Call to Action Invitation. Tour Invitation. Dynamic Invitation. Hover Invitation.
Affordance Invitation. Drag and Drop Invitation. Inference Invitation. More Content Invitation. Transitions. Brighten and Dim. Expand/Collapse. Self-
Healing. Fade. Animation. Spotlight. Lookup Patterns. Auto Complete. Live Suggest. Live Search. Refining Search. Feedback Patterns. Live Preview.
Progressive Disclosure. Progress Indicator. Periodic Refresh.
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
Allow input wherever you have outputShorten the length of interactionMake objects directly actionable
make it direct
inline editing
make it direct
Yahoo! Bookmarks
inline editing
make it direct
Yahoo! Bookmarks
inline editing
make it direct
Yahoo! Bookmarks
inline editing
make it direct
Yahoo! Bookmarks
inline editing
make it direct
Yahoo! Bookmarks
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modes
backpackit. complex inline editing
Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing
considerationsdiscoverabilitycomplex editingblending modesaccessibility
make it direct. inline editing
flickr. alternate edit path
considerationsdiscoverabilitycomplex editingblending modesaccessibility
make it direct. inline editing
flickr. alternate edit path
considerationsdiscoverabilitycomplex editingblending modesaccessibility
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
iPhone. non-symmetrical; readability
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
make it direct. inline editing
group editingsymmetry of interactiondiscoverability vs readability
basecamp. symmetry of interactioniPhone. non-symmetrical; readability
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.”
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
make it direct. drag and drop
discoverabilityhover invitation
interesting momentsactivation on mouse down
tip during alternate pathadditional visual affordances
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
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
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
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
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
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
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
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
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
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
make it direct. drag and drop
drag and dropNot for simply setting an attribute
Don’t construct artificial visual constructs
anti-pattern. artificial construct
keep it lightweight
keep it lightweight. contextual tools
digg. in page action
keep it lightweight. contextual tools
digg. in page action
keep it lightweight. contextual tools
digg. in page action
keep it lightweight. contextual tools
Key to digg’s early success -
Kevin Rose
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
digg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
the gap. remembered collections
y! news, netflix. rating an objectdigg. in page action
flickr, backpackit. contextual tools
keep it lightweight. contextual tools
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
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
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
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
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
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Same as context menusOnly good for single objectsCan actually slow you down
keep it lightweight. contextual tools
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools
netflix. ratings
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
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved
keep it lightweight. anti-patterns
keep it lightweight. anti-patterns
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
keep it lightweight. anti-patterns
zooomr. anti-pattern. mystery meat
y! teachers. anti-pattern. tiny targets
stay on the page
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
overlaysdialog overlaydetail overlayinput overlay
considerationslightbox effectmodalityactivation
stay on the page. overlay
stay on the page. overlay
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
stay on the page. overlay
anti-pattern. barnes & nobles. hover & coveranti-pattern. y! photos. idiot boxes
anti-pattern. amazon. mouse trap
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
y! autos. accordion
inlaysin-context configurationin-context insightparallel contentinlay vs. overlay
stay on the page. inlay
my y!. in-context configuration
y! autos. accordion
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
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
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
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
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
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
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
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
stay on the page. virtual
Rethink paginguse scrolling for “owned” data
watch out for dual scroll bar issuehybrid paging & scrolling
mlslistings. pagination
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
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
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
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
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
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
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
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui
stay on the page. virtual
Rethink pagingin-place paging
zoomable user interface (zui)
endless. seamless paging
hard rock cafe. zui cool iris (piclens). zui
rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump
stay on the page. process flow
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
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
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
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
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
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
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
step by step?yes, sometimes works best
stay on the page. process flow
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
discover card. step by step
step by step?yes, sometimes works best
stay on the page. process flow
netflix. step by step
discover card. step by step
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
the answer is in testing
stay on the page. anti-patterns
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
the answer is in testing
stay on the page. anti-patterns
netflix. stalker overlay
netflix. simpler overlay
offer an invitation
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
yahoo login! dog-ear invite
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
offer an invitation. static invitation
unfinished lookdog-earblank slotsblank slate
backpackit. blank slate invitation
netflix. rate invitiation (blank slots)
yahoo login! dog-ear invite
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
offer an invitation. static invitation
call to action1-2-3 messagingspotlighting or lightboxprovide a peek
discover! 1-2-3 call to action
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
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
offer an invitation. dynamic invitation
discoverabilityinvitations
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit
offer an invitation. dynamic invitation
discoverabilityinvitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover
DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions
offer an invitation. dynamic invitation
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
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
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
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
drag and dropuse the interesting momentsbefore, during and after
offer an invitation. dynamic invitation
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
drag and dropuse the interesting momentsbefore, during and after
flickr. drop here invitation (static)
flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
bridge the new with the oldhyperlinks as actions
reveal with hoversdrop down clues
offer an invitation. dynamic invitation
the gap. button
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
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
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
offer an invitation. anti-patterns
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
offer an invitation. anti-patterns
anti-pattern. amazon. mouse trap
anti-pattern. y! maps. mouse trap
use transitions
use transitions
use transitions
use transitions
Speak to the brainUnderstanding attention processing
use transitions
Speak to the brainUnderstanding attention processing
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
Speak to the brainUnderstanding attention processingSending the wrong message
mac widgets flickr zeitgeist
use transitions
backpackit. fade transition + self-healing transition.
use transitions
backpackit. fade transition + self-healing transition.
use transitions
backpackit. fade transition + self-healing transition.
use transitions
backpackit. fade transition + self-healing transition.
use transitions
backpackit. fade transition + self-healing transition.
use transitions
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
backpackit. fade transition + self-healing transition.
flickr. slide transition.
flickr. active spotlight.
the gap. zoom box.
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
you can...speed up time
slow down interactionshow state change
show relationships between objectsfocus attention
use transitions
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
use transitions
Keep it sane“Cut it in-half ” rule of thumb
Use “contrast knob” approach
use transitions. anti-patterns
use transitions. anti-patterns
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
use transitions. anti-patterns
anti-pattern. borders. needless fanfare
use transitions. anti-patterns
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
use transitions. anti-patterns
anti-pattern. amazon. animation gone wild
react immediately
react immediately
wundrbar. live preview.
react immediately
wundrbar. live preview.
react immediately
wundrbar. live preview.
react immediately
wundrbar. live preview.
react immediately
wundrbar. live preview.
react immediately
wundrbar. live preview.
react immediately
y! answers. live suggest
react immediately
y! answers. live suggest
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
y! small biz. live previews
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
y! answers. live suggest
y! mail, kayak. auto complete
netflix. periodic refresh
y! small biz. live previews
y!mail. busy indicator
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
react immediately
Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible
roost
react immediately
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
Shape user perceptionMake time pass faster
Make application feel more responsive
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Prevent errors before-handOunce of preventive design worth pound of error-handling
Look before you leap
react immediately
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth
react immediately
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
I am Hiring!
Recommended