Designing for Emotions

When designing a product, a lot of time is spent focusing on the physical design: the buttons styles, typefaces, and colors. We carve out time for research and testing to make sure that our users clearly understand the product and can easily interact with it. We fine tune the UI, make it look beautiful and send it off into the world. We hope that by making our product look nice and function well that users will happily adopt it.

Sometimes, we focus so much on the technical and physical design of a product, we overlook a very important, yet underused tool: emotional design.

Emotional design takes into account the user’s feelings as they use our product. A user’s emotions can be affected by the visual design, but sometimes those feelings exist outside of our creation. A user will react negatively to product or process simply because of what the product is asking them to do, or why they're using the product in the first place. In those instances, it's difficult to positively influence a user's feelings with only the design. When faced with that challenge, it’s important for designers to take a creative approach: empathize.

1. Asking the User to Do Something They Don't Want to Do

Screen shot of a Forbes.com Pop-up
Screen shot of a Forbes.com Pop-up

If you happen to use the browser plugin, Adblocker, you’re probably used to enjoying an ad-free experience. You’re probably also used to some sites blocking you from viewing their content until you disable the plugin. This is fairly common on news sites, who rely heavily on ad revenue. For instance, if Adblock is on and you visit forbes.com, you get a popup and a video that tell you to disable it. From a design perspective, this process is simple, and it’s easy to understand. However, from a user’s perspective, it’s an annoying distraction that’s disrupting the experience. The user is being asked to do something they don’t want to do, and they’re given no reward for their effort.

Screen shot of a Wired.com Pop-up
Screen shot of a Wired.com Pop-up

In comparison, wired.com has a popup asking you to disable Adblock. Wired lacks a video, or even a description that tells you how to disable it. However, Wired goes out of the way to empathize with the user: “We get it: Ads aren’t what you’re here for. But ads help us keep the lights on.” It’s a short, simple sentence with a casual tone. Wired manages to not only to empathize with the user, but to also come across as human. It’s much easier for a person to relate to another person, rather than a company. And because of that, disabling adblocker on Wired feels a lot less annoying.

2. Getting the User Through a Painful Process

Screenshot of Turbo Tax's startup process.

Screenshot of Turbo Tax's startup process.

No one enjoys preparing taxes. From start to finish, the process is stressful and intimidating. When you start the filing process, Turbo Tax immediately asks you how you’re feeling. Your answer won’t affect how you file your taxes. It only exists to help you feel a little bit better, and it does a pretty good job. Through the rest of your filing process, Turbo Tax uses a very friendly tone, and congratulates you when make it through filing milestones. Through the whole experience, Turbo Tax goes out of its way to provide a friendly, human experience, and it makes your filing process feel a bit easier.

Implementation Tips

  1. Acknowledge and accept that the user might be put off by your product from the get-go. You can’t control those innate feelings, but you can control the process they go through.
  2. Make the user feel like they have a voice. It gives them a sense of control over the situation, and lets them be an active participant. No one likes being told what to do without input.
  3. Speak to your user using natural language. Empathize with the user, and they’ll start to humanize your product, which makes them more forgiving of any mistakes they encounter later.

By using these tips, we can make our products a little more friendly and a little more human. ✌🏻