intro to microinteractions: foundation of details that delight
DESCRIPTION
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, ScissorsTRANSCRIPT
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
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 SI 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
M I C R O I N T E R AC T I O N S :
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 ?
M I C R O I N T E R A C T I O N S
F E AT U R E S V S . M I C R O I N T E R AC T I O N S
- Simple
- Brief
- Should be nearly e!ortless
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.
M I C R O I N T E R AC T I O N S A R E G O O D F O R :
- 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 o!
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.
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 SI 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
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.
2. Can be product di!erentiators
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 ?
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 ?
=
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 ?
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 ?
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 SI 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
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
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 R I G G E R S- 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 a!ordances, 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.
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
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).
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
R U L E S D E T E R M I N E :- 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
- E!ects 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
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
T U R N I N G O N A L I G H T
- When the switch is thrown, the light turns on and stays on
- If the switch is thrown again, turn the light o!
S I M P L E R U L E S
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
S E L E C T I N G D E FAU LT AC C O U N TM 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.
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
F E E D B AC K- 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
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
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
LO O P S- 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 e!ect 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.
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 Y P E S O F LO O P S- 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
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
M O D E S :- 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.
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 SI 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
R E S O U R C E S :- Microinteractions, by Dan Sa!er: 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
T H E E N DB 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