Uxpin demystifying delightful interaction design

Page 1


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)



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.