Crafting Rich Web
Experiences
Designing Web Interfaces: Principles & patterns for rich interfaces




                    ...
background
background
background
6 principles for Crafting Rich Web Experiences

make it direct
keep it lightweight
stay on the page
provide invitations
us...
make it direct
make it direct


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


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


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


inline editing




                 Yahoo! Bookmarks
make it direct. inline editing


discoverability
invitations
make it direct. inline editing


discoverability
invitations
                  facebook. prompt-based invitation
make it direct. inline editing


discoverability
invitations
                  facebook. prompt-based invitation
make it direct. inline editing


discoverability
invitations
                                             facebook. prompt...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


discoverability
invitations
                                                facebook. pro...
make it direct. inline editing


considerations
complex editing
blending modes
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex i...
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex i...
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex i...
make it direct. inline editing


considerations
complex editing
blending modes




                  backpackit. complex i...
make it direct. inline editing


considerations
complex editing
blending modes




                               backpack...
make it direct. inline editing


considerations
complex editing
blending modes




                               backpack...
make it direct. inline editing


considerations
complex editing
blending modes




                               backpack...
make it direct. inline editing


accessibility
make it direct. inline editing


accessibility




                flickr. alternate edit path
make it direct. inline editing


accessibility




                flickr. alternate edit path
make it direct. inline editing


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


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct. inline editing


group editing
symmetry of interaction
discoverability vs readability




     iPhone. non...
make it direct


drag and drop




                My Yahoo! drag and drop
make it direct. drag and drop


Take care of the interesting moments
make it direct. drag and drop


Take care of the interesting moments
make it direct. drag and drop




          discoverability
             hover invitation
        interesting moments
 act...
make it direct. drag and drop




          discoverability
             hover invitation
        interesting moments
 act...
make it direct. drag and drop




                                                              discoverability
          ...
make it direct. drag and drop




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




                                                      ...
make it direct. drag and drop
anti-pattern. artificial construct




                                                      ...
make it direct. drag and drop
anti-pattern. artificial construct




                                                      ...
keep it lightweight
keep it lightweight. contextual tools


digg. in page action
keep it lightweight. contextual tools


digg. in page action




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


digg. in page action




                       the gap. remembered collections
keep it lightweight. contextual tools


digg. in page action                                     y! news, netflix. rating a...
keep it lightweight. contextual tools


digg. in page action                                     y! news, netflix. rating a...
keep it lightweight. contextual tools


digg. in page action                                     y! news, netflix. rating a...
keep it lightweight. contextual tools


digg. in page action                                     y! news, netflix. rating a...
keep it lightweight. contextual tools


digg. in page action                                        y! news, netflix. ratin...
keep it lightweight. contextual tools


digg. in page action                                        y! news, netflix. ratin...
keep it lightweight. contextual tools

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

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

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

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

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


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hov...
keep it lightweight. contextual tools


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hov...
keep it lightweight. contextual tools


Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hov...
keep it lightweight. anti-patterns
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover...
keep it lightweight. anti-patterns




y! teachers. anti-pattern. hover & cover   y! teachers. anti-pattern. hover & cover...
keep it lightweight. anti-patterns
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teac...
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teac...
keep it lightweight. anti-patterns




zooomr. anti-pattern. mystery meat




                                     y! teac...
stay on the page
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
a...
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
a...
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
a...
stay on the page. overlay

overlays
dialog overlay
detail overlay
input overlay

considerations
lightbox effect
modality
a...
stay on the page. overlay
stay on the page. overlay




anti-pattern. y! photos. idiot boxes
stay on the page. overlay




                                       anti-pattern. borders. hover & cover




anti-pattern...
stay on the page. overlay




                                       anti-pattern. borders. hover & cover




anti-pattern...
stay on the page. inlay

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

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. inlay

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


          ...
stay on the page. virtual



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


mlslistings. pagination
                                        Rethink paging
               ...
stay on the page. virtual


mlslistings. pagination
                                        Rethink paging
               ...
stay on the page. virtual


mlslistings. pagination
                                        Rethink paging
               ...
stay on the page. virtual


mlslistings. pagination
                                                Rethink paging
       ...
