Demystifying Delightful Interaction Design PDF

Demystifying Delightful
Interaction Design
Copyright © 2015 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded
or posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed “Attention:

Permissions Request,” to hello@uxpin.com.
Index
Introduction7
Interactions: The Building Block of Delightful Design 9

Interaction Design Defined 10
The 5 Pillars of Interaction Design 14
Takeaway23
When Usability Isn’t Enough 24

The Visceral Satisfaction of Delight 25
Designing for Delight 27
Takeaway33
Don’t Delight for Delight’s Sake 34

Where Delight Fits Into UX Design 35
Where Delight Doesn’t Fit 37
Familiarity vs. Individuality 40
The Right Delight 42
Correct Approach to Delight 45
Takeaway46
The Art of Unforgettable UX Design 47

Inspiring Flow 48
Designing for Attraction 49
Designing for Emotion 52
Applying Delight To Transform Bad Experiences 59
Takeaway60
Delightful Design in Action 61

Only the Best Icing 62
Takeaway 73
Ryan Thomas Riddle is a UX Content Strategist at UXPin. He is an
award-winning writer for his work as a mild-mannered reporter
for the Bay Area newspaper, The Daily Post. His previous work
has appeared in the San Francisco Bay Guardian. Formerly, he
worked for ZURB, a digital product design company, as their
Lead Editor. You can read all about his adventures through time
and space on Twitter, @ryantriddle. You can find more of his writ-
ing on his personal website.
Co-founder and head of product, Kamil previously worked as a

UX/UI Designer at Grupa Nokaut. He studied software engineer-
ing in university, but design and psychology have always been
his greatest passions. Follow me on Twitter @ziebak
Jerry Cao is a content strategist at UXPin where he gets to put

his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter
With a passion for writing and an interest in everything anything

related to design or technology, Matt Ellis found freelance writing
best suited his skills and allowed him to be paid for his curiosity.
Having worked with various design and tech companies in the past,
he feels quite at home at UXPin as the go-to writer, researcher,
and editor. When he’s not writing, Matt loves to travel, another
byproduct of curiosity.
Introduction
The unexpected easily transforms what could be a bland, mediocre

experience into a delightful one. After all, we’d rather sit through a
movie with a lot of twists and turns than one that meanders toward
an ending. One is exciting. The other is not. But surprises aren’t
enough to sustain our attention. Surprises need substance. A movie
with plenty of twists and turns but a lackluster plot will only turn
off the viewer.
Image Source: Github
The same principle applies to product and service design. We all

want to be delighted in the products we use, but if it’s all style and
Introduction 8
no substance then we’ll likely abandon it as quickly as many of us

abandoned Farmville on Facebook. But when we think of delightful
interactions, it’s easy to only think of fun 404 pages.
However, delightful interactions aren’t just whimsical 404 pages or

easter eggs sprinkled throughout a site or product. They must be well
thought out without sacrificing usability for the sake of enjoyment.
There’s a fine balance so that you can thrill your users while at the
same time empowering them to better accomplish their goals.
In this e-book, we’ll cover why the importance of delight in interaction

design and how to use it without making your product completely
unusable. From the Five Pillars of Interaction Design to creating the
right delight, you’ll learn how to surprise your users without resort-
ing to the Dribbblisation of your product. To allow you to do just that,
we dissect examples from dozens of companies such as MailChimp,
Bitly, Medium, Carbonmade, Duolingo, Combatant Gentleman,
and Virgin America.
We’d love to hear your thoughts on this book, and feel free to share
the book if you find it helpful.
For the love of interaction design,
Ryan Thomas Riddle

co-written with Jerry Cao, Kamil Zieba & Matt Ellis
Interactions: The Building
Block of Delightful Design
The What & Why of Interaction Design
Before we dive too deep into dev veloping a delightful design, let’s talk
about interactions. Think of an interaction as a conversation between
your product and your user, and if the conversation is boring, your
user will leave and talk to someone more interesting. Interactions
are the essences of all user experiences. Without interactions, there
wouldn’t be any delight.
Photo Credit: “Interaction Design Disciplines”, Wikipedia. Creative Commons 2.0
It’s crucial in today’s world of infinite-scrolling websites and touch-driv-

en mobile apps to understand how interaction design (abbreviated
as IxD) helps create memorable user experiences that are fluid and
lifelike. As described in Interaction Design Best Practices Vol. 1, inter-
action design requires an understanding of multiple UX disciplines
– which makes sense, since it’s not easy to make a system of objects
and text be friendly, learnable, and useful.
Let’s start by defining IxD, breaking down the core principles, and
explaining a five-step process to better interaction design.
Interaction Design Defined
Interactions are part of our daily lives. Every time you make a decision
on a digital device – checking sports scores, returning your mom’s
email – you project your needs into a machine that must then respond
as though it knows you. IxD is about bridging the gap between the
device, the interface and the tasks we want to accomplish.
1. What is Interaction Design

Interaction design requires art and skill to move beyond hu-
man-to-computer interfaces and embrace human-to-human de-
sign. The skill of IxD is taking into account the human element
of your users, and in creating that human connection built from
human-to-computer interaction (HCI).
It’s important to distinguish IxD from UI. As discussed in the free

ebook The Guide to Mockups, the UI is what the user actually sees.
IxD is concerned with how users engage with the UI, and how that
UI will respond so users know how to accomplish their goals. As
a result, the users delight in the ease of an interface – which be-
comes part of their larger product enjoyment – forms the overall
user experience.
Photo Credit: “User Experience Treasure Map,” Peter Morville. Creative Commons 2.0
You can’t design a user experience any easier than a business can
just make more money, but you can certainly design better UIs and
interactions. That’s why IxD is so imperative – it makes the difference
between having a system that merely works, and having one that
your users will be delighted to use.
Your design is an extension of your brand. You need to think about

the UI as your digital staff, the “people” who facilitate interactions
between your “customers” and your “store.” Interaction design, then,
is how your digital staff engages with customers to meet their needs.
Naturally you’ll want your staff to be helpful, accommodating, and

friendly – that will make your customer enjoy shopping at your store.
But a poorly designed interface is like a staff that’s unhelpful, rude,
and, at times, doesn’t even do their job.
Making the right decisions in UI design is hiring the right staff. Mak-
ing the right decisions in interaction design is training that staff to
work in the most efficient and pleasant manner possible.
2. Why Interaction Design Matters

Frog Design’s Robert Fabricant has the perfect analogy that clearly
illustrates why feedback is the heart of IxD. Without feedback to
guide us, how would we know if an interaction accomplished the
goal we wanted. As he explains in his piece for FastCo.Design, the
evolution of the UI for the NYC subway is a prime example of how
technology is only as powerful as the interactions it produces.
If you’re old enough to remember subway tokens, that’s a good

