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