#1nwebinar - microinteractions: the details that delight

45
Microinteractions: The Details that Delight Webinar 12 December 2013

Upload: one-north-interactive

Post on 27-Jan-2015

110 views

Category:

Design


0 download

DESCRIPTION

Great client service means going that extra mile to satisfy the needs of those that you partner with. However, oftentimes that mile is comprised of many small steps – or gestures – that work together to create an overall exceptional experience. These small moments are known as microinteractions, and they make the difference, particularly in digital communications, between something you tolerate and something you love. Join Jessica DeJong and Pete Amundson as they discuss the little things you can do to make digital moments experienced with your firm stand out among the rest. During this webinar, they provide real-world examples of how businesses are adding that extra 1% to differentiate their products and services from those of their competitors. They also explore how Creatives and Technologists have partnered together to inspire and produce great digital microinteractions, and they speak to ways you can carry microinteractions into your offline communications. You’ll leave this session with a list of things you can do now to help amplify your user experience.

TRANSCRIPT

Page 1: #1NWebinar - Microinteractions: The Details That Delight

Microinteractions: The Details that Delight

Webinar

12 December 2013

Page 2: #1NWebinar - Microinteractions: The Details That Delight

Hi, there. Nice to meet you!

Page 3: #1NWebinar - Microinteractions: The Details That Delight

EFFECT

EFFORT

Microinteractions

Page 4: #1NWebinar - Microinteractions: The Details That Delight

So … What’s a Microinteraction?

Page 5: #1NWebinar - Microinteractions: The Details That Delight

ATOMIC DESIGN MOMENTS

Page 6: #1NWebinar - Microinteractions: The Details That Delight

Tiny, Humanizing Details

•  Delightful •  Humane •  Effective

Microinteractions make systems:

Page 7: #1NWebinar - Microinteractions: The Details That Delight

Microinteractions are the little details that separate something you tolerate from something you love.

Page 8: #1NWebinar - Microinteractions: The Details That Delight

MICROINTERACTIONSThe Details that Delight

Page 9: #1NWebinar - Microinteractions: The Details That Delight

Microinteractions are the final 1%, like the custom tailoring of a suit.

Page 10: #1NWebinar - Microinteractions: The Details That Delight
Page 11: #1NWebinar - Microinteractions: The Details That Delight
Page 12: #1NWebinar - Microinteractions: The Details That Delight
Page 13: #1NWebinar - Microinteractions: The Details That Delight
Page 14: #1NWebinar - Microinteractions: The Details That Delight
Page 15: #1NWebinar - Microinteractions: The Details That Delight
Page 16: #1NWebinar - Microinteractions: The Details That Delight
Page 17: #1NWebinar - Microinteractions: The Details That Delight
Page 18: #1NWebinar - Microinteractions: The Details That Delight

“The details are not the details, the details make the design.” —CHARLES EAMES

Page 19: #1NWebinar - Microinteractions: The Details That Delight

EXAMPLESFamiliar

Page 20: #1NWebinar - Microinteractions: The Details That Delight

Hey, here’s some text

Page 21: #1NWebinar - Microinteractions: The Details That Delight

Hey, here’s some text

Page 22: #1NWebinar - Microinteractions: The Details That Delight
Page 23: #1NWebinar - Microinteractions: The Details That Delight
Page 24: #1NWebinar - Microinteractions: The Details That Delight
Page 25: #1NWebinar - Microinteractions: The Details That Delight

SIGNATURE MOMENTSCreating

Page 26: #1NWebinar - Microinteractions: The Details That Delight
Page 27: #1NWebinar - Microinteractions: The Details That Delight
Page 28: #1NWebinar - Microinteractions: The Details That Delight

MULTI-PLATFORM EXPERIENCE

Microinteractions and the

Page 29: #1NWebinar - Microinteractions: The Details That Delight
Page 30: #1NWebinar - Microinteractions: The Details That Delight

YOU CAN USE!Ideas

Page 31: #1NWebinar - Microinteractions: The Details That Delight

MICROCOPY Every Moment Is a Branding Moment

Page 32: #1NWebinar - Microinteractions: The Details That Delight

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.

Page 33: #1NWebinar - Microinteractions: The Details That Delight
Page 34: #1NWebinar - Microinteractions: The Details That Delight
Page 35: #1NWebinar - Microinteractions: The Details That Delight
Page 36: #1NWebinar - Microinteractions: The Details That Delight

SPEAK HUMAN

What can we help you find?

Page 37: #1NWebinar - Microinteractions: The Details That Delight

IDEAS FOR YOUR SITE Transitions & Animations

Page 38: #1NWebinar - Microinteractions: The Details That Delight

Examples for Your Website

• CSS3 Transitions • CSS3 Transforms • Contextual Animations

Page 39: #1NWebinar - Microinteractions: The Details That Delight

FOR YOUR BRAND?What does this mean

Page 40: #1NWebinar - Microinteractions: The Details That Delight

“Details demonstrate that care has been put into the product and attention has been paid to the user and their needs.” —DAN SAFFER

Page 41: #1NWebinar - Microinteractions: The Details That Delight

We Experience

Moments Every Day

Page 42: #1NWebinar - Microinteractions: The Details That Delight
Page 43: #1NWebinar - Microinteractions: The Details That Delight
Page 44: #1NWebinar - Microinteractions: The Details That Delight

Thank you!

Page 45: #1NWebinar - Microinteractions: The Details That Delight

Resources

•  “Microinteractions”, by Dan Saffer microinteractions.com

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

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