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




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

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




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


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


Allow input wherever you have output
Shorten the length of interaction
Make objects directly actionable
make it direct


inline editing




                 Yahoo! Bookmarks
make it direct


inline editing




                 Yahoo! Bookmarks
make it direct


inline editing




                 Yahoo! Bookmarks
make it direct


inline editing




                 Yahoo! Bookmarks
make it direct


inline editing




                 Yahoo! Bookmarks
make it direct. inline editing


considerations
discoverability
complex editing
blending modes
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                  backpackit. complex inline editing
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                  backpackit. complex inline editing
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                  backpackit. complex inline editing
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                  backpackit. complex inline editing
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing


considerations
discoverability
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes
make it direct. inline editing


considerations
discoverability
complex editing
blending modes
accessibility
make it direct. inline editing


considerations
discoverability
complex editing
blending modes
accessibility




                  flickr. alternate edit path
make it direct. inline editing


considerations
discoverability
complex editing
blending modes
accessibility




                  flickr. alternate edit path
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability   basecamp. symmetry of interaction
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability   basecamp. symmetry of interaction
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability           basecamp. symmetry of interaction


                     “If readability is more important than editing
                           then keep the editing action hidden
                       until the user interacts with the content.”
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




          discoverability
             hover invitation
        interesting moments
 activation on mouse down
   tip during alternate path
additional visual affordances
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments




                                                    netflix. not enough hints.
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments




                                                    netflix. not enough hints.
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments




                                                    netflix. not enough hints.
make it direct. drag and drop




                                                              discoverability
                                                                 hover invitation
                                                            interesting moments
                                                     activation on mouse down
                                                       tip during alternate path
                                                    additional visual affordances


yahoo! teachers. hints during interesting moments




                                                    netflix. not enough hints.
make it direct. drag and drop




                       drag and drop
       Not for simply setting an attribute
Don’t construct artificial visual constructs
make it direct. drag and drop
anti-pattern. artificial construct




                                                           drag and drop
                                           Not for simply setting an attribute
                                    Don’t construct artificial visual constructs
make it direct. drag and drop
anti-pattern. artificial construct




                                                           drag and drop
                                           Not for simply setting an attribute
                                    Don’t construct artificial visual constructs
make it direct. drag and drop
anti-pattern. artificial construct




                                                           drag and drop
                                           Not for simply setting an attribute
                                    Don’t construct artificial visual constructs
make it direct. drag and drop
anti-pattern. artificial construct




                                                           drag and drop
                                           Not for simply setting an attribute
                                    Don’t construct artificial visual constructs
make it direct. drag and drop
anti-pattern. artificial construct




                                                           drag and drop
                                           Not for simply setting an attribute
                                    Don’t construct artificial visual constructs
keep it lightweight
keep it lightweight. contextual tools
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




      Key to digg’s
      early success -
       Kevin Rose
keep it lightweight. contextual tools


digg. in page action




                       the gap. remembered collections
keep it lightweight. contextual tools


digg. in page action




                       the gap. remembered collections
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools                              y! movies, y! answers. rating an object
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools                              y! movies, y! answers. rating an object
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools                              y! movies, y! answers. rating an object
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools                              y! movies, y! answers. rating an object
keep it lightweight. contextual tools


digg. in page action                                             y! news, netflix. rating an object




                               the gap. remembered collections




flickr, backpackit. contextual tools                              y! movies, y! answers. rating an object
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down
keep it lightweight. contextual tools


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
keep it lightweight. contextual tools


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events




netflix. ratings
keep it lightweight. contextual tools


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events




                                       digg. vote
                                                                 click-weight
                                                                       seek time
                                                                    decision time
                                                                 second guessing
                                                                        wait time
netflix. ratings
                                                                interaction steps
                                                            cost/benefit tradeoff
keep it lightweight. anti-patterns
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. resolved
y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns




                                           y! teachers. anti-pattern. hover & cover. resolved
y! teachers. anti-pattern. hover & cover
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
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation
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. y! photos. idiot boxes   anti-pattern. barnes & nobles. hover & cover
stay on the page. overlay




anti-pattern. y! photos. idiot boxes   anti-pattern. barnes & nobles. hover & cover
stay on the page. overlay