place to start. You put the coin in the slot (the interaction), you
heard that satisfying click as the coin slid into the mechanism (the
feedback), and that was how you knew you now had access (the
goal). The sound of the coin falling into place was not intentional,
but rather an accidental interaction design decision, albeit a for-
tunate one. This action-reaction feedback loop is the groundwork
of all interactions, digital or analog.
Photo Credit: MTA of New York. Creative Commons 2.0
Then came the metrocard, which replaced the coin drop with a card
swipe. This made using the subway easier because people didn’t need
to carry around coins. However, the swipe was a little more difficult
action, and sometimes takes two or three tries to get it right. It also
didn’t create the click noise of a token sliding into place, signalling
people to lean into the turnstile.
While the metrocard certainly made life easier, some people still
preferred the tokens. The coins were simpler and gave immediate
feedback. Giving users the appropriate cues at the appropriate times
allows them to better interact with your product. If you app or site
doesn’t account for all the nuances and shortcomings of human be-
havior, then users won’t be quick to prefer it over the familiar.
The 5 Pillars of Interaction Design
As emphasized in Interaction Design Best Practices Vol. 1, good in-

teraction design is driven by a human connection. But what drives
human connection and how does that translate into a computerized
interface? The answers to these questions aren’t so black-and-white.
Thankfully Andrew Maier, designer and co-founder of UX Booth,
explains in an article for his site some of the core principles of in-
teraction design.
In our experience, we’ve found five concepts to be critical for even

the most basic interaction design.
Photo Credit: “Personas.” Nicolas Nova Creative. Creative Commons 2.0

1. Goal-driven Design
While you might not be the person who’s conducting the user re-
search (especially if there’s a UX researcher or UX designer around),
you still need to know how to apply the results. As Maier writes:
In every design discipline, the artist must first acknowledge their

constraints, and then devise a solution. In the case of interaction
design, users themselves generally form the basis of an interface’s
constraints.
So, discussing the goals of interaction design becomes very peo-

ple-centric, especially your target user. In our free ebook The Guide to
UX Design Process and Documentation, we outlined three fundamental
tactics for designing for your target user, which can be applied just
as well – perhaps better – to IxD specifically:
1. Personas – Personas are fictional characters created from the

behaviors and psychologies of your target users. Personas come
in handy as a reference when making crucial design decisions,
for example, “What kind of checkout process would Sally the
Seasonal Shopper prefer?” To take personas a step further, try
turning them into characters.
2. User Scenarios – Related to personas, user scenarios explain how

the personas act when using the site. For example, “It’s Black Fri-
day, and Sally the Seasonal Shopper has a long list of presents to
buy online before work.” User stories urge you to think critically
about your personas’ behaviors so you design the UI to suit them.

Kristopher Layon gives more details in this piece for A List Apart.
Photo Credit: “Design Jam London,” Yaal. Creative Commons 2.0
3. Experience Maps – Going one step further than user scenari-

os, experience maps chronicle all the different conditions sur-
rounding a single interaction, including emotions and external
circumstances. “Angry that her skiing trip ended in a broken leg,
Sally the Seasonal Shopper must do her Black Friday Christmas
shopping online – though as quickly as possible.” Chris Risdon,
Design Director at Adaptive Path, explains the anatomy of an
experience map in this post.
Following these people-centric methods for general design will

help you stay focused on what’s most important for your IxD: the
people. For more information on how personas and scenarios can
benefit your interaction design, we recommend reading this piece
on goal-driven design from Christina Wodtke, former General
Manager of Zynga.
2. Usability
In many ways, usability is the bare minimum of interaction de-
sign. If your audience can’t use your product, they certainly won’t
desire it.
For an example that goes above and beyond, let’s look at Eventbrite’s
seat designer. This online app lets event organizers create a re-
served-seating event from start to finish with a high level of detail
(such as determining rows, tables, and a dance floor, if needed). It
consolidates what otherwise would be a multi-step, multi-program
process into a single linear path.
Image Credit: Eventbrite via IXDA
Image Credit: Eventbrite via IXDA

A system’s usability should be effortless. The less attention the user

pays to figuring out how to use the system, the more they can accom-
plish the task at hand. For this reason, usability is essential – a system
must first be usable before you can work on making it desirable. To
learn more, ZURB illustrates how usability, utility, and desirability
are all required for good design.
3. Affordances & Signifiers

The concept of affordances is that a function should speak for itself,
and suggest its own use (i.e., a road affords walking). Signifiers
are what hint at the affordance (i.e., the road’s flat surface signals
you to walk with your feet).
One of the most common signifiers is the blue underline for link
text. This is a cue to almost every user that clicking on the text
will take you to a new page.
Image Credit: uxpin.com via Team Treehouse blog
Without signifiers, users won’t be able to perceive the affordance.
The play button on a video invites you to watch it, whereas a video
with no play button might be mistaken for a static photo. In the
above example, you can see the progression of button design. The
first stage lacks any signifiers and looks just like standard text,
while the third stage starts to resemble a button with its rounded
edges and gradient.
Photo Credit: iPhone 5s, John Karakatsanis. Creative Commons 2.0
Signifiers also work on a metaphorical level, because people also

need to know why they would interact with something, not just if it’s
possible. In the above iPhone example, you can see how the rounded
edges let us know that we can interact with the buttons, while the
metaphorical images (phones, envelope, musical note) let us know
what purpose is served.
4. Learnability
In an ideal world, a user would remember every function after
only a single use, but we do not live in idealism. The reality is
that familiarity and intuition must be consciously designed into
the interface.
Tesler’s Law of the Conservation of Complexity states that

every system has an immutable amount of complexity that must
be dealt with during development, specifically when designing

your UI. Successful interaction design boils down this complexity
into the most comprehensible manner through consistency and
predictability. For example, don’t make some links open in a new
tab while others redirect the user. Likewise, don’t use a lightbox
for some images while others open in a new tab.
Consistency creates predictability, which improves learnability,

which in turn enhances the overall experience. And like what we
said earlier, good IxD builds your brand. Consistency is one of the
ways that’s accomplished. It builds trust with your users.
Photo Credit: “Be consistent not uniform,” Paul Downey. Creative Commons 2.0
A common tactic for improving learnability is using UI patterns. Many

sites and apps already use these patterns so the user is familiar (plus
the design is consistent), and you’re still allowed plenty of creativity
to customize the design elements for your site.
Image Source: www.newegg.com
For example, breadcrumbs – the navigational strategy that lets

you know where on a site through its hierarchy – is a common
web pattern for helping users get around. It doesn’t matter what
site you’re on, if you see breadcrumbs, you understand how they
work. This familiarity lends itself to a product’s learnability. And
when products are learnable, it encourages people to use those
products, which also improves usability. And in turn, builds trust
and confidence in users.
Ultimately, the goal of learnability is to hook users on your product

faster, as explained in serial entrepreneur Nir Eyal’s best-selling
product design book Hooked: How to Build Habit-Forming Products.
For a fuller list of web UI patterns, check out the Pattern Tap by
ZURB and UI-Patterns (two of our favorite pattern libraries). We
also wrote this free e-book analyzing 63 of the most popular web
UI patterns.
5. Feedback & Response Time