stay on the page. virtual



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


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                   Rethink paging
                   ...
stay on the page. virtual
endless. seamless paging


                                                    Rethink paging
  ...
stay on the page. process flow

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

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

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

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

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

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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




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

step by step?
yes, sometimes works best




                            discover card. step...
stay on the page. anti-patterns

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

the answer is in testing




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

the answer is in testing




                           netflix. simpler overlay


netflix....
offer an invitation
offer an invitation. static invitation


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


unfinished look
dog-ear
empty slots
blank slate




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


unfinished look
dog-ear
empty slots
blank slate




                              ...
offer an invitation. static invitation


unfinished look
dog-ear
empty slots
blank slate




                              ...
offer an invitation. static invitation


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


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


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


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


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


Discoverability
No easy answer
Use the hover to reveal interaction
Use the famil...
offer an invitation. dynamic invitation


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


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




         ...
offer an invitation. dynamic invitation


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




flickr. dr...
offer an invitation. dynamic invitation


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




flickr. dr...
offer an invitation. dynamic invitation


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




flickr. dr...
offer an invitation. dynamic invitation




bridge the new with the old
            hyperlinks as actions
              re...
offer an invitation. dynamic invitation




                  bridge the new with the old
                              hy...
offer an invitation. dynamic invitation




                            bridge the new with the old
                      ...
offer an invitation. dynamic invitation




                            bridge the new with the old
                      ...
offer an invitation. dynamic invitation




                            bridge the new with the old
                      ...
offer an invitation. anti-patterns
offer an invitation. anti-patterns




anti-pattern. amazon. mouse trap
offer an invitation. anti-patterns




anti-pattern. amazon. mouse trap




                                   anti-patter...
use transitions
use transitions
use transitions
use transitions


Speak to the brain
Understanding attention processing
use transitions


Speak to the brain
Understanding attention processing
use transitions


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


Speak to the brain
Understanding attention processing
Sending the wrong message




                    ...
use transitions


Speak to the brain
Understanding attention processing
Sending the wrong message




                    ...
use transitions
use transitions



backpackit. fade transition + self-healing transition.
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.




flickr. active s...
use transitions



backpackit. fade transition + self-healing transition.




flickr. slide transition.                    ...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




                       you can...
                     speed up time
             slow down interactio...
use transitions




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




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




               Keep it sane
 “Cut it in-half ” rule of thumb
Use “contrast knob” approach
use transitions. anti-patterns
use transitions. anti-patterns




anti-pattern. borders. needless fanfare
use transitions. anti-patterns
use transitions. anti-patterns

anti-pattern. amazon. animation gone wild
use transitions. anti-patterns

anti-pattern. amazon. animation gone wild




                                 anti-patter...
use transitions. anti-patterns
use transitions. anti-patterns




     anti-pattern. y! local. stalker
react immediately
react immediately
react immediately
react immediately

y! answers. live suggest
react immediately

y! answers. live suggest




y! mail, kayak. auto complete
react immediately

y! answers. live suggest




y! mail, kayak. auto complete
react immediately

y! answers. live suggest        netflix. periodic refresh




y! mail, kayak. auto complete
react immediately

y! answers. live suggest                                 netflix. periodic refresh




y! mail, kayak. a...
react immediately

y! answers. live suggest                                      netflix. periodic refresh




y! mail, kay...
react immediately

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

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

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

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confide...
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confide...
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confide...
react immediately

Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confide...
react immediately



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



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



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




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-han...
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-han...
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-han...
react immediately




                      Prevent errors before-hand
Ounce of preventive design worth pound of error-han...
react immediately




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




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




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




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




Keep feedback focused
Use nuance
react immediately




Keep feedback focused
Use nuance
react immediately




Keep feedback focused
Use nuance
react immediately

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

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

Think “deeper interaction”
Multi-variate data
focus + context
6 principles for Crafting Rich Web Experiences

make it direct
keep it lightweight
stay on the page
provide invitations
us...
Upcoming SlideShare
Loading in …5
×

Crafting Rich Web Experiences

1,244 views
1,203 views

Published on

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,244
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Crafting Rich Web Experiences

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

×