Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | one-north-interactive |
View: | 108 times |
Download: | 0 times |
Microinteractions: The Details that Delight
Webinar
12 December 2013
Hi, there. Nice to meet you!
EFFECT
EFFORT
Microinteractions
So … What’s a Microinteraction?
ATOMIC DESIGN MOMENTS
Tiny, Humanizing Details
• Delightful • Humane • Effective
Microinteractions make systems:
Microinteractions are the little details that separate something you tolerate from something you love.
MICROINTERACTIONSThe 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
EXAMPLESFamiliar
Hey, here’s some text
Hey, here’s some text
SIGNATURE MOMENTSCreating
MULTI-PLATFORM EXPERIENCE
Microinteractions and the
YOU CAN USE!Ideas
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
FOR YOUR BRAND?What does this mean
“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