anti-pattern. y! photos. idiot boxes   anti-pattern. barnes & nobles. hover & cover




anti-pattern. amazon. mouse trap
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration

                                                           y! autos. accordion
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                          my y!. in-context configuration

                                                           y! autos. accordion
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                y! autos. accordion




bbc. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                y! autos. accordion




bbc. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                y! autos. accordion




bbc. in-context configuration
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                     y! autos. accordion




bbc. in-context configuration                       roost. in-context insight
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                     y! autos. accordion




bbc. in-context configuration                       roost. in-context insight
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                     y! autos. accordion




bbc. in-context configuration                       roost. in-context insight
stay on the page. inlay

inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay


                               my y!. in-context configuration

                                                                     y! autos. accordion




bbc. in-context configuration                       roost. in-context insight
stay on the page. virtual



              Rethink paging
   use scrolling for “owned” data
watch out for dual scroll bar issue
        hybrid paging & scrolling
stay on the page. virtual


mlslistings. pagination
                                        Rethink paging
                             use scrolling for “owned” data
                          watch out for dual scroll bar issue
                                  hybrid paging & scrolling
stay on the page. virtual


mlslistings. pagination
                                        Rethink paging
                             use scrolling for “owned” data
                          watch out for dual scroll bar issue
                                  hybrid paging & scrolling
stay on the page. virtual


mlslistings. pagination
                                                Rethink paging
                                     use scrolling for “owned” data
                                  watch out for dual scroll bar issue
                                          hybrid paging & scrolling




microsoft live. paged scrolling
stay on the page. virtual


mlslistings. pagination
                                                       Rethink paging
                                            use scrolling for “owned” data
                                         watch out for dual scroll bar issue
                                                 hybrid paging & scrolling


                                  y! health. carousel




microsoft live. paged scrolling
stay on the page. virtual


mlslistings. pagination
                                                       Rethink paging
                                            use scrolling for “owned” data
                                         watch out for dual scroll bar issue
                                                 hybrid paging & scrolling


                                  y! health. carousel




microsoft live. paged scrolling
stay on the page. virtual


mlslistings. pagination
                                                       Rethink paging
                                            use scrolling for “owned” data
                                         watch out for dual scroll bar issue
                                                 hybrid paging & scrolling


                                  y! health. carousel




microsoft live. paged scrolling
stay on the page. virtual


mlslistings. pagination
                                                             Rethink paging
                                                  use scrolling for “owned” data
                                               watch out for dual scroll bar issue
                                                       hybrid paging & scrolling


                                        y! health. carousel




microsoft live. paged scrolling   y! mail. on-demand scrolling
stay on the page. virtual


mlslistings. pagination
                                                             Rethink paging
                                                  use scrolling for “owned” data
                                               watch out for dual scroll bar issue
                                                       hybrid paging & scrolling


                                        y! health. carousel




microsoft live. paged scrolling   y! mail. on-demand scrolling
stay on the page. virtual


mlslistings. pagination
                                                             Rethink paging
                                                  use scrolling for “owned” data
                                               watch out for dual scroll bar issue
                                                       hybrid paging & scrolling


                                        y! health. carousel




microsoft live. paged scrolling   y! mail. on-demand scrolling
stay on the page. virtual



        Rethink paging
             in-place paging
zoomable user interface (zui)
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)




hard rock cafe. zui
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)




hard rock cafe. zui
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                                        in-place paging
                           zoomable user interface (zui)




hard rock cafe. zui
stay on the page. virtual
endless. seamless paging


                                                    Rethink paging
                                                         in-place paging
                                            zoomable user interface (zui)




hard rock cafe. zui        cool iris (piclens). zui
stay on the page. process flow

rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




the gap. inline assistant
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




the gap. inline assistant
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




the gap. inline assistant
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




                                           the gap. inline checkout




the gap. inline assistant
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




                                           the gap. inline checkout




the gap. inline assistant
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




                                             the gap. inline checkout




the gap. inline assistant




                               broadmoor hotel. one page checkout
stay on the page. process flow

  rethink process flows
  the user’s mental model vs page model
  every page jump is a mental speed bump




                                             the gap. inline checkout




the gap. inline assistant




                               broadmoor hotel. one page checkout
stay on the page. process flow

step by step?
yes, sometimes works best
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




netflix. step by step
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




