SlideShare une entreprise Scribd logo
1  sur  219
Télécharger pour lire hors ligne
Designing Web Interfaces
Principles & Patterns for Rich Interaction




                                                            Bill Scott
                                             Director, UI Engineering




                                                                         1
background




             2
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”



                    Interaction
                      (action)
                                  +        Feedback
                                           (reaction)




                                                            3
6 principles for Crafting 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




                                     4
make it direct

                 5
make it direct


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




                                                        6
make it direct


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




                                                        6
make it direct


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




                                                        6
make it direct


inline editing




                 Yahoo! Bookmarks



                                            7
make it direct. inline editing


discoverability
invitations




                                                   8
make it direct. inline editing


discoverability
invitations
                  facebook. prompt-based invitation




                                                      8
make it direct. inline editing


discoverability
invitations
                  facebook. prompt-based invitation




                                                      8
make it direct. inline editing


discoverability
invitations
                                             facebook. prompt-based invitation




                  disqus. explicit “edit” invitation




                                                                                 8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
                                                                                    8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
                                                                                    8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
                                                                                    8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
                                                                                    8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit
                                                                                    8
make it direct. inline editing


discoverability
invitations
                                                facebook. prompt-based invitation




                     disqus. explicit “edit” invitation




                  Y!photo. implicit                               flickr. on hover
                                                                                    8
make it direct. inline editing


considerations
complex editing
blending modes




                                                   9
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex inline editing




                                                       9
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex inline editing




                                                       9
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex inline editing




                                                       9
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex inline editing




                                                       9
make it direct. inline editing


considerations
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes




                                                                    9
make it direct. inline editing


considerations
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes




                                                                    9
make it direct. inline editing


considerations
complex editing
blending modes




                               backpackit. complex inline editing




                  Yahoo! 360 blast. blending display & edit modes




                                                                    9
make it direct. inline editing


accessibility




                                                 10
make it direct. inline editing


accessibility




                flickr. alternate edit path



                                                        10
make it direct. inline editing


accessibility




                flickr. alternate edit path



                                                        10
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




                                                                  11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability




                                                                             11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability




                                                                             11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non-symmetrical; readability




                                                                             11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




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




                                                                                   11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




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




                                                                                   11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




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




                                                                                   11
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




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




                                                                                   11
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.”

                                                                                            11
make it direct


drag and drop




                My Yahoo! drag and drop


                                                     12
make it direct. drag and drop


Take care of the interesting moments




                                                                       13
make it direct. drag and drop


Take care of the interesting moments




                                                                       13
make it direct. drag and drop




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




                                  14
make it direct. drag and drop




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




      netflix. few hints.
                                  14
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. few hints.
                                                                                      14
make it direct. drag and drop




                       drag and drop
       Not for simply setting an attribute
Don’t construct artificial visual constructs


                                                15
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


                                                                                    15
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


                                                                                    15
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


                                                                                    15
keep it lightweight

                      16
keep it lightweight. contextual tools


digg. in page action




                                                               17
keep it lightweight. contextual tools


digg. in page action




       Key to digg’s
      early success -
        Kevin Rose




                                                                17
keep it lightweight. contextual tools


digg. in page action




                       the gap. remembered collections




                                                                                         17
keep it lightweight. contextual tools


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




                       the gap. remembered collections




                                                                                             17
keep it lightweight. contextual tools


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




                       the gap. remembered collections




                                                                                             17
keep it lightweight. contextual tools


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




                       the gap. remembered collections




                                                                                             17
keep it lightweight. contextual tools


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




                       the gap. remembered collections




                                                         y! movies, y! answers. rating an object

                                                                                               17
keep it lightweight. contextual tools


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




                          the gap. remembered collections




flickr. in-context tools                                     y! movies, y! answers. rating an object

                                                                                                  17
keep it lightweight. contextual tools


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




                          the gap. remembered collections




flickr. in-context tools                                     y! movies, y! answers. rating an object

                                                                                                  17
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down




                                        18
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down




                                        18
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down




                                        18
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down




                                        18
