SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
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 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
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 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.
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.
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
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 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 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 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
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
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.
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
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
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
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.
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
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
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.
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
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.
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
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
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

Contenu connexe

Tendances

Create User Flow & Wireframing for an Application
Create User Flow & Wireframing for an ApplicationCreate User Flow & Wireframing for an Application
Create User Flow & Wireframing for an ApplicationRudityas Wahyu Anggoro
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoInstituto Faber-Ludens
 
IDEO's design thinking.
IDEO's design thinking. IDEO's design thinking.
IDEO's design thinking. BeeCanvas
 
Andiamo a fare la spesa
Andiamo a fare la spesa Andiamo a fare la spesa
Andiamo a fare la spesa Martina Ramponi
 
Design Science Research e Design Thinking
Design Science Research e Design ThinkingDesign Science Research e Design Thinking
Design Science Research e Design ThinkingDiogo Duarte
 
LIVRO Fundamentos e Tecnologia de Realidade Virtual e Aumentada
LIVRO Fundamentos e Tecnologia de Realidade Virtual e AumentadaLIVRO Fundamentos e Tecnologia de Realidade Virtual e Aumentada
LIVRO Fundamentos e Tecnologia de Realidade Virtual e AumentadaRomero Tori
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAndré Constantino da Silva
 
Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Raphael Araujo
 
Pesquisa Iconografica
Pesquisa IconograficaPesquisa Iconografica
Pesquisa IconograficaBacc Editora
 
ED Score - Emotional Design Score
ED Score - Emotional Design ScoreED Score - Emotional Design Score
ED Score - Emotional Design ScoreBorrys Hasian
 
O que é design centrado no usuário
O que é design centrado no usuárioO que é design centrado no usuário
O que é design centrado no usuárioKarine Drumond
 
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...Mariano Pimentel
 
Design Centrado Usuario
Design Centrado UsuarioDesign Centrado Usuario
Design Centrado UsuarioErico Fileno
 
Netnografia como aporte metodológico da pesquisa em comunicação
Netnografia como aporte metodológico da pesquisa em comunicaçãoNetnografia como aporte metodológico da pesquisa em comunicação
Netnografia como aporte metodológico da pesquisa em comunicaçãoAdriana Sales Zardini
 
Human Computer Interaction + User Experience
Human Computer Interaction + User ExperienceHuman Computer Interaction + User Experience
Human Computer Interaction + User ExperienceJose Berengueres
 
Ux/ui Design Solution Services
Ux/ui Design Solution ServicesUx/ui Design Solution Services
Ux/ui Design Solution Servicesdeorwine infotech
 
Prototyping tools
Prototyping toolsPrototyping tools
Prototyping toolsJoël Plas
 

Tendances (20)

Create User Flow & Wireframing for an Application
Create User Flow & Wireframing for an ApplicationCreate User Flow & Wireframing for an Application
Create User Flow & Wireframing for an Application
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
IDEO's design thinking.
IDEO's design thinking. IDEO's design thinking.
IDEO's design thinking.
 
Andiamo a fare la spesa
Andiamo a fare la spesa Andiamo a fare la spesa
Andiamo a fare la spesa
 
Design Science Research e Design Thinking
Design Science Research e Design ThinkingDesign Science Research e Design Thinking
Design Science Research e Design Thinking
 
LIVRO Fundamentos e Tecnologia de Realidade Virtual e Aumentada
LIVRO Fundamentos e Tecnologia de Realidade Virtual e AumentadaLIVRO Fundamentos e Tecnologia de Realidade Virtual e Aumentada
LIVRO Fundamentos e Tecnologia de Realidade Virtual e Aumentada
 
UX Research Introduction
UX Research Introduction UX Research Introduction
UX Research Introduction
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Basics of UX Research
Basics of UX ResearchBasics of UX Research
Basics of UX Research
 
Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)Design de mídias interativas (Aula 02)
Design de mídias interativas (Aula 02)
 
Pesquisa Iconografica
Pesquisa IconograficaPesquisa Iconografica
Pesquisa Iconografica
 
ED Score - Emotional Design Score
ED Score - Emotional Design ScoreED Score - Emotional Design Score
ED Score - Emotional Design Score
 
O que é design centrado no usuário
O que é design centrado no usuárioO que é design centrado no usuário
O que é design centrado no usuário
 
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...
Pesquisa científica em Computação com desenvolvimento de artefatos: Design Sc...
 
