THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

@LimeRedStudio t @SarahEva
Microinteractions
Sarah Eva Monroe
Creative Director, LimeRed Studio

Your
Workshop
Leader
Sarah Eva is a Webby Award-nominated
creative strategist with 15 years of experience.
She began her career as a creative, working as
a photographer, print/web designer, and art
director. After earning her Master’s degree in
Integrated Marketing Communications from
Northwestern University, Sarah Eva moved
into the agency world, where she led digital/
social media strategy for major brands in the
higher education, non-profit, and advocacy
space. She’s also been part of internal
marketing teams at three higher education
institutions, as well as the digital team for
President Obama’s 2012 campaign cycle.
Using a range of UX methodologies, she
draws on behavioral psychology research to
help brands motivate, persuade, and connect
with their desired audience. Her work is
authentic and leverages performance metrics,
analysis, and an enthusiastic curiosity for
user behavior.

CASE STUDIES: 
THE STORIES WE’RE TELLING
LimeRed is a boutique
UX agency that
specializes in creating
user experiences &
shaping campaigns that
build social impact.

Assumptions
• You know the basics of interaction design: it’s
about making the connection between a
device, its interface and the user.
• You’re looking for strategies for how to best
decide on and apply microinteractions, not a
code tutorial.

A poorly designed
interface is like
interacting with someone
at a help desk who is
rude, unhelpful and
unwilling to do their job.
-Lana Miller

Look & Feel:
Microinteractions  
are the feel.
-Dan Saffer

Object Microinteractions

Object Microinteractions
MEMBRANE KEYBOARDS
“feeling the electric circuits mush
under your fingers”
“Pressing through these [plastic]
layers makes typing on a
membrane feel like tapping your
fingers on old, stale Jell-O.”
“provides a spongy feel when
depressed"
MECHANICAL KEYBOARDS
“provide a more dependable,
refined tactile feel”
“It gave me a far more satisfying
"thunk" noise when I pressed the
keys. It's hard to pinpoint exactly
what felt so good about the Ninja,
except that when I tried to go
back to the Dell keyboard (or any
other standard rubber-dome
keyboard), it felt mushy.”

History of Microinteractions
• Started as a
sociological
term in the
1970’s
• For example: 
body language
affects how
you feel about
an interaction

Yes, I’ll be there at
6am to help you
move.
Confidence
level?

If a waiter uses
specific
microinteractions,
he/she can
reliably get better
tips.
Making people
feel confident,
comfortable, and
happy is the goal.

Context Matters

Context Matters
Consider context: Ok in the dugout, not ok in the courtroom

Context Matters
• Just like the sports
slap, context means
everything when it
comes to
microinteractions.

Context Matters
• Just like the sports
slap, context means
everything when it
comes to
microinteractions.
• This type of micro
interaction wouldn’t
work for a more staid
brand.

Translating Physical Actions  
to Your Interface

IxD equivalent of a hug gesture

Translating Physical Actions  
to Your Interface
https://dribbble.com/mattrob

IxD equivalent of an Offering
https://dribbble.com/mattrobs

IxD Motions/Emotions
Motion Emotion
sudden, jagged, unpredictable anxiety, panic, annoyance
gliding, easing calm, potential impatience
crisp, intentional
confidence-inspiring,
professional
bouncing, controlled wobbling amusement, humor
minimizing, folding, tucking away organized, helpful

Interactions Provide:
• Feedback
– I see that an error popped up when I submitted this
form. That must mean I need to enter something.
• Way finding Confidence
– I see that the main heading changed to Settings, so I
must be in the right section of the app to adjust my
settings.
• Confirmation
– Did my payment go through or should I press this
button 12 more times?

Microinteractions provide
interaction, but also make
people feel confident,
comfortable, and happy.

MicroInteractions Provide:
• Nuanced Visual Feedback
– I see that a section of this form turned red. That must
mean I need to enter something.
• Emotionally-Infused Confidence
– I see a gear icon spinning, then coming to stopping
with a green checkbox on top, so I am satisfied and
confident my settings were applied.
• Reassuring Confirmation
– I can see that my order status animated joyfully from
In-Progress to Complete, so I know my payment was
accepted.

