This document discusses designing user interfaces to create "interesting moments" during interactions. It begins by examining the many events and actors involved even in simple interactions like dragging and dropping. It then analyzes 96 potential "interesting moments" that could occur. The document discusses principles for designing these moments, such as using animation carefully and maintaining symmetrical interactions. It provides examples of good and bad interface patterns related to drag and drop, overlays, navigation bars, and other interactions. The overall goal is to thoughtfully design moments that capture micro interactions and possibilities to create a pleasing user experience.

1. Designing for
Interesting
Moments
Bill Scott
Director, UI Engineering
Netflix
Ajax Experience - Boston - September 2009

3. Simple Interaction?

4. Simple Interaction? Events...
Page load. Mouse hover. Mouse down. Drag
initiated. Drag leaves original location. Drag
re-enters original location. Drag re-enters
original location. Drag enters valid target.
Drag exits valid target. Drag enters specific
invalid target. Drag is over no specific target.
Drag hovers over valid target. Drag hovers
over invalid target. Drop accepted. Drop
rejected. Drop on parent container.
16+

5. Simple Interaction? Actors...
Page. Cursor. Tool Tip. Drag
Object. Drag Object’s Parent
Container. Drop Target.
6+

6. Actors Events
96
Interesting Moments

7. Interesting Moments

8. Interesting Moments

9. Interesting Moments

10. Interesting Moments

11. Interesting Moments

12. Interesting Moments

13. Interesting Moments
es
Captur es microstat

14. Interesting Moments
es
Captur es microstat
ties
Speaks to the possibili

15. Interesting Moments
es
Captur es microstat
ties
Speaks to the possibili
le r
Ser ves as a tick

16. interaction (n).
mutual or
reciprocal action;
interacting

17. 6 principles

18. 6 principles
for designing interesting moments

19. wh ere
Input put.
out
you - Ala
n Co
oper

21. In Page Editing
inline editing. fickr.com

22. In Page Editing
inline editing. fickr.com
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons

23. In Page Editing
o
Pay attention t
ity
discoverabil
inline editing. fickr.com
Additions:
•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons

24. 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

25. anti-pattern. non-symmetrical. iphone

26. anti-pattern. non-symmetrical. iphone

27. anti-pattern. non-symmetrical. iphone

28. anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

29. anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

30. &
Keep activation al
deactivatio n symmetric
anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp

31. Drag, Open & Drop
drag and drop. gmail

32. Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail

33. Drag, Open & Drop
Mouse hover & initiation
Anti-pattern: Tiny Targets
Reduce physical effort.
Drop accepted
What happened?
Collapses immediately.
drag and drop. gmail

34. 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

39. anti-pattern. artificial construct.

40. rate an object. netflix.com
anti-pattern. artificial construct.

41. ia l constructs!
Avoid artific
rate an object. netflix.com
anti-pattern. artificial construct.

42. re a int.
qui tpr
Re foo
li ght

44. In Page Actions (always visible)
original digg site. digg.com 1.0

45. In Page Actions (always visible)
original digg site. digg.com 1.0

46. In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com

47. In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com

48. In Page Actions (always visible)
original digg site. digg.com 1.0
ary actions.
Use for prim
in-page action. digg.com

49. In Page Actions (always visible)
in-page action. digg.com

50. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix

51. In Page Actions (always visible)
in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers

52. 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

53. 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

54. Contextual Tools (inline on hover)
contextual tool menu. flickr.com

55. Contextual Tools (inline on hover)
contextual tool menu. flickr.com
contextual tool actions. backpackit

56. 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

57. Contextual Tools (overlay on hover)
contextual tool overlay. bing.com

58. Contextual Tools (overlay on hover)
ctivity.
readab ility & intera
Balance
contextual tool overlay. bing.com

59. Anti-Pattern: Hover & Cover
anti-pattern. hover & cover. yahoo! teachers

