The Role Of Emotions In UX/UI: Understanding Emotional Design

Humans are rational beings. But we are also driven by emotions. How many times have you picked up a bag of chips or a chocolate bar at the convenience store just because they looked appealing? It is not just physical products that can make us feel a certain way. It can happen in the digital world, too.

What is emotional design in websites and apps?

Emotions are how humans make sense of the reality around them. Instinctively, we tend to repeat positive experiences, because they make us feel good, and avoid negative ones. Our brains are wired to learn from negative experiences to keep us from repeating our mistakes.

In other words, emotional design is how a certain digital product makes users feel. It can drastically impact the success of an app or a website, and hence directly impact an enterprise’s bottom line. Don Norman, a contemporary design visionary, in his book Emotional Design: Why We Love (Or Hate) Everyday Things breaks down people’s emotional responses into three stages:

  • Visceral: This is the most basic level of emotional response, what you would call “first impressions.” Good UX design is one that makes users feel good or excited right off the bat.
  • Behavioral: At the behavioral level, users evaluate the functionality of your product. They subconsciously gauge how easy it is to find solutions they are looking for. In visual design, that could mean how cluttered or uncluttered your interface looks. Ease of use translates to positive emotions.
  • Reflective: This is the highest cognitive level, where users consciously weigh the pros and cons of a product. It is at the reflective level that we form the overall impression of a design.

No level is more important than the other. In fact, very often, the reflective level can undermine the initial reaction to an app or a website. As a UX designer, you need to satisfy all three cognitive levels in order to form an emotional, long-lasting bond with your audience.

How do you use emotional design in UX/UI?

Humor is the most obvious way to strike a bond with your users. ASOS and Dollar Shave Club do it pretty well on their product pages. Loading screen pages and error pages are prime real estate for injecting humor into your visual design. Make sure you keep your audience in mind, though. You don’t want to come across as distasteful or annoying.

Here are some other ways to apply emotional design to your website or a mobile app:

Use microgestures to establish a connection. 

Apple’s screen shake for incorrect passwords is one of the best examples of micro-gestures that help establish a connection with users. It mimics humans’ shake of the head to refuse something. The use of emojis and sounds is another way to make your app more personable. Facebook Messenger does it with sounds for certain emoticons.

A sliding meter for user feedback with animated emoticons is another example of including micro-gestures in your UX. Calm, a breathing app, is another example that incorporates microgestures to mimic humans. The brand’s UI has a balloon that inflates and deflates to guide users’ breathing rates.

Make bad experiences more tolerable.

Google Chrome has the dinosaur game to keep users engaged when their internet connection is interrupted. It is an example of creating a positive experience out of a negative one. Offering your users small rewards on 404 pages is another way to alleviate negative experiences. The reward could be as simple as a free e-book on a topic of your domain expertise.

Use microcopy to be more relatable. 

Mailchimp is one of the best examples of brands that use microcopy to engage users. Your welcome screens, contact forms, search bars and even 404 error messages are all opportunities to infuse some personality in your brand with microcopy. Grammarly, Airbnb, and Dollar Shave Club are some brands you can look to for inspiration on contextual, relatable microcopy.

Personalize the experience. 

Take a cue from the mindfulness app MyLife by Stop, Breathe & Think. The mobile app’s welcome screen checks with the user on how they are feeling. Based on the user’s response, it delivers personalized, guided meditations. You can apply the same principle to your website, showing users content based on their browsing behavior and past engagement patterns. Some of the biggest brands, such as Netflix and Amazon, use personalization to create positive, memorable experiences for users.

However, make sure you have a solid foundation first.

In his book Designing for Emotion, Aarron Walter argues that user expectations from a product (including digital products such as websites) can be seen as a four-tier pyramid. Starting from the bottom, Walter’s pyramid for user expectations is how functional, reliable, usable and pleasurable a product is.

Based on these elements, I recommend you begin by asking yourself the following questions:

  • Functionality: How well does the product work? Make sure you design something that solves your users’ pain points.
  • Reliability: How reliable is the product in delivering its functions? Consistency is your best friend here. Stick to web design conventions, and avoid making drastic changes to your UI too often.
  • Usability: How easy is it to use the product? Test your website or app across devices and user groups to make sure it passes the usability test.
  • “Pleasurability” (or emotional response): How does it make the users feel? This is where the tiny details, such as smart microcopy, complete the picture.

If your foundation is weak, even the cleverest emotional design won’t stick with users.