As we saw by the NYC subway example, feedback is the heart
and soul of any interaction. If user interaction is a conversation
between a user and your product, then your product better par-
ticipate in a friendly, interesting, and helpful manner. If it doesn’t,

users won’t have trust in your product or brand.
Image Source: www.relateiq.com
Whether an elaborate animation, a beautiful micro-interaction, or

a simple beep, a response gives the user the satisfaction of knowing
if their task was or was not accomplished (and what to do next).
In this example from Hootsuite, the owl simply “goes to sleep” after
a long period of user inactivity, which makes sense since the app
pulls in data from Twitter (and doesn’t want to overload the API).
The feedback is intelligent and fun, and actually turns a possibly
negative experience (stopping updates) into a positive one.
It’s also important to mention that a key factor in feedback is

response time. The best response times are as immediate as pos-
sible, with any lag time killing the user’s momentum. If you don’t
understand why, imagine how infuriating it would be if you were
playing a guitar, and every note came seconds after strumming.
As described in the free e-book Interaction Design Best Practices
Vol. 1, the best IxD is barely there: the interface responds promptly
and don’t require much thought.
If you’d like more inspiration and examples of good interaction de-

sign, this Quora thread includes great sources ranging from films to
websites like Core77 and PatternTap.
Takeaway
Interaction design isn’t about how interfaces behave, it’s about how
people behave, and then adapting technology accordingly.
It’s a two-part challenge. First, you must know your target users on a
level that reveals what they like and what they expect. Second, you
must figure out how to satisfy those needs given your technological
constraints. If you get those right, you’ll have the building blocks to
create interactions that delight your users.
Now that we’ve got the basics of interaction design out of the way.
Let’s dive deeper into the finer points of creating a delightful expe-
rience in the following chapters.
When Usability Isn’t Enough
Why Designing for Delight is Important
As we said in the previous chapter, good interactions make a product

easy to use. But usability alone doesn’t make an experience memorable.
Consider the fanny pack.
In terms of function, fanny packs are incredibly useful – they have

enough room to hold all your everyday items, and their location on
the body is perfect for quick and convenient access, not to mention
weight distribution that allows you to forget you’re carrying anything.
Plus, they’re a lot safer for protecting against pickpockets.
On paper, fanny packs should have revolutionized the way the world
carries their belongings. The innovators behind the fanny pack may
have designed one of the most useful products of the century, and yet
they failed to account for the one aspect which killed their popularity.
Fanny packs don’t delight users because they’re ugly and garish. You
feel shame and embarrassment wearing one.
Photo Credit: “Childhood Fanny Pack,” Michelle Roy. Creative Commons 2.0
Who would pay that price for practicality?
There’s the notion that new products should fulfil a need in order to
be successful. Sure, that’s true. But it’s not the whole truth. However,
no matter what the product is – whether a new app or a means to
hold your wallet – there’s always one need that must be met.
Products must delight users.
The Visceral Satisfaction of Delight
In an article for UX Mag, Morgan Brown and Chuck Longanecker

describes what we’re talking about as visceral design, or simply
“designing for the gut.”
Visceral design creates an emotional connection between the user

and product, which makes the user want to continue using the prod-
uct, sometimes to an addictive level. The gaming industry has long
leveraged this, and it’s since been applied to web and app interfaces.
What the gaming industry knew all along is that by giving the user
that special kind of delight in the form of feedback, they’ll want to
come back for more.
Photo Credit: “Atari 2600A,” Brian Vasconcellos. Creative Commons 2.0
Don Norman takes this a step further in Emotion & Design: Attractive
Things Work Better.
He explains that the human decision-making mechanism is based on

emotion, as a result of millennia of evolution, and is not just unique
to humans. Our instincts have been honed so that we’re able to make
snap decisions based on our immediate emotional responses. The
feeling of fear from seeing a snake will induce an adrenaline spike
that will help us flee if necessary. Likewise, a feeling of joy at the
site of delicious food or a loved one will induce an oxytocin bond to
makes us want to come back for more.
What this means for design is that usability should be treated as

just the bare minimum for product design. To be sure, usability is
delightful, but only to a certain extent. Anders Toxboe, designer for

Bonnier Interactive, makes the case that, while usability will satisfy
your users, the satisfaction is short-lived.
To be loved, an interface requires far more than functionality.
Designing for Delight
Designing for delight is not as subjective as it sounds.
There are volumes of psychology and a rich history of trial-and-error

to draw from. We’ve analyzed some tips from this excellent Treehouse
blog post by Aarron Walter, UX director at MailChimp and some
advice from Brown and Longanecker (mentioned above). Of course,
we’ve also sprinkled in our own personal experience on the topic.
1. Focus on aesthetics
While it may seem superficial to focus on looks over substantiality,
history shows that looks are substantial (in fact, Norman explains
how delightful products are more quickly learned and used with
better proficiency). If a cutesy mascot is too cheesy, you can still
add stimulating visuals to almost any design.
Like we described in Web UI Design for the Human Eye, vision

is the strongest of the human senses from a design standpoint.
Unless the user forms the right first impression, they’re likely to
leave your site after 10-20 seconds. After all, we put our faith in
aesthetics and gravitate to products that are polished.
Image Source: Combatant Gentleman
Combatant Gentleman is a really good example of using aesthetics

to create a moment of delight. The suit seller provides a fairly clean
front, back and pant view of all their suits with a click. Moving the
cursor along the suit provides a more detailed view of the suit in
the window pane next to it – which is a bit of a pleasant surprise.
Another way to use aesthetics to your advantage is to add anima-

tions, sounds and transitions. As Ben Rowe points out in his stel-
lar piece on delight, these are the minimum you can do to bring
delight to an interaction. That being said, it does work.
Let’s look at MailChimp.

Image Source: UXPin via MailChimp
This is MailChimp’s mobile preview for email campaigns. As you

can see, it shows you what it’ll look like on a mobile device, framed
within a smartphone. With a simple click, the image on the left
will rotate to show what the email will look like in a landscape
view. It’s a surprising touch, which is actually quite useful.
Which brings to mind that you shouldn’t neglect the other areas of
design. Just as the joy from a purely usable product is short-lived,
so too is the satisfaction from a product that relies only on its looks.
You’re trying to construct the complete package here – designing
for delight is not an excuse to ignore usability.
You still need a foundation of functionality and usability, but the

pleasure factor helps you rise above the competition.
2. Use feedback to drive conversation

As we said in the previous chapter, feedback is the heart of an in-
teraction, and every interaction is a conversation with users. Our
goal as designers should be to make the technology as “human”

as possible so every interaction feels more natural. We can use
feedback loops to accomplish this while furthering the conversa-
tion between the user and the product.
Start with the basic points of interaction – registration, confirma-

tions, error messages, sales. Then, think of more opportunities to
talk with your users (without being too “chatty,” of course). Utilize
these and think of them as opportunities to be more conversa-
tional. Feedback doesn’t have to be mechanical – infuse a little
personality in your communications.
Let’s look at MailChimp again. The email service provider under-

