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

Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
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
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
nirzagarg
 
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
 

Recently uploaded (20)

❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
 
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
Radhanpur / Independent Call Girls Ahmedabad Phone No 8005736733 Elite Escort...
 
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call GirlsDahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
 
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
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
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
 
Ashiyana Colony - Virgin Call Girls Lucknow - Phone 9548273370 Escorts Servic...
Ashiyana Colony - Virgin Call Girls Lucknow - Phone 9548273370 Escorts Servic...Ashiyana Colony - Virgin Call Girls Lucknow - Phone 9548273370 Escorts Servic...
Ashiyana Colony - Virgin Call Girls Lucknow - Phone 9548273370 Escorts Servic...
 
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Only Cash On Delivery Call Girls Service In Mysore Enjoy 24/7 Escort Service
Only Cash On Delivery Call Girls Service In Mysore Enjoy 24/7 Escort ServiceOnly Cash On Delivery Call Girls Service In Mysore Enjoy 24/7 Escort Service
Only Cash On Delivery Call Girls Service In Mysore Enjoy 24/7 Escort Service
 
Muzaffarpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Muzaffarpur
Muzaffarpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime MuzaffarpurMuzaffarpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Muzaffarpur
Muzaffarpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Muzaffarpur
 
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In Moradabad [ 7014168258 ] Call Me For Genuine Models...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
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
 
👉 Itanagar Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Itanagar Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...👉 Itanagar Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Itanagar Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
 
Abu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu DhabiAbu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
Abu Dhabi Call girls Service0556255850 Call girls in Abu Dhabi
 
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...
 

#1NWebinar - Microinteractions: The Details That Delight