This is a brief summary of the brilliant book Microinteractions by Dan Saffer. Please visit http://microinteractions.com/ to buy the book and get more details.
2. What
is
Microinterac5on?
• A
microinterac5on
is
a
contained
product
moment
that
revolves
around
a
single
use
case
-‐
a
5ny
piece
of
func5onality
that
only
does
one
thing.
• For
e.g.
Sign
Up
form
www.digi-‐corp.com
3. Example
• Disqus
-‐
The
signup
form
guesses
your
name
based
on
the
first
part
of
your
email
address
as
you
type.
www.digi-‐corp.com
4. What
is
Microinterac5on?
• Whenever
you
– change
a
seGng,
– sync
your
data
or
device,
– set
an
alarm,
– pick
a
password,
– turn
on
your
appliance,
– login,
– set
a
status
message,
– like
something,
you
are
engaging
with
a
microinterac5on.
www.digi-‐corp.com
5. What
is
Microinterac5on?
• Microinterac5ons
are
not
features.
– For
e.g.
music
player
is
a
feature
but
adjus5ng
a
volume
is
a
microinterac5on
inside
that
feature.
• The
difference
between
a
product
you
love
and
product
you
tolerate
is
oLen
the
micro
interac5ons
you
have
with
it.
www.digi-‐corp.com
12. 4.
Don't
break
the
visual
affordance
www.digi-‐corp.com
13. 5.
More
frequently
the
microinterac5on
is
used,
the
more
visible
it
should
be.
www.digi-‐corp.com
14. 6.
Don't
make
the
false
affordance
• Same
as
4
www.digi-‐corp.com
15. 7.
Add
a
label
only
if
it
provides
informa5on
that
the
trigger
itself
cannot.
www.digi-‐corp.com
16. The
most
discoverable
triggers
are…
1. An
object
that
is
moving,
like
a
pulsing
icon
2. An
object
with
an
affordance
and
a
label,
such
as
a
labeled
buZon
3. An
object
with
a
label,
such
as
labeled
icon
4. An
object
alone,
such
as
icon
5. A
label
only,
such
as
menu
item
6. Nothing:
an
invisible
trigger
www.digi-‐corp.com
17. Invisible
Trigger
Example
• Tumblr
iOS:
If
you
swipe
the
edit
buZon
to
the
leL
you
can
create
a
new
text
blogpost.
(and
if
you
swipe
it
upwards
you
can
make
a
photo
blogpost)
www.digi-‐corp.com
18. System
Triggers
• System
triggers
are
those
that
engage
when
certain
condi5on(s)
are
met
without
any
conscious
interven5on
by
the
user.
www.digi-‐corp.com
19. 2.
Rules
• At
the
heart
of
every
microinterac5on,
there
are
set
of
rules
that
govern
how
the
microinterac5on
can
be
used.
www.digi-‐corp.com
20. The
rules
determines…
• Rules
determine
"What
can
be
done
and
what
can't
be
done”
• E.g.
Mailchimp
-‐
As
you
stretch
the
browser
window
the
arm
of
the
chimp
stretches
5ll
it
“pops”
off!
www.digi-‐corp.com
21. Rules
example
• Pages
-‐
Automa5cally
adds
smaller
heading
styles
once
you’ve
used
the
smallest
displayed
style
(e.g.
“heading
3”
only
appears
aLer
you
have
used
“heading
2”
in
your
document).
www.digi-‐corp.com
22. Don't
start
from
zero
• What
do
I
know
about
the
user
and
context?
www.digi-‐corp.com
23. Don't
start
from
zero
example
• Google+
guesses
where
a
user
might
work
based
on
where
their
friends
work.
www.digi-‐corp.com
24. Absorb
Complexity
• Tesler's
law:
– There
is
a
point
beyond
which
you
cannot
simplify
a
process
any
further.
www.digi-‐corp.com
25. Absorb
Complexity
Example
• Facebook
-‐
When
“new
family
member”
is
added,
Facebook
automa5cally
recognizes
the
chosen
family
member’s
gender
and
adjusts
the
list
of
possible
family
rela5ves
in
the
list
box
accordingly.
www.digi-‐corp.com
26. Limited
op5ons
and
Smart
defaults
• With
microinterac5ons,
a
good
prac5ce
is
to
emphasize
or
perform
automa5cally
the
next
possible
ac5on
user
might
take
Example
– Clicking
on
the
“Report”
icon
on
YouTube
stops
the
video
if
it’s
currently
playing.
www.digi-‐corp.com
27. Controls
and
User
Input
• Manual
user
input
-‐>
with
what
controls
• With
controls,
the
choice
is
between
opera5onal
simplicity
and
perceived
simplicity.
• For
e.g.
– Opera5onal
simplicity
-‐>
3
buZons
to
lower,
higher
or
mute
the
volume
– Perceived
simplicity
-‐>
a
single
control
does
mul5ple
ac5ons
www.digi-‐corp.com
28. Controls
and
User
Input
Example
1
• Google
Drive
-‐
An
expanding
hover
interface
allows
you
to
choose
the
desired
amount
of
rows
and
columns
in
a
new
table.
www.digi-‐corp.com
29. 3.
Feedback
• Principles
of
Feedback
1. Don’t
overburden
user
with
Feedback
2. The
best
feedback
is
never
arbitrary
3. Convey
the
most
with
the
least
4. Use
the
overlooked
as
a
means
of
message
delivery
www.digi-‐corp.com
30. Don't
overburden
users
with
Feedback
• Batch
-‐
When
enabling
the
camera
flash,
the
camera
icon
on
the
shuZer
buZon
gets
a
liZle
white
flash.
www.digi-‐corp.com
31. Convey
the
most
with
the
least
• Cornerstone
-‐
The
number
of
segments
in
the
spinning
ac5vity
indicator
equals
to
the
number
of
running
ac5vi5es.
www.digi-‐corp.com
32. Use
the
overlooked
as
a
means
of
message
delivery
• For
e.g.
a
cursor
could
change
the
color
when
it
is
moving
over
an
inac5ve
buZon
www.digi-‐corp.com
33. Feedback
is
for
humans
example
• Boxee
-‐
When
not
connected
to
the
Internet,
the
Boxee
logo
goes
orange
and
starts
sleeping.
www.digi-‐corp.com
34. Feedback
as
a
personality-‐driven
mechanism
-‐
1
• Dropbox
-‐
When
there
is
a
long
upload
5me
remaining,
it
suggests
you
‘grab
a
snickers’.
www.digi-‐corp.com
36. Visual
Feedback
Example
• Nike+
iPhone
app
-‐
The
color
coding
of
pace
on
the
map
is
calibrated
to
the
actual
fastest
and
slowest
pace
ran.
www.digi-‐corp.com
37. Anima5on
Example
• iOS
-‐
When
using
internet
on
EDGE
network,
loading
icon
in
status
bar
rotates
slower
than
it
does
on
3G.
www.digi-‐corp.com
38. Audio
• Sound
can
be
a
powerful
cue
• It
arrives
in
our
brain
more
quickly
than
visual
feedback
• That's
why
it
should
be
used
sparingly
• Useful
for
devices
with
no
screen
• Or
for
Microinterac5on
that
work
in
the
background
when
user
is
not
paying
aZen5on
www.digi-‐corp.com
39. Audio
• Use
it
for
– Emphasis
– Alerts
• It
should
pass
the
Foghorn
test:
– is
this
ac5on
important
enough
that
users
would
want
to
become
aware
of
it
when
they
cannot
see
it?
www.digi-‐corp.com
41. 4.
Loops
and
Modes
• Modes
– A
mode
is
a
fork
in
the
rules
– Modes
should
be
used
very
very
sparingly
– Most
microinterac5on
should
be
mode
free
but
some5mes
they
are
necessary
– When
there
is
an
infrequent
ac5on
that
would
otherwise
cluZer
the
microinterac5on’s
main
purpose
for
e.g.
seGngs
mode
www.digi-‐corp.com
42. Modes
Example
• Weather
app
seGngs
screen
www.digi-‐corp.com
43. Loops
• A
loop
is
a
cycle
that
repeats,
usually
for
a
set
dura5on
• A
loop
is
something
indicated
via
the
rules
for
e.g.
"Get
data
every
30
seconds",
"Run
for
three
minutes,
then
stop"
or
"Send
reminder
in
10
days"
www.digi-‐corp.com
44. Loop
Example
• Moo
-‐
Shows
you
how
much
5me
you
have
leL
to
edit
a
recently
submiZed
order.
www.digi-‐corp.com
45. Long
Loops
• What
can
be
done
to
make
the
microinterac5on
beZer
the
second
5me
it's
used?
The
tenth?
The
ten
thousandth?
www.digi-‐corp.com
46. Long
Loops
Example
• Spo5fy
-‐
The
“Added”
column
on
spo5fy
fades
as
it
gets
older.
www.digi-‐corp.com
47. The
Long
Wow
• The
long
wow
is
about
delivering
new
experiences
or
features
over
5me
instead
of
all
at
once,
and
by
doing
so
building
customer
loyalty.
www.digi-‐corp.com
48. The
Long
Wow
Example
• Threadless
-‐
Knows
what’s
in
your
shopping
cart
and
sends
an
email
to
no5fy
that
some
of
the
cart’s
products
are
running
out
of
stock.
www.digi-‐corp.com
49. Progressive
disclosure
or
reduc5on
• As
users
become
used
to
a
product,
they
don't
need
as
much
handholding,
and
instead
can
be
treated
as
more
skilled
user.
For
e.g.
shortcuts
could
be
added
to
a
microinterac5on
aLer
it's
been
used
a
few
5mes,
or
more
advanced
features
added.
• In
progressive
reduc5on,
you
can
make
microinterac5on
simpler
over
the
period
of
5me.
www.digi-‐corp.com
50. Progressive
Reduc5on
Example
• The
signpost
buZon
by
default
is
a
large
icon
with
a
label.
• As
the
user
becomes
more
proficient,
the
label
disappears.
• Eventually
the
buZon
is
de-‐emphasized.
www.digi-‐corp.com
51. Credits
• Microinterac5ons
–
The
Book
(Buy
the
book.
Highly
recommended)
• LiZle
Big
Details
-‐
Your
daily
dose
of
design
inspira5on.
www.digi-‐corp.com