netflix. step by step                                               ebay. single page flow
stay on the page. anti-patterns

the answer is in testing
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay
stay on the page. anti-patterns

the answer is in testing




                           netflix. simpler overlay

netflix. stalker overlay
offer an invitation
offer an invitation. static invitation


unfinished look
dog-ear
blank slots
blank slate
offer an invitation. static invitation


unfinished look
dog-ear
blank slots
blank slate




yahoo login! dog-ear invite
offer an invitation. static invitation


unfinished look
dog-ear
blank slots
blank slate




                              netflix. rate invitiation (blank slots)




yahoo login! dog-ear invite
offer an invitation. static invitation


unfinished look
dog-ear
blank slots
blank slate




                                        netflix. rate invitiation (blank slots)




yahoo login! dog-ear invite   backpackit. blank slate invitation
offer an invitation. static invitation


call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
offer an invitation. static invitation


call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
                           discover! 1-2-3 call to action
offer an invitation. static invitation


call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
                           discover! 1-2-3 call to action




                           yahoo! tour invitation
offer an invitation. static invitation


call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
                           discover! 1-2-3 call to action




                           yahoo! tour invitation




                           starz play! sneak peek in carousel
offer an invitation. dynamic invitation


discoverability
invitations
offer an invitation. dynamic invitation


discoverability
invitations
                          facebook. prompt-based invitation
offer an invitation. dynamic invitation


discoverability
invitations
                          facebook. prompt-based invitation
offer an invitation. dynamic invitation


discoverability
invitations
                                             facebook. prompt-based invitation




                  disqus. explicit “edit” invitation
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
offer an invitation. dynamic invitation


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit                               flickr. on hover
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions




flickr. hover invitation
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions            backpackit (fake). being too explicit




flickr. hover invitation
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions            backpackit (fake). being too explicit




                                      backpackit. tooltip invitation + hover invitation +
                                      cursor invitation




flickr. hover invitation
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions            backpackit (fake). being too explicit




                                      backpackit. tooltip invitation + hover invitation +
                                      cursor invitation




flickr. hover invitation               y! movies. hover invitation
offer an invitation. dynamic invitation


drag and drop
use the interesting moments
before, during and after
offer an invitation. dynamic invitation


drag and drop
use the interesting moments
before, during and after




flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation


drag and drop
use the interesting moments
before, during and after




flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation


drag and drop
use the interesting moments
before, during and after




flickr. drop here invitation (interactive)
offer an invitation. dynamic invitation


drag and drop
use the interesting moments
before, during and after




flickr. drop here invitation (interactive)




                                            flickr. drop here invitation (static)
offer an invitation. dynamic invitation




bridge the new with the old
            hyperlinks as actions
              reveal with hovers
                drop down clues
offer an invitation. dynamic invitation




                  bridge the new with the old
                              hyperlinks as actions
                                reveal with hovers
                                  drop down clues


the gap. button
offer an invitation. dynamic invitation




                            bridge the new with the old
                                        hyperlinks as actions
                                          reveal with hovers
                                            drop down clues


the gap. button




y! mail. embedded buttons
offer an invitation. dynamic invitation




                            bridge the new with the old
                                        hyperlinks as actions
                                          reveal with hovers
                                            drop down clues


the gap. button



                            backpackit. revealed hyperlinks/icons




y! mail. embedded buttons
offer an invitation. dynamic invitation




                            bridge the new with the old
                                        hyperlinks as actions
                                          reveal with hovers
                                            drop down clues


the gap. button



                            backpackit. revealed hyperlinks/icons




y! mail. embedded buttons   flickr. drop down affordance
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 brain
Understanding attention processing
use transitions


Speak to the brain
Understanding attention processing
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




mac widgets                          flickr zeitgeist
use transitions
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

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.
use transitions

                                                         the gap. zoom box.
backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
use transitions




                       you can...
                     speed up time
             slow down interaction
                 show state change
show relationships between objects
                    focus attention
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
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!mail. busy indicator




                                y! small biz. live previews
react immediately

y! answers. live suggest




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews
react immediately

y! answers. live suggest




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews
react immediately

y! answers. live suggest                                      netflix. periodic refresh




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews
react immediately

y! answers. live suggest                                      netflix. periodic refresh




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews
react immediately