keep it lightweight. contextual tools

       Same as context menus
   Only good for single objects
   Can actually slow you down




                                        18
keep it lightweight. contextual tools


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




                                                                                     19
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



                                                                                     19
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
                                                                                        19
keep it lightweight. anti-patterns




                                     20
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover




                                                                                20
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover




                                                                                20
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover. resolved




                                                                                                  20
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover. resolved




                                                                                                  20
keep it lightweight. anti-patterns




                                     21
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                                                          21
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                                                          21
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teachers. anti-pattern. tiny targets




                                                                                    21
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teachers. anti-pattern. tiny targets




                                                                                    21
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teachers. anti-pattern. tiny targets




                                                                                    21
stay on the page

                   22
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation




                                              23
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation




                                              23
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation




                                              23
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
activation




                                              23
stay on the page. overlay




                            24
stay on the page. overlay




anti-pattern. y! photos. idiot boxes




                                                                   24
stay on the page. overlay




                                       anti-pattern. borders. hover & cover




anti-pattern. y! photos. idiot boxes




                                                                                  24
stay on the page. overlay




                                       anti-pattern. borders. hover & cover




anti-pattern. y! photos. idiot boxes




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

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




                                                    25
stay on the page. inlay

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


                          my y!. in-context configuration




                                                                                     25
stay on the page. inlay

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


                               my y!. in-context configuration




bbc. in-context configuration

                                                                                          25
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

                                                                                               25
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

                                                                                               25
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

                                                                                                    25
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

                                                                                                    25
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

                                                                                                    25
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

                                                                                                    25
stay on the page. virtual



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




                                           26
stay on the page. virtual


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




                                                                     26
stay on the page. virtual


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




                              y! health. carousel




                                                                         26
stay on the page. virtual


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




                              y! health. carousel




                              y! mail. on-demand scrolling
                                                                         26
stay on the page. virtual


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




                                      y! health. carousel




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



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




                                      27
stay on the page. virtual
endless. seamless paging


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




                                                                 27
stay on the page. virtual
endless. seamless paging


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




                                                                 27
stay on the page. virtual
endless. seamless paging


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




                                                                 27
stay on the page. virtual
endless. seamless paging


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




hard rock cafe. zui

                                                                 27
stay on the page. virtual
endless. seamless paging


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




hard rock cafe. zui

                                                                 27
stay on the page. virtual
endless. seamless paging


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




hard rock cafe. zui

                                                                 27
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

                                                                                  27
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




                                                                         28
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
                                                                         28
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
                                                                                  28
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
                                                                                  28
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
                                                                                    28
stay on the page. process flow

step by step?
yes, sometimes works best




                                                            29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




                                                                                          29
stay on the page. process flow

step by step?
yes, sometimes works best




                            discover card. step by step




netflix. step by step

                                                                                          29
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

                                                                                           29
stay on the page. anti-patterns

the answer is in testing




                                                             30
stay on the page. anti-patterns

the answer is in testing




netflix. stalker overlay




                                                             30
stay on the page. anti-patterns

the answer is in testing




                           netflix. simpler overlay


netflix. stalker overlay




                                                                          30
offer an invitation

                      31
offer an invitation. static invitation


unfinished look
dog-ear
empty slots
blank slate




                                                          32
offer an invitation. static invitation


unfinished look
dog-ear
empty slots
blank slate




yahoo login! dog-ear invite


                                                                       32
offer an invitation. static invitation


unfinished look
dog-ear
empty slots
blank slate




                              netflix. rate invitiation (blank slots)




yahoo login! dog-ear invite


                                                                                32
offer an invitation. static invitation


unfinished look
dog-ear
empty slots
blank slate




                                        netflix. rate invitiation (blank slots)




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

                                                                                           32
offer an invitation. static invitation


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




                                                                    33
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




                                                                                             33
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




                                                                                             33
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
                                                                                             33
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




                                                                                34
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

                                                                                34
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

                                                                                34
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. tooltip invitation + hover invitation +
                                      cursor invitation




