SlideShare a Scribd company logo
1 of 45
Download to read offline
12 December 2013

Microinteractions:
The Details that Delight
Webinar
Hi, there. Nice to meet you!
EFFORT

EFFECT

Microinteractions
So … What’s a Microinteraction?
ATOMIC
DESIGN
MOMENTS
Tiny, Humanizing Details
Microinteractions make systems:
•  Delightful
•  Humane
•  Effective
Microinteractions are the
little details that separate
something you tolerate
from something you love.
MICROINTERACTIONS
The Details that Delight
Microinteractions are the final 1%,
like the custom tailoring of a suit.
“The details are not the details,
the details make the design.”
—CHARLES EAMES
Familiar

EXAMPLES
Hey, here’s some text
Hey, here’s some text
Creating

SIGNATURE MOMENTS
Microinteractions and the

MULTI-PLATFORM
EXPERIENCE
Ideas

YOU CAN USE!
MICROCOPY
Every Moment Is a Branding Moment
Microcopy Opportunities
•  Search fields
•  Confirmation Messaging
•  Error pages

Remember: Clarity is essential and microcopy
should never confuse the user. Every moment is a
branding moment. Even when it’s not.
SPEAK HUMAN

What can we help you find?
IDEAS FOR YOUR SITE
Transitions & Animations
Examples for Your Website

•  CSS3 Transitions
•  CSS3 Transforms
•  Contextual Animations
What does this mean

FOR YOUR BRAND?
“Details demonstrate
that care has been put
into the product and
attention has been
paid to the user and
their needs.”
—DAN SAFFER
We Experience

Moments Every Day
Thank you!
Resources
•  “Microinteractions”, by Dan Saffer
microinteractions.com

•  Microinteractions Quick Reference
microinteractions.com/downloads/
Microinteractions_QuickRef.pdf

•  Examples from today’s webinar
microinteractions.onenorth.com

More Related Content

What's hot

Brand Your Presentation Style By Rishad Ahmed
Brand Your Presentation Style By  Rishad  AhmedBrand Your Presentation Style By  Rishad  Ahmed
Brand Your Presentation Style By Rishad Ahmed
Rishad Ahmed
 

What's hot (11)

Part 2c
Part 2cPart 2c
Part 2c
 
User Experience for fun and profit
User Experience for fun and profitUser Experience for fun and profit
User Experience for fun and profit
 
TMA World How to Run a Great 'Bad Virtual Meeting'
TMA World How to Run a Great 'Bad Virtual Meeting'TMA World How to Run a Great 'Bad Virtual Meeting'
TMA World How to Run a Great 'Bad Virtual Meeting'
 
Part 2c
Part 2cPart 2c
Part 2c
 
Adventures in 3D Printing
Adventures in 3D PrintingAdventures in 3D Printing
Adventures in 3D Printing
 
Visual Tools and Innovation Games - Workshop - SPS Chicago Suburbs - May 2014
Visual Tools and Innovation Games - Workshop - SPS Chicago Suburbs - May 2014Visual Tools and Innovation Games - Workshop - SPS Chicago Suburbs - May 2014
Visual Tools and Innovation Games - Workshop - SPS Chicago Suburbs - May 2014
 
Influencing the Influencers
Influencing the InfluencersInfluencing the Influencers
Influencing the Influencers
 
Getting Personal: Do Personas Help or Hinder Content Design?
Getting Personal: Do Personas Help or Hinder Content Design? Getting Personal: Do Personas Help or Hinder Content Design?
Getting Personal: Do Personas Help or Hinder Content Design?
 
From an idea to a prototype!!!!
From an idea to a prototype!!!!From an idea to a prototype!!!!
From an idea to a prototype!!!!
 
User Experience (UX) Design Tips
User Experience (UX) Design TipsUser Experience (UX) Design Tips
User Experience (UX) Design Tips
 
Brand Your Presentation Style By Rishad Ahmed
Brand Your Presentation Style By  Rishad  AhmedBrand Your Presentation Style By  Rishad  Ahmed
Brand Your Presentation Style By Rishad Ahmed
 

