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