flickr. hover invitation

                                                                                            34
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. tooltip invitation + hover invitation +
                                      cursor invitation




flickr. hover invitation               y! movies. hover invitation

                                                                                            34
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

                                                                                            34
offer an invitation. dynamic invitation


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




                                                                        35
offer an invitation. dynamic invitation


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




                              flickr. drop here invitation (static)




                                                                                  35
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)




                                                                                                35
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)




                                                                                                35
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)




                                                                                                35
offer an invitation. dynamic invitation




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




                                             36
offer an invitation. dynamic invitation




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


the gap. button




                                                               36
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
                                                                         36
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
                                                                         36
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
                                                                         36
offer an invitation. anti-patterns




                                     37
offer an invitation. anti-patterns




anti-pattern. amazon. mouse trap




                                                                        37
offer an invitation. anti-patterns




anti-pattern. amazon. mouse trap




                                   anti-pattern. y! maps. mouse trap


                                                                                                     37
use transitions

                  38
use transitions




                  39
use transitions




                  39
use transitions


Speak to the brain
Understanding attention processing




                                                       40
use transitions


Speak to the brain
Understanding attention processing




                                                       40
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




                                                       41
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




                                     flickr zeitgeist




                                                        41
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




                                     flickr zeitgeist




mac widgets




                                                        41
use transitions




                  42
use transitions



backpackit. fade transition + self-healing transition.




                                                                           42
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.




                                                                           42
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active spotlight.




                                                                           42
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.                                 the gap. zoom box.




flickr. active spotlight.




                                                                                                42
use transitions




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




                                         43
use transitions




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




                                         43
use transitions




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




                                         43
use transitions




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




                                         43
use transitions




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




                                         43
use transitions




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




                                         43
use transitions




               Keep it sane
 “Cut it in-half ” rule of thumb
Use “contrast knob” approach


                                     44
use transitions




               Keep it sane
 “Cut it in-half ” rule of thumb
Use “contrast knob” approach


                                     44
use transitions




               Keep it sane
 “Cut it in-half ” rule of thumb
Use “contrast knob” approach


                                     44
use transitions. anti-patterns




                                 45
use transitions. anti-patterns




anti-pattern. borders. needless fanfare

                                                                  45
use transitions. anti-patterns




                                 46
use transitions. anti-patterns

anti-pattern. amazon. animation gone wild




                                                                             46
use transitions. anti-patterns

anti-pattern. amazon. animation gone wild




                                 anti-pattern. afi. animation gone wild

                                                                                                   46
use transitions. anti-patterns




                                 47
use transitions. anti-patterns




     anti-pattern. y! local. stalker

                                       47
react immediately

                    48
react immediately




                    49
react immediately




                    50
react immediately

y! answers. live suggest




                                               50
react immediately

y! answers. live suggest




y! mail, kayak. auto complete




                                                    50
react immediately

y! answers. live suggest




y! mail, kayak. auto complete




                                                    50
react immediately

y! answers. live suggest        netflix. periodic refresh




y! mail, kayak. auto complete




                                                                           50
react immediately

y! answers. live suggest                                 netflix. periodic refresh




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                                                                                    50
react immediately

y! answers. live suggest                                      netflix. periodic refresh




y! mail, kayak. auto complete




                                y!mail. busy indicator




                                y! small biz. live previews




                                                                                                         50
react immediately

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




                                                     51
react immediately

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




                                                     51
react immediately

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




                                                     51
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




                                                          52
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




                                                          52
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




                                                          53
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

                                                          53
react immediately



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




                                            54
react immediately



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




                                            54
react immediately



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




                                            54
react immediately




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


                                                                55
react immediately




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


                                                                55
react immediately




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


                                                                55
react immediately




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


                                                                55
react immediately




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

                                                                 56
react immediately




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

                                                                 56
react immediately




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

                                                                 56
