Designing Web Interfaces
Upcoming SlideShare
Loading in...5
×
 

Designing Web Interfaces

on

  • 31,969 views

This follows closely to my upcoming O'Reilly book Designing Web Interfaces. Pre-order here: http://tinyurl.com/6azn99

This follows closely to my upcoming O'Reilly book Designing Web Interfaces. Pre-order here: http://tinyurl.com/6azn99

Statistics

Views

Total Views
31,969
Views on SlideShare
30,209
Embed Views
1,760

Actions

Likes
140
Downloads
2,090
Comments
4

73 Embeds 1,760

http://looksgoodworkswell.blogspot.com 732
http://dobiho.com 131
http://lovelyrosa.blogbus.com 122
http://www.slideshare.net 120
http://theappslab.com 75
http://mariawebsitedesign.blogspot.co.uk 70
http://openitguru.blogspot.com 63
http://www.iterateme.com 48
http://lovelyrosa.com 43
http://www.r-bloggers.com 27
http://www.hanrss.com 26
http://decisionstats.wordpress.com 24
http://chunghe.blogspot.com 23
http://manalang.com 21
http://decisionstats.com 19
http://zoomrotate.blogspot.com 18
http://openitguru.blogspot.in 18
http://chunghe.blogspot.tw 14
http://mariawebsitedesign.blogspot.com 14
http://local.channelfy.com 13
http://www.hityou.net 13
http://myaiclass.com 11
http://thestrake.com 9
http://interfacesudd.wordpress.com 7
http://www.looksgoodworkswell.com 6
http://www.linkedin.com 5
http://openitguru.blogspot.com.au 5
http://openitguru.blogspot.jp 4
http://openitguru.blogspot.de 4
http://www.brijj.com 4
http://sarahintampa.tumblr.com 3
https://www.linkedin.com 3
http://looksgoodworkswell.blogspot.in 3
http://localhost:3000 3
http://strake.tumblr.com 3
http://1134646166.nvmodules.netvibes.com 3
http://looksgoodworkswell.blogspot.de 3
http://openitguru.blogspot.co.uk 3
http://www.myaiclass.com 3
http://wiki.bcmoney-mobiletv.com 2
http://openitguru.blogspot.ca 2
http://openitguru.blogspot.dk 2
http://www.dobiho.com 2
http://looksgoodworkswell.blogspot.hu 2
http://openitguru.blogspot.co.il 2
http://static.slideshare.net 2
http://feeds.feedburner.com 2
http://us-w1.rockmelt.com 2
http://www.lmodules.com 2
http://fbweb-test.comoj.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing Web Interfaces Designing Web Interfaces Presentation Transcript

  • 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