60. Anti-Pattern: Hover & Cover
Mouse Mouse
Page Tool
over leaves tool In Progress Complete
Render selected
object layer
Cursor link cursor
Wrapped Normal Normal
Actionable
by tool display display
Object
layer mode mode
Contextual Show tool Hide tool Hide tool
Tools layer layer layer
anti-pattern. hover & cover. yahoo! teachers

61. Anti-Pattern: Hover & Cover
Mouse Mouse
Page Tool
over leaves tool In Progress Complete
Render selected
object layer
ext
Don’t obscure contCursor link cursor
.
o r navigation
Wrapped Normal Normal
Actionable
by tool display display
Object
layer mode mode
Contextual Show tool Hide tool Hide tool
Tools layer layer layer
anti-pattern. hover & cover. yahoo! teachers

62. Hover & Cover Refactored
hover & cover resolved. y! teachers

63. Hover & Cover Refactored
hover & cover resolved. y! teachers

64. anti-pattern. double duty. amazon.com

65. Hover: shows contextual
tool overlay.
Click: goes to details page.
anti-pattern. double duty. amazon.com

66. Hover: shows contextual
tool overlay.
Click: goes to details page.
anti-pattern. double duty. amazon.com
l.
Do one thing wel

67. in flow.
Mainta

68. Exploratorium Exhibit

69. Spot the differences

70. Spot the differences

71. Now try again...

72. Now try again...

73. Now try again...
e.
oments wi thin the pag
Keep the m

75. epage.
me nts within th
Keep the mo

76. Virtual Space
endless scrolling. bing.com

77. Virtual Space
carousel. paging. gallery. bing.com
endless scrolling. bing.com

78. Virtual Space
e.
Consider the backstag
carousel. paging. gallery. bing.com
endless scrolling. bing.com

79. Inlays
click activated inlay. roost.com

80. Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com

81. Inlays
g
Use inl ays for stron
.
contextua l association
click activated inlay. roost.com
hover activated accordian. nasa.gov

82. 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

83. 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

84. 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

85. Overlays
hover details. netflix.com
hover dialog. netflix.com

86. Overlays
hover details. netflix.com
hover dialog. netflix.com

87. Overlays
o
Wait 1/2 second t
s.
activate hover detail
hover details. netflix.com
hover dialog. netflix.com

88. 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

89. 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

90. Anti-Pattern: Idiot Boxes
anti-pattern. idiot box. yahoo! photos

91. Anti-Pattern: Idiot Boxes
s
h e proceeding
“Don’t stop t
- Alan Cooper
with idiocy.”
anti-pattern. idiot box. yahoo! photos

92. Nav Bars: Seamless Context
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com

93. Nav Bars: Seamless Context
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com

94. Nav Bars: Seamless Context
nav status bar. thesixtyone.com
.
ain context across pages
Maint
nav status bar. facebook.com
nav status bar. digg.com

95. acti on.
e in ter
In vit

97. http://dustincurtis.com/images/twitter/green_spill.jpg

98. http://dustincurtis.com/images/twitter/green_spill.jpg

99. http://dustincurtis.com/images/twitter/green_spill.jpg

100. http://dustincurtis.com/images/twitter/green_spill.jpg

101. all to action.
Use a clear c
http://dustincurtis.com/images/twitter/green_spill.jpg

102. Hover Invitations
hover invitation. y!movies

103. Hover Invitations
hover invitation. y!movies
tooltip, hover & cursor invitation. flickr.com

104. Hover Invitations
hover invitation. y!movies hover & tool invitation. backpackit
tooltip, hover & cursor invitation. flickr.com

105. Hover Invitations
hover invitation. y!movies hover & tool invitation. backpackit
h
Aid discov erability wit
hover invitations.
tooltip, hover & cursor invitation. flickr.com

106. Blank Slate Invitation
dog-ear invitation. login.yahoo.com

107. Blank Slate Invitation
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com

108. Blank Slate Invitation
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit

109. Blank Slate Invitation
for
Recycle blank areas .
our features
promoting y
fill-in-the-blanks invitation. netflix
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit

110. Tour Invitation
tour invitation. gmail

111. Tour Invitation
tour invitation. yahoo.com
tour invitation. gmail

