Designing Web InterfacesPrinciples & Patterns for Rich Interaction

Bill ScottDirector, UI Engineering

1

background

2

For every action, there is an equal and opposite reaction

interesting moments abound to engage the userit’s the nuance stupidmake “less” become “more”

Newton’s Third Law of Motion

Interaction(action)

Feedback(reaction)+

3

6 principles for Crafting Rich Web Experiences

1. make it direct2. keep it lightweight3. stay on the page4. provide invitations5. use transitions6. react immediately

4

make it direct

5

Allow input wherever you have outputShorten the length of interactionMake objects directly actionable

make it direct

6

Allow input wherever you have outputShorten the length of interactionMake objects directly actionable

make it direct

6

Allow input wherever you have outputShorten the length of interactionMake objects directly actionable

make it direct

6

inline editing

make it direct

Yahoo! Bookmarks

7

make it direct. inline editing

discoverabilityinvitations

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit

8

make it direct. inline editing

discoverabilityinvitations

facebook. prompt-based invitation

disqus. explicit “edit” invitation

Y!photo. implicit flickr. on hover

8

make it direct. inline editing

considerationscomplex editingblending modes

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

Yahoo! 360 blast. blending display & edit modes

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

Yahoo! 360 blast. blending display & edit modes

9

make it direct. inline editing

considerationscomplex editingblending modes

backpackit. complex inline editing

Yahoo! 360 blast. blending display & edit modes

9

accessibility

make it direct. inline editing

10

accessibility

make it direct. inline editing

flickr. alternate edit path

10

accessibility

make it direct. inline editing

flickr. alternate edit path

10

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

iPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

iPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

iPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

11

make it direct. inline editing

group editingsymmetry of interactiondiscoverability vs readability

basecamp. symmetry of interactioniPhone. non-symmetrical; readability

“If readability is more important than editing then keep the editing action hidden

until the user interacts with the content.”

11

drag and drop

make it direct

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

discoverabilityhover invitation

interesting momentsactivation on mouse down

tip during alternate pathadditional visual affordances

14

make it direct. drag and drop

discoverabilityhover invitation

interesting momentsactivation on mouse down

tip during alternate pathadditional visual affordances

netflix. few hints.

14

make it direct. drag and drop

discoverabilityhover invitation

interesting momentsactivation on mouse down

tip during alternate pathadditional visual affordances

netflix. few hints.

yahoo! teachers. hints during interesting moments

14

make it direct. drag and drop

drag and dropNot for simply setting an attribute

Don’t construct artificial visual constructs

15

make it direct. drag and drop

drag and dropNot for simply setting an attribute

Don’t construct artificial visual constructs

anti-pattern. artificial construct

15

make it direct. drag and drop

drag and dropNot for simply setting an attribute

Don’t construct artificial visual constructs

anti-pattern. artificial construct

15

make it direct. drag and drop

drag and dropNot for simply setting an attribute

Don’t construct artificial visual constructs

anti-pattern. artificial construct

15

keep it lightweight

16

digg. in page action

keep it lightweight. contextual tools

17

digg. in page action

Key to digg’s early success -

Kevin Rose

keep it lightweight. contextual tools

17

the gap. remembered collections

digg. in page action

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

y! movies, y! answers. rating an object

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

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

keep it lightweight. contextual tools

17

the gap. remembered collections

y! news, netflix. rating an objectdigg. in page action

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

keep it lightweight. contextual tools

17

Same as context menusOnly good for single objectsCan actually slow you down

keep it lightweight. contextual tools

18

Same as context menusOnly good for single objectsCan actually slow you down

keep it lightweight. contextual tools

18

Same as context menusOnly good for single objectsCan actually slow you down

keep it lightweight. contextual tools

18

Same as context menusOnly good for single objectsCan actually slow you down

keep it lightweight. contextual tools

18

Same as context menusOnly good for single objectsCan actually slow you down

keep it lightweight. contextual tools

18

Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events

keep it lightweight. contextual tools

19

Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events

keep it lightweight. contextual tools

netflix. ratings

19

Remove the “pain points”Shorten the pathKeep actions immediate and lightUse hover, blur, focus; avoid heavy events

click-weightseek time

decision timesecond guessing

wait timeinteraction steps

cost/benefit tradeoff

keep it lightweight. contextual tools

netflix. ratings

digg. vote

19

keep it lightweight. anti-patterns

20

y! teachers. anti-pattern. hover & cover

keep it lightweight. anti-patterns

20

y! teachers. anti-pattern. hover & cover

keep it lightweight. anti-patterns

20

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

keep it lightweight. anti-patterns

20

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

keep it lightweight. anti-patterns

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

overlaysdialog overlaydetail overlayinput overlay

considerationslightbox effectmodalityactivation

stay on the page. overlay