Design Centrado Usuario
Design Centrado UsuarioDesign Centrado Usuario
Design Centrado Usuario
 
User Research
User ResearchUser Research
User Research
 
Netnografia como aporte metodológico da pesquisa em comunicação
Netnografia como aporte metodológico da pesquisa em comunicaçãoNetnografia como aporte metodológico da pesquisa em comunicação
Netnografia como aporte metodológico da pesquisa em comunicação
 
Human Computer Interaction + User Experience
Human Computer Interaction + User ExperienceHuman Computer Interaction + User Experience
Human Computer Interaction + User Experience
 
Ux/ui Design Solution Services
Ux/ui Design Solution ServicesUx/ui Design Solution Services
Ux/ui Design Solution Services
 
Prototyping tools
Prototyping toolsPrototyping tools
Prototyping tools
 

Similaire à Intro to Microinteractions: Foundation of Details that Delight

Technology Trends, Consumer Experience @MICA 2016
Technology Trends, Consumer Experience @MICA 2016Technology Trends, Consumer Experience @MICA 2016
Technology Trends, Consumer Experience @MICA 2016Ravi Pal
 
100% Visibility - Jason Yee - Codemotion Amsterdam 2018
100% Visibility - Jason Yee - Codemotion Amsterdam 2018100% Visibility - Jason Yee - Codemotion Amsterdam 2018
100% Visibility - Jason Yee - Codemotion Amsterdam 2018Codemotion
 
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS Summit
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS SummitGain Maximum Visibility into Your Applications - DEM03 - Chicago AWS Summit
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS SummitAmazon Web Services
 
Gain Maximum Visibility into Your Applications
Gain Maximum Visibility into Your Applications Gain Maximum Visibility into Your Applications
Gain Maximum Visibility into Your Applications Amazon Web Services
 
Decoupled APIs through Microservices
Decoupled APIs through MicroservicesDecoupled APIs through Microservices
Decoupled APIs through MicroservicesDavid Simons
 
Apple Watch Development with Xamarin Watch Kit
Apple Watch Development with Xamarin Watch KitApple Watch Development with Xamarin Watch Kit
Apple Watch Development with Xamarin Watch KitTom Soderling
 
Enzyme Responsible For Regulating The Human Circadian Clock
Enzyme Responsible For Regulating The Human Circadian ClockEnzyme Responsible For Regulating The Human Circadian Clock
Enzyme Responsible For Regulating The Human Circadian ClockJenna Welch
 
Demonolithing The Monolith? Bullocks!
Demonolithing The Monolith?  Bullocks!Demonolithing The Monolith?  Bullocks!
Demonolithing The Monolith? Bullocks!Scott Sosna
 
Product Innovation Storytelling - 5 tips to breakthrough to your consumers
Product Innovation Storytelling - 5 tips to breakthrough to your consumersProduct Innovation Storytelling - 5 tips to breakthrough to your consumers
Product Innovation Storytelling - 5 tips to breakthrough to your consumersJosh Hansen
 
The Ultimate Guide to Non-Coding Tech Jobs
The Ultimate Guide to Non-Coding Tech JobsThe Ultimate Guide to Non-Coding Tech Jobs
The Ultimate Guide to Non-Coding Tech JobsJeremy Schifeling
 
Decoupled APIs through microservices
Decoupled APIs through microservicesDecoupled APIs through microservices
Decoupled APIs through microservicesDavid Simons
 
Effective feedback design
Effective feedback designEffective feedback design
Effective feedback designHarshal Patil
 
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...Michael Ong
 
Information at Point of Need: Practical Tips to Augment Your Library Service
Information at Point of Need: Practical Tips to Augment Your Library ServiceInformation at Point of Need: Practical Tips to Augment Your Library Service
Information at Point of Need: Practical Tips to Augment Your Library ServiceSiobhán Dunne
 
SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...
 SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN... SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...
SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...Idongesit Williams (Ph.D)
 
Gain Maximum Visibility - DEM06 - Anaheim AWS Summit
Gain Maximum Visibility - DEM06 - Anaheim AWS SummitGain Maximum Visibility - DEM06 - Anaheim AWS Summit
Gain Maximum Visibility - DEM06 - Anaheim AWS SummitAmazon Web Services
 

Similaire à Intro to Microinteractions: Foundation of Details that Delight (20)

Technology Trends, Consumer Experience @MICA 2016
Technology Trends, Consumer Experience @MICA 2016Technology Trends, Consumer Experience @MICA 2016
Technology Trends, Consumer Experience @MICA 2016
 