Similar to #1NWebinar - Microinteractions: The Details That Delight

Similar to #1NWebinar - Microinteractions: The Details That Delight (20)

Webinar - Design thinking 101 - 2018-07-24
Webinar - Design thinking 101 - 2018-07-24Webinar - Design thinking 101 - 2018-07-24
Webinar - Design thinking 101 - 2018-07-24
 
Minimalism as a concept in Product Management by Esmar Mesic
Minimalism as a concept in Product Management by Esmar MesicMinimalism as a concept in Product Management by Esmar Mesic
Minimalism as a concept in Product Management by Esmar Mesic
 
The elements of product success for designers and developers
The elements of product success for designers and developersThe elements of product success for designers and developers
The elements of product success for designers and developers
 
The Ethics of User Experience
The Ethics of User ExperienceThe Ethics of User Experience
The Ethics of User Experience
 
Human centered design and Social media
Human centered design and Social mediaHuman centered design and Social media
Human centered design and Social media
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
January 2016 Event: UX Strategy & Simplification
January 2016 Event: UX Strategy & SimplificationJanuary 2016 Event: UX Strategy & Simplification
January 2016 Event: UX Strategy & Simplification
 
Waterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design ThinkingWaterfalls are great to watch... Iterative Design Thinking
Waterfalls are great to watch... Iterative Design Thinking
 
Seminar slides
Seminar slidesSeminar slides
Seminar slides
 
Unleash Your Inner Unicorn
Unleash Your Inner UnicornUnleash Your Inner Unicorn
Unleash Your Inner Unicorn
 
Why Methods Trump Methodology
Why Methods Trump MethodologyWhy Methods Trump Methodology
Why Methods Trump Methodology
 
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
 
Design Matters
Design MattersDesign Matters
Design Matters
 
Designing Mobile Solutions for Social & Economic Contexts
Designing Mobile Solutions for Social & Economic ContextsDesigning Mobile Solutions for Social & Economic Contexts
Designing Mobile Solutions for Social & Economic Contexts
 
Designing Mobile Solutions for Social & Economic Contexts
Designing Mobile Solutions for Social & Economic ContextsDesigning Mobile Solutions for Social & Economic Contexts
Designing Mobile Solutions for Social & Economic Contexts
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinking
 
Visual tools and innovation games - full day workshop - sp intersections - no...
Visual tools and innovation games - full day workshop - sp intersections - no...Visual tools and innovation games - full day workshop - sp intersections - no...
Visual tools and innovation games - full day workshop - sp intersections - no...
 
Good design is a myth - by Zoltan Kollin | UXRiga 2017
Good design is a myth  - by Zoltan Kollin | UXRiga 2017Good design is a myth  - by Zoltan Kollin | UXRiga 2017
Good design is a myth - by Zoltan Kollin | UXRiga 2017
 
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan VerhaegenConversion Day 2015 - Usability Best Practices - Johan Verhaegen
Conversion Day 2015 - Usability Best Practices - Johan Verhaegen
 
Designing for Customer needs: A UX Perspective
Designing for Customer needs: A UX PerspectiveDesigning for Customer needs: A UX Perspective
Designing for Customer needs: A UX Perspective
 

More from One North

More from One North (20)

Why your analytics land with a thud
Why your analytics land with a thudWhy your analytics land with a thud
Why your analytics land with a thud
 
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
 
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
 
From PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand ExperiencesFrom PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand Experiences
 
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
 
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
 
Orchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in ContextOrchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in Context
 
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
 
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway
 
#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About Inspiration#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About Inspiration
 
#1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong #1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong
 
#1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy #1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy
 
#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSO#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSO
 
#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works
 
#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative Conundrum#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative Conundrum
 
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions #1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
 
#1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future #1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future
 
#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday Spaces#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday Spaces
 
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data #1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
 
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX #1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
 

Recently uploaded

Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 

Recently uploaded (20)

Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 

#1NWebinar - Microinteractions: The Details That Delight