Microinteractions - Designing with Details

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

Example
• Disqus
-‐
The
signup
form
guesses
your
name
based
on
the
first
part
of
your
email
address
as
you
type.

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.

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.

Structure
of
Microinterac5on

1.
Triggers
A
trigger
is
whatever
ini5ates
a
microinterac5on.

Principles
of
Triggers

1.
Make
the
trigger
something
target
users
will
recognize
as
a
trigger
in
the
context.

2.
Have
the
trigger
ini5ate
the
same
ac5on
every
5me

3.
Bring
the
data
forward

4.
Don't
break
the
visual
affordance

5.
More
frequently
the
microinterac5on
is
used,
the
more
visible
it
should
be.

6.
Don't
make
the
false
affordance
• Same
as
4

7.
Add
a
label
only
if
it
provides
informa5on
that
the
trigger
itself
cannot.

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

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)

System
Triggers
• System
triggers
are
those
that
engage
when
certain
condi5on(s)
are
met
without
any
conscious
interven5on
by
the
user.

2.
Rules
• At
the
heart
of
every
microinterac5on,
there
are
set
of
rules
that
govern
how
the
microinterac5on
can
be
used.

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!

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

Don't
start
from
zero
• What
do
I
know
about
the
user
and
context?

Don't
start
from
zero
example
• Google+
guesses
where
a
user
might
work
based
on
where
their
friends
work.

Absorb
Complexity
• Tesler's
law:
– There
is
a
point
beyond
which
you
cannot
simplify
a
process
any
further.

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.

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.

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

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.

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

Don't
overburden
users
with
Feedback
• Batch
-‐
When
enabling
the
camera
flash,
the
camera
icon
on
the
shuZer
buZon
gets
a
liZle
white
flash.

Convey
the
most
with
the
least
• Cornerstone
-‐
The
number
of
segments
in
the
spinning
ac5vity
indicator
equals
to
the
number
of
running
ac5vi5es.

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

Feedback
is
for
humans
example
• Boxee
-‐
When
not
connected
to
the
Internet,
the
Boxee
logo
goes
orange
and
starts
sleeping.

Feedback
as
a
personality-‐driven
mechanism
-‐
1
• Dropbox
-‐
When
there
is
a
long
upload
5me
remaining,
it
suggests
you
‘grab
a
snickers’.

Feedback
methods
• Visual
– Anima5on
– Messages
• Audio
• Hap5c

Visual
Feedback
Example
• Nike+
iPhone
app
-‐
The
color
coding
of
pace
on
the
map
is
calibrated
to
the
actual
fastest
and
slowest
pace
ran.

Anima5on
Example
• iOS
-‐
When
using
internet
on
EDGE
network,
loading
icon
in
status
bar
rotates
slower
than
it
does
on
3G.

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

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?

Hap5cs
• Technically
known
as
"vibrotac5le
feedback"

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

Modes
Example
• Weather
app
seGngs
screen

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"

Loop
Example
• Moo
-‐
Shows
you
how
much
5me
you
have
leL
to
edit
a
recently
submiZed
order.

Long
Loops
• What
can
be
done
to
make
the
microinterac5on
beZer
the
second
5me
it's
used?
The
tenth?
The
ten
thousandth?

Long
Loops
Example
• Spo5fy
-‐
The
“Added”
column
on
spo5fy
fades
as
it
gets
older.

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.

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.

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.

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.

Credits
• Microinterac5ons
–
The
Book
(Buy
the
book.
Highly
recommended)
• LiZle
Big
Details
-‐
Your
daily
dose
of
design
inspira5on.

Microinteractions - Designing with Details

More Related Content

What's hot (16)

Similar to Microinteractions - Designing with Details (20)

More from Digicorp (15)

Recently uploaded (20)

Microinteractions - Designing with Details