MICROINTERACTIONS
Designing with details
Francisco Benavent
The details are not the details. They make the product
Charles Eames
DAN SAFFER
@ODannyBoy
WHAT ARE
MICROINTERACTIONS?
Microinteractions are
contained product
moments that revolve
around a single use case
they have one main task.
Microinteractions can make the difference
between a product you like and a product you
love
Microinteractions, when done well, can
become Signature Moments that are
associated with the brand.
MICROINTERACTIONS ARE
GOOD FOR
accomplishing a single task
connecting devices together
interacting with a single piece of data
such as the temperature
controlling an ongoing process such as
music volume
adjusting a setting
viewing or creating a small piece of
content like a status message
turning a feature or function on or off
MICROINTERACTIONS ARE
NOT FEATURES BUT STILL MATTERS!
Three ways of working with
microinteractions
Look for them and focus on
them individually
Reduce a complicated feature to
a core microinteraction, or
Treat every feature as a set of
linked microinteractions
A MICROINTERACTION IS
MADE OF FOUR PARTS
1. A Trigger that initiates it
2. Rules that determine how it functions
3. Feedback that the rules generate
4. Loops and Modes that make up its meta rules
TRIGGERS
TRIGGERS
Manual or system
Visible or invisible
Components
Control
States
Label
THE 7 PRINCIPLES OF
TRIGGERS
Make the trigger something the user will recognize.
Have the trigger initiate the same action every time.
Bring the data forward
Dont break the visual potential
The more frequent the microinteraction is used, the more visible the
trigger should be
Use standards
add a label only if it provides information that the trigger itself cannot
RULES
THE RULES DETERMINE
How the microinteraction responds to the trigger being activated
What control the user has (if any) over a micro interaction
The sequence in which actions take place and the timing thereof
What data is being used and from where
The configuration and parameters of any algorithms
What feedback is delivered and when
What mode the microinteraction is in
If the microinteraction repeats and how often
What happens when the microinteraction ends
What happens,
in what order
FEEDBACK
FEEDBACK
Feedback is for understanding the rules of the
microinteraction.
Determine what you want to convey with feedback.
Be human.
Use preexisting UI elements. Innovation as last
resort.
Dont make feedback arbitrary. Link it to the control
or the result.
Visual feedback whenever possible.
LOOPS AND MODES
LOOPS AND MODES
A mode is a fork in the rules. Most micro
interactions should be model-free but sometimes
they are necessary.
A loop is a cycle that repeats, usually for a set
duration
LOOPS AND MODES
Only have a mode when there is an infrequent
action
If you must have a mode, make it its own screen
when possible
Use loops to extend the life of a microinteraction
THE PRINCIPLES
DONT START FROM ZERO
Always know something
about the user, the context
or the platform.
Use that knowledge to
make good guesses about
what the user wants to do
or to know, then create
shortcuts to that action or
information
BRING THE DATA FORWARD
The trigger can reflect the
data contained inside the
microinteraction
Ask what information can
be shown about the
internal state of the
microinteration before its
even engaged or while a
process is ongoing
SPEAK HUMAN
Figure out the basic message
you need to convey, then
choose the best channel(s)
for that message.
Strive for a veneer of
personality while still using
clear language
Use the same words your
users do
PREVENT HUMAN ERROR
Design the rules so that
mistakes cant be made
Remove choice if necessary
If an error does occur, the
micro interaction should do
everything in its power to
fix it first
Avoid error messages
USE THE OVERLOOKED
Use the interface elements
that are already there for
feedback delivery
Dont add one more item
unless you have to
Convey the most with the
least
LONG LOOPS
Extend the micro
interaction far beyond a
single instance of use.
How does the micro
interaction adapt based on
user behavior?
What changes the second
time its used? The 10th? The
1000th?
Think small, and change the world
from the bottom up