112. Tour Invitation
tour invitation. yahoo.com
Use new visits to
es.
e new featur
tour invitation. gmail
promot

113. Prompt Invitation
facebook.com

114. Prompt Invitation
facebook.com

115. Prompt Invitation
facebook.com
delicious.com

116. Prompt Invitation
s
s or command
Use question
facebook.com
t.
to pro mpt for inpu
delicious.com

117. button. the gap

118. button. the gap

119. hyperlink. backpackit
button. the gap

120. hyperlink. backpackit
button. the gap

121. hyperlink. backpackit
button. the gap
drop down arrow. flickr

122. hyperlink. backpackit
button. the gap
drop down arrow. flickr

123. hyperlink. backpackit
n
button. the gap Bridge n ew interactio s.
amiliar idiom
styles with f
drop down arrow. flickr

124. itio ns.
ans
Show tr

127. anti-pattern. needless fanfare. macintosh turbo tax

128. anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...

129. anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...

130. anti-pattern. needless fanfare. macintosh turbo tax
Always qu estion “why”
.
when usin g transitions
again in slow-motion...

131. Attention processing is
hard-wired into the brain
It is chemistry. You can’t
help it.

132. Attention processing is
hard-wired into the brain
lp looking at It is chemistry. You can’t
You can’t he ads
“dancing” mortgage help it.

133. anti-pattern. needless fanfare. roost.com
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

134. anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

135. anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.gov
Designing Visual Interfaces. Kevin Mullet & Darrell Sano

136. 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

137. original. animation on drop. my yahoo!

138. original. animation on drop. my yahoo!
current. no animation on drop. my yahoo!

139. original. animation on drop. my yahoo!
alf”
Use the “cut it in-h
b.
rule of thum
current. no animation on drop. my yahoo!

140. Moments Communicate

141. Moments Communicate
progress indicator

142. Moments Communicate
Speed up time.
progress indicator

143. Moments Communicate
Speed up time.
progress indicator
earlier version of my yahoo!

144. Moments Communicate
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

145. Moments Communicate
mint.com
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

146. Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
earlier version of my yahoo!

147. Moments Communicate
.
Show state change
mint.com
Speed up time.
progress indicator
.
Slow down time
the gap
earlier version of my yahoo!

148. 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!

149. 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!

150. 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!

151. active.
e
Be r

152. experiment on home page

153. experiment on home page
dedicated area

154. Live Feedback
live feedback. wundrbar

155. Live Feedback
live feedback. flickr
live feedback. wundrbar

156. Live Feedback
live feedback. flickr
live feedback. wundrbar live feedback. google maps

157. Live Feedback
k
Create a t ight feedbac
loop w ith the user.
live feedback. flickr
live feedback. wundrbar live feedback. google maps

158. Live Suggest
live suggest. google (early version)

159. Live Suggest
live suggest. google (early version) live suggest. yahoo search

160. Live Suggest
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment

161. 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

162. Live Previews
live preview. volkswagen car configurator

163. Live Previews
live preview. volkswagen car configurator
live suggest. apple search

164. Live Previews
live preview. volkswagen car configurator
ws.
Us e live previe
live suggest. apple search

165. Live Filtering
refining search. bing tweets

166. Live Filtering
Reduce search effort
g.
wit h live filterin
refining search. bing tweets

167. Live Forms
live forms. yahoo! small business

168. Live Forms
live forms. yahoo! small business
live forms. google account creation

169. Live Forms
and
live forms. yahoo! small business
Prevent er rors beforeh
.
wi th live forms
live forms. google account creation

170. Auto Complete
auto complete. kayak

171. Auto Complete
by
Reduc e user effort tly.
autocompl eting correc
auto complete. kayak

172. Input where you output.
Maintain flow.
Require a light footprint.
Invite interaction.
Show transitions.
Be reactive.

173. Flickr Credits
http://tr.im/t6Ew
Presentation
billwscott.com/share/
presentations/2009/ae
Blog
looksgoodworkswell.com
Web username
billwscott
Book
designingwebinterfaces.com
O’Reilly