23

overlaysdialog overlaydetail overlayinput overlay

considerationslightbox effectmodalityactivation

stay on the page. overlay

23

overlaysdialog overlaydetail overlayinput overlay

considerationslightbox effectmodalityactivation

stay on the page. overlay

23

overlaysdialog overlaydetail overlayinput overlay

considerationslightbox effectmodalityactivation

stay on the page. overlay

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 trap24

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

my y!. in-context configuration

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration

my y!. in-context configuration

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration

my y!. in-context configuration

y! autos. accordion

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration

my y!. in-context configuration

y! autos. accordion

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration roost. in-context insight

my y!. in-context configuration

y! autos. accordion

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration roost. in-context insight

my y!. in-context configuration

y! autos. accordion

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration roost. in-context insight

my y!. in-context configuration

y! autos. accordion

25

inlaysin-context configurationin-context insightparallel contentinlay vs. overlay

stay on the page. inlay

bbc. in-context configuration roost. in-context insight

my y!. in-context configuration

y! autos. accordion

25

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

26

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

mlslistings. pagination

26

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

mlslistings. pagination

y! health. carousel

26

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

mlslistings. pagination

y! health. carousel

y! mail. on-demand scrolling

26

stay on the page. virtual

Rethink paginguse scrolling for “owned” data

watch out for dual scroll bar issuehybrid of paging & scrolling

mlslistings. pagination

microsoft live. paged scrolling

y! health. carousel

y! mail. on-demand scrolling

26

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

hard rock cafe. zui

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

hard rock cafe. zui

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

hard rock cafe. zui

27

stay on the page. virtual

Rethink pagingin-place paging

zoomable user interface (zui)

endless. seamless paging

hard rock cafe. zui cool iris (piclens). zui

27

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

28

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

the gap. inline assistant28

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

the gap. inline assistant

the gap. inline checkout

28

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

the gap. inline assistant

the gap. inline checkout

28

rethink process flowsthe user’s mental model vs page modelevery page jump is a mental speed bump

stay on the page. process flow

broadmoor hotel. one page checkoutthe gap. inline assistant

the gap. inline checkout

28

step by step?yes, sometimes works best

stay on the page. process flow

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

netflix. step by step

discover card. step by step

29

step by step?yes, sometimes works best

stay on the page. process flow

netflix. step by step

discover card. step by step

ebay. single page flow

29

the answer is in testing

stay on the page. anti-patterns

30

the answer is in testing

stay on the page. anti-patterns

netflix. stalker overlay

30

the answer is in testing

stay on the page. anti-patterns

netflix. stalker overlay

netflix. simpler overlay

30

offer an invitation

31

offer an invitation. static invitation

unfinished lookdog-earempty slotsblank slate

32

offer an invitation. static invitation

unfinished lookdog-earempty slotsblank slate

yahoo login! dog-ear invite

32

offer an invitation. static invitation

unfinished lookdog-earempty slotsblank slate

netflix. rate invitiation (blank slots)

yahoo login! dog-ear invite

32

offer an invitation. static invitation

unfinished lookdog-earempty slotsblank slate

backpackit. blank slate invitation

netflix. rate invitiation (blank slots)

yahoo login! dog-ear invite

32

offer an invitation. static invitation

call to action1-2-3 messagingspotlighting or lightboxprovide a peek

33

offer an invitation. static invitation

call to action1-2-3 messagingspotlighting or lightboxprovide a peek

discover! 1-2-3 call to action

33

offer an invitation. static invitation

call to action1-2-3 messagingspotlighting or lightboxprovide a peek

yahoo! tour invitation

discover! 1-2-3 call to action

33

offer an invitation. static invitation

call to action1-2-3 messagingspotlighting or lightboxprovide a peek

yahoo! tour invitation

discover! 1-2-3 call to action

starz play! sneak peek in carousel

33

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

offer an invitation. dynamic invitation

34

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

offer an invitation. dynamic invitation

flickr. hover invitation

34

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

offer an invitation. dynamic invitation

flickr. hover invitation

34

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

backpackit. tooltip invitation + hover invitation + cursor invitation

offer an invitation. dynamic invitation

flickr. hover invitation

34

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

y! movies. hover invitation

backpackit. tooltip invitation + hover invitation + cursor invitation

offer an invitation. dynamic invitation

flickr. hover invitation

34

DiscoverabilityNo easy answerUse the hover to reveal interactionUse the familiar to teach the newCan’t flag all interactions

y! movies. hover invitation

backpackit. tooltip invitation + hover invitation + cursor invitation

offer an invitation. dynamic invitation

flickr. hover invitation

backpackit (fake). being too explicit

34

drag and dropuse the interesting momentsbefore, during and after

offer an invitation. dynamic invitation

35

