(Given at Google campus for IxDA, Microsoft campus in Redmond to UX team, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009. Will be giving again in Florida at Rich Web Experience.)
Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience -- or worse to create confusion in the user's mind.
In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn't work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).
These are conveniently summarized in six over-arching design principles.
* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.
This talk goes hand-in-hand with Bill Scott & Theresa Neil's book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.
19. interactivity.
cyclic process
between two or
more active agents
in which each agent
alternatively
listens, thinks, and
speaks.
Chris Crawford
Interactive Storytelling
31. In Page Editing
Interesting Moments
Page load
Not editing:
- Mouse enters edit area
- Mouse exits edit area
- Mouse click in edit area
Editing:
- Mouse exits edit area
- Mouse click outside edit
inline editing. animoto.com
32. Analyzing the Moments
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
33. Analyzing the Moments
1
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
34. Analyzing the Moments
1 2
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
35. Analyzing the Moments
1 2 3
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
36. Analyzing the Moments
1 2 3 4
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
37. Analyzing the Moments
1 2 3 4 5
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5
38. Analyzing the Moments
1 2 3 4 5 6
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5
6
39. Analyzing the Moments
1 2 3 4 5 6 7
Not editing: Not editing: Editing: Editing:
Mouse clicks
Page Render Mouse in Mouse exits Mouse exits Mouse click
in edit area
edit area edit area edit area elsewhere
Cursor link cursor normal i-beam normal normal
dotted dotted
Saving...
hidden edit outline; hidden edit outline;
Edit Area solid outline message;
field invitational field white
new value
text background
1
2
3
4
5
6
7
40. Refactoring the Moments
Not editing: Editing:
Not editing: Editing:
Mouse Mouse clicks Mouse click Editing: Click
Page Render Mouse exits Mouse exits
enters edit in edit area outside edit Save Button
edit area edit area
area area
Cursor link cursor normal i-beam normal normal normal
dotted dotted
Saving... Saving...
hint at edit outline; hidden edit outline;
Edit Area solid outline message; message;
field invitational field white
new value new value
text background
Show Save/ Hide Save/
Buttons? Cancel Cancel
buttons buttons
Show edit
Edit Link?
link?
43. In Page Editing
o
Pay attention t
ity
discoverabil
inline editing. fickr.com
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
44. In Page Editing
o
Pay attention t
ity
discoverabil
inline editing. fickr.com
Use a clear
“c all to action”
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
52. Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail
53. Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Reduce physical effort.
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail
54. Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Reduce physical effort.
Drop accepted
What happened?
Collapses immediately.
Reduce m ental effort.
drag and drop. gmail
70. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
71. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers
72. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
remembered collections. gap.com
rating an object. y!movies, y!answers
73. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
t.”
he “click weigh
Use to reduce t
•# of interaction steps
•Decision time
•Seek time
•Second guessing
•Wait time
remembered collections. gap.com
http://genesisconduit.wordpress.com/2008/07/13/click-weight/ rating an object. y!movies, y!answers
http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513
76. Contextual Tools (inline on hover)
ns
Use for sec ondary actio
ity.
or to prese rve readabil
contextual tool menu. flickr.com
contextual tool actions. backpackit
85. Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
hover details. linkedin.com
86. Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
Time-based y.
targeting is trick
hover details. linkedin.com
87. Contextual Tools (overlay on hover)
uld
Hover a ctivation sho
lay
be 1 /2 second de
Time-based y.
targeting is trick
Mouse path .
targe ting is tricky
hover details. linkedin.com
94. Contextual Tools (overlay on click)
ol
Open c ontextual to
k.
ys with a clic
google maps
overla
bing.com
everyblock.com
95. What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
96. What about new Yahoo page?
Overlay stays
open.
embedded application overlay - hover activated. yahoo.com 2009
97. What about new Yahoo page?
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009
98. What about new Yahoo page?
Mouse exits.
Overlay closes.
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009
99. What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
Overlay stays
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009
100. What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
The not so good?
• Activation delay feels sluggish
(however delay is necessary).
• Not all menus activate a panel.
• Accidental triggering
(result in obscuring content).
Overlay stays
• Gigantic overlays activated by hover
open.
On mouse hover/delay
switches to new app.
embedded application overlay - hover activated. yahoo.com 2009
101. What about new Yahoo page?
Mouse exits.
Overlay closes. The good?
• Doesn’t obscure other navigation.
• Doesn’t collapse erratically.
The not so good?
• Activation delay feels sluggish
(however delay is necessary).
• Not all menus activate a panel.
• Accidental triggering
(result in obscuring content).
Overlay stays
• Gigantic overlays activated by hover
open.
On mouse hover/delay
switches to new app.
See also: Jakob Nielsen’s research on
embedded application overlay - hover activated. yahoo.com“Mega Menus”: http://tr.im/twnC
2009
113. Overlays
o
Wait 1/2 second t
s.
activate hover detail
hover details. netflix.com
hover dialog. netflix.com
114. Overlays
o
Wait 1/2 second t
s.
activate hover detail
Immediately
ver
d eactivate ho
details on mouse exit.
hover details. netflix.com
hover dialog. netflix.com
115. Overlays
o
Wait 1/2 second t
s.
activate hover detail
Immediately
ver
d eactivate ho
details on mouse exit.
re
hover details. netflix.com
Change con text or captu
.
flow in o verlay dialog
hover dialog. netflix.com
122. Overlays: Hover Initiated
ouse .
ot follow the m
Over lays should n
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
anti-pattern. shifting overlay. wikirank
124. Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com
125. Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com
hover activated accordian. nasa.gov
126. Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
hover activated accordian. nasa.gov
127. Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
hover activated accordian. nasa.gov hover activated accordian. apple.com
128. Inlays
g
Use inl ays for stron
.
l association
hover activated accordian. brown.edu
contextua
click activated inlay. roost.com
k,
Activate in lays with clic
not hover.
hover activated accordian. nasa.gov hover activated accordian. apple.com
135. Seamless Context
you are here. idea.org
seamless paging. magcloud
136. Seamless Context you are here. idea.org
ext
M aintain cont
.
across pages
seamless paging. magcloud
137. Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com
138. Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com
139. Nav Bars: Extend the moment
nav status bar. thesixtyone.com
.
ain context across pages
Maint
nav status bar. facebook.com
nav status bar. digg.com
192. anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
b.
n imation kno
Imagine an a y.
a tion carefull
Dial in anim
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano
202. Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!
203. Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
the gap
earlier version of my yahoo!
204. Moments Communicate
.
Show state change
mint.com
Speed up time.
hips.
Sh ow relations
progress indicator
.
Slow down time
the gap
earlier version of my yahoo!
205. Moments Communicate
.
Show state change
mint.com
Speed up time.
hips.
Sh ow relations
progress indicator
.
Slow down time
the gap
flickr organizr earlier version of my yahoo!
206. Moments Communicate
.
Show state change
mint.com
Speed up time.
hip s.
Sh ow relations
progress indicator
.
Slow down time
the gap
ion.
Focus attent
flickr organizr earlier version of my yahoo!
216. Live Suggest
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
217. Live Suggest
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
l
Narrow toward a goa .
dis tract from it
rather than