SlideShare a Scribd company logo
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 17: Models of the system
HCI 3e - Ch 17:  Models of the systemHCI 3e - Ch 17:  Models of the system
HCI 3e - Ch 17: Models of the system
Alan Dix
 
HCI 3e - Ch 4: Paradigms
HCI 3e - Ch 4:  ParadigmsHCI 3e - Ch 4:  Paradigms
HCI 3e - Ch 4: Paradigms
Alan Dix
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
Sachith Perera
 
HCI Chapter_1.pdf
HCI Chapter_1.pdfHCI Chapter_1.pdf
HCI Chapter_1.pdf
NorshadilaAhmadBadel1
 
Report on online voting system
Report on online voting systemReport on online voting system
Report on online voting system
RajatMohanty12
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
Alan Dix
 
Hci md exam
Hci md examHci md exam
Hci md exam
Desalegn Aweke
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
Latesh Malik
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
Latesh Malik
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
Um e Farwa
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
Lahiru Danushka
 
Human computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioHuman computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with Scenario
N.Jagadish Kumar
 
Cognitive Walkthrough
Cognitive WalkthroughCognitive Walkthrough
Cognitive Walkthrough
Lazar Petrakiev
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hci
sajid rao
 
Hci and psychology
Hci and psychologyHci and psychology
Hci and psychology
Dr. Shaukat Wasi
 
Chapter 7 design rules
Chapter 7 design rulesChapter 7 design rules
Chapter 7 design rules
MLG College of Learning, Inc
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
Kshitiz Anand
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Online Voting System
Online Voting SystemOnline Voting System
Online Voting System
apolama
 

What's hot (20)

HCI 3e - Ch 17: Models of the system
HCI 3e - Ch 17:  Models of the systemHCI 3e - Ch 17:  Models of the system
HCI 3e - Ch 17: Models of the system
 
HCI 3e - Ch 4: Paradigms
HCI 3e - Ch 4:  ParadigmsHCI 3e - Ch 4:  Paradigms
HCI 3e - Ch 4: Paradigms
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
HCI Chapter_1.pdf
HCI Chapter_1.pdfHCI Chapter_1.pdf
HCI Chapter_1.pdf
 
Report on online voting system
Report on online voting systemReport on online voting system
Report on online voting system
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
 
Hci md exam
Hci md examHci md exam
Hci md exam
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
Human computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioHuman computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with Scenario
 
Cognitive Walkthrough
Cognitive WalkthroughCognitive Walkthrough
Cognitive Walkthrough
 
Evaluation in hci
Evaluation in hciEvaluation in hci
Evaluation in hci
 
Hci and psychology
Hci and psychologyHci and psychology
Hci and psychology
 
Chapter 7 design rules
Chapter 7 design rulesChapter 7 design rules
Chapter 7 design rules
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
 
Online Voting System
Online Voting SystemOnline Voting System
Online Voting System
 

Viewers also liked

Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
Bill 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 Workshop
Brian Fling
 
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_mobile
UXclub
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
Mark Wagner
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
Bill Scott
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
DCU_MPIUA
 
Mobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneMobile Tools - SPJ Region One
Mobile Tools - SPJ Region One
Damon Kiesow
 
Web designing
Web designingWeb designing
Web designing
satheesh sutharapu
 
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 Learning
James 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 Action
Bill 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 Action
Bill Scott
 
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...
GoldenSubmarine – niezależna agencja postdigitalowa.
 
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
Bill 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 JS
Bill 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 @paypal
Bill Scott
 

Viewers also liked (18)

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
 
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 Experiences
rajivmordani
 
Designing Rich Web Experience
Designing Rich Web ExperienceDesigning Rich Web Experience
Designing Rich Web Experience
interactionpatterns.org
 
Bill Scott Presentation
Bill Scott PresentationBill Scott Presentation
Bill Scott Presentation
Ajax Experience 2009
 
Designing with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern LibraryDesigning with AJAX: Yahoo! Pattern Library
Designing with AJAX: Yahoo! Pattern Library
goodfriday
 
Holocene intro1
Holocene intro1Holocene intro1
Holocene intro1
David Brin
 
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
Italianlabel
 
Ruby motion and-ios-accessibility
Ruby motion and-ios-accessibilityRuby motion and-ios-accessibility
Ruby motion and-ios-accessibility
Martino Branding
 
Vibeke hansen ECBN presentation
Vibeke hansen ECBN presentationVibeke hansen ECBN presentation
Vibeke hansen ECBN presentation
swscreen
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
Ross Lawley
 
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scriptingProtoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Bill 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
 
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
 
Ruby motion and-ios-accessibility
Ruby motion and-ios-accessibilityRuby motion and-ios-accessibility
Ruby motion and-ios-accessibility
 
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 Ethos
Bill 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 - Australia
Bill 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 partner
Bill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
Bill 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 Teams
Bill 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 Experiences
Bill 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 paypal
Bill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
Bill 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 Camp
Bill Scott
 
Designing for Interesting Moments
Designing for Interesting MomentsDesigning for Interesting Moments
Designing for Interesting Moments
Bill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
Bill Scott
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
Bill Scott
 
Hacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsHacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIs
Bill Scott
 
Improving Netflix Performance Experience
Improving Netflix Performance ExperienceImproving Netflix Performance Experience
Improving Netflix Performance Experience
Bill 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 Experience
Bill Scott
 
Ajax 101 Workshop
Ajax 101 WorkshopAjax 101 Workshop
Ajax 101 Workshop
Bill Scott
 
Designing For Ajax
Designing For AjaxDesigning For Ajax
Designing For Ajax
Bill 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

Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
illuminz
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
Xiamen Tsianfan Industrial & Trading Co.,Ltd.
 
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
antonellispunches643
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
Kal-el Shows
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
shyamraj39
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
gameransh001
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 

Recently uploaded (20)

Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
 
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 

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