100% Visibility - Jason Yee - Codemotion Amsterdam 2018
100% Visibility - Jason Yee - Codemotion Amsterdam 2018100% Visibility - Jason Yee - Codemotion Amsterdam 2018
100% Visibility - Jason Yee - Codemotion Amsterdam 2018
 
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS Summit
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS SummitGain Maximum Visibility into Your Applications - DEM03 - Chicago AWS Summit
Gain Maximum Visibility into Your Applications - DEM03 - Chicago AWS Summit
 
Gain Maximum Visibility into Your Applications
Gain Maximum Visibility into Your Applications Gain Maximum Visibility into Your Applications
Gain Maximum Visibility into Your Applications
 
Decoupled APIs through Microservices
Decoupled APIs through MicroservicesDecoupled APIs through Microservices
Decoupled APIs through Microservices
 
Apple Watch Development with Xamarin Watch Kit
Apple Watch Development with Xamarin Watch KitApple Watch Development with Xamarin Watch Kit
Apple Watch Development with Xamarin Watch Kit
 
Enzyme Responsible For Regulating The Human Circadian Clock
Enzyme Responsible For Regulating The Human Circadian ClockEnzyme Responsible For Regulating The Human Circadian Clock
Enzyme Responsible For Regulating The Human Circadian Clock
 
Vikram emerging technologies
Vikram emerging technologiesVikram emerging technologies
Vikram emerging technologies
 
Demonolithing The Monolith? Bullocks!
Demonolithing The Monolith?  Bullocks!Demonolithing The Monolith?  Bullocks!
Demonolithing The Monolith? Bullocks!
 
Portfolio
Portfolio Portfolio
Portfolio
 
Product Innovation Storytelling - 5 tips to breakthrough to your consumers
Product Innovation Storytelling - 5 tips to breakthrough to your consumersProduct Innovation Storytelling - 5 tips to breakthrough to your consumers
Product Innovation Storytelling - 5 tips to breakthrough to your consumers
 
Smart Materials and Structures
Smart Materials and StructuresSmart Materials and Structures
Smart Materials and Structures
 
The Ultimate Guide to Non-Coding Tech Jobs
The Ultimate Guide to Non-Coding Tech JobsThe Ultimate Guide to Non-Coding Tech Jobs
The Ultimate Guide to Non-Coding Tech Jobs
 
BoSUSA18 | Bob Moesta| The 5 Skills Of An Innovator
BoSUSA18 | Bob Moesta| The 5 Skills Of An InnovatorBoSUSA18 | Bob Moesta| The 5 Skills Of An Innovator
BoSUSA18 | Bob Moesta| The 5 Skills Of An Innovator
 
Decoupled APIs through microservices
Decoupled APIs through microservicesDecoupled APIs through microservices
Decoupled APIs through microservices
 
Effective feedback design
Effective feedback designEffective feedback design
Effective feedback design
 
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...
UXSG Office Visit #3 for Singapore Polytechnic S.E.E.D Student Interest Group...
 
Information at Point of Need: Practical Tips to Augment Your Library Service
Information at Point of Need: Practical Tips to Augment Your Library ServiceInformation at Point of Need: Practical Tips to Augment Your Library Service
Information at Point of Need: Practical Tips to Augment Your Library Service
 
SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...
 SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN... SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...
SELF-INTEREST IN INNOVATION DIFFUSION DECISION PROCESS: THE CASE OF EXTENDIN...
 
Gain Maximum Visibility - DEM06 - Anaheim AWS Summit
Gain Maximum Visibility - DEM06 - Anaheim AWS SummitGain Maximum Visibility - DEM06 - Anaheim AWS Summit
Gain Maximum Visibility - DEM06 - Anaheim AWS Summit
 

Plus de Purple, Rock, Scissors

PRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and DesignPRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and DesignPurple, Rock, Scissors
 
PRPL Academy x Valencia College: Creative Behaviors
PRPL Academy x Valencia College: Creative Behaviors PRPL Academy x Valencia College: Creative Behaviors
PRPL Academy x Valencia College: Creative Behaviors Purple, Rock, Scissors
 
Digital Entropy: Swimming Upstream in a Fast-Moving Industry
Digital Entropy: Swimming Upstream in a Fast-Moving IndustryDigital Entropy: Swimming Upstream in a Fast-Moving Industry
Digital Entropy: Swimming Upstream in a Fast-Moving IndustryPurple, Rock, Scissors
 
