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

6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
Shahid Riaz
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
Lifna C.S
 
Module 1
Module 1Module 1
Module 1
raghu katagall
 
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
rohitjasudkar
 
User interfaces presentation
User interfaces presentationUser interfaces presentation
User interfaces presentation
somipam1
 
drag and drop.pdf
drag and drop.pdfdrag and drop.pdf
drag and drop.pdf
PILAMPIRAYAsstProfes
 
3 d viewing
3 d viewing3 d viewing
3 d viewing
Deepak Singh
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
brindaN
 
Human Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdfHuman Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdf
vijaykumarK44
 
ANIMATION SEQUENCE
ANIMATION SEQUENCEANIMATION SEQUENCE
ANIMATION SEQUENCE
KABILESH RAMAR
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
Alan Dix
 
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
 
Asymptotic analysis of parallel programs
Asymptotic analysis of parallel programsAsymptotic analysis of parallel programs
Asymptotic analysis of parallel programs
Sumita Das
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
David Gelb
 
Polygons - Computer Graphics - Notes
Polygons - Computer Graphics - NotesPolygons - Computer Graphics - Notes
Polygons - Computer Graphics - Notes
Omprakash Chauhan
 
Computer animation Computer Graphics
Computer animation Computer Graphics Computer animation Computer Graphics
Computer animation Computer Graphics
University of Potsdam
 
computer animation languages-N.Kavitha.pptx
computer animation languages-N.Kavitha.pptxcomputer animation languages-N.Kavitha.pptx
computer animation languages-N.Kavitha.pptx
ComputerScienceDepar6
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Sachin Gowda
 
HCI
HCIHCI
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
 

What's hot (20)

6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
 
Module 1
Module 1Module 1
Module 1
 
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
Computer Graphics (Hidden surfaces and line removal, Curves and surfaces, Sur...
 
User interfaces presentation
User interfaces presentationUser interfaces presentation
User interfaces presentation
 
drag and drop.pdf
drag and drop.pdfdrag and drop.pdf
drag and drop.pdf
 
3 d viewing
3 d viewing3 d viewing
3 d viewing
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
Human Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdfHuman Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdf
 
ANIMATION SEQUENCE
ANIMATION SEQUENCEANIMATION SEQUENCE
ANIMATION SEQUENCE
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
 
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
 
Asymptotic analysis of parallel programs
Asymptotic analysis of parallel programsAsymptotic analysis of parallel programs
Asymptotic analysis of parallel programs
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Polygons - Computer Graphics - Notes
Polygons - Computer Graphics - NotesPolygons - Computer Graphics - Notes
Polygons - Computer Graphics - Notes
 
Computer animation Computer Graphics
Computer animation Computer Graphics Computer animation Computer Graphics
Computer animation Computer Graphics
 
computer animation languages-N.Kavitha.pptx
computer animation languages-N.Kavitha.pptxcomputer animation languages-N.Kavitha.pptx
computer animation languages-N.Kavitha.pptx
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
 
HCI
HCIHCI
HCI
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
 

Viewers also liked

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
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Mobile 2.0: Design and Develop for the iPhone and Beyond (Web 2.0 Expo)
Brian Fling
 
IA templates_mobile
IA templates_mobileIA templates_mobile
IA templates_mobileUXclub
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web 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)

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

Similar to Designing Web Interfaces Book - O'Reilly Webcast

Crafting Rich Web Experiences
Crafting Rich Web ExperiencesCrafting Rich Web Experiences
Crafting Rich Web 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

Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 

Recently uploaded (20)

Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 

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