stands the nervousness with the first time you’re about to email
an entire user base, and rewards users with humor.
Image Source: MailChimp

Once the email campaign is queued, MailChimp again uses humor

to lighten up an otherwise tense situation.
Finally, when the emails are actually sent, MailChimp encourages

you once more. With these three microinteractions, MailChimp
becomes more than just another marketing routine – it’s actually
kind of fun.
3. Give a gift
You can alway delight users through bribery, even if you’re only
phrasing an existing feature as a gift. When the user feels like they
were done a favor, they’re more likely to return the favor.
Image Source: Vanseo Design

If your design permits, try to give away small gifts (like free newslet-
ters or a sample chapter for a book as designer Steven Bradley does
for his excellent web design e-book) in exchange for a link, referral,
or purchase. This concept ties in closely with the principle of reci-
procity for UX.
4. Leave little easter eggs

People generally enjoy surprise treats more than expected ones.
Photojojo uses unexpected and cute animations to infuse a little
fun into the experience. For example, clicking the “Add to Cart”
buttons creates a “+1” balloon that floats up to the cart icon in the
upper-right corner.
Image Source: Photojojo
While some indicator in the cart is expected, such a pleasing visual

is not, making more of an impact.
If you’d like to learn more about personality in design, we highly

recommend the book Seductive Interaction Design.
Takeaway
A lot of designers subscribe to school of minimalism – they strip their

interfaces of everything except that which is absolutely necessary.
This works in some cases. The checkout process, for example, should
be as simple and speedy as possible. But minimalism and delightful
elements are not mutually exclusive.
Don’t be afraid to include a flourish here and there that, while not
mandatory for usability, brightens the mood and makes an emotional
impact on the user. Those can make the difference between a prod-
uct that’s usable, and a product that’s lovable. But remember, those
are just the bare minimum for creating a delightful product. There’s
much more that goes into it than adding a few flashy elements or
pretty pixels, as we’ll get into in our following chapters.
Don’t Delight for
Delight’s Sake
Why “Delight” Is a 4-Letter Word in Design
No, we’re not monsters. We don’t think the Internet should be de-
void of fun and/or laughter. The truth is that we find delight rather
delightful. As we highlighted in our previous chapter, our problem
is when it takes priority over usability or function.
Delight for delight’s sake is a mistake. But fierce competition might

convince designers to take the shortcut – designing a clever site in-
stead of a useful one.
Photo Credit: “Truly delighted,” Muhammad Rehan. Creative Commons 2.0

While it may be tempting to hide a site’s poor interface behind a

goofy mascot or cute icons, ultimately it’s a poor solution. Memorable
mascots certainly have their place in design, but it’s not at the head
of the pack.
In this chapter, we’ll dive into how delight fits into creating an overall
experience while not sacrificing usability and function.
Where Delight Fits Into UX Design
The truth is, a lot of the human decision-making process relies on

feelings and emotions instead of logic – a good case for designing for
delight. As we’ve said previously, humans make split-second decisions
based on an emotional mechanism. It’s our flight or fight response
that tells us to run in the face of a predator. That same mechanism
also causes delight at seeing loved ones, which reinforces our rela-
tionship bonds.
While we no longer need to flee from predators on a daily basis, those

instincts are firmly ingrained. That means users will feel a closer
connection with a site that delights them than one that’s useful but
boring.
These delightful quirks work great for promoting your site’s personal-
ity. A cute mascot, playful word choice, game-like interactive elements,
or fun sound effects can all instill excitement into an otherwise dull
design, not to mention set you apart from your competition. They can
be the exact flourish your design needs to complete itself... as long
as you recognize where it fits into the grand scheme of user needs.
Image Source: Silverback
A design should be delightful. But it shouldn’t be only delightful.
Rather, delightful elements should be the icing on top of the cake. This
isn’t just a colorful analogy, though. To better understand the role of
delight in web design, let’s look at Abraham Maslow’s Hierarchy of
Needs, published in 1943 to prioritize the basic human needs, which
you can see in this image. Aarron Walter further took this concept
and applied it to web design.
A pleasureable experience makes up a large chunk of the “hierar-

chy of user needs,” so delightful interactions are not completely
disposable. But in the grand scheme, pleasure is the least important
element – it’s only a concern after the functionality, reliability, and

usability are satisfied.
Delightful elements are not quite an “extra” factor (no one wants to
eat a cake with no icing), but they’re not quite one of the fundamen-
tals. They exist somewhere in between “necessary” and “nice.” But
the problem arises when designer overesteem the value of delight,
and center the whole process around it.
Where Delight Doesn’t Fit
As Glenn Gould once said (sang), “Never be clever for the sake of
being clever.”
Photo credit: “Our Fair Share of Hipsters”. Christopher Michel. Creative Commons 2.0.
Delightful design is only a problem when it gets in the way. Harking

back to Maslow’s pyramid, once all the fundamentals like usability are
firmly established, you’re free to be as charming and cutesy as you
like – as long as it doesn’t undermine the more important elements.
In his excellent article “Hey Designers: Stop Trying to Be So Damn

Clever,” Randy J Hunt of Etsy lists out the most common ways that
delightful design impedes a website’s more practical purposes:
• Incongruency with personality – Depending on the site, more

casual elements can undercut the seriousness of the message, much
like wearing shorts to the office. Sure, some sites benefit from a
cheeky tone to break the mundane professionalism, but not all –
say a health service provider or government agency. Staying true
to your own message is more important than working for a smile.
• Misapplication – Gestures, patterns and creative word choice

are all good things, but only when used correctly. An overzealous
application can lead to confusion and usability issues.
• Confusing titles – We see this all the time. Sites say something
like, “Great, let’s go!” instead of simply “Submit,” which leads to
momentary confusion and hesitation. It’s fine to add some per-
sonality, but always ask yourself if the interface feedback is clear
enough to guide a total novice. If not, stick with the basics.
• Unnecessary features – This is a problem not just in web design,

but in product development the world over. To get an edge over
their competition, companies will release “improvements” that
are byproducts of HIPPO egos. This mentality leads to feature
creep, where both product managers and designers are trying to
leave their mark on a product. Delightful design easily becomes a
crutch for usability issues. Instead, try first conducting usability

tests to see if there’s something useful you can actually improve.
Delightful design is not a chance to live out your faded dream of

being an entertainer. It’s not a license to pat yourself on the back
for your own wit. Delight, like all other aspects of design, serves a
specific purpose with specific parameters, so don’t overstep those
boundaries.
Photo credits: “sad clown”. Hernan Pinera.. Creative Commons 2.0
John Pavlus, in a FastCo Design article, tears delightful design apart

for similar reasons. He calls it “superficial,” as the “delightful” fea-
tures gear more toward cosmetic than actual usefulness. He chastises
designers’ exhaustive efforts to predict the things he’ll like, in a way
that seems almost pandering. But he also brings to light an important
point about delightful design – surprise.
At the core of delightful design – the useful kind – is surprise. When