Goal-Driven Design: A Bauhaus Approach to Digital Strategy
Goal-Driven Design: A Bauhaus Approach to Digital StrategyGoal-Driven Design: A Bauhaus Approach to Digital Strategy
Goal-Driven Design: A Bauhaus Approach to Digital StrategyPurple, Rock, Scissors
 
A Field Guide to Interaction Design (IxD)
A Field Guide to Interaction Design (IxD)A Field Guide to Interaction Design (IxD)
A Field Guide to Interaction Design (IxD)Purple, Rock, Scissors
 
It's Not You, It's Me: Saying Bye to Google Keyword Data
It's Not You, It's Me: Saying Bye to Google Keyword DataIt's Not You, It's Me: Saying Bye to Google Keyword Data
It's Not You, It's Me: Saying Bye to Google Keyword DataPurple, Rock, Scissors
 

Plus de Purple, Rock, Scissors (20)

PRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and DesignPRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
PRPL @ SXSW: The Symbiosis of Brains, Marketing, and Design
 
PRPL Academy x Valencia College: Creative Behaviors
PRPL Academy x Valencia College: Creative Behaviors PRPL Academy x Valencia College: Creative Behaviors
PRPL Academy x Valencia College: Creative Behaviors
 
Logic Over Language
Logic Over LanguageLogic Over Language
Logic Over Language
 
Magic the Gathering 101
Magic the Gathering 101Magic the Gathering 101
Magic the Gathering 101
 
Tips for Optimal Productivity
Tips for Optimal ProductivityTips for Optimal Productivity
Tips for Optimal Productivity
 
Strategies for Habit Formation
Strategies for Habit FormationStrategies for Habit Formation
Strategies for Habit Formation
 
Managing Your Stress with Plants
Managing Your Stress with PlantsManaging Your Stress with Plants
Managing Your Stress with Plants
 
Video Production Process
Video Production ProcessVideo Production Process
Video Production Process
 
Folder Structures in After Effects
Folder Structures in After EffectsFolder Structures in After Effects
Folder Structures in After Effects
 
Object-Oriented Content Strategy
Object-Oriented Content StrategyObject-Oriented Content Strategy
Object-Oriented Content Strategy
 
State of Livestream and Raw Content
State of Livestream and Raw ContentState of Livestream and Raw Content
State of Livestream and Raw Content
 
Digital Entropy: Swimming Upstream in a Fast-Moving Industry
Digital Entropy: Swimming Upstream in a Fast-Moving IndustryDigital Entropy: Swimming Upstream in a Fast-Moving Industry
Digital Entropy: Swimming Upstream in a Fast-Moving Industry
 
Goal-Driven Design: A Bauhaus Approach to Digital Strategy
Goal-Driven Design: A Bauhaus Approach to Digital StrategyGoal-Driven Design: A Bauhaus Approach to Digital Strategy
Goal-Driven Design: A Bauhaus Approach to Digital Strategy
 
A Field Guide to Interaction Design (IxD)
A Field Guide to Interaction Design (IxD)A Field Guide to Interaction Design (IxD)
A Field Guide to Interaction Design (IxD)
 
Excel Crash Course: Pivot Tables
Excel Crash Course: Pivot TablesExcel Crash Course: Pivot Tables
Excel Crash Course: Pivot Tables
 
The Odd Couple of UX Design
The Odd Couple of UX DesignThe Odd Couple of UX Design
The Odd Couple of UX Design
 
Surf Expo Social Media Audit by PRPL
Surf Expo Social Media Audit by PRPLSurf Expo Social Media Audit by PRPL
Surf Expo Social Media Audit by PRPL
 
Mobile-Friendly Social Media Strategy
Mobile-Friendly Social Media StrategyMobile-Friendly Social Media Strategy
Mobile-Friendly Social Media Strategy
 
It's Not You, It's Me: Saying Bye to Google Keyword Data
It's Not You, It's Me: Saying Bye to Google Keyword DataIt's Not You, It's Me: Saying Bye to Google Keyword Data
It's Not You, It's Me: Saying Bye to Google Keyword Data
 
Advertising Analytics 2.0
Advertising Analytics 2.0Advertising Analytics 2.0
Advertising Analytics 2.0
 

Dernier

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Dernier (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Intro to Microinteractions: Foundation of Details that Delight

  • 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