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 ...
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 ...
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 ?
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 ...
MICROINTERACTIONS ARE GOOD FOR:
- Accomplishing a single task
- Connecting devices together
- Interacting with a single pi...
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 ...
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+ Facebook...
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 ?
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...
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 S
I M P O R T A N T ?
S T R U ...
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
ini...
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...
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 o...
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 mi...
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...
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...
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, ...
Example of feedback with personality: When using an ad blocker on OkCupid, ads are replaced by a message
asking for a dona...
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 repe...
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 k...
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 rule...
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 ...
RESOURCES:
- Microinteractions, by Dan Saffer: http://microinteractions.com
- “Why good storytelling helps you design grea...
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
Upcoming SlideShare
Loading in …5
×

Intro to Microinteractions: Foundation of Details that Delight

5,240 views

Published on

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

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,240
On SlideShare
0
From Embeds
0
Number of Embeds
2,313
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Intro to Microinteractions: Foundation of Details that Delight

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×