users first see a reward, read a joke, or find a discoverable, it sparks
that good feeling that designers wish to recreate. But a large part
of that is the surprise, to say nothing of the uniqueness. Excessive
delightful elements kill that – they make these experiences common,
and then expected.
Delightful design elements work best as treats. Remember, however,

you can’t eat chocolate cake every day.
Familiarity vs. Individuality
One of the biggest arguments for delightful design is that it showcases

the site’s individuality, which is undoubtedly a good thing. But again,
the takeaway here is moderation: focusing too much on individuality
can distract from first thinking about usability and usefulness.
Familiarity is a tool just as powerful as individuality. Javier Bar-

gas-Avila posted an eye-opening article on the Google Research Blog
about a study conducted on how users determine that all-important
first impression. The results showed clearly that users favored fa-
miliarity (as well as simplicity). All other factors being equal, users
will perceive familiar sites as more beautiful than less familiar sites.
In Bargas-Avila’s own words:
“Designs that contradict what users typically expect of a website

may hurt users’ first impression and damage their expectations.”
Social media sharing tends to work with that same “herd” mentality.
Users will think twice about sharing something too different than
what they’re used to, simply out of fear of what their friends will think.
Source: “Individuality,” Travis Swicegood. Creative Commons 2.0.
Perhaps the greatest advantage of familiarity is in usability. Imple-

menting well-known UI patterns saves time in explaining functional-
ity and gives your interface that comfortable “intuitive” feel, letting
first-time visitors feel they’ve used it before. You can even get creative
about your use of patterns to show your individuality, as long as the
core features follow the “Most Advanced Yet Acceptable” principle.
In other words, push for new ground but not at the expense of us-
ability.
The Right Delight
The best delightful designs are the ones that improve the product
overall. They’re not just present for flair, they add something to ex-
perience as a whole – the way icing improves the taste of the cake.
Stefan Klocek dissects the how to design a “delightful, magical ex-

perience” in an incredibly insightful article for Cooper. He calls it
passive magic, and lists the following attributes:
1. Transformation – There must be some change to add meaning,

utility or a useful action.
2. Instantaneous – Hesitations will flatten the surprise and magic

of each micromoment.
3. Uniformity – The action should coincide with the other elements

of the site. Otherwise, the action will be jarring.
4. Subtle – Whatever is happening shouldn’t distract from the ex-

perience as a whole.
5. Minimal Preparation – It shouldn’t involve work or effort.
The best kind of delightful designs follow the iceberg principle: there’s
much more than you can see on the surface. The less the design draws
attention to itself, the more “magical” the experience seems.
Duolingo, for example, adds a natural element of delight through

gamification. Unlike some language learning apps that feel strictly
academic, Duolingo lives on the exact opposite end of the emotional
spectrum. Colorful, cartoonish, and even featuring an owl mascot,
Duolingo allows you to earn “Lingots” (in-app currency) as you
progress in your language. You can then redeem the currency for
challenges like timed quizzes - we know, it sounds boring, but the
execution is so charming that it’s actually fun.
It’s surprisingly rewarding to see a “lingot” achievement notification

pop up as you slowly master your language of choice. In this case, the
UX trick fulfills the criteria of delightful design. The lingot achieve-
ment is mostly unexpected, it’s certainly transformative (since you
can actually use what you earn), it happens without thought, and
definitely without effort.
Photo credits: Duolingo

More importantly, the interface is friendly, inviting and stupidly

simple to use. It strikes just the right emotional chords for someone
who has finally taken the initiative to finally start learning a new
language).
Image Source: Duolingo
Now compare this to a website that overuses a jokey tone for the sake
of appearing clever. Which is more useful? Which is just for show?
The further you iterate your designs, the more you need to consid-
er (and reconsider) how the whole experience feels. It’s easy to get
lost in Dribbblized visuals and slick interactions, but never forget
the purpose of design is to present information in a way that helps
people accomplish goals.
Usability is your entree and delight is the sauce. Add just enough
delight to make the functionality memorable, then get out of the way
and let the product speak for itself.
Correct Approach to Delight
Delightful design is about knowing what your users want, what they
like, and what they’d appreciate...so the first step is knowing your
users. If one of delight’s best uses is showcasing personality, as we
explained earlier, then you’ll want your entire design to “get along”
with your target user. That involves knowing them inside and out.
For this, we rely on personas. As we explained in Web UI Design Best

Practices, personas are fictional representations of your target users,
built from real user testing like interviews, surveys or field research.
This data is then compiled into individual personas that represent
the target user group as accurately as possible. Studying your users
and their behaviors will give you an idea of what they need from
your site.
Image Source: UXPin Persona Tool

Basing your designs on concrete research about your users will pre-
vent you from doing something for the sake of delight. You will always
have a user-focused reason. You’ll never end up with saccharine or
trying-too-hard design.
Takeaway
Designer Dave Gorum says this about his approach to delightful de-
sign:
“My rule was and is to add fun up to the point that it distracts
from the message.”
That more-or-less sums it up (though it’s nice to know the specifics).

Designs, and websites in general, should be fun – or at least interest-
ing if fun is not an option due to professionalism or content. But the
moment that fun encroaches on usability, functionality, or reliability,
it stops being fun.
What delights your user most isn’t clever wordplay or superfluous in-
teractivity – it’s a product that always accomplishes what it promises.
The Art of
Unforgettable UX Design
How delight captivates users
As we stated previous, a pretty website or application with sizzling

animations, easter eggs and freebies isn’t enough to seduce users. It
might draw their eye, but that doesn’t necessarily mean that they’re
going to be sticking around. And it’s certainly not enough for them
to fall in love with your product.
Any relationship worth its salt starts with a courtship. When you’re
trying to get someone to fall in love with your product, the same
principles of courtship apply. Try too hard, you’ll repulse users. Don’t
try enough, and they’ll pass you over.
Photo Credit: “UX Hierarchy of Needs,” Rob Enslin, Creative Commons 2.0
As UX consultant Stephen P. Anderson explained in his insightful book

Seductive Interaction Design, an enticing interface requires a good
degree of subtlety, tact, charm, and honest understanding of users.
In this chapter, we’ll explain how to take advantage of human psy-

chology and emotional design to create an alluring charm to your
interface.
Inspiring Flow
An alluring interface is designed to put the user in a state of flow –

a mindset in which they are so focused on interacting with your
product, they forget the rest of the world. Mihaly Csikszentmihalyi,
in his book Flow, explains that this is the optimal experience because
the user focuses on their work, and the interface becomes only an
invisible hand guiding them along.
The way to inspire flow is to constantly and rewardingly engage the

user – “seducing them,” in other words. Paul Trenchard-Seys, UX
Designer, puts forth that an engaging experience is not only fun, but
also easy and productive. To create such an experience, at least two
factors are needed:
1. Control – The user must feel in control the entire time. This is
why seduction favors subtlety over aggressive approaches. This
also helps build trust with the users, who’ll feel more confident
using the product.
2. Achievement – Obviously, the user needs a purpose for using

