Surprise and Delight in UX Design

Adding the ‘magic’ that makes users just fall in love with our products.

Absolutely everything that we design can have the ability to move us and leave a lasting impression, whether it’s a simple handmade birthday card that you made for a special someone, to designing a new user interface for an app; it can be a very positive experience. Even in conversation, some of the best people you’ve ever met have probably surprised you in a delightful way. Maybe it was something they said, or perhaps how genuinely kind or sincere of a person they were to you during your interaction that made them stand out. The result? An unexpected and unforgettable experience.

Okay… so, what is it exactly?

So before I get to what “Surprise and Delight” mean to us designers, I had to look to Mr. Webster to give me a precise definition of what these words actually mean, so here it goes:

Surprise: an unexpected or astonishing event, fact or thing.
Delight: a high degree of gratification or pleasure, extreme satisfaction, joy.

Not to shabby Mr. Webster, not too shabby… But what does this mean in designer terms?

It’s about designing for moments.

When I sit and think about what it means to me, I think the most basic definition of surprise and delight is designing for moments. It’s about establishing an emotional connection with your users and reminding them that product they’re interacting with is human.

It’s all in the details.

It’s that magic that makes us fall in love with a product. You know, all those little details that went into the design and were executed flawlessly during the designer/developer execution and collaboration. These details can really go a long way in creating something that users don’t expect and can elevate your product from a good one to an exceptionally great one.

Personally though, I find delight to be very inspiring. It keeps me motivated, it keeps me humble in my craft and keeps me itching to create products that I hope people love to use.

So, what’s the point?

Adding surprise and delight into your products will create a unique and personal experience for your users. It really is the difference between creating a boring and stoic brand, to a more interesting and playful one.

There are however, dangers in making surprise and delight your central focus in product design. It should be added as “icing on the cake” on an already sound user experience. We should strive to incorporate surprise and delight in small and meaningful ways to enhance our already thoughtful user experience, and therefore make our products more enjoyable to use.

Aarron Walter writes about the hierarchy of user needs in his book Designing for Emotion. At their core, the digital products that we create should aim to be:

• Functional — they have to work to solve a problem.
• Reliable — they need to be up and running at all times.
• Usable — they offer a fairly good user experience with emphasis on consistency.
• Pleasurable — and this is where delight comes into play.

Okay...cool. Now how exactly do I do it?

There are plenty of ways you can add surprise and delight into your products to create that unexpected, ‘wow’ moment for your users.
I’ve outlined a few methods that you can start using, starting with good ol’ animation. :)

Animation

Simple, meaningful and purposeful animations can be very effective in making your interface feel more alive, and will surely grab your users attention and make interactions more engaging and fun.

Yelp’s pull-to-refresh animation is playful, and makes their interface feel ‘alive’.

The Hip Chat app uses some very inviting animation to help kick start a conversation.

Kiss 92.5 uses a bounce animation on a transition to make it interesting and fun.

Microcopy

Microcopy is another aspect of surprise and delight that can definitely make your products more memorable, lighthearted and fun. It can offer guidance if your users run into errors or even help reassure them before deciding to commit to something.

Jira’s app shows a no results page positive light. Good microcopy is clear, but can be encouraging.

Brand Personality

Showing some personality in your website or app can be a very great way for your users to see things from your side and to emphasize with your brand. As Aarron Walter said in his book Designing for Emotion, “Personality is the mysterious force that attracts us to certain people and repels us from others.”

MailChimp shows a lot of personality in their brand and has been successful.

Sound

When executed well, sound can really add that “x” factor to your product, so long as it isn’t a sound that you wouldn’t want to hear often. Sound is usually overlooked in product design, but can help with triggering an emotional response in users when specific tasks are completed or an event happens.

The Clear app has been very successful in providing users a pleasurable sound effect when tasks are completed.

The TSC AppleTV app uses a sound when product is favourited. This gives users feedback in a playful way, making shopping and favouriting products more enjoyable.

Personalization

Sometimes delight can be integrated in a more silent and unobtrusive way, like catering your content specifically for them based on their interests, behaviour or actions. I’ve found that users are genuinely delighted when you’ve taken the time and created an experience that is ‘just for them’, so long as you’ve done your research and executed appropriately.

YouTube offers curated content based on your interests. YouTube goes as far as sending you notifications when a new season of your favourite show becomes available.

Final Thoughts

I’ve been a big advocate of surprise and delight in design for as long as I can remember, and always strive to ‘sprinkle it’ where I can. In my time as a designer, I’ve realized that you can never underestimate the power of delight to improve the users experience. Delight really isn’t all about your product, but is about your user. It’s not a feature, it’s an emotion. Make your app a joy to use by connecting feelings with features!