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 Introduction 7 Interactions: The Building Block of Delightful Design
9
Interaction Design Defined
10
The 5 Pillars of Interaction Design
14
Takeaway 23
When Usability Isn’t Enough
24
The Visceral Satisfaction of Delight
25
Designing for Delight
27
Takeaway 33
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
Takeaway 46
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
Takeaway 60
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 writing on his personal website.
Co-founder and head of product, Kamil previously worked as a UX/UI Designer at Grupa Nokaut. He studied software engineering 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 resorting 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-driven mobile apps to understand how interaction design (abbreviated
Interactions: The Building Block of Delightful Design
10
as IxD) helps create memorable user experiences that are fluid and lifelike. As described in Interaction Design Best Practices Vol. 1, interaction 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 human-to-computer interfaces and embrace human-to-human design. 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.
Interactions: The Building Block of Delightful Design
11
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 becomes 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.
Interactions: The Building Block of Delightful Design
12
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. Making 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 fortunate one. This action-reaction feedback loop is the groundwork of all interactions, digital or analog.
Interactions: The Building Block of Delightful Design
13
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 behavior, then users won’t be quick to prefer it over the familiar.
Interactions: The Building Block of Delightful Design
14
The 5 Pillars of Interaction Design As emphasized in Interaction Design Best Practices Vol. 1, good interaction 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 interaction 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
Interactions: The Building Block of Delightful Design
15
1. Goal-driven Design While you might not be the person who’s conducting the user research (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 people-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 Friday, and Sally the Seasonal Shopper has a long list of presents to buy online before work.” User stories urge you to think critically
Interactions: The Building Block of Delightful Design
16
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 scenarios, experience maps chronicle all the different conditions surrounding 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.
Interactions: The Building Block of Delightful Design
17
2. Usability In many ways, usability is the bare minimum of interaction design. 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 reserved-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
Interactions: The Building Block of Delightful Design
18
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 accomplish 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
Interactions: The Building Block of Delightful Design
19
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
Interactions: The Building Block of Delightful Design
20
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.
Interactions: The Building Block of Delightful Design
21
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-
Interactions: The Building Block of Delightful Design
22
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 possible, 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.
Interactions: The Building Block of Delightful Design
23
If you’d like more inspiration and examples of good interaction design, 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 experience 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.
When Usability Isn’t Enough
25
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 product, sometimes to an addictive level. The gaming industry has long leveraged this, and it’s since been applied to web and app interfaces.
When Usability Isn’t Enough
26
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
When Usability Isn’t Enough
27
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
When Usability Isn’t Enough
28
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 animations, sounds and transitions. As Ben Rowe points out in his stellar 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.
When Usability Isn’t Enough
29
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 interaction, and every interaction is a conversation with users. Our
When Usability Isn’t Enough
30
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 conversation between the user and the product. Start with the basic points of interaction – registration, confirmations, 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 conversational. Feedback doesn’t have to be mechanical – infuse a little personality in your communications. Let’s look at MailChimp again. The email service provider understands the nervousness with the first time you’re about to email an entire user base, and rewards users with humor.
Image Source: MailChimp
When Usability Isn’t Enough
31
Once the email campaign is queued, MailChimp again uses humor to lighten up an otherwise tense situation.
Image Source: MailChimp
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
When Usability Isn’t Enough
32
If your design permits, try to give away small gifts (like free newsletters 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 reciprocity 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.
When Usability Isn’t Enough
33
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 product 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 devoid 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 instead of a useful one.
Photo Credit: “Truly delighted,” Muhammad Rehan. Creative Commons 2.0
Don’t Delight for Delight’s Sake
35
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 relationship 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 personality. A cute mascot, playful word choice, game-like interactive elements, or fun sound effects can all instill excitement into an otherwise dull
Don’t Delight for Delight’s Sake
36
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 “hierarchy of user needs,” so delightful interactions are not completely disposable. But in the grand scheme, pleasure is the least important
Don’t Delight for Delight’s Sake
37
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 fundamentals. 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.
Don’t Delight for Delight’s Sake
38
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 personality, 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
Don’t Delight for Delight’s Sake
39
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” features 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
Don’t Delight for Delight’s Sake
40
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 Bargas-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 familiarity (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.”
Don’t Delight for Delight’s Sake
41
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. Implementing well-known UI patterns saves time in explaining functionality 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 usability.
Don’t Delight for Delight’s Sake
42
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 experience as a whole – the way icing improves the taste of the cake. Stefan Klocek dissects the how to design a “delightful, magical experience” 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 experience 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.
Don’t Delight for Delight’s Sake
43
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 achievement 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
Don’t Delight for Delight’s Sake
44
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 consider (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.
Don’t Delight for Delight’s Sake
45
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
Don’t Delight for Delight’s Sake
46
Basing your designs on concrete research about your users will prevent 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 design: “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 interesting 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 interactivity – 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
The Art of Unforgettable UX Design
48
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 psychology 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
The Art of Unforgettable UX Design
49
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 interaction 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 Art of Unforgettable UX Design
50
The better you know your users, the more you can deliver delightful 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 testimonials 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 generate more excitement from non-users than the users themselves.
Image Source: Amazon
The Art of Unforgettable UX Design
51
• 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.
The Art of Unforgettable UX Design
52
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 emotion 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:
The Art of Unforgettable UX Design
53
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 psychologist appointment – physiological needs hold more weight than self-actualization needs. And, as we’ve shown in our previous chapter on interactions, Aarron 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.
The Art of Unforgettable UX Design
54
For example, let’s look at Wufoo. It applies shapes, colors, and typography 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 cookie-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 pyramid is because it’s difficult.
The Art of Unforgettable UX Design
55
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
The Art of Unforgettable UX Design
56
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 easier 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-
The Art of Unforgettable UX Design
57
dia, albeit with your best foot forward. Like we previously discussed, 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 author 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 without 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 predictable (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.
The Art of Unforgettable UX Design
58
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 appreciate 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.
The Art of Unforgettable UX Design
59
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 employee 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),
The Art of Unforgettable UX Design
60
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 creating 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 design, 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 substance, just gimmicks and colorful mascots – don’t last long in our minds when the initial glamour fades.
Delightful Design in Action
62
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 other 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 usability...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 “bitesized” so that, when sharing links, you don’t overwhelm people with long streams of incoherent letters and numbers. It’s a perfect
Delightful Design in Action
63
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 fulfilling 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 characters, the overall experience is certainly memorable. Add in the
Delightful Design in Action
64
intuitive link-tracking and metrics display, and the experience becomes 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 delightful 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 delightful 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 trademark 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 infinitely-scrolling news feed all create a visually distinct first impression.
Delightful Design in Action
65
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, embedding content, etc.) without bogging them down. Unlike a traditional 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 identical 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,
Delightful Design in Action
66
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
Delightful Design in Action
67
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 discoverables” 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 annoying 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
Delightful Design in Action
68
base: lighthearted copy, vibrant colors and a generous use of fun animal icons. The visual treatment certainly captures your attention. In fact, the onboarding message even boldly claims that Carbonmade will drop users right into the experience without any boring tutorials or explanations.
Image Source: Carbonmade
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.
Image Source: Carbonmade
Delightful Design in Action
69
Image Source: Carbonmade
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.
Image Source: Carbonmade
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.
Delightful Design in Action
70
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 functionality wrapped in cheeky humor and visually friendly design.
Image source: MailChimp
Delightful Design in Action
71
MailChimp specializes in sending mass-emails, a subject that inherently 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 differentiator in the market.
Image source: MailChimp
The no-clutter interface, straightforward choices, and conversational 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.
Delightful Design in Action
72
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).
Image Source: MailChimp
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.
Delightful Design in Action
73
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)