This is an update to the previous Designing Web Interfaces talk. This presentation was given on Feb. 3, 2009 over a live webcast via an O'Reilly Author Webcast special.
This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.
This presentation is much better suited for Slideshare than previous presentations as I took a lot of time to turn the movie screencasts into individual keyframes. All interactions now show in this presentation (that is why there are 300+ slides; in reality the presentation was more like 50 slides.)
You can see the recorded video & audio of the webcast in high resolution on YouTube at: http://www.youtube.com/watch?v=LW4MwvgW_ww&fmt=18
http://designingwebinterfaces.com
http://looksgoodworkswell.com
http://designgenie.org
(Also this is similar to the Big D 09 presentation on 5/30/2009. You can find that exact presentation at http://billwscott.com/share/presentations/2009/bigd/DWI.pdf)
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Designing Web Interfaces Book - O'Reilly Webcast
1. Designing Web Interfaces
Principles & Patterns for Rich Interaction
Bill Scott & Theresa Neil
O’Reilly Webcast - February 3, 2009
Bill Scott
Director, UI Engineering
Netflix
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”
+ Feedback
Interaction
(reaction)
(action)
4. 6 principles for Designing 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
5. In-Page Editing. Single-Field Inline Edit. Multi-Field Inline Edit. Overlay Edit.
Table Edit. Group Edit. Module Configuration. Drag and Drop. Drag and
Drop Module. Drag and Drop List. Drag and Drop Object. Drag and
Drop Action. Drag and Drop Collection. Direct Selection. Toggle
Selection. Collected Selection. Object Selection. Hybrid Selection.
Contextual Tools. Always-Visible Tools. Hover-Reveal Tools. Toggle-Reveal
Tools. Multi-Level Tools. Secondary Menu. Overlays. Dialog Overlay. Detail
Overlay. Input Overlay. Inlays. Dialog Inlay. List Inlay. Detail Inlay. Tabs.
Virtual Pages. Virtual Scrolling. Inline Paging. Scrolled Paging. Carousels
Virtual Panning. Zoomable User Interface. Process Flow. Interactive
Single-Page. Process Inline Assistant. Process Dialog Overlay. Process
Configurator. Static Single-Page Process. Invitation. Static Invitations. Call
to Action Invitation. Tour Invitation. Dynamic Invitation. Hover Invitation.
Affordance Invitation. Drag and Drop Invitation. Inference Invitation. More
Content Invitation. Transitions. Brighten and Dim. Expand/Collapse. Self-
Healing. Fade. Animation. Spotlight. Lookup Patterns. Auto Complete. Live
Suggest. Live Search. Refining Search. Feedback Patterns. Live Preview.
Progressive Disclosure. Progress Indicator. Periodic Refresh.
26. make it direct. inline editing
considerations
discoverability
complex editing
blending modes
accessibility
27. make it direct. inline editing
considerations
discoverability
complex editing
blending modes
accessibility
flickr. alternate edit path
28. make it direct. inline editing
considerations
discoverability
complex editing
blending modes
accessibility
flickr. alternate edit path
29. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
30. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
31. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
32. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability
33. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
34. make it direct. inline editing
group editing
symmetry of interaction
discoverability vs readability
iPhone. non-symmetrical; readability basecamp. symmetry of interaction
35. 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.”
36. make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
37. make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
38. make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
39. make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
40. make it direct. drag and drop
Drag and Drop: Take care of the interesting moments
My Yahoo! drag and drop
41. make it direct. drag and drop
discoverability
hover invitation
interesting moments
activation on mouse down
tip during alternate path
additional visual affordances
42. 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
43. 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
44. 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
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
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
47. 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. not enough hints.
48. 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. not enough hints.
49. 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. not enough hints.
50. 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. not enough hints.
51. make it direct. drag and drop
drag and drop
Not for simply setting an attribute
Don’t construct artificial visual constructs
52. 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
53. 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
54. 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
55. 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
56. 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
61. keep it lightweight. contextual tools
digg. in page action
Key to digg’s
early success -
Kevin Rose
62. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
63. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
64. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
65. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
66. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
67. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
68. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
69. keep it lightweight. contextual tools
digg. in page action
the gap. remembered collections
flickr, backpackit. contextual tools
70. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools
71. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools
72. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools
73. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools
74. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools
75. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
76. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
77. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
78. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
79. keep it lightweight. contextual tools
digg. in page action y! news, netflix. rating an object
the gap. remembered collections
flickr, backpackit. contextual tools y! movies, y! answers. rating an object
80. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
81. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
82. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
83. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
84. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
85. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
86. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
87. keep it lightweight. contextual tools
Same as context menus
Only good for single objects
Can actually slow you down
88. keep it lightweight. contextual tools
Remove the “pain points”
Shorten the path
Keep actions immediate and light
Use hover, blur, focus; avoid heavy events
89. 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
90. 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
121. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
122. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
123. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
124. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
125. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
126. stay on the page. inlay
inlays
in-context configuration
in-context insight
parallel content
inlay vs. overlay
my y!. in-context configuration
127. 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
128. 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
129. 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
130. 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
131. 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
132. 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
133. 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
134. 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
135. 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
136. stay on the page. virtual
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
137. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
138. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
139. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
microsoft live. paged scrolling
140. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling
141. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling
142. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling
143. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling y! mail. on-demand scrolling
144. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling y! mail. on-demand scrolling
145. stay on the page. virtual
mlslistings. pagination
Rethink paging
use scrolling for “owned” data
watch out for dual scroll bar issue
hybrid paging & scrolling
y! health. carousel
microsoft live. paged scrolling y! mail. on-demand scrolling
146. stay on the page. virtual
Rethink paging
in-place paging
zoomable user interface (zui)
147. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
148. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
149. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
150. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
151. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
152. stay on the page. virtual
endless. seamless paging
Rethink paging
in-place paging
zoomable user interface (zui)
hard rock cafe. zui
153. 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
154. 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
155. 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
156. 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
157. 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
158. 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
159. 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
160. 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
161. 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
162. stay on the page. process flow
step by step?
yes, sometimes works best
163. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
164. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
165. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
166. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
167. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
168. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
169. stay on the page. process flow
step by step?
yes, sometimes works best
discover card. step by step
netflix. step by step
170. 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
171. stay on the page. anti-patterns
the answer is in testing
172. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
173. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
174. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
175. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
176. stay on the page. anti-patterns
the answer is in testing
netflix. stalker overlay
177. stay on the page. anti-patterns
the answer is in testing
netflix. simpler overlay
netflix. stalker overlay
183. offer an invitation. static invitation
call to action
1-2-3 messaging
spotlighting or lightbox
provide a peek
184. 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
185. 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
186. 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
196. offer an invitation. dynamic invitation
discoverability
invitations
facebook. prompt-based invitation
disqus. explicit “edit” invitation
Y!photo. implicit flickr. on hover
197. 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
198. 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
199. 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
flickr. hover invitation
200. 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
201. 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
202. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
203. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
204. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
205. offer an invitation. dynamic invitation
drag and drop
use the interesting moments
before, during and after
flickr. drop here invitation (interactive)
206. 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)
207. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
208. offer an invitation. dynamic invitation
bridge the new with the old
hyperlinks as actions
reveal with hovers
drop down clues
the gap. button
209. 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
210. 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
211. 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
308. 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
309. 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
310. 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
311. 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
312. 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
313. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
314. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
315. react immediately
Shape user perception
Make time pass faster
Make application feel more responsive
316. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
317. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
318. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
319. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
320. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
321. react immediately
Prevent errors before-hand
Ounce of preventive design worth pound of error-handling
Look before you leap
322. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
323. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
324. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
325. react immediately
Keep feedback focused
Avoid side-noise (peripheral distractions)
Use laws of proximity in context feedback
Respect feedback bandwidth
326. 6 principles for Designing Rich Web Experiences
make it direct
keep it lightweight
stay on the page
provide invitations
use transitions
react immediately
Based on the Book:
Designing Web Interfaces: Principles & Patterns for Rich Interfaces
O’Reilly by Bill Scott & Theresa Neil
This Presentation:
Look for location on next blog post: http://designingwebinterfaces.com