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