Above and beyond feedback, micro-interactions can also add a human element to your interface. Do you have an opinion on the heart v. star interaction on the Twitter app? If so, you're tuned into micro-interactions and their power.
As described in Dan Saffer's book Microinteractions, these tiny details typically serve a range of essential functions in your design, from communicating feedback, demonstrating accomplishment of an individual task, or helping users visualize the results of their actions and prevent errors.
In this session, we'll workshop your own interfaces and look for opportunities to improve, add, or subtract micro-interactions.
Key Take Aways
1. Understand the dos and don'ts of micro-interactions
2. Learn about why micro-interactions make us feel so good
3. Understand how colors and icons support micro-interactions
**note that this presentation has many animations that don't comes through in a static format**
2. @LimeRedStudio t @SarahEva
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.
3. @LimeRedStudio t @SarahEva
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.
4. @LimeRedStudio t @SarahEva
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.
5. @LimeRedStudio t @SarahEva
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
8. @LimeRedStudio t @SarahEva
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.”
9. @LimeRedStudio t @SarahEva
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.”
10. @LimeRedStudio t @SarahEva
History of Microinteractions
• Started as a
sociological
term in the
1970’s
• For example:
body language
affects how
you feel about
an interaction
13. @LimeRedStudio t @SarahEva
History of Microinteractions
If a waiter uses
specific
microinteractions,
he/she can
reliably get better
tips.
Making people
feel confident,
comfortable, and
happy is the goal.
16. Context Matters
• Just like the sports
slap, context means
everything when it
comes to
microinteractions.
17. Context Matters
• Just like the sports
slap, context means
everything when it
comes to
microinteractions.
18. 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.
19. 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.
31. @LimeRedStudio t @SarahEva
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?
33. @LimeRedStudio t @SarahEva
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.
34. @LimeRedStudio t @SarahEva
• 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
45. @LimeRedStudio t @SarahEva
WORKSHOP
Translate to Your UI
Microinteractions to Boost Audio Plays
Exercise: Try to get your partner to take a record
you are handing to them
• Say “I think you’ll like this!”
46. @LimeRedStudio t @SarahEva
WORKSHOP
Translate to Your UI
Microinteractions to Boost Audio Plays
Exercise: Try to get your partner to take a record
you are handing to them
• Say “I think you’ll like this!”
• Hold it upright so album art shows
47. @LimeRedStudio t @SarahEva
WORKSHOP
Translate to Your UI
Microinteractions to Boost Audio Plays
Exercise: Try to get your partner to take a record
you are handing to them
• Say “I think you’ll like this!”
• Hold it upright so album art shows
• Give it to them suddenly?
48. @LimeRedStudio t @SarahEva
WORKSHOP
Translate to Your UI
Microinteractions to Boost Audio Plays
Exercise: Try to get your partner to take a record
you are handing to them
• Say “I think you’ll like this!”
• Hold it upright so album art shows
• Give it to them suddenly?
• Probably not, creates anxiety
49. @LimeRedStudio t @SarahEva
WORKSHOP
Translate to Your UI
Microinteractions to Boost Audio Plays
• 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
50. 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
51. @LimeRedStudio t @SarahEva
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
52. @LimeRedStudio t @SarahEva
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
53. 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
54. 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
55. @LimeRedStudio t @SarahEva
Feedback Loop
Animation helps
build and sustain
meaning and
context, including
confirmation of
actions taken by
the user
56. @LimeRedStudio t @SarahEva
Feedback Loop
Animation helps
build and sustain
meaning and
context, including
confirmation of
actions taken by
the user
61. @LimeRedStudio t @SarahEva
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)
62. 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
63. 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
64. 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
65. @LimeRedStudio t @SarahEva
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
66. 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
67. 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
68. 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
• Loop: user must trigger
69. 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
• Loop: user must trigger
70. 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
• Loop: user must trigger
71. 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
• Loop: user must trigger
74. 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
• Loop: user must trigger
75. 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
• Loop: user must trigger
76. Calculator
• Trigger: user touches
History button
• Rule: when history is
selected, display last
calculations
• Feedback: text label
change from history to
keyboard
• Loop: user must trigger
77. Calculator
• Trigger: user touches
History button
• Rule: when history is
selected, display last
calculations
• Feedback: text label
change from history to
keyboard
• Loop: user must trigger
80. @LimeRedStudio t @SarahEva
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
Butt slap in sports, not always appropriate. For example, this happened between a lawyer and an athlete in a court room setting and the judge interpreted negatively and increased the sentence. http://mentalfloss.com/article/51141/why-do-athletes-slap-each-others%E2%80%99-butts
Butt slap in sports, not always appropriate. For example, this happened between a lawyer and an athlete in a court room setting and the judge interpreted negatively and increased the sentence. http://mentalfloss.com/article/51141/why-do-athletes-slap-each-others%E2%80%99-butts
Butt slap in sports, not always appropriate. For example, this happened between a lawyer and an athlete in a court room setting and the judge interpreted negatively and increased the sentence. http://mentalfloss.com/article/51141/why-do-athletes-slap-each-others%E2%80%99-butts