can you wireframe 'delightful'?

41
Delight is that word we use to describe those pleasurable moments in digital and offline products, that make an experience just that little bit more fun. CAN YOU WIREFRAME DELIGHTFUL? BEN TOLLADY @tollady BEN ROWE @benhyphenrowe

Upload: ben-tollady

Post on 18-Nov-2014

1.336 views

Category:

Design


2 download

DESCRIPTION

Our talk slides from UX Australia 2014. In 2014, it’s no longer enough for our designed products and experiences to only be usable. Today’s modern audiences are exposed to an ever-increasing number of delightful, pleasurable and memorable experiences on a daily basis. Expectations are at an all-time high. In a world where the perceived value associated with delightful experiences can help set a product apart from the competition, how can we as the designers of experiences stay on top of our game? What is this intangible ‘delight’ thing anyway, and is it even possible to create it?

TRANSCRIPT

Page 1: Can you wireframe 'Delightful'?

Delight is that word we use to describe those pleasurable moments in digital and offline products, that make an experience just that little bit more fun.

CAN YOU WIREFRAME DELIGHTFUL?

BEN TOLLADY @tollady

BEN ROWE @benhyphenrowe

Page 2: Can you wireframe 'Delightful'?

DES TRAYNOR

Our inspiration for this talk camefrom this article : Some things can’t be wireframedhttp://insideintercom.io/things-cant-wireframed/

Page 3: Can you wireframe 'Delightful'?

An example of delight that the author mentions is Squarespace, which makes great use of beautiful imagery and typography …

Page 4: Can you wireframe 'Delightful'?

…but if we were to wireframe this page?It doesn’t convey the same feeling of delight at all.

Page 5: Can you wireframe 'Delightful'?

Another example the article mentions is the Keezy app. !

Keezy may never have been as delightful if it had been “wireframed”.

Page 6: Can you wireframe 'Delightful'?

RESEARCH AND ANALYSIS HELP SHOW YOU THE WORKFLOWS, USABILITY PRINCIPLES ENSURE IT’S CLEAR AND INTUITIVE, BUT

HOW DO YOU GET TO DELIGHTFUL? YOU’RE ON YOUR OWN THERE.

The article concludes by saying that designing for delight is difficult, risky and messy, and that there is no real trick to it. !

Which left us asking more questions.

Page 7: Can you wireframe 'Delightful'?

DESIGNING DELIGHT

So we wanted to take this opportunity to investigate further… !

Is there actually a formula to adding delight to the things that we’re creating?

Page 8: Can you wireframe 'Delightful'?

WHY SHOULDWE CARE?But first things first - Why

should we even care about Delight? !

Isn’t it just a meaningless buzzword anyway?

Page 9: Can you wireframe 'Delightful'?

ACQUISITION • Great First Impression • Memorable / Sharable

!

RETENTION • Happy Users = Loyal Users

Well, maybe. !

But Delight is what makes your users fall in love with your product. There are clearly benefits to offering a delightful experience.

Page 10: Can you wireframe 'Delightful'?

AARRON WALTER - DESIGNING FOR EMOTION

Of course - delight isn’t the be all and end all. !

As Aarron Walter has said, our products need to Functional, Reliable, and Usable first.

Page 11: Can you wireframe 'Delightful'?

MINIMUM VIABLE

DELIGHTFUL PRODUCT

That said, Delight isn’t something that you can just tack on. We need to be creating minimum delightful products, that bake in Delight from day one.

Page 12: Can you wireframe 'Delightful'?

BEAUTIFUL UI

Let’s have a look at some examples of delight. !

A beautifully designed interface, like AirBnB, is a common and obvious way.

Page 13: Can you wireframe 'Delightful'?

MICROCOPY

Microcopy helps break down any barriers that might exist between human and computer, reminding users that there are real people behind a product.

Page 14: Can you wireframe 'Delightful'?

ANIMATIONhttps://www.campaignmonitor.com/monitor/

Captivating animations like those used to create parallax scrolling effects is another common way to add delight. !

Campaign Monitor’s mobile app website does a great job of this.

Page 15: Can you wireframe 'Delightful'?

TRANSITIONS & INTERACTIONS

We mentioned Keezy before - it’s a wonderful example of how tactile transitions and interactions can make something delightful.

Page 16: Can you wireframe 'Delightful'?

SOUND

Done well, sound can also be used to delight. Like that lovely twinkling bell sound when you tick off a to-do item in Wunderlist.

Page 17: Can you wireframe 'Delightful'?

SURFACE DELIGHT