y! answers. live suggest                                      netflix. periodic refresh




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible




                               roost
react immediately



        Shape user perception
                Make time pass faster
Make application feel more responsive
react immediately



        Shape user perception
                Make time pass faster
Make application feel more responsive
react immediately



        Shape user perception
                Make time pass faster
Make application feel more responsive
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
                                   Look before you leap
react immediately




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
react immediately




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
react immediately




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
react immediately




Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
6 principles for Designing Rich Web Experiences

make it direct
keep it lightweight
stay on the page
provide invitations
use transitions
react immediately


Based on the Book:
Designing Web Interfaces: Principles & Patterns for Rich Interfaces
O’Reilly by Bill Scott & Theresa Neil

This Presentation:
Look for location on next blog post: http://designingwebinterfaces.com
I am Hiring!

More Related Content

What's hot

HCI 3e - Ch 20: Ubiquitous computing and augmented realities
HCI 3e - Ch 20:  Ubiquitous computing and augmented realitiesHCI 3e - Ch 20:  Ubiquitous computing and augmented realities
HCI 3e - Ch 20: Ubiquitous computing and augmented realitiesAlan Dix
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
Mobile Design
Mobile DesignMobile Design
Mobile DesignLifna C.S
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysisAlan Dix
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureLifna C.S
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemN.Jagadish Kumar
 
Virtual reality in hci
Virtual reality in hciVirtual reality in hci
Virtual reality in hcijeet patalia
 
Cluster Computing Seminar.
Cluster Computing Seminar.Cluster Computing Seminar.
Cluster Computing Seminar.Balvant Biradar
 
HCI 3e - Ch 6: HCI in the software process
HCI 3e - Ch 6:  HCI in the software processHCI 3e - Ch 6:  HCI in the software process
HCI 3e - Ch 6: HCI in the software processAlan Dix
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirementsAlan Dix
 
Mixed Reality in the Workspace
Mixed Reality in the WorkspaceMixed Reality in the Workspace
Mixed Reality in the WorkspaceMark Billinghurst
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation supportAlan Dix
 
HCI 3e - Ch 16: Dialogue notations and design
HCI 3e - Ch 16:  Dialogue notations and designHCI 3e - Ch 16:  Dialogue notations and design
HCI 3e - Ch 16: Dialogue notations and designAlan Dix
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rulesAlan Dix
 
Human computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solvingHuman computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solvingN.Jagadish Kumar
 

What's hot (20)

HCI 3e - Ch 20: Ubiquitous computing and augmented realities
HCI 3e - Ch 20:  Ubiquitous computing and augmented realitiesHCI 3e - Ch 20:  Ubiquitous computing and augmented realities
HCI 3e - Ch 20: Ubiquitous computing and augmented realities
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Prototyping
PrototypingPrototyping
Prototyping
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
 
Virtual reality in hci
Virtual reality in hciVirtual reality in hci
Virtual reality in hci
 
Cluster Computing Seminar.
Cluster Computing Seminar.Cluster Computing Seminar.
Cluster Computing Seminar.
 
HCI 3e - Ch 6: HCI in the software process
HCI 3e - Ch 6:  HCI in the software processHCI 3e - Ch 6:  HCI in the software process
HCI 3e - Ch 6: HCI in the software process
 
HCI
HCIHCI
HCI
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
 
drag and drop.pdf
drag and drop.pdfdrag and drop.pdf
drag and drop.pdf
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
 
Mixed Reality in the Workspace
Mixed Reality in the WorkspaceMixed Reality in the Workspace
Mixed Reality in the Workspace
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
 
Ux design process
Ux design processUx design process
Ux design process
 
HCI 3e - Ch 16: Dialogue notations and design
HCI 3e - Ch 16:  Dialogue notations and designHCI 3e - Ch 16:  Dialogue notations and design
HCI 3e - Ch 16: Dialogue notations and design
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 
Human computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solvingHuman computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solving
 

Viewers also liked

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

Viewers also liked (19)

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

Similar to Designing Web Interfaces Book - O'Reilly Webcast

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

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

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

More from Bill Scott

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

More from Bill Scott (19)

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

Recently uploaded

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Recently uploaded (20)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Designing Web Interfaces Book - O'Reilly Webcast

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