3. Newton’s Third Law of Motion
For every action, there is an equal and opposite reaction
interesting moments abound to engage the user
it’s the nuance stupid
make “less” become “more”
Interaction
(action)
+ Feedback
(reaction)
3
4. 6 principles for Crafting Rich Web
Experiences
1. make it direct
2. keep it lightweight
3. stay on the page
4. provide invitations
5. use transitions
6. react immediately
4
29. make it direct. inline editing
accessibility
flickr. alternate edit path
10
30. make it direct. inline editing
accessibility
flickr. alternate edit path
10
31. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
11
32. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
11
33. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
11
34. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
11
35. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
11
36. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
11
37. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
11
38. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
11
39. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
“If readability is more important than editing
then keep the editing action hidden
until the user interacts with the content.”
11
41. make it direct. drag and drop
Take care of the interesting moments
13
42. make it direct. drag and drop
Take care of the interesting moments
13
43. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
14
44. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
netflix. few hints.
14
45. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
yahoo! teachers. hints during interesting moments
netflix. few hints.
14
46. make it direct. drag and drop
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs
15
47. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs
15
48. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs
15
49. make it direct. drag and drop
anti-pattern. artificial construct
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs
15
52. keep it lightweight. contextual tools
digg. in page action
Key to digg’s
early success -
Kevin Rose
17
53. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
17
54. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
17
55. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
17
56. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
17
57. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
y! movies, y! answers. rating an object
17
58. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr. in-context tools y! movies, y! answers. rating an object
17
59. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr. in-context tools y! movies, y! answers. rating an object
17
60. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
18
61. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
18
62. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
18
63. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
18
64. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
18
65. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
19
66. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
netflix. ratings
19
67. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
digg. vote
click-weight
seek time
decision time
second guessing
wait time
netflix. ratings
interaction steps
cost/benefit tradeoff
19
88. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
25
89. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
25
90. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
bbc. in-context configuration
25
91. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration
25
92. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration
25
93. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight
25
94. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight
25
95. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight
25
96. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
y! autos. accordion
bbc. in-context configuration roost. in-context insight
25
97. stay on the page. virtual
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
26
98. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
26
99. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel
26
100. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel
y! mail. on-demand scrolling
26
101. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid of paging & scrolling
y! health. carousel
microsoft live. paged scrolling y! mail. on-demand scrolling
26
102. stay on the page. virtual
Rethink paging
in-place paging
zoomable user interface (zui)
27
103. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
27
104. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
27
105. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
27
106. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
27
107. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
27
108. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
27
109. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui cool iris (piclens). zui
27
110. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
28
111. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline assistant
28
112. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant
28
113. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant
28
114. stay on the page. process flow
rethink process flows
the user’s mental model vs page model
every page jump is a mental speed bump
the gap. inline checkout
the gap. inline assistant broadmoor hotel. one page checkout
28
115. stay on the page. process flow
step by step?
yes, sometimes works best
29
116. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
117. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
118. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
119. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
120. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
121. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
122. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
29
123. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
netflix. step by step
29
124. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
netflix. step by step ebay. single page flow
29
125. stay on the page. anti-patterns
the answer is in testing
30
126. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
30
127. stay on the page. anti-patterns
the answer is in testing
netflix. simpler overlay
netflix. stalker overlay
30
133. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
33
134. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action
33
135. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action
yahoo! tour invitation
33
136. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
discover! 1-2-3 call to action
yahoo! tour invitation
starz play! sneak peek in carousel
33
137. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
34
138. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
flickr. hover invitation
34
139. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
flickr. hover invitation
34
140. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation
34
141. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation y! movies. hover invitation
34
142. offer an invitation. dynamic invitation
Discoverability
No easy answer
Use the hover to reveal interaction
Use the familiar to teach the new
Can’t flag all interactions backpackit (fake). being too explicit
backpackit. tooltip invitation + hover invitation +
cursor invitation
flickr. hover invitation y! movies. hover invitation
34
143. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
35
144. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (static)
35
145. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)
35
146. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)
35
147. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
flickr. drop here invitation (static)
35
148. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
36
149. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
36
150. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
y! mail. embedded buttons
36
151. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
backpackit. revealed hyperlinks/icons
y! mail. embedded buttons
36
152. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
backpackit. revealed hyperlinks/icons
y! mail. embedded buttons flickr. drop down affordance
36
197. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
52
198. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
52
199. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
53
200. react immediately
Keep the goal in mind
Design for relevancy
Is it narrowing or distracting?
Use feedback to boost confidence
Let the user iterate where possible
roost
53
201. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
54
202. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
54
203. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
54
204. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
55
205. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
55
206. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
55
207. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
55
208. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
56
209. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
56
210. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
56
211. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
56
218. 6 principles for Crafting Rich Web Experiences
make it direct
keep it lightweight
stay on the page
provide invitations
use transitions
react immediately
Upcoming Book:
Designing Web Interfaces: Principles & Patterns for Rich Interfaces
O’Reilly
This Presentation:
http://billwscott.com/share/presentations/2008/ajaxworld
59