your product, whether business or pleasure. Beyond the main
goal, the sense of achievement can be bolstered by positive and
well-placed feedback from the system.
While a simplistic viewpoint of the much more complex field of in-

teraction design, creating this “flow” in your users is a nice, simple
goal to chase throughout the rest of the design process.
Designing for Attraction
Still other experts, like Stephen P. Anderson, go into more detail about
how to get your users into a state of flow. To him, the first step is
understanding as much as possible about people.
Photo Credit: “Personas,” Travis Isaacs, Creative Commons 2.0

The better you know your users, the more you can deliver delight-
ful surprises as part of the experience. Anderson brought up some
tactics to make your website or app more attractive to the common
person, which we’ve found highly effective in our own experience:
• Social Proof – Most people follow popular opinion, so if your

product seems popular, its perceived value increases. If you don’t
have the numbers to parade openly, even a few considerate testi-
monials will help.
Image Source: Intercom

• Scarcity – Just like an exclusive club, scarcity adds the allure of
something not everyone can have. Offering limited promotions or
even a private, invitation-only beta version of the product can gen-
erate more excitement from non-users than the users themselves.
Image Source: Amazon

• Recognition Over Recall – The more the user must think, the less
they’ll enjoy the product. Design your interface with recognizable
patterns so users don’t need to relearn basic controls. For example,
link text should be labelled the same as the headlines of the linked
content. ZURB has collected some great examples of recognition
over recall.
Image Source: Apple
• Sensory Integration – Stimulating more of your users’ senses

will engage them deeper. Aside from visuals, this can only apply
to audio effects/music, or some creative use of gesturing in mobile
devices. For example, the Wunderlist app plays a pleasant bell
chime when you complete a task.
• Visual Superiority – While sensory integration is welcome, vision

remains the dominant sense. Design your interface along a solid
visual hierarchy so that it looks as good as it functions.
Because so much of interaction design concerns human experiences,

you must design for what the brain cares about (which is different
than what the conscious mind cares about). To design for a brain
that’s evolved over a long period of time, you’ll need to incorporate
beauty, visual variety, and of course emotion.
Designing for Emotion
While we’re on the topic of the human element, let’s explore emo-
tion in interaction design. First we’ll explain the difference between
usability and enjoyment, and then we’ll discuss some practical tips
for designing emotional experiences.
1. Understand Usability vs. Enjoyment

This chart shows a hypothetical product with features that are
usable, but not enjoyable. Despite having a product that works –
perhaps one that’s even ground-breaking or revolutionary – the
chart shows that good usability can still lead to poor product
adoption, and thus, failure.
Let’s examine Abraham Maslow’s Hierarchy of Needs once again

to better explain this situation.
Here’s how we prioritize our basic human needs:

Photo Credit: Marcin Treder, UXPin
As you can understand, a homeless person who comes into some

money will likely spend it on food or shelter instead of a psychol-
ogist appointment – physiological needs hold more weight than
self-actualization needs.
And, as we’ve shown in our previous chapter on interactions, Aar-

ron Walter has applied Maslow’s work to interaction design. Any
user interface must first provide functionality as the foundation of
the experience, then reliability, usability and, finally, pleasurability.
Usability goals remain core to interaction design. But once they

are fulfilled, there remains a lot of room for improvement. In
Walter’s view, the peak of the pyramid – pleasureable design – is
what other designers most often neglect.
For example, let’s look at Wufoo. It applies shapes, colors, and ty-
pography in a way that makes the mundane task of form creation
actually feel fun.
Image Source: Wufoo via Emotional Design as the Gateway to Passionate Users by Aarron Walter
As cofounder Kevin Hale explained in 2012, they took the opposite

direction of their competitors by designing the app to look like
something out of a Fisher-Price product lineup. Wufoo’s design
is highly usable since the core actions are smooth and intuitive,
but it’s desirable presentation makes it stand far above its cook-
ie-cutter database competitors.
Wufoo works better and looks better, which makes it feel better.
Don’t make the mistake of designing only for usability. Make sure
you design experiences that also fulfill emotional needs.
2. Focus on Delight
One of the reasons a lot of designers miss the top part of the pyr-
amid is because it’s difficult.
Knowing whether something is usable is relatively easier – a test

can determine if it works, and some troubleshooting options can
solve the problem if it doesn’t. But how can you determine if your
interface creates an emotional response or not? That’s a little
trickier to test.
Once again we turn to Walter, who applied Maslow’s Hierarchy

of Needs to interaction design, elaborates on the importance of
emotion in design, and how to manufacture it. There are in fact
a handful of helpful tips discovered by the experts that can guide
you into developing the UX your users wants:
Let’s review again some of the tips we mentioned in our chapter

on “Usability is Not Enough” on crafting delight with a few more
added. Once again, these come from Walter and other UX experts.
a. Appealing Visuals – While a delightful mascot may seem cheesy

to some, its appeal to users is well-known. If you’re shying away
from something as silly as a bird or chimp, you can still draw an
emotional response from a pleasing visual presentation.
Image Credit: Betterment

b. Discoverables – People generally enjoy surprise treats more than

expected ones. The Facebook iOS app makes sci-fi like sounds
whenever you refresh the app or like a post. In fact, any action
you take results in a delightful sound effect.
c. Purposeful Animation – Animations communicate meaning in

a visually delightful package. In fact, they’re so effective that we
actually created our own animations editor to make them easi-
er to prototype. For instance, when you minimize a window on
Mac OSX, the genie animation adds some visual flourish while
letting users see where their tab relocated. It’s delightful because
it’s helpful.
d. Trust – This should go without saying, but if users don’t trust you
– i.e., product pictures don’t match descriptions – they will turn
off emotionally. It’s best to be honest with your content and me-
dia, albeit with your best foot forward. Like we previously dis-
cussed, personality and social proof are also some of the factors
that build trust.
e. Reciprocation – When the user feels like they were done a favor,
they’re more likely to return the favor. If your design permits, try
to give away small gifts (like a sample chapter for a book as au-
thor Nir Eyal does for subscribing to his newsletter) in exchange
for a link, referral, or purchase.
Image Source: www.nirandfar.com
f. Personalization – When your interface responds to a user with-

out them disclosing information, you can create an immediate
rapport. You can implement this on a complex level (like Quora
does with its recommended content) or with a simple touch like
a “Happy [day of the week]” message.
g. Novelty Surprises – As we described in Interaction Design Best

Practices, Vol. 1, the core functions themselves should be predict-
able (e.g. a popup form shouldn’t redirect users after clicking
“OK”). Surprise only works to your advantage when it adds delight
rather than affect the function.
For example, when you try to type in a fake email on FunnyOrDie,

the interface becomes quite sarcastic. It’s a surprising reaction
that matches the brand’s irreverent content.
Image Credit: Funny or Die
Just as with human interaction, the more personality you show,