react immediately




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

                                                                 56
react immediately




Keep feedback focused
Use nuance



                                            57
react immediately




Keep feedback focused
Use nuance



                                            57
react immediately




Keep feedback focused
Use nuance



                                            57
react immediately

Think “deeper interaction”
Multi-variate data
focus + context




                                                 58
react immediately

Think “deeper interaction”
Multi-variate data
focus + context




                                                 58
react immediately

Think “deeper interaction”
Multi-variate data
focus + context




                                                 58
6 principles for Crafting Rich Web Experiences

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


Upcoming Book:
Designing Web Interfaces: Principles & Patterns for Rich Interfaces
O’Reilly

This Presentation:
http://billwscott.com/share/presentations/2008/ajaxworld


                                                                      59
And I am Hiring!




                   60

Contenu connexe

Tendances

HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interactionAlan Dix
 
Mobile Design
Mobile DesignMobile Design
Mobile DesignLifna C.S
 
HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3Alan Dix
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rulesAlan Dix
 
Graphical user-interface
Graphical user-interfaceGraphical user-interface
Graphical user-interfaceEstiak Khan
 
HCI 3e - Ch 11: User support
HCI 3e - Ch 11:  User supportHCI 3e - Ch 11:  User support
HCI 3e - Ch 11: User supportAlan Dix
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniquesAlan Dix
 
Communication and collaboration models
Communication and collaboration modelsCommunication and collaboration models
Communication and collaboration modelsPhD Research Scholar
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
Models of Interaction
Models of InteractionModels of Interaction
Models of InteractionjbellWCT
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemN.Jagadish Kumar
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJason Hando
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionbrindaN
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive modelsAlan Dix
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channelN.Jagadish Kumar
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6Alan Dix
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2Alan Dix
 
Online Fitness Gym Project Presentation
Online Fitness Gym Project Presentation Online Fitness Gym Project Presentation
Online Fitness Gym Project Presentation Abhishek Patel
 

Tendances (20)

HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3
 
HCI 3e - Ch 7: Design rules
HCI 3e - Ch 7:  Design rulesHCI 3e - Ch 7:  Design rules
HCI 3e - Ch 7: Design rules
 
User interface-design
User interface-designUser interface-design
User interface-design
 
Graphical user-interface
Graphical user-interfaceGraphical user-interface
Graphical user-interface
 
HCI 3e - Ch 11: User support
HCI 3e - Ch 11:  User supportHCI 3e - Ch 11:  User support
HCI 3e - Ch 11: User support
 
HCI 3e - Ch 9: Evaluation techniques
HCI 3e - Ch 9:  Evaluation techniquesHCI 3e - Ch 9:  Evaluation techniques
HCI 3e - Ch 9: Evaluation techniques
 
Communication and collaboration models
Communication and collaboration modelsCommunication and collaboration models
Communication and collaboration models
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
Models of Interaction
Models of InteractionModels of Interaction
Models of Interaction
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
HCI 3e - Ch 12: Cognitive models
HCI 3e - Ch 12:  Cognitive modelsHCI 3e - Ch 12:  Cognitive models
HCI 3e - Ch 12: Cognitive models
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channel
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2
 
Online Fitness Gym Project Presentation
Online Fitness Gym Project Presentation Online Fitness Gym Project Presentation
Online Fitness Gym Project Presentation
 

En vedette

Affordances in Modern Web Design
Affordances in Modern Web DesignAffordances in Modern Web Design
Affordances in Modern Web DesignUX Booth
 
Human computer interaction
Human  computer interactionHuman  computer interaction
Human computer interactionAyusha Patnaik
 
Interactiune om-calculator (Proiectarea interfeţei Web)
Interactiune om-calculator (Proiectarea interfeţei Web)Interactiune om-calculator (Proiectarea interfeţei Web)
Interactiune om-calculator (Proiectarea interfeţei Web)Sabin Buraga
 
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
 