• Error message
• Title text changed
• Unclear waiting
period as payment
processes
• Red box
• Happy spinning
gear
• Order status
update is clear
and immediate.
A Small, but Important Difference

Pet Accepted.

Pet Accepted.
Wrigley will have a
great day here at
doggy day care!

Sometimes, Important

Sometimes, Just Entertaining

WORKSHOP
Translate to Your UI

WORKSHOP
Microinteractions to Boost Audio Plays

WORKSHOP
Exercise: Try to get your partner to take a record
you are handing to them

WORKSHOP
• Say “I think you’ll like this!”

WORKSHOP
• Hold it upright so album art shows

WORKSHOP
• Give it to them suddenly?

WORKSHOP
• Give it to them suddenly?
• Probably not, creates anxiety

WORKSHOP
• Test the addition of
• delightful animation when more than two
consecutive tracks are played
• friendly, but mildly disappointed interaction
when auto play is turned off

Dan Saffer’s 4 Guidelines
• Trigger: either by
user or by system
• Rules: invisible to
user 
Main goal: try to prevent human error
• Feedback:
movement, color
• Loops: builds,
changes

4 Guidelines in Action
• Trigger: system
• Rule: Check for
new notification
every second.
When available…
• Feedback:
background
change and
vertical bump
animation
• Loop: color builds
https://dribbble.com/ricetseng

Time considerations
If your transitions are
too fast they will feel
unnatural
If your transitions are
too slow it will create
a pain point for users
that are repeating the
same interaction
often.
https://dribbble.com/monterosa

Feedback Loop
Animation helps
build and sustain
meaning and
context, including
confirmation of
actions taken by
the user

Affordances/Signifiers
The concept of affordances is
that a function should be
obvious, and essentially
suggest its own use (i.e. a
keyboard ‘affords’ typing).
Signifiers are what hint at the
affordance (i.e. the keyboard’s
flat surface and clearly
defined keys with letters on
them ‘hints’ that you can type
characters)

Learnability & Intuitiveness
Auto-focus on the next action
This will help to guide your
users as to what they need to
do next and prevent them
from feeling lost.
Don’t reinvent the wheel
Across interfaces, round red
button means record,
square means stop

Signature Moments
• A microinteraction that’s been elevated to the
level of being a brand signature
– Twitter pull to refresh
– Facebook like
– Snapchat’s long press to show content
– Microsoft’s Start Button

Bar Code Scan
Blue bugs to indicate
scanning
• Trigger: camera opened
from within app
• Rule: When readable edges
are scanned, cluster blue
bugs around edges
• Feedback: check box
appears and camera closes
when item is identified
• Loop: user must trigger

Bar Code Scan
• Trigger: camera opened
from within app
• Rule: When item is
recognized, scan
database for offers.
• Feedback: Info box
appears, offer status is
displayed and data
slide up from bottom

Any.do
• Trigger: user clicks to
open a list
• Rule: no movement/
action until user triggers
• Feedback: when a user
swipes over a list item,
display strikethrough
and delete icon

Hopper
• Trigger: user touches
beginning and end dates
for travel
• Rule: selecting date or
moving back are only
options
• Feedback: dates
between turn blue and
blue button appears

Calculator
• Trigger: user touches
History button
• Rule: when history is
selected, display last
calculations
• Feedback: text label
change from history to
keyboard

WORKSHOP
Translate to your UI
Microinteractions to Boost Sign Ups
• Animate form to make it feel shorter
• Think about animations as if user is quickly
and easily gliding through each input
• Offer options politely
• Load fields in groups when it makes sense
• Animate a progress bar that makes the
process feel short

WORKSHOP
Form Examples
@vlb

Usability is the bare
minimum.

THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

Ähnlich wie THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

THE PSYCHOLOGY OF MICRO-INTERACTIONS: How to make users love, not like, your app

Hinweis der Redaktion