the more it will polarize you. This means if you make a statement
like, “Fantasy is better than sci-fi,” fantasy fans will love and ap-
preciate your site much more, but you will lose some sci-fi fans.
While eliciting an emotional response can occasionally backfire,

it’s better to stir something in your users than nothing at all.
Applying Delight To Transform Bad Experiences
One last note before we wrap up: designing for human interactions
can do more than just create an enjoyable UX, it can also reduce the
amount of displeasure for unavoidable errors.
Image Source: Mint
Smart websites have fun with their 404 pages, as you can see by Mint
above. When done right, even error messages can delight users.
The interaction design for this 404 page is perfectly executed. The
humor deflects the frustration of the moment, while the fun employ-
ee information instantly creates a human connection. All this isn’t
done at the cost of usability, of course, since suggested links are still
provided to help the user access the content.
This example perhaps epitomizes the power of seductive interaction

design. When we play to basic human needs (such as humor/fun),
our interaction design can even transform negative experiences into

positive ones.
For more inspiration, Smashing Magazine compiled a list of their 50

best 404 error pages.
Takeaway
Seductive design isn’t about tricking your user into behaving a certain
way. It’s about getting them to want to behave that way on their own.
You shouldn’t be deceitful or manipulative – it’s just a matter of cre-

ating an interface that’s enjoyable enough so that users want to use it.
Words and phrases like “engaged” or “in the flow” are just synonyms
for “having fun.” If you want users to keep coming back, you need
to incorporate the foundations of any good human relationship: be
helpful, reliable, understanding, and interesting.
Our goal is to help you understand that interaction design isn’t just
about creating interfaces. It’s about mastering human-to-human de-
sign, because your goal is to make the black box of technology feel
as empathetic and alive as possible.
Delightful Design in Action
4 Memorable Examples of Delightful Design
Now that we’ve looked at the why, how and when you should use
delightful design, it’s time to look at a few good examples. After all,
some websites provide us a service, other websites make us smile –
but the best ones do both.
Photo credit: Duolingo
As we warned, however, a website that only offers delight – no sub-

stance, just gimmicks and colorful mascots – don’t last long in our
minds when the initial glamour fades.
The best sites, products and services are the ones that go above and
beyond. They serve their purpose first and foremost, and then offer
that little something extra. And while no one can really put into words
what that “little something extra” actually is, you can get a good idea
by looking at the examples in this chapter.
Only the Best Icing
Delightful design is the icing on the cake, but only the very best icing
– sometimes even the best part of the cake. A dry and bland cake is
unappetizing, and if there are better options available (more colorful
and sugary options), hungry users will choose them. But, on the oth-
er hand, no matter how delicious and tasty your icing is, not many
people can stomach eating icing alone.
Let’s explain what we mean. These following sites are the whole
package: a solid premise, a functional interface, comprehensive us-
ability...and that little something extra.
1. Bitly
Bitly is a good place to start, as it’s a well-known brand these days.
The reason it’s popular is because, in the earlier era of the Internet,
it provided a service that was greatly needed and appreciated.
Bitly shortens URLs to only a few characters, making them “bite-
sized” so that, when sharing links, you don’t overwhelm people
with long streams of incoherent letters and numbers. It’s a perfect
example of how, with a little ingenuity, you can create your own
niche-market where no one else has looked before.
That’s the core appeal of Bitly, and we’d guess that, with a less
interesting interface, they’d still have some success on the fulfill-
ing that service. But what makes them stand out is the delightful
interaction design.
Source: Bitly
The site executes its simple functionality flawlessly. Users only

need to copy and paste the link in the top left corner, and a side
menu immediately slides out to show the new shortened link
along with simple icons that allow for archiving, editing, tagging
or sharing the link.
You can go from the most complex link to an automatically-tracked

short URL in one click, which creates a momentary sense of magic.
When framed inside of its fun colors and blowfish cartoon char-
acters, the overall experience is certainly memorable. Add in the
intuitive link-tracking and metrics display, and the experience be-

comes slightly addicting – you want to see which links are clicked
more than others, and investigate why.
As UX designer Ben Rowe explains, there’s two layers to delight-

ful design: the surface layer and the deeper layer of flow. In this
case, the mascots and fun visual design comprise the surface layer,
while the “passively magical” interaction design forms the much
more important layer of experiential flow.
2. Medium
Delightful design is not simply fun colors and cartoons. As Rowe
was saying, the experience builds a stronger connections, so de-
lightful design relies on empowerment through usability – which,
as we’ve pointed out before, requires far more than a cutesy mascot.
One of the most popular blogging platforms, Medium uses a trade-

mark minimalist style, a heavy dose of white, and no cartoons or
wild colors whatsoever. The reason it’s on our list of delightful
sites is the simple yet powerful experience.
Their minimalism extends beyond looks: by refocusing on the

actual experience of writing, the site is naturally easy to use
and understand for first-timers. You aren’t distracted by widgets,
plugins, or any themes to select. That’s not to say the style is bland
or lacking – the elegant typography, intuitive controls, and infinite-
ly-scrolling news feed all create a visually distinct first impression.
Source: Medium
But beyond the surface layer of visual delight, the simplicity is only a
vehicle for the user to concentrate on writing. Medium is the perfect
example of invisible design because it provides just enough interface
to accomplish the core user goal, then gets out of the way and lets
the magic happen on its own.
Through an applaudable use of hover and hidden controls, Medium

offers all the essential options to its users (upload images/video, em-
bedding content, etc.) without bogging them down. Unlike a tradi-
tional Wordpress experience which feels more like being in “content
management mode,” Medium combines the writing and uploading
process into one creative flow.
To take it a step further, the editing interface looks nearly identi-

cal to the live interface, which makes users feel like they’re adding
their genius to a blank slate instead of switching between states.
The paper-like layout entices you with the anticipation of creation,
empowering even the most amateur blogger to be a Hemingway in

front of a typewriter.
Photo credit: “Power of Minimalism,” via Medium
Medium offers extra finishing touches reflecting their ingenuity.

Each post shows an average reading time so you know what you’re
getting into. On a purely functional level, the interface even allows
for users to copy/paste images straight from Google Docs without
drag-and-dropping or re-uploading (a nice surprise for bloggers who
have grown use to the tedious task).
Photo credit: Medium
None of these subtleties are required for a decent blogging platform,

but they elevate the design to a delightful level precisely because
they are unexpectedly helpful. These features don’t just make users
smile, they make them better at what they do. If you want to create
meaningful delight, always strive to incorporate these “magical dis-
coverables” into your interaction design.
3. Carbonmade
What happens when you mix a solid experience with fun colors
and cartoons? You get something like Carbonmade, a site that
allows professionals to create online portfolios painlessly.
Image Source: Carbonmade
The deeper level of their delightful experience – the important

base of the pyramid – is the ease with which users can create their
online portfolios. As the creators explain, the inspiration for the
site came from their personal irritation at how expensive or an-
noying it was posting their own illustrations online.
On first impression, the site certainly fulfills the surface layer of