These examples are what we call ‘Surface’ delight. They are often very obvious and visceral.

Page 18: Can you wireframe 'Delightful'?

DELIGHT FADES

Surface delight can be very effective. But the problem with these types of delight is that they fade over time.

Page 19: Can you wireframe 'Delightful'?

DEEP DELIGHT

So we were interested in exploring if there was a deeper level of delight, beyond this ‘Surface’ level. So we explored a little further…

Page 20: Can you wireframe 'Delightful'?

INVISIBILITY “IT JUST WORKS”

A delightful user experience is often about Invisibility. Getting out of the user’s way. Or something that “Just Works”.

Page 21: Can you wireframe 'Delightful'?

FLOW

MIHALY CSIKSZENTMIHALY - FLOW

Deeper delight is also about getting users into a state of ‘flow’; that feeling of being completely absorbed in what you are doing, where nothing else seems to matter.

Page 22: Can you wireframe 'Delightful'?

iA Writer is a super simple writing app, and a great example of a product that gets you into a flow state.

Page 23: Can you wireframe 'Delightful'?

PAIN POINT DELIGHTGILES COLBORNE - CX PARTNERS

Pain points in an experience that are resolved effortlessly can actually become moments of delight. !

This is something that Giles Colborne has spoken about.

Page 24: Can you wireframe 'Delightful'?

VISCERAL ENGAGEMENT AND DELIGHT

!

BEHAVIOURAL HOW THE THING PERFORMS

!

REFLECTIVE WHAT THE THING EVOKES IN THE USER

DON NORMAN

Don Norman talks about a “reflective layer” of a design - Which isn’t about the product at all, but more what the product evokes in the user.

Page 25: Can you wireframe 'Delightful'?

PLEASURE SURFACE DELIGHT

!

FLOW REMOVE THE UNNECESSARY

!

MEANING INTEGRITY & AUTHENTICITY

DANA CHISNELL

Dana Chisnell describes a third level of delight - “Meaning”. !

This is where a deeper level of delight is felt through an organisation having values that align with the user’s.

Page 26: Can you wireframe 'Delightful'?

SAMUEL HULICK - USERONBOARD.COM

We realised that Deep Delight delight isn’t about your product at all, it’s actually about your user.

Page 27: Can you wireframe 'Delightful'?

IT’S NOT GAMIFICATION

VS

But let’s not confuse true delight with gamification. !

Delight isn’t about ‘badges’. It’s about helping users improve their skills, their health, and their lives …

Page 28: Can you wireframe 'Delightful'?

KATHY SIERRA - THE KICK ASS CURVE

…It’s about helping users “Kick Ass”, as Kathy Sierra put it. !

So we need to help our users get from “suck” to “awesome” as quickly as possible.

Page 29: Can you wireframe 'Delightful'?

• How do we get out of a users’ way? And into Flow?

• How de we over-deliver at the pain-points • How does our product align with their values? • How dow we help them “Kick Ass”?

GETTING TO DEEPER DELIGHT

So deeper delight is about understanding our users. !

It’s about knowing who they are, what’s important to them, and what progress looks like in their life, not just on their screen.

Page 30: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

Delight isn’t just a simple, single, one-dimensional thing. It’s much more complex an operates across multiple levels.

Page 31: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

is visceral

is often invisible

Page 32: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

is novel

has a higher purpose

Page 33: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

is fleeting

is ongoing

Page 34: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

is the first date

is the relationship

Page 35: Can you wireframe 'Delightful'?

SURFACE DELIGHT

DEEP DELIGHT

is product focussed

is user focussed

Page 36: Can you wireframe 'Delightful'?

DELIGHT IS AS MUCH ART AND ‘FEEL’ AS IT IS LEARNED SCIENCE

Delight is part science (where our UX skills come in) and part art. The art is about knowing when to apply just the right amount of delight, and at what level.

Page 37: Can you wireframe 'Delightful'?

A great example of an organisation has really nailed it is Simple bank. !

They manage to delight customers on multiple levels.

Page 38: Can you wireframe 'Delightful'?

SURFACEOn the surface, their UI is gorgeous and their microcopy is lovely and fun.

Page 39: Can you wireframe 'Delightful'?

DEEPBut at a deeper level, they understand what people really want from a bank.

Page 40: Can you wireframe 'Delightful'?

They create Meaning, and a deeper level of delight, by disrupting the ‘fees and charges’ model of most other banks.

Page 41: Can you wireframe 'Delightful'?

THANKS

BEN TOLLADY @tollady

BEN ROWE @benhyphenrowe