A thorough introduction to microinteractions in UX design, focusing on the small details that make the experience. -- By Erica Klosterman, Lead Architect and Creative at digital agency Purple, Rock, Scissors

1. I N T R O D U C T I O N T O M I C R O I N T E R A C T I O N S
“ F O U N D A T I O N O F D E T A I L S T H A T D E L I G H T ” , B Y E R I C A K L O S T E R M A N

2. W H A T I S A M I C R O I N T E R A C T I O N ?
W H Y A R E M I C R O I N T E R A C T I O N S
I M P O R T A N T ?
S T R U C T U R E O F M I C R O I N T E R A C T I O N S
R E S O U R C E S
1
2
3
4

3. MICROINTERACTIONS:
The functional, interactive details of a product
W H A T I S A M I C R O I N T E R A C T I O N ?

4. M I C R O I N T E R A C T I O N S
FEATURES VS. MICROINTERACTIONS
- Simple
- Brief
- Should be nearly effortless
W H A T I S A M I C R O I N T E R A C T I O N ?
F E A T U R E S
- Complex (multiuse case)
- Time consuming
- Cognitively Engaging
A music player is a feature.
Adjusting the volume is a microinteraction.

5. MICROINTERACTIONS ARE GOOD FOR:
- Accomplishing a single task
- Connecting devices together
- Interacting with a single piece of data (stock price,
temperature, etc.)
- Controlling an ongoing process (changing the TV
channel)
- Adjusting a setting
- Viewing or creating a small piece of content (status
message)
- Turning a feature on or off
W H A T I S A M I C R O I N T E R A C T I O N ?
Logging into a system is a common microinteraction.

6. W H A T I S A M I C R O I N T E R A C T I O N ?
W H Y A R E M I C R O I N T E R A C T I O N S
I M P O R T A N T ?
S T R U C T U R E O F M I C R O I N T E R A C T I O N S
R E S O U R C E S
1
2
3
4

7. 1. Increases adoption and brand loyalty
W H Y A R E M I C R O I N T E R A C T I O N S I M P O R T A N T ?
Google+ Facebookvs.

8. 2. Can be product differentiators
W H Y A R E M I C R O I N T E R A C T I O N S I M P O R T A N T ?

9. 3. The design of your product is only as good as its smallest part
W H Y A R E M I C R O I N T E R A C T I O N S I M P O R T A N T ?
=

10. 4. They fit well into our multiplatform existence
W H Y A R E M I C R O I N T E R A C T I O N S I M P O R T A N T ?

11. 5. Forces designers to work simply and focus on details
W H Y A R E M I C R O I N T E R A C T I O N S I M P O R T A N T ?

12. W H A T I S A M I C R O I N T E R A C T I O N ?
W H Y A R E M I C R O I N T E R A C T I O N S
I M P O R T A N T ?
S T R U C T U R E O F M I C R O I N T E R A C T I O N S
R E S O U R C E S
1
2
3
4

13. A microinteraction is made up of four parts:
S T R U C T U R E O F M I C R O I N T E R A C T I O N S
1.
A trigger that
initiates it
2.
Rules that
determine how it
functions
3.
Feedback that the
rules generate
4.
Loops & Modes
that make up its
meta rules

14. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
TRIGGERS
- Are user or system initiated
- User initiated: manually triggered via pushing a
button, clicking on something, waving or a voice
command, etc.
- System initiated: certain conditions are met
within the system before before being initiated
- Are supported by user needs to determine it’s
affordances, accessibility, and persistence
- Initiate a sequence of behavior (at least one rule is
turned on)
Example of a trigger. Once you use the trigger (the light switch), the light turns on.

15. Examples of user initiated triggers.
S T R U C T U R E O F M I C R O I N T E R A C T I O N S

16. W H A T I S A M I C R O I N T E R A C T I O N ?
System triggers can be other microinteractions. In this example, the end of step one (a microinteraction)
becomes a trigger for step 2 (another microinteraction).

17. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
RULES DETERMINE:
- How the microinteraction responds to the trigger
being activated
- What can and can’t be done by the user while the
microinteraction is in process
- What happens and in what order
- Effects user experience
- What data is being used and from where
- The configuration and parameters of any
algorithms
- What feedback is delivered and when
- What mode the interaction is in
- If the microinteraction repeats and how often
- What happens when the microinteraction ends

18. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
TURNING ON A LIGHT
- When the switch is thrown, the light turns on and
stays on
- If the switch is thrown again, turn the light off
S I M P L E R U L E S

19. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
SELECTING DEFAULT ACCOUNT
M O R E N U A N C E S
- When the default account is selected, change the
grey star to the yellow star
- User selects the star drop-down. Is the account the
default?
- If so, display the message “This is your default
account” in grey.
- If not, display the option “Select as default account”
in black.
- User selects option “Select as default account”
- The account is made the default account, and the
grey star is changed to yellow star.

20. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
FEEDBACK
- Anything you see, hear, or feel that helps you
understand the rules
- Can take many forms
- Graphics, sounds, animation, prominent, subtle
- The place to express the personality of the product
- Can have its own rules
- These can become their own microinteractions
as settings
When you are invited to a new dropbox folder, the icon folder is smiling. -via Little Big
Details.
Google Docs gives different animal names to anonymous viewers of a document. -via
Little Big Details

21. Example of feedback with personality: When using an ad blocker on OkCupid, ads are replaced by a message
asking for a donation to cover the lost revenue. -via Little Big Details
S T R U C T U R E O F M I C R O I N T E R A C T I O N S

22. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
LOOPS
- Are a cycle that repeats, usually for a set duration
- Determine the pace and overall lifespan of the
microinteraction
- Indicated (directly or indirectly) via the rules
- Loops have a big effect on user experience
- Too few cycles = rushed or intrusive
- Too long a loop = sluggish and nonresponsive
Example of a loop: In Spotify, items in the “Added” column fade over time.

23. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
T YPES OF LOOPS
- Two basic kinds:
- Open loops: do not respond to feedback; they
execute and end
- Closed loops: are self-adjusting
- Most powerful (The Long Wow):
- Long loops that take place over long durations
- and/or are closed loops, adapting over time to
behavioral feedback
A Long Wow in YouTube denotes recently performed searches in purple. is detail helps
the microinteraction of searching feel customized. - via Little Big Details

24. S T R U C T U R E O F M I C R O I N T E R A C T I O N S
Trigger Rules Feedback Loops & Modes
MODES:
- A “fork” in the rules
- Takes you away to do one subtask, then returns
you to main action
- Should be used very, very sparingly
- As in no more than one, but should be zero
- They can cause errors and confusion
- User must learn more
- Use only when there is an infrequent action that
might clutter the microinteraction, such as a
settings mode
- Should typically be located on its own “page”
An example of a mode: adding a city in Apple’s Weather app to get weather data on.

25. W H A T I S A M I C R O I N T E R A C T I O N ?
W H Y A R E M I C R O I N T E R A C T I O N S
I M P O R T A N T ?
S T R U C T U R E O F M I C R O I N T E R A C T I O N S
R E S O U R C E S
1
2
3
4

26. RESOURCES:
- Microinteractions, by Dan Saffer: http://microinteractions.com
- “Why good storytelling helps you design great products”, by
Braden Koweitz: http://bit.ly/12te7iP
- Microinteraction examples: http://littlebigdetails.com
- House of Buttons: http://houseofbuttons.tumblr.com/
- “The Long Wow”, by Brandon Schauer: http://bit.ly/YzYXE6
R E S O U R C E S

27. T H E E N D
B Y E R I C A K L O S T E R M A N
Q U E S T I O N S ? C O N T A C T M E @ E K L O S T E R M A N