delight with stylized elements appropriate for its designer user
base: lighthearted copy, vibrant colors and a generous use of fun

animal icons. The visual treatment certainly captures your at-
tention. In fact, the onboarding message even boldly claims that
Carbonmade will drop users right into the experience without any
boring tutorials or explanations.
As you dive a bit deeper, you’ll see they’ve certainly fulfilled their
promise with a smooth experience that feels like the Medium of
portfolio sites. Create your project, drag and drop the works you’d
like to show off, type in the text in the left-hand sidebar, and the
changes automatically reflect in a true WYSIWIG interface.

Want to update your profile? Just type it in the sidebar, and you’ll
see the new text exactly as it would look live. Instant gratification.
While more advanced users will need to upgrade to a paid plan

for more personalization, even the free plan has helped the user
build a ready-for-primetime portfolio in less than 30 minutes from
start to finish.
Like Rowe suggests, that frictionless functionality is what gives

the delightful interface it’s meaning. Users aren’t using a tool
to build their portfolio, they’re actually building their portfolio.
Carbonmade isn’t just simple – it’s unexpectedly simple from the
welcome message to publication.
The learning curve is virtually nonexistent and users immediately

enter a deep flow of accomplishment right from the first click. The
slick visuals simply ease the user along that path of empowerment.
4. MailChimp
Last but not least is MailChimp, an ideal balance of usefulness
and delight. Like Bitly, MailChimp fulfills a fairly technical niche,
one so practical they could theoretically survive with a barebones
interface. What takes them actually thrive is their smooth func-
tionality wrapped in cheeky humor and visually friendly design.
Image source: MailChimp

MailChimp specializes in sending mass-emails, a subject that in-

herently sounds impersonal and cold, which should explain why
they market themselves as putting a more personable face on
it. By being a “warmer,friendlier, funner” tool that packs just as
much under the hood as its competitors, MailChimp transforms
a dry task into an inviting experience.
Their delightful design is good business since it’s a core differen-

tiator in the market.
Image source: MailChimp
The no-clutter interface, straightforward choices, and conver-

sational multiple-choice forms boils down a complex discipline
into a simple and emotionally validating experience. MailChimp
even generates a fun high-five screen after you send a campaign,
an experience that’s so memorable that some users even tweet
themselves high-fiving the monkey.
But aside from the cute monkey mascot Freddie, the entire site
also feels friendly and lively. The sans-serif fonts give a casual air,
and the tone of the text is simple and light (certainly no accident).
Combining fun cartoons with tongue-and-cheek messages like “This

is your moment of glory,” MailChimp even softens the nervousness
of sending your first email campaign. The actions and reactions of
the interface feel less like an email marketing app and more like an
empathetic instructor that understands you.
The humor and mascot are all part of the surface layer of delight. But
when we dive deeper, we see that the conversational feedback and
effortless task flow helps MailChimp connect with users on a more
intangible level. The product instructs, entertains, and facilitates. As
a result, even the most novice email marketer feels like a pro – and
that’s a truly unforgettable experience.
Takeaway
Delightful design can be added to any website, in varying degrees

of lightheartedness or elegance. Weave in your elements of delight
so that it does not distract from usability, and you’ll create a state of
“pleasurable functionality.”
The ultimate goal of delightful design is to empower users while

creating an invisible emotional connection. It’s not an easy task, but
it will absolutely makes your product stand out.
Never forget that “people don’t buy better products, they buy better
versions of themselves.”
Create better wireframes & prototypes in UXPin (free trial)

Demystifying Delightful Interaction Design PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Demystifying Delightful Interaction Design PDF

Uploaded by

Copyright:

Available Formats

Demystifying Delightful

All rights reserved. No part of this publication text may be uploaded

or posted online without the prior written permission of the publisher.

For permission requests, write to the publisher, addressed “Attention:

Interactions: The Building Block of Delightful Design 9

When Usability Isn’t Enough 24

Don’t Delight for Delight’s Sake 34

The Art of Unforgettable UX Design 47

Delightful Design in Action 61

Co-founder and head of product, Kamil previously worked as a

Jerry Cao is a content strategist at UXPin where he gets to put

With a passion for writing and an interest in everything anything

The unexpected easily transforms what could be a bland, mediocre

Image Source: Github

The same principle applies to product and service design. We all

no substance then we’ll likely abandon it as quickly as many of us

However, delightful interactions aren’t just whimsical 404 pages or

In this e-book, we’ll cover why the importance of delight in interaction

For the love of interaction design,

Ryan Thomas Riddle

Photo Credit: “Interaction Design Disciplines”, Wikipedia. Creative Commons 2.0

It’s crucial in today’s world of infinite-scrolling websites and touch-driv-

Interaction Design Defined

1. What is Interaction Design

It’s important to distinguish IxD from UI. As discussed in the free

Your design is an extension of your brand. You need to think about

Naturally you’ll want your staff to be helpful, accommodating, and

2. Why Interaction Design Matters

If you’re old enough to remember subway tokens, that’s a good

Photo Credit: MTA of New York. Creative Commons 2.0

The 5 Pillars of Interaction Design

As emphasized in Interaction Design Best Practices Vol. 1, good in-

In our experience, we’ve found five concepts to be critical for even

Photo Credit: “Personas.” Nicolas Nova Creative. Creative Commons 2.0

In every design discipline, the artist must first acknowledge their

So, discussing the goals of interaction design becomes very peo-

1. Personas – Personas are fictional characters created from the

2. User Scenarios – Related to personas, user scenarios explain how

about your personas’ behaviors so you design the UI to suit them.

Photo Credit: “Design Jam London,” Yaal. Creative Commons 2.0

3. Experience Maps – Going one step further than user scenari-

Following these people-centric methods for general design will

Image Credit: Eventbrite via IXDA

Image Credit: Eventbrite via IXDA

A system’s usability should be effortless. The less attention the user

3. Affordances & Signifiers

Image Credit: uxpin.com via Team Treehouse blog

Without signifiers, users won’t be able to perceive the affordance.

Photo Credit: iPhone 5s, John Karakatsanis. Creative Commons 2.0

Signifiers also work on a metaphorical level, because people also

Tesler’s Law of the Conservation of Complexity states that

be dealt with during development, specifically when designing

Consistency creates predictability, which improves learnability,

A common tactic for improving learnability is using UI patterns. Many

Image Source: www.newegg.com

For example, breadcrumbs – the navigational strategy that lets

Ultimately, the goal of learnability is to hook users on your product

5. Feedback & Response Time

ticipate in a friendly, interesting, and helpful manner. If it doesn’t,

Image Source: www.relateiq.com

Whether an elaborate animation, a beautiful micro-interaction, or

It’s also important to mention that a key factor in feedback is

If you’d like more inspiration and examples of good interaction de-

Interactions: The Building Block of Delightful Design 9

When Usability Isn’t Enough 24

Don’t Delight for Delight’s Sake 34

The Art of Unforgettable UX Design 47

Delightful Design in Action 61