Designing for Emotions: How to Create Storytelling in UX UI Design
Tags: ui, ux, webdev, design
Published: 2024-05-09 10:49:21

What’s a design that doesn’t excite or arouse interest in users? You’d say creating anything that doesn’t evoke human emotion is futile. After all, human beings depend on emotional engagement for anything to work for them, [UI UX design](https://www.peppersquare.com/ui-ux-design/) included. Brands like Apple and Calm evoke emotions through their brand messaging and the user experience they provide.

A UI UX design that generates feelings of empathy and understanding among its users is an automatic preference for people. Creating an emotionally resonant design also makes any product or app [enjoyable and satisfying](https://www.linkedin.com/pulse/designing-emotional-engagement-role-storytelling-ui-ux-design/) for the users. Emotional storytelling has recently emerged to engage audiences and retain their long-term loyalty.

## How do you incorporate storytelling into UI UX design?
Resonation is the key. As a designer, you aim to evoke emotions and connect with the users. To do that, your design must tell a story and build a narrative around that. Here’s how you can do it:

- **Identify the target audience and the story**
Apple beat Microsoft’s products primarily because of its clear-cut storytelling. Apple’s iPod launch had the simplest definition of their product that showed in its UI UX design. “Every song you ever heard. In your pocket.” The iPod was a clever deviation from any music device we ever had in terms of its simplicity, ease of use, and portability. The story spoke of the product and vice-versa.

- **Visual elements that evoke emotions**
Meditation apps like Headspace and Calm rely heavily on visual elements like soothing sounds, interactive elements, icons, and typography to pull users into a meditative state. Although Calm is just another app that requires users to stay on the screen, it makes the digital world healthier and calmer for them. The use of pastel colors, a straightforward interface, and background sounds grab the target audience’s attention — people suffering from anxiety and depression — and help them deal better with their situation.

- **Test and refine**
Apps are all about refining and improving. Ensure that whatever features you incorporate into your UI UX design are tested with the target audience. Be open to receiving feedback from them and include those. User testing is one way to capture users’ emotional resonance in real time. User analytics like bounce rate and click-throughs can also help you understand what works and what doesn’t.

## Emotional design: The new metric for UI UX

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/244k0tsxw8vujqt24z1e.jpg)
How does emotional storytelling work for your design? If it generates positive emotions and experiences, the users become loyal customers. The goal is to trigger those positive emotions through impactful UI UX designs. Creating an emotional design might help your app or product stand out in a world of distractions and stiff competition.

The term’ Emotional Design’ was introduced by Donald Arthur Norman in his book Emotional Design. He defines three levels of cognitive responses that an emotional design has. These levels are interconnected and influence the design process:

- **Visceral Design**
Call it the surface-level reaction to the design, if you will. Visceral design is subconscious and usually receives immediate reactions from users. This design involves the look & feel, sensory scan, a strong reaction, and a user’s first impression of your product or app. They want to experience the ease of navigation, uncluttered interface, and soothing colors that make the app more delightful and exciting.

- **Behavioral Design**
Behavioral design is where performance matters. Users will evaluate your design based on how satisfied they feel using it. Perception of the app matters more because users will form an opinion about the app. Hence, the app or product’s usability, functionality, and effectiveness must be top-notch and, most importantly, cater to their needs and expectations.

- **Reflective Design**
The final and conscious judgment happens here. Users will assess the efficiency and benefits and decide on becoming a customer. They analyze the functions, features, and other related aspects to form a complete impression of the app or product. Building a solid customer base is possible at this level because a long-term impact is developed here.

Combining these three levels of emotional design will provide you with a great design. As designers, make sure you don’t emphasize one over the other. We aim to make the UI UX experience memorable while retaining the effectiveness required in a good design.

## How to use Emotional Design effectively?
In the words of [Donald Arthur Norman](https://www.nngroup.com/books/emotional-design/), “Emotions exist in the hearts and minds of people. And so we have to figure out how to make a product or service that delivers the emotions we care about to the person. And that still is an art, an intuition.”

Emotions are essential to human beings because they provide a value judgment. As a result, the feelings evoked in users while interacting with a UI UX design play a central role in their decision to go with an app or service. Emotional design aims to complement the product by making users feel a specific way.

Some fundamental techniques to remember while designing for emotions might offer a better user experience and generate higher ROI for your business:

- **Smart interactions**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5fqkhg4t5mc7y0mla2a.jpg)
Design is an act of communicating, and emotions are the best way to do that. But you can only communicate by interacting first. One way to do so is to find powerful motivators that compel users to click and go where you want them to go. Remember, design is not what it looks like. It’s how it works.

- **Simple yet diverse**
Now, being exclusive does not mean you move away from simplicity. Nothing frustrates a user more than interacting with a complex design. The key is to keep it diverse yet simple to use. Food delivery apps like Zomato and Swiggy incorporate humor into their UX UI elements for user engagement, and so far, they’ve successfully attracted and retained customers.

- **Visual elements**
Nothing inspires users to take action like visual elements do. However, visual elements should be customized carefully to invoke the intended emotion. A convenient layout and straightforward typography make it easier for users to stay engaged with the app. An appropriate use of visual elements will create an emotional connection with users.

- **Personalized touchpoints**
Incorporate the web/app design with creative yet personalized touchpoints. Users like to get the feeling of exclusivity in an app. Wyasa, the everyday mental health app, offers personalized self-care tips through an AI chatbot. Though it’s a generative AI tool talking, users get a personalized feeling because the app allows them to explain their situation and problems in greater detail.

- **A good copy**
UX writing is a design discipline responsible for the UI text and content. No longer an emerging field, UX writing has become even more critical in the present context. With AI-driven technology and voice commands becoming the preferred feature, the importance of content has increased. From notifications to feedback and the responses of Alexa and Siri, well-crafted words naturally and directly invoke emotions among users.

- **Anticipatory design**
No, we aren’t talking about yet another design term. Users are naturally attracted to functionality and usability. The more they perceive a web/app feature to work with minimum inputs, the better their experience. A pleasing design with minimal input is effortless and fulfills user needs without them asking.

- **Attention to detail**
Seemingly, small things have the most profound emotional impact. Maintaining attention to detail will make users feel you care about them. For example, Calm adds a sentence — “Hope you didn’t hear the end of the story” — when users wake up the following day for its sleep stories feature. Simple error messages can lessen users’ frustration for inconveniences when added with a pinch of humor.

UI UX designers need to be careful with emotional design. A poorly designed UI UX frustrates users and can lead to anger, possibly resulting in them quitting the app altogether. Often, apps and services excite their design without considering user convenience. Research to gauge user expectations and ensure you adhere to those to evoke the right emotions.

In wrapping up our journey through emotional storytelling within UX/UI design, we’ve uncovered the incredible power of narratives that touch the heart and stir the soul. Yet, the evolution of design does not stop at emotion alone. As we pivot to our next exploration, [‘How is AI Enhancing UX,‘](https://www.peppersquare.com/blog/ai-enhancing-ux/) we venture into the synergistic potential of artificial intelligence to elevate these emotional connections to new heights.

<a href="https://www.peppersquare.com/contact-us/" target="_blank" rel="noopener">![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lri1ybq6nhwea52swht6.png)</a>