iPlatform Virtual Pages
iPlatform Virtual PagesiPlatform Virtual Pages
iPlatform Virtual PagesCalsoft
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web InterfacesMark Wagner
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopBrian Fling
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech StackBill Scott
 
From Use to User Interface
From Use     to User InterfaceFrom Use     to User Interface
From Use to User Interfaceabcd82
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patternsDCU_MPIUA
 
Mobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneMobile Tools - SPJ Region One
Mobile Tools - SPJ Region OneDamon Kiesow
 
Mobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningMobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningJames Brittain
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-PatternsBill Scott
 
mobile infrastructure management
mobile infrastructure managementmobile infrastructure management
mobile infrastructure managementAkhil Kumar
 
Design patterns for mobile apps
Design patterns for mobile appsDesign patterns for mobile apps
Design patterns for mobile appsIvano Malavolta
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJReifman
 
human computer interface
human computer interfacehuman computer interface
human computer interfaceSantosh Kumar
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondBrian Fling
 

En vedette (19)

Affordances in Modern Web Design
Affordances in Modern Web DesignAffordances in Modern Web Design
Affordances in Modern Web Design
 
Human computer interaction
Human  computer interactionHuman  computer interaction
Human computer interaction
 
Interactiune om-calculator (Proiectarea interfeţei Web)
Interactiune om-calculator (Proiectarea interfeţei Web)Interactiune om-calculator (Proiectarea interfeţei Web)
Interactiune om-calculator (Proiectarea interfeţei Web)
 
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)
 
iPlatform Virtual Pages
iPlatform Virtual PagesiPlatform Virtual Pages
iPlatform Virtual Pages
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
Web Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development WorkshopWeb Directions South 2007: Mobile Design and Development Workshop
Web Directions South 2007: Mobile Design and Development Workshop
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
From Use to User Interface
From Use     to User InterfaceFrom Use     to User Interface
From Use to User Interface
 
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
 
Mobile Tools For Teaching And Learning
Mobile Tools For Teaching And LearningMobile Tools For Teaching And Learning
Mobile Tools For Teaching And Learning
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
mobile infrastructure management
mobile infrastructure managementmobile infrastructure management
mobile infrastructure management
 
Design patterns for mobile apps
Design patterns for mobile appsDesign patterns for mobile apps
Design patterns for mobile apps
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
human computer interface
human computer interfacehuman computer interface
human computer interface
 
Mobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and BeyondMobile 2.0: Design & Develop for the iPhone and Beyond
Mobile 2.0: Design & Develop for the iPhone and Beyond
 

Plus de Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup EthosBill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to LifeBill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in ActionBill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalBill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsBill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesBill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalBill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampBill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to LifeBill Scott
 
Back To The Future
Back To The FutureBack To The Future
Back To The FutureBill Scott
 
Hacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsHacking Netflix - Netflix APIs
Hacking Netflix - Netflix APIsBill Scott
 
Improving Netflix Performance Experience
Improving Netflix Performance ExperienceImproving Netflix Performance Experience
Improving Netflix Performance ExperienceBill Scott
 
Design Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web ExperienceDesign Anti Patterns - How to Design a Poor Web Experience
Design Anti Patterns - How to Design a Poor Web ExperienceBill Scott
 

Plus de Bill Scott (20)

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
 
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
 
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
 
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
 
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
 
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)
 
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
 
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
 
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
 
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
 

