{"id":8478,"date":"2023-06-07T11:28:28","date_gmt":"2023-06-07T11:28:28","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=8478"},"modified":"2024-01-16T11:55:43","modified_gmt":"2024-01-16T11:55:43","slug":"role-of-emotion-in-ux-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/role-of-emotion-in-ux-design\/","title":{"rendered":"The Role of Emotion in UX Design: Creating Affective Interfaces"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">User experience design may seem like an all-cognitive, all-rational affair. But the reality is that emotions play a huge role in UX. From the moment we land on a website, pull up an app, or start to play a VR game, we are having an emotional response, even if that response is subconscious. Emotion may make us love one app and reject another, even if we\u2019re not aware of that response. As a result, understanding how to design for emotions and build better affective interfaces is vital to good UX design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we\u2019ll explore the basics of emotion in UX design and affective interfaces. We\u2019ll also share some examples and consider how to apply emotional UX design to your own projects.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s what we\u2019ll cover:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#the-role-of-emotion-in-ux-design\"><span style=\"font-weight: 400;\">The role of emotion in UX design: What is emotional design in UX?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-an-affective-interface\"><span style=\"font-weight: 400;\">What is an affective interface?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#three-levels-of-emotional-processing\"><span style=\"font-weight: 400;\">Three levels of emotional processing<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-are-some-examples-of-emotional-design-and-affective-interfaces\"><span style=\"font-weight: 400;\">What are some examples of emotional design and affective interfaces?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-apply-emotional-design-in-ux\"><span style=\"font-weight: 400;\">How to apply emotional design in UX<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#wrapping-up\"><span style=\"font-weight: 400;\">Wrapping up<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s go!<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2><strong><a id=\"the-role-of-emotion-in-ux-design\"><\/a>The role of emotion in UX design: What is emotional design in UX?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Emotional design is about designing in a way that elicits emotions, such as excitement or satisfaction, to deliver a positive experience for the user. This is one way for UX designers to create products that are not only useful and valuable, but also a joy to use.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In fact, products that evoke positive emotions are bound to have a bigger impact than those that evoke neutral emotions. Consequently, products that trigger positive reactions are bound to lead to greater user loyalty and create a more impactful user experience.\u00a0<\/span><\/p>\n<h2><strong><a id=\"what-is-an-affective-interface\"><\/a>What is an affective interface?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Affective interfaces are user interfaces that appeal to the emotional experiences of the user. A <\/span><a href=\"https:\/\/harvest.usask.ca\/handle\/10388\/7692\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">2017 thesis at the University of Saskatchewan<\/span><\/a><span style=\"font-weight: 400;\"> found that affective interfaces have a significant effect on human judgement and decision making. In fact, affective interfaces change human emotions. This is a powerful demonstration of the effect of emotional design on human behaviour.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Through emotion in UX design, UX designers are trying to get users to be loyal to the product or brand. But affective interfaces can do so much more than that, if required. They can influence\u00a0 decision making and emotions, guiding the user towards certain actions which may be in line with the company\u2019s goals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While this may feel sinister, most companies have the intention of getting their users to like them. In the process, their affective interfaces will appeal to the positive emotions of their users. Appealing to their users\u2019 positive emotions will impact their success, and ultimately their bottom line.<\/span><\/p>\n<h2><strong><a id=\"three-levels-of-emotional-processing\"><\/a>Three levels of emotional processing<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">When exploring how designs can influence people\u2019s emotions, Don Norman defined <\/span><a href=\"https:\/\/www.nngroup.com\/videos\/3-levels-emotional-processing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">three different levels of emotional processing<\/span><\/a><span style=\"font-weight: 400;\">: <\/span><b>visceral<\/b><span style=\"font-weight: 400;\">,<\/span><b> behavioural<\/b><span style=\"font-weight: 400;\">, and <\/span><b>reflective<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visceral: <\/b><span style=\"font-weight: 400;\">This is the first level of emotional processing and it happens when the user first encounters a product. Our responses are subconscious and instinctive and related to sensory information, such as how the product looks and feels.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Behavioural: <\/b><span style=\"font-weight: 400;\">The middle level of emotional processing, this relates to the product\u2019s usability and whether or not we like it. This level lets us evaluate the ease of use or behavioural experience of a product and analyse the consequences of that experience. How user-friendly was the solution? How long did it take to find? Good behavioural design encourages trust.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reflective:<\/b><span style=\"font-weight: 400;\"> The highest level of emotional processing, this involves conscious thought, interpretation, and reasoning. Here, a user strives to predict the impact of the product on their life and reflect on its impact on their self-image, through things like features, meaning, and cultural aspects. Users form an overall impression at the reflective level.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The best emotion in UX design incorporates all three levels of emotional processing. When a design appropriately appeals to all three levels, users will have a positive experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8479\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-07-at-11.34.46.png\" alt=\"human cognitive responses\" width=\"488\" height=\"464\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2022\/10\/understanding-emotional-design.php\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UXmatters<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2><strong><a id=\"what-are-some-examples-of-emotional-design-and-affective-interfaces\"><\/a>What are some examples of emotion in UX design and affective interfaces?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Here are a few examples of emotional design.<\/span><\/p>\n<h3><strong>Threadless<\/strong><\/h3>\n<p><a href=\"https:\/\/www.threadless.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Threadless<\/span><\/a><span style=\"font-weight: 400;\"> sells t-shirts and other apparel. Their clothes are made by artists who use the site to make money. Therefore they owe it to the artists and to the users to make the best impression possible.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They do that by using emotional design\u00a0 to provide little details of humour. When you navigate to any t-shirt and decide to buy it, when you click on the \u201cAdd to cart\u201d button, you see the friendly cart and a message in text that says something like \u201c1 item added to my carty belly! I\u2019m still hungry.\u201d<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8488 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-07-at-12.25.39.png\" alt=\"threadless examples\" width=\"650\" height=\"780\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.threadless.com\/shop\/@rlthull\/design\/whales-ahoy\/mens\/t-shirt\/triblend?variation=front&amp;color=chili_red&amp;size=large#m\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Threadless.com<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The happy looking cart with a humanoid face is charming and the copy changes each time you click the \u201cadd to cart\u201d button to express the cart\u2019s pleasure. This makes adding items to your cart fun, and it still influences you to buy.\u00a0\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-content-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/content-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN CONTENT DESIGN]<\/p>\n                    <span>Take our Professional Certificate in Content Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><strong>Squarespace<\/strong><\/h3>\n<p><a href=\"https:\/\/www.squarespace.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Squarespace<\/span><\/a><span style=\"font-weight: 400;\"> is among <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/the-top-10-ux-portfolio-builders\/\"><span style=\"font-weight: 400;\">the most popular website builder tools<\/span><\/a><span style=\"font-weight: 400;\">, providing everything you need to make the process simple and easy. There\u2019s only one problem: there are many services like this. So what differentiates Squarespace?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The home page does an excellent job of summing it up. In clean, crisp copy, the site explains that it offers \u201cEverything to sell anything.\u201d Then it offers a free website trial with no credit card required.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8481\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-07-at-11.36.31.png\" alt=\"Squarespace emotional design example\" width=\"638\" height=\"388\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.squarespace.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Squarespace<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is not only a great tagline; it uses storytelling principles, a major tenet of emotion in UX design, to tell a story. The tagline evokes a personal narrative for anyone who goes to the site to create a website or other product; one where their website or other product manages to make them all kinds of money. That\u2019s a powerful story full of emotions like joy, self-esteem, and pride.\u00a0<\/span><\/p>\n<h3><strong>GEICO<\/strong><\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8482\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-07-at-11.37.10.png\" alt=\"geico website\" width=\"642\" height=\"450\" title=\"\"><\/h3>\n<h3><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.geico.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">GEICO<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">GEICO insurance is known for having a gecko as its mascot, and mascots are a major facet of emotional design. The large gecko greeting you draws the eye and introduces whimsy into the experience. It also makes it that much more likely that you\u2019ll fill out the quote finder because you like that feeling of whimsy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Insurance is typically not a fun thing to worry about, but the gecko makes it bearable, plus the gecko makes the GEICO brand memorable in a way it wouldn\u2019t be otherwise. It\u2019s no wonder the gecko is featured so strongly on the home page.<\/span><\/p>\n<h2><strong><a id=\"how-to-apply-emotional-design-in-ux\"><\/a>How to apply emotion in UX design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The key elements of emotional design are all about building an emotional connection with your users. The goal is to make users feel a specific way, whether that\u2019s amused, delighted, or even angry when the product requires it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how you can apply emotional design and create a more impactful user experience:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Design a personality:<\/b><span style=\"font-weight: 400;\"> Engage users through a mascot or other consistent images. This will be a positive experience for users while giving the product a signature personality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Create a strong brand: <\/b><span style=\"font-weight: 400;\">Use a unique theme and keep it consistent. Some brand elements should be available on each page. This will give a great first, third, and three hundredth impression of the product.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Create the right tone with copy:<\/b><span style=\"font-weight: 400;\"> The font should suit the image you\u2019re going for and the copy itself should be appropriate.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tell stories:<\/b><span style=\"font-weight: 400;\"> Use principles of narrative design to provoke desire, like showing them part of a product before sign up or testimonials before they buy. You can learn more about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/storytelling-in-ux-design\/\"><span style=\"font-weight: 400;\">how to use storytelling in UX design here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use humorous messages:<\/b><span style=\"font-weight: 400;\"> Use playful or humorous messages throughout the experience, especially in error messages.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">But most of all, make sure your foundation is solid before applying emotional design principles. Aaron Walters says that in order to make a product work, you need to apply a four-tier pyramid that goes from functionality to reliability to usability and finally to pleasurability. Unless the other three tiers are well made, the pleasurable layer\u2014the layer that has to do with emotional design\u2014won\u2019t stick.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8490 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-07-at-12.27.20.png\" alt=\"hierarchy of user needs\" width=\"1114\" height=\"596\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2019\/05\/conference-review-enterprise-ux-2018-part-3.php\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UXmatters<\/span><\/a><\/p>\n<h2><strong><a id=\"wrapping-up\"><\/a>Wrapping up<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">This guide should help you get started with emotional design in UX. Specifically, after making sure you have a solid foundation in functionality, reliability, and usability, don\u2019t forget about pleasure, or emotional design. There are many ways you can implement emotional design, including humorous messages, telling stories, designing a personality with a mascot or other consistent images, building a strong brand, and creating the right tone with copy.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Want to learn more about creating powerful user experiences? Read about <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/day-in-the-life-digital-product-designer\/\"><span style=\"font-weight: 400;\">a day in the life of a digital product designer at the LEGO Group<\/span><\/a><span style=\"font-weight: 400;\">, or check out these <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/examples-of-good-digital-ux-design\/\"><span style=\"font-weight: 400;\">7 examples of good digital UX<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many ways you can implement emotional design, including humorous messages, telling stories, designing a personality with a mascot or other consistent images, building a strong brand, and creating the right tone with copy.\u00a0<\/p>\n","protected":false},"author":35,"featured_media":8484,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278,279],"tags":[335],"class_list":["post-8478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-ux-explained","tag-ux-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=8478"}],"version-history":[{"count":7,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8478\/revisions"}],"predecessor-version":[{"id":9704,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/8478\/revisions\/9704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/8484"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=8478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=8478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=8478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}