Take UX to the Next Level by Adding Delight

Delight is a word that we are hearing more of to describe pleasurable moments in our digital and offline products. UX Delight is part of establishing an emotional connection with your users and reminding them that there are real humans behind the design. Also it can help to make an experience human and break down the barriers that exist between person and computer.

Is There a Formula for Delight?

Aarron Walter writes about the hierarchy of user needs in his book Designing for Emotion. At their foundation, our digital products must be functional — they have to work to solve a problem. They also need to be reliable — they need to be up and running at all times. And they need to be usable — they offer a fairly good user experience with emphasis on consistency.

Finally, they need to be pleasurable. This is where delight is.

We can’t satisfy the needs of higher levels until we get the foundations of the hierachy right. So when it comes to adding delight to our sites or apps, it’s important to achieve functionality, usability and reliability first.

Different Levels of Delight

Don Norman wrote about 3 levels of design in his book Emotional Design:

  • Visceral — first feeling about a product (or initial impact).
  • Behavioral — the total experience of using a product (how it performs).
  • Reflective — how the product makes you feel (what the product evokes in the user).

Surface UX Delight

Surface delight is referred to the things that are often very obvious and visceral in order to convey delight. It draws strong attention to our products by creating positive first impression.

1. User Interface

High-quality and beautiful user interface an obvious way to add delight. But UI design does not necessarily go hand-in-hand with good UX design. In order for a product or service to be successful in the long run, you need to look at things in a more holistic way.

AirBnB has both UI and UX dialed in.

AirBnB app for iOS

2. Microcopy

Microcopy is another component to UX that can instantly delight (or disappoint if you miss it). It’s the text you include on things like forms, buttons, footers, and 404 pages. It can offer guidance if your users run into errors, or help reassure them before deciding to commit to something.

For many companies, microcopy is an afterthought and often overlooked as an opportunity to connect with your users. But not for Mailchimp. The MailChimp example is a great example of good contextual and brand microcopy. Even their error message is lighthearted and fun:

3. Animation

Captivating (simple, fast, vivid, meaningful) animations can add surprise and delight. Some animations are rather unconventional, but, nevertheless, accomplish certain practical tasks. For example, here is an animation Pull to Make Soup

Functional animations help you to “feel” an application, understand its principles, and make interactions more engaging and fun. Also it can be used as an educational tool. Animation teaches you how the app works before downloading it in a much more interactive way than just a video.

4. Affordance Transitions

The concept of affordance derives from cognitive psychology and refers to particular characteristics of an object that guide the viewer. Ridges are often used to enhance affordance. Ridges around a button suggest that the button can be manipulated. This UX technique was widely popularized by the camera app in iOS.

iOS 6’s lock screen featured ripples around the camera icon, suggesting draggability.

Apple removed it in iOS 7, apparently because users got accustomed to it. But it works the same way: when you drag the button, the lock screen bounces up, revealing the camera underneath. This is a great technique to point users to features in an interface. So give elements a high affordance to point users to features in an interface.

5. Sound

Sound is a very contentious example. However, done well, it injects delight into a product. The latest Wunderlist To-Do app plays a twinkling bell sound when you tick off a completed task, making the achievement feel that little bit better.

6. Typography

Using the right font or style helps to achieve a visible hierarchy between headlines and paragraphs. Designers must implement scalable typography so that apps fit every device regardless of a screen size. In 2014, with the release of the Lollipop OS, Google presented a new version of their Roboto font remastered for material design. It is now open source.

Roboto font by Google

Deep UX Delight and User Flow

Surface delight is important, but deep delight is actually the one that makes your app pleasurable. A delightful user experience is often about invisibility. It based on behavioral experience (how product performs). Because something that “just works” can be extremely delightful.

If you create products that is completely frictionless, and encourage users to get into smooth flow, you’re creating a deeper level of delight.

Reduce the Obstacles

Keeping users in flow is about minimizing pain points and frustration that users may experience throughout their journey. You can focus on these pain points by identifying moments of anxiety and using them as an opportunity to delight user.

Conclusion

Delight isn’t just a simple, single, one-dimensional thing. It’s much more complex, with many aspects and varying levels that form an experience.

Delight isn’t about your product, it’s actually about your user.

Delight is in how you can help users become better at the thing they’re trying to achieve. You need to do regular research into who our customers are, what’s important to them, and not just what they do on their screen. Empathy is key. “I care about my users” is more than just a marketing phrase — it means you genuinely understand your user’s expectations and you strive to deliver the best experience to meet them.

Samuel Hulick once said “People don’t buy products; they buy better versions of themselves.” And the more we can help users become that better version, the greater chance we have of delighting them.