Dernier

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Dernier (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Designing Web Interfaces

  • 1. Designing Web Interfaces Principles & Patterns for Rich Interaction Bill Scott Director, UI Engineering 1
  • 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” Interaction (action) + Feedback (reaction) 3
  • 4. 6 principles for Crafting 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 4
  • 6. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable 6
  • 7. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable 6
  • 8. make it direct Allow input wherever you have output Shorten the length of interaction Make objects directly actionable 6
  • 9. make it direct inline editing Yahoo! Bookmarks 7
  • 10. make it direct. inline editing discoverability invitations 8
  • 11. make it direct. inline editing discoverability invitations facebook. prompt-based invitation 8
  • 12. make it direct. inline editing discoverability invitations facebook. prompt-based invitation 8
  • 13. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation 8
  • 14. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit 8
  • 15. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit 8
  • 16. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit 8
  • 17. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit 8
  • 18. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit 8
  • 19. make it direct. inline editing discoverability invitations facebook. prompt-based invitation disqus. explicit “edit” invitation Y!photo. implicit flickr. on hover 8
  • 20. make it direct. inline editing considerations complex editing blending modes 9
  • 21. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing 9
  • 22. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing 9
  • 23. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing 9
  • 24. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing 9
  • 25. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes 9
  • 26. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes 9
  • 27. make it direct. inline editing considerations complex editing blending modes backpackit. complex inline editing Yahoo! 360 blast. blending display & edit modes 9
  • 28. make it direct. inline editing accessibility 10
  • 29. make it direct. inline editing accessibility flickr. alternate edit path 10
  • 30. make it direct. inline editing accessibility flickr. alternate edit path 10
  • 31. make it direct. inline editing group editing symmetry of interaction discoverability vs readability 11
  • 32. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability 11
  • 33. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability 11
  • 34. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability 11
  • 35. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction 11
  • 36. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction 11
  • 37. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction 11
  • 38. make it direct. inline editing group editing symmetry of interaction discoverability vs readability iPhone. non-symmetrical; readability basecamp. symmetry of interaction 11
  • 39. 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.” 11
  • 40. make it direct drag and drop My Yahoo! drag and drop 12
  • 41. make it direct. drag and drop Take care of the interesting moments 13
  • 42. make it direct. drag and drop Take care of the interesting moments 13
  • 43. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances 14
  • 44. make it direct. drag and drop discoverability hover invitation interesting moments activation on mouse down tip during alternate path additional visual affordances netflix. few hints. 14
  • 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 netflix. few hints. 14
  • 46. make it direct. drag and drop drag and drop Not for simply setting an attribute Don’t construct artificial visual constructs 15
  • 47. 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 15
  • 48. 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 15
  • 49. 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 15
  • 51. keep it lightweight. contextual tools digg. in page action 17
  • 52. keep it lightweight. contextual tools digg. in page action Key to digg’s early success - Kevin Rose 17
  • 53. keep it lightweight. contextual tools digg. in page action the gap. remembered collections 17
  • 54. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections 17
  • 55. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections 17
  • 56. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections 17
  • 57. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections y! movies, y! answers. rating an object 17
  • 58. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr. in-context tools y! movies, y! answers. rating an object 17
  • 59. keep it lightweight. contextual tools digg. in page action y! news, netflix. rating an object the gap. remembered collections flickr. in-context tools y! movies, y! answers. rating an object 17
  • 60. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down 18
  • 61. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down 18
  • 62. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down 18
  • 63. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down 18
  • 64. keep it lightweight. contextual tools Same as context menus Only good for single objects Can actually slow you down 18
  • 65. keep it lightweight. contextual tools Remove the “pain points” Shorten the path Keep actions immediate and light Use hover, blur, focus; avoid heavy events 19
  • 66. 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 19
  • 67. 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 19
  • 68. keep it lightweight. anti-patterns 20
  • 69. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover 20
  • 70. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover 20
  • 71. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved 20
  • 72. keep it lightweight. anti-patterns y! teachers. anti-pattern. hover & cover y! teachers. anti-pattern. hover & cover. resolved 20
  • 73. keep it lightweight. anti-patterns 21
  • 74. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat 21
  • 75. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat 21
  • 76. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets 21
  • 77. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets 21
  • 78. keep it lightweight. anti-patterns zooomr. anti-pattern. mystery meat y! teachers. anti-pattern. tiny targets 21
  • 79. stay on the page 22
  • 80. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation 23
  • 81. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation 23
  • 82. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation 23
  • 83. stay on the page. overlay overlays dialog overlay detail overlay input overlay considerations lightbox effect modality activation 23
  • 84. stay on the page. overlay 24
  • 85. stay on the page. overlay anti-pattern. y! photos. idiot boxes 24
  • 86. stay on the page. overlay anti-pattern. borders. hover & cover anti-pattern. y! photos. idiot boxes 24
  • 87. stay on the page. overlay anti-pattern. borders. hover & cover anti-pattern. y! photos. idiot boxes anti-pattern. amazon. mouse trap 24
  • 88. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay 25
  • 89. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration 25
  • 90. stay on the page. inlay inlays in-context configuration in-context insight parallel content inlay vs. overlay my y!. in-context configuration bbc. in-context configuration 25
  • 91. 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 25
  • 92. 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 25
  • 93. 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 25
  • 94. 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 25
  • 95. 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 25
  • 96. 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 25
  • 97. stay on the page. virtual Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid of paging & scrolling 26
  • 98. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid of paging & scrolling 26
  • 99. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid of paging & scrolling y! health. carousel 26
  • 100. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid of paging & scrolling y! health. carousel y! mail. on-demand scrolling 26
  • 101. stay on the page. virtual mlslistings. pagination Rethink paging use scrolling for “owned” data watch out for dual scroll bar issue hybrid of paging & scrolling y! health. carousel microsoft live. paged scrolling y! mail. on-demand scrolling 26
  • 102. stay on the page. virtual Rethink paging in-place paging zoomable user interface (zui) 27
  • 103. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) 27
  • 104. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) 27
  • 105. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) 27
  • 106. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui 27
  • 107. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui 27
  • 108. stay on the page. virtual endless. seamless paging Rethink paging in-place paging zoomable user interface (zui) hard rock cafe. zui 27
  • 109. 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 27
  • 110. 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 28
  • 111. 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 28
  • 112. 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 28
  • 113. 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 28
  • 114. 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 28
  • 115. stay on the page. process flow step by step? yes, sometimes works best 29
  • 116. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 117. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 118. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 119. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 120. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 121. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 122. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step 29
  • 123. stay on the page. process flow step by step? yes, sometimes works best discover card. step by step netflix. step by step 29
  • 124. 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 29
  • 125. stay on the page. anti-patterns the answer is in testing 30
  • 126. stay on the page. anti-patterns the answer is in testing netflix. stalker overlay 30
  • 127. stay on the page. anti-patterns the answer is in testing netflix. simpler overlay netflix. stalker overlay 30
  • 129. offer an invitation. static invitation unfinished look dog-ear empty slots blank slate 32
  • 130. offer an invitation. static invitation unfinished look dog-ear empty slots blank slate yahoo login! dog-ear invite 32
  • 131. offer an invitation. static invitation unfinished look dog-ear empty slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite 32
  • 132. offer an invitation. static invitation unfinished look dog-ear empty slots blank slate netflix. rate invitiation (blank slots) yahoo login! dog-ear invite backpackit. blank slate invitation 32
  • 133. offer an invitation. static invitation call to action 1-2-3 messaging spotlighting or lightbox provide a peek 33
  • 134. 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 33
  • 135. 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 33
  • 136. 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 33
  • 137. 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 34
  • 138. 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 34
  • 139. 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 34
  • 140. 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. tooltip invitation + hover invitation + cursor invitation flickr. hover invitation 34
  • 141. 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. tooltip invitation + hover invitation + cursor invitation flickr. hover invitation y! movies. hover invitation 34
  • 142. 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 34
  • 143. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after 35
  • 144. offer an invitation. dynamic invitation drag and drop use the interesting moments before, during and after flickr. drop here invitation (static) 35
  • 145. 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) 35
  • 146. 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) 35
  • 147. 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) 35
  • 148. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues 36
  • 149. offer an invitation. dynamic invitation bridge the new with the old hyperlinks as actions reveal with hovers drop down clues the gap. button 36
  • 150. 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 36
  • 151. 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 36
  • 152. 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 36
  • 153. offer an invitation. anti-patterns 37
  • 154. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap 37
  • 155. offer an invitation. anti-patterns anti-pattern. amazon. mouse trap anti-pattern. y! maps. mouse trap 37
  • 159. use transitions Speak to the brain Understanding attention processing 40
  • 160. use transitions Speak to the brain Understanding attention processing 40
  • 161. use transitions Speak to the brain Understanding attention processing Sending the wrong message 41
  • 162. use transitions Speak to the brain Understanding attention processing Sending the wrong message flickr zeitgeist 41
  • 163. use transitions Speak to the brain Understanding attention processing Sending the wrong message flickr zeitgeist mac widgets 41
  • 165. use transitions backpackit. fade transition + self-healing transition. 42
  • 166. use transitions backpackit. fade transition + self-healing transition. flickr. slide transition. 42
  • 167. use transitions backpackit. fade transition + self-healing transition. flickr. slide transition. flickr. active spotlight. 42
  • 168. use transitions backpackit. fade transition + self-healing transition. flickr. slide transition. the gap. zoom box. flickr. active spotlight. 42
  • 169. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 170. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 171. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 172. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 173. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 174. use transitions you can... speed up time slow down interaction show state change show relationships between objects focus attention 43
  • 175. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach 44
  • 176. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach 44
  • 177. use transitions Keep it sane “Cut it in-half ” rule of thumb Use “contrast knob” approach 44
  • 179. use transitions. anti-patterns anti-pattern. borders. needless fanfare 45
  • 181. use transitions. anti-patterns anti-pattern. amazon. animation gone wild 46
  • 182. use transitions. anti-patterns anti-pattern. amazon. animation gone wild anti-pattern. afi. animation gone wild 46
  • 184. use transitions. anti-patterns anti-pattern. y! local. stalker 47
  • 188. react immediately y! answers. live suggest 50
  • 189. react immediately y! answers. live suggest y! mail, kayak. auto complete 50
  • 190. react immediately y! answers. live suggest y! mail, kayak. auto complete 50
  • 191. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete 50
  • 192. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator 50
  • 193. react immediately y! answers. live suggest netflix. periodic refresh y! mail, kayak. auto complete y!mail. busy indicator y! small biz. live previews 50
  • 194. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting 51
  • 195. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting 51
  • 196. react immediately Keep the goal in mind Design for relevancy Is it narrowing or distracting 51
  • 197. 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 52
  • 198. 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 52
  • 199. 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 53
  • 200. 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 53
  • 201. react immediately Shape user perception Make time pass faster Make application feel more responsive 54
  • 202. react immediately Shape user perception Make time pass faster Make application feel more responsive 54
  • 203. react immediately Shape user perception Make time pass faster Make application feel more responsive 54
  • 204. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap 55
  • 205. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap 55
  • 206. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap 55
  • 207. react immediately Prevent errors before-hand Ounce of preventive design worth pound of error-handling Look before you leap 55
  • 208. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth 56
  • 209. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth 56
  • 210. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth 56
  • 211. react immediately Keep feedback focused Avoid side-noise (peripheral distractions) Use laws of proximity in context feedback Respect feedback bandwidth 56
  • 212. react immediately Keep feedback focused Use nuance 57
  • 213. react immediately Keep feedback focused Use nuance 57
  • 214. react immediately Keep feedback focused Use nuance 57
  • 215. react immediately Think “deeper interaction” Multi-variate data focus + context 58
  • 216. react immediately Think “deeper interaction” Multi-variate data focus + context 58
  • 217. react immediately Think “deeper interaction” Multi-variate data focus + context 58
  • 218. 6 principles for Crafting Rich Web Experiences make it direct keep it lightweight stay on the page provide invitations use transitions react immediately Upcoming Book: Designing Web Interfaces: Principles & Patterns for Rich Interfaces O’Reilly This Presentation: http://billwscott.com/share/presentations/2008/ajaxworld 59
  • 219. And I am Hiring! 60