drag and dropuse the interesting momentsbefore, during and after

flickr. drop here invitation (static)

offer an invitation. dynamic invitation

35

drag and dropuse the interesting momentsbefore, during and after

flickr. drop here invitation (static)

flickr. drop here invitation (interactive)

offer an invitation. dynamic invitation

35

drag and dropuse the interesting momentsbefore, during and after

flickr. drop here invitation (static)

flickr. drop here invitation (interactive)

offer an invitation. dynamic invitation

35

drag and dropuse the interesting momentsbefore, during and after

flickr. drop here invitation (static)

flickr. drop here invitation (interactive)

offer an invitation. dynamic invitation

35

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

offer an invitation. dynamic invitation

36

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

offer an invitation. dynamic invitation

the gap. button

36

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

offer an invitation. dynamic invitation

y! mail. embedded buttons

the gap. button

36

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

offer an invitation. dynamic invitation

y! mail. embedded buttons

backpackit. revealed hyperlinks/icons

the gap. button

36

bridge the new with the oldhyperlinks as actions

reveal with hoversdrop down clues

offer an invitation. dynamic invitation

y! mail. embedded buttons

backpackit. revealed hyperlinks/icons

flickr. drop down affordance

the gap. button

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 brainUnderstanding attention processing

40

use transitions

Speak to the brainUnderstanding attention processing

40

use transitions

Speak to the brainUnderstanding attention processingSending the wrong message

41

use transitions

Speak to the brainUnderstanding attention processingSending the wrong message

flickr zeitgeist

41

use transitions

Speak to the brainUnderstanding attention processingSending the wrong message

mac widgets

flickr zeitgeist

41

use transitions

42

backpackit. fade transition + self-healing transition.

use transitions

42

backpackit. fade transition + self-healing transition.

flickr. slide transition.

use transitions

42

backpackit. fade transition + self-healing transition.

flickr. slide transition.

flickr. active spotlight.

use transitions

42

backpackit. fade transition + self-healing transition.

flickr. slide transition.

flickr. active spotlight.

the gap. zoom box.

use transitions

42

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

43

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

43

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

43

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

43

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

43

you can...speed up time

slow down interactionshow state change

show relationships between objectsfocus attention

use transitions

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

y! answers. live suggest

react immediately

50

y! answers. live suggest

y! mail, kayak. auto complete

react immediately

50

y! answers. live suggest

y! mail, kayak. auto complete

react immediately

50

y! answers. live suggest

y! mail, kayak. auto complete

netflix. periodic refresh

react immediately

50

y! answers. live suggest

y! mail, kayak. auto complete

netflix. periodic refresh

y!mail. busy indicator

react immediately

50

y! answers. live suggest

y! mail, kayak. auto complete

netflix. periodic refresh

y! small biz. live previews

y!mail. busy indicator

react immediately

50

Keep the goal in mindDesign for relevancyIs it narrowing or distracting

react immediately

51

Keep the goal in mindDesign for relevancyIs it narrowing or distracting

react immediately

51

Keep the goal in mindDesign for relevancyIs it narrowing or distracting

react immediately

51

Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible

react immediately

52

Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible

react immediately

52

Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible

react immediately

53

Keep the goal in mindDesign for relevancyIs it narrowing or distracting?Use feedback to boost confidenceLet the user iterate where possible

roost

react immediately

53

Shape user perceptionMake time pass faster

Make application feel more responsive

react immediately

54

Shape user perceptionMake time pass faster

Make application feel more responsive

react immediately

54

Shape user perceptionMake time pass faster

Make application feel more responsive

react immediately

54

Prevent errors before-handOunce of preventive design worth pound of error-handling

Look before you leap

react immediately

55

Prevent errors before-handOunce of preventive design worth pound of error-handling

Look before you leap

react immediately

55

Prevent errors before-handOunce of preventive design worth pound of error-handling

Look before you leap

react immediately

55

Prevent errors before-handOunce of preventive design worth pound of error-handling

Look before you leap

react immediately

55

Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth

react immediately

56

Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth

react immediately

56

Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth

react immediately

56

Keep feedback focusedAvoid side-noise (peripheral distractions)Use laws of proximity in context feedbackRespect feedback bandwidth

react immediately

56

Keep feedback focusedUse nuance

react immediately

57

Keep feedback focusedUse nuance

react immediately

57

Keep feedback focusedUse nuance

react immediately

57

Think “deeper interaction”Multi-variate datafocus + context

react immediately

58

Think “deeper interaction”Multi-variate datafocus + context

react immediately

58

Think “deeper interaction”Multi-variate datafocus + context

react immediately

58

6 principles for Crafting Rich Web Experiences

make it directkeep it lightweightstay on the pageprovide invitationsuse transitionsreact immediately

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

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

59

And I am Hiring!

60