{"id":12420,"date":"2024-04-29T15:30:08","date_gmt":"2024-04-29T13:30:08","guid":{"rendered":"https:\/\/capturly.com\/blog\/?p=12420"},"modified":"2024-04-22T16:38:27","modified_gmt":"2024-04-22T14:38:27","slug":"what-is-emotional-website-design-and-how-to-use-it","status":"publish","type":"post","link":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/","title":{"rendered":"What is emotional website design and how to use it?"},"content":{"rendered":"\n<p>Why do you eat at McDonalds? Because it\u2019s the cheapest option in town? Then, why don\u2019t you buy something at the local bakery? Maybe, do you want to eat something warm? Then why don\u2019t you go to a low-budget canteen, which seems even healthier than what Mcdonald\u2019s offers? No hate, I don\u2019t have any personal problems with McDonald\u2019s, in fact, I also go to this fast food restaurant once a week.<\/p>\n\n\n\n<p>The point is that humans usually don\u2019t think rationally. In the 20th century, a bunch of economists believed that humans are homo economicus, who are consistently rational, and always want to maximize utility.<\/p>\n\n\n\n<p>Well, Kahneman and Tversky (two very well-known economists, who examined the psychological acts behind decision-making) stated that this statement is false, and defined heuristics and biases, which all affect our brain emotionally.<\/p>\n\n\n\n<p>Do you really know why people die in airplane crashes so often? The fact is the opposite; people rarely die because of airplane accidents, but since these are all generating media coverage, we are always notified about these catastrophes.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Emotional website design also takes advantage of our brains. But be aware, your task is not equal to manipulating your visitors\u2019 brain with fake, or misleading information. Instead, you need to create an experience that resonates with your target audience. In this article, we will show you the power of emotional website design, the way it can enhance your user experience and the factors that can be the catalyst of a better emotional website.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_53 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#Psychological_act_behind_emotional_website_design\" title=\"Psychological act behind emotional website design\">Psychological act behind emotional website design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#What_is_emotional_design\" title=\"What is emotional design?\">What is emotional design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#How_to_choose_the_right_emotion\" title=\"How to choose the right emotion?\">How to choose the right emotion?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#Possible_emotions_to_choose_from\" title=\"Possible emotions to choose from\">Possible emotions to choose from<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#What_can_influence_the_emotions_of_your_audience_on_your_site\" title=\"What can influence the emotions of your audience on your site?\">What can influence the emotions of your audience on your site?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#Increase_willingness_to_buy_with_videos\" title=\"Increase willingness to buy with videos\">Increase willingness to buy with videos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#How_to_measure_success\" title=\"How to measure success?\">How to measure success?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Psychological_act_behind_emotional_website_design\"><\/span>Psychological act behind emotional website design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There is a book published in 2004 by Don Norman that was an actual bestseller. It\u2019s called \u201c<a href=\"https:\/\/www.amazon.com\/Emotional-Design-Love-Everyday-Things\/dp\/0465051367\" target=\"_blank\" rel=\"noreferrer noopener\">Emotional design: why we love (or hate) everyday things<\/a>\u201d. In this book, the author writes examples when humans like attractive things even more than less attractive ones, even though the two products are the same in terms of their functionality.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Don Norman distinguishes three different types of processing in our brain:<\/h3>\n\n\n\n<ul>\n<li><strong>visceral level &#8211; <\/strong>automatic layer<\/li>\n\n\n\n<li><strong>behavioral level &#8211; <\/strong>that part contains the everyday behavior<\/li>\n\n\n\n<li><strong>reflective level &#8211; <\/strong>contemplative part<\/li>\n<\/ul>\n\n\n\n<p>If a lizard detects danger he runs elsewhere. That\u2019s an automatic layer, the detection of danger automatically activates a feeling in the lizard\u2019s brain that he needs to run. However, some animals can\u2019t do more than a visceral level of sensing.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Then imagine that your dog sits down when you bring the food to her. She knows that because you didn\u2019t give her her meal without sitting on the ground in the past. Maybe you needed to do this activity 100 times to successfully teach your dog to this. Well, that\u2019s the behavioral level, and most mammals are actually able to learn, analyze situations, and behave correctly.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Levels-of-visual-design-1-1024x512.png\" alt=\"Levels of visual design\" class=\"wp-image-12428\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Levels-of-visual-design-1-1024x512.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Levels-of-visual-design-1-300x150.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Levels-of-visual-design-1-768x384.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Levels-of-visual-design-1.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>But only humans have a reflective level, thus we are able to learn new concepts and generalizations about the world. Norman\u2019s example of reflective level human behavior is very understandable: on a visceral level roller coasters are dangerous. <\/p>\n\n\n\n<p>We don\u2019t want to go fast and at a high distance, because we don\u2019t want to die, and our brain tells us: this can be harmful to you, don\u2019t do that. But reflectively, we kinda like when most of the people refuse to take a ride, and we believe they are too scared. However, we want to show that we are the bravest human in terms of them, turn off our brain\u2019s visceral level, and take the ride to then feel appreciation.&nbsp;<\/p>\n\n\n\n<p>Before we do actions or sense something, our brain always runs through these three levels and decides whether it is a good or bad choice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_emotional_design\"><\/span>What is emotional design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In terms of visual design, what do these three levels mean to us?&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Visceral level&nbsp;<\/h3>\n\n\n\n<p>The appearance of the site. This is the users\u2019 first impression of the site.<\/p>\n\n\n\n<p>That\u2019s why the site needs to be appealing. It means you need to grab the user\u2019s attention to stimulate the user to take action as soon as possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Behavioral level&nbsp;<\/h3>\n\n\n\n<p>This reflects how the product, service, or site works. What we experienced during our multiple uses. Usability, functionality, and overall user experience; these are what all matter here. A website design must work smoothly, and it is desired to satisfy the user\u2019s functional needs. Your site needs to be effective because of the behavioral level of human sensing. The users need to find what they are looking for, without bugs and badly maintained elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Reflective level<\/h3>\n\n\n\n<p>This level focuses on the user\u2019s past experiences, symbols, and emotional resonance. This is the only level that not only focuses on immediate reactions, instead it wants to create lasting impressions in the humans\u2019 brain. The reflective level is connected to our memory. So, in terms of emotional design, a website also needs to be memorable, but in a positive way. One of your main tasks is to create a relationship between the user and your brand.<\/p>\n\n\n\n<p>In conclusion, we can finally understand what emotional website design is exactly: emotional website design is evoking positive short-term, and\/or long-term feelings in users to create a better user experience, and to convince the visitors to buy from you now, or in later stages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_choose_the_right_emotion\"><\/span>How to choose the right emotion?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that you know the basics of these three levels, and how these are connected to emotional website design, we need to take one last factor into this equation. Basically that will decide how to play with these three levels of human sensing to make out the maximum from your site.<\/p>\n\n\n\n<p>And this \u201cfactor\u201d is what your whole brand depends on. The potential buyers! There is a very plain rule in marketing: no company is desirable by anyone. Also, there is no product and service that everybody likes, and wants to buy. But brands have no intention to advertise their product to everybody. They establish some target audiences, which they prefer to reach with their messages, and try to convince only those groups of people.&nbsp;<\/p>\n\n\n\n<p>In terms of emotional website design what does this mean? You need to tailor your site\u2019s emotions based on your brand\u2019s target audiences.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example of emotional design<\/h3>\n\n\n\n<p>Let\u2019s analyze an example to understand this on a whole new level.&nbsp;&nbsp;<\/p>\n\n\n\n<p>You&#8217;re running an online film and series subscription site, but you have only horror-themed shows in your offer. Horror is not for everybody, thus not every person in the world will be interested in your brand. You need to define first who will be your potential buyers.&nbsp;<\/p>\n\n\n\n<ul>\n<li><strong>Horror enthusiasts &#8211; <\/strong>they are fearless and adventurous, and like to explore the dark side of human nature. Potentially they are between the ages of 18 and 50, watch multiple horror movies in a week, love dark stories, and books, and seek brutal, frightening videos on social media.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>If you are a marketer, you can even make human personas based on these characteristics to be clear who you are looking for.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Elena, the horror-seeker<\/h3>\n\n\n\n<p><em>Age: <\/em>28<\/p>\n\n\n\n<p><em>Occupation: <\/em>tattoo artist&nbsp;<\/p>\n\n\n\n<p><em>Characteristics:&nbsp;<\/em><\/p>\n\n\n\n<ul>\n<li>horror fan since childhood<\/li>\n\n\n\n<li>likes to attend horror festivals, and other horror-typed programs<\/li>\n\n\n\n<li>she likes classic, and indie horrors as well<\/li>\n\n\n\n<li>she has limits in terms of brutality<\/li>\n<\/ul>\n\n\n\n<p>A marketer would create 2 to 4 more types of potential buyers and personas, and start to advertise based on this information. However, you can not only use this information in advertising but you need to also create a more-optimized website design for these potential buyers.&nbsp;<\/p>\n\n\n\n<p>In the next chapter, we will meet with different emotions, and their combinations. Believe it or not: this has a crucial role in emotional website design.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/capturly.com\/pricing?utm_source=capturlyblog&amp;utm_medium=banner&amp;utm_campaign=banner-01\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"325\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png\" alt=\"Test your website design\" class=\"wp-image-11567\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-300x95.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-768x244.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4.png 1260w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Possible_emotions_to_choose_from\"><\/span>Possible emotions to choose from<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are pleasant and unpleasant emotions. Pleasant are excitement, happiness, or love, while unpleasant are fear, anger and sorrow, for example.<\/p>\n\n\n\n<p>However, since we not only have a visceral sense, we can sense things differently. Think of the old example: a lizard always tries to escape when he senses danger, but some humans love roller coasters because of both the reflective and the behavioral levels. We not only want to sense pride, and uniqueness, but we are also sure that the roller coaster is safe, and we won\u2019t be dead by the end of the round.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Know your visitor&#8217;s characteristics<\/h3>\n\n\n\n<p>The actual emotions you need to use in your website always depend on your visitors\u2019 characteristics. So, negative emotions do not specifically mean negative things in every sub-group and every website. And there is one more thing here: some products and services even want to create a negative feeling inside humans, and people are glad to buy these things. Why? Do we really like to suffer? Well, in some cases, yes: we rather get up early just to go to work, rather than sleeping more, but getting fired. That\u2019s why we buy alarm clocks!<\/p>\n\n\n\n<p>These examples are referring to how hard it is to pick the best emotions for your customers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Choose the main emotions to trigger<\/h3>\n\n\n\n<p>Website designers usually pick some of these emotions, when they establish a user-optimized site based on their needs:<\/p>\n\n\n\n<ol>\n<li><strong>Joy &#8211; <\/strong>happiness, contentment, and pleasure.&nbsp;<\/li>\n\n\n\n<li><strong>Surprise &#8211; <\/strong>wonder, excitement, astonishment.<\/li>\n\n\n\n<li><strong>Fear &#8211; <\/strong>unease, excitement.<\/li>\n\n\n\n<li><strong>Sadness &#8211; <\/strong>melancholy, empathy.<\/li>\n\n\n\n<li><strong>Anticipation &#8211; <\/strong>excitement, curiosity, eagerness.<\/li>\n\n\n\n<li><strong>Anger &#8211; <\/strong>frustration, passion.<\/li>\n\n\n\n<li><strong>Love &#8211; <\/strong>affection, warmth, connection.&nbsp;<\/li>\n\n\n\n<li><strong>Empathy &#8211; <\/strong>understanding, support<\/li>\n\n\n\n<li><strong>Curiosity &#8211; <\/strong>interest, exploration<\/li>\n<\/ol>\n\n\n\n<p>Of course brands usually use these in a combination.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How does Toyota use emotional website design?<\/h3>\n\n\n\n<p>Take a look at Toyota\u2019s landing page, and one frame of their displayed video. What does this emotionally mean to some of us? Curiosity, fear, and joy in a combination.&nbsp;Now that we have already given you a slice of how other companies use emotional website design in their site, it\u2019s your turn to learn these tricks in a minute!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Toyota-website-design-1024x512.png\" alt=\"Toyota emotional website design\" class=\"wp-image-12421\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Toyota-website-design-1024x512.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Toyota-website-design-300x150.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Toyota-website-design-768x384.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Toyota-website-design.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><a href=\"https:\/\/www.toyota.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_can_influence_the_emotions_of_your_audience_on_your_site\"><\/span>What can influence the emotions of your audience on your site?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>On a website there are plenty of ways of generating emotions to your customers. In this chapter, we explore the most immersive ones!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The psychological effect of colors<\/h3>\n\n\n\n<p>As we already discovered symbols have a huge importance in our brain. These help us connect things with each other, and help us acknowledge complex correlations, and stories.<\/p>\n\n\n\n<p>What if I tell you that different colors have different meanings, which designers usually take advantage of? Well, humans do not typically recognize these symbols intentionally, and usually they are not aware of these effects.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How does Screambox use colors?<\/h4>\n\n\n\n<p>However, allow me to bring back the horror-themed example. Screambox is a horror-themed subscription site that I talked about earlier. What color illustrates horror the best? White, pink, or black? I think most of you picked the option \u201cblack\u201d. Why? Because humans connect black with mystery, evil, and death.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Meaning of colors in marketing psychology<\/h4>\n\n\n\n<p>As you can see, it&#8217;s black. Now let\u2019s see what we associate with other colors:<\/p>\n\n\n\n<p><strong><mark style=\"background-color:#000000\" class=\"has-inline-color has-white-color\"> White <\/mark> &#8211; <\/strong><em>purity, cleanliness, and virtue<\/em><br>Brands that have easy solutions to a problem try to demonstrate it with a white background.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Red<\/mark> &#8211; <\/strong><em>fire, violence, warfare, love, and passion<\/em><br>Websites that sell gifts to lovers and friends usually use this color.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">Orange<\/mark> &#8211; <\/strong><em>change, movement, often associated with health and creativity<\/em><br>Brands that want to emphasize continuous movement (for example travel agencies) use this color.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">Yellow<\/mark> &#8211; <\/strong><em>happiness, hope<\/em><br>Brands that want to establish a deeper connection between the brand and their visitors use this color quite often.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">Green<\/mark> &#8211; <\/strong><em>growth, envy, jealousy, stability, harmonization, nature<\/em><br>Nowadays brands use this color to highlight their positive feelings about sustainability.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Blue<\/mark> &#8211; <\/strong><em>calmness, responsibility, peace, safety<\/em><br>Companies use this color to ensure their users that their platform, product, or service is safe.<\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Purple<\/mark> &#8211; <\/strong><em>wealth, royalty, expense<\/em><br>Brands use which want to highlight their premium status quo.<\/p>\n\n\n\n<p>Of course, there are some other colors and shades, and other meanings. The real project here is to connect your product\/service, and your target audiences, and find the perfect color which resonates with their feelings when going up to your site.<\/p>\n\n\n\n<p>Yet, the power of colors is not only usable in backgrounds, but in fonts as well. Also, you can also use more colors if you want to emphasize the combination of these emotions but try not to fall off the other side of the horse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The power of images<\/h3>\n\n\n\n<p>What do you think, which luxury brand\u2019s landing page contains this photo? This demonstrates a skinny lady with a tight dress inside a luxurious building. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Balenciaga-website-design-1024x512.png\" alt=\"Balenciaga website design\" class=\"wp-image-12423\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Balenciaga-website-design-1024x512.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Balenciaga-website-design-300x150.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Balenciaga-website-design-768x384.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Balenciaga-website-design.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><a href=\"https:\/\/www.balenciaga.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Well, this is Balenciaga\u2019s image, but why did most of you predict that? Because Balenciaga\u2019s vision is to create unique, but strange dresses to convince buyers to reconsider what they previously knew about fashion. If we want to determine Balenciaga with the combinations of emotions we would choose surprise and curiosity. This picture demonstrates both of them.<\/p>\n\n\n\n<p>The fact is, images are even better elements in emotional website design than colors. Images can direct emotions more powerfully. For example, you may not know at first sight that Unicef&#8217;s blue color refers to peace, and safety.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Increase_willingness_to_buy_with_videos\"><\/span>Increase willingness to buy with videos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>However, sometimes companies not only use images, rather than short videos to demonstrate emotions. Take a look at Toyota\u2019s, Ford\u2019s, or Ferrari\u2019s webpage. All of them use videos, which start automatically when the user arrives at the site.<\/p>\n\n\n\n<p>Why? Because it&#8217;s part of the storytelling process. These are all expensive products, and they need to emphasize why they are unique, and better than the others. And storytelling affects the user emotionally.&nbsp;<\/p>\n\n\n\n<p>An autoplaying video from Ferrari highlights the speed and the excitement. The camera can\u2019t even follow the car, which basically disappears from the screen within a second. In Ford\u2019s video, they emphasize that the car can go on every dirt and that they really care about sustainability. On top of that they are fast as well. As you can see they want to convince others than Ferrari tries.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Ferrari-video--1024x512.png\" alt=\"Ferrari video\" class=\"wp-image-12426\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Ferrari-video--1024x512.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Ferrari-video--300x150.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Ferrari-video--768x384.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/Ferrari-video-.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><a href=\"https:\/\/www.ferrari.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The guy who only cares about speed, and has the resources will choose Ferrari. The one who has more empathy will rather choose one of Ford\u2019s cars.<\/p>\n\n\n\n<p>Emotions are really easy to display with videos, however, your visitors won\u2019t watch hundreds of videos. Their time is way more precious than this. That\u2019s why you need to maximize the number of videos, in fact, one is more than enough.<\/p>\n\n\n\n<p>Also, it can distract the visitor\u2019s attention. Videos are great when the visitors need to think more about buying the product\/service, because it\u2019s expensive. However, I would not recommend using them when you sell cheap products!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_measure_success\"><\/span>How to measure success?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There\u2019s only one thing left. Let\u2019s say that you introduced emotional website designs four months ago, and you are curious whether it is successful for your brand, or not.<\/p>\n\n\n\n<p>The fact is, you are a little bit late, and you won\u2019t get clear data about your success. Why? Because at least you need to track your numbers from the start of this introduction. But it\u2019s even better, if you have data from your previous website designs to compare the changes. However, the second is manageable.<\/p>\n\n\n\n<p>Data analytics tools can help you with that! They are able to track your visitors\u2019 individual sessions, clicks, scrolls, or frictions which are all crucial to determine success. It\u2019s very easy to connect these tools with your site, and after you are done with this, you can finally analyze your users.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/capturly.com\/pricing?utm_source=capturlyblog&amp;utm_medium=banner&amp;utm_campaign=banner-01\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"325\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png\" alt=\"Test your website design\" class=\"wp-image-11567\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-300x95.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-768x244.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4.png 1260w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Use A\/B tests<\/h3>\n\n\n\n<p>Do you remember what I said earlier? It is manageable if you don\u2019t have previous data. That\u2019s because, with some data analytics tools, you can create A\/B testing.<\/p>\n\n\n\n<p>A\/B testing means your users can either go to the \u201cA\u201d version, or the \u201cB\u201d version of your site. In this case, the \u201cA\u201d version is the one with an emotional website design, and \u201cB\u201d is the original. From a few weeks of continuous tracking, you can determine whether your emotional website design success was better, and that you would implement that format.<\/p>\n\n\n\n<p><strong>Also, you have loads of other options to measure success with data analytics tools, just as:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Website heatmaps &#8211; <\/strong>with scroll heatmaps, you get to know how long your visitors scroll down, and with click heatmaps you can realize where most of them click to.<\/li>\n\n\n\n<li><strong>Session recordings &#8211; <\/strong>with session recordings you can analyze single sessions to track individual problems with your newly implemented emotional website design. Also, if something is not functioning really well based on some information, here you can check the \u201cwhy\u201d-s.&nbsp;<\/li>\n\n\n\n<li><strong>Conversion funnel analysis &#8211; <\/strong>here you can track your customer\u2019s journey, where are the main friction points, and the percentage of your converted users.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>I have good news for you: these are all available<a href=\"https:\/\/capturly.com\/\"> at our data analytics tool, Capturly Analytics,<\/a> which provides you with a free entry to these tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As you can see, emotional website design is a huge topic, with many interesting psychological researches, and new and new areas that are waiting for researchers to discover.&nbsp;<\/p>\n\n\n\n<p>In this article, we looked into the human brain itself, and understand why we don&#8217;t think rationally most of the time. As emotional website design is built based on these examinations, we needed to discover the three levels of sensing, and their differences.&nbsp;<\/p>\n\n\n\n<p>After that, we defined what emotional website design is exactly, and how finding the right emotions can be good for our company. In the end, we discussed three areas where designers can use emotional website design in their everyday lives. We hope that the brought examples made the understanding of this article even more easier.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/capturly.com\/pricing?utm_source=capturlyblog&amp;utm_medium=banner&amp;utm_campaign=banner-01\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"325\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png\" alt=\"Test your website design\" class=\"wp-image-11567\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-1024x325.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-300x95.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4-768x244.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/01\/banner-01-4.png 1260w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Why do you eat at McDonalds? Because it\u2019s the cheapest option in town? Then, why don\u2019t you buy something at the local bakery? Maybe, do you want to eat something warm? Then why don\u2019t you go to a low-budget canteen, which seems even healthier than what Mcdonald\u2019s offers? No hate, I don\u2019t have any personal<\/p>\n","protected":false},"author":45,"featured_media":12436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is emotional website design and how to use it?<\/title>\n<meta name=\"description\" content=\"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is emotional website design and how to use it?\" \/>\n<meta property=\"og:description\" content=\"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/\" \/>\n<meta property=\"og:site_name\" content=\"Capturly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-29T13:30:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-22T14:38:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/What-is-emotional-website-design-and-how-to-use-it-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Viktoria Balog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Viktoria Balog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/\",\"url\":\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/\",\"name\":\"What is emotional website design and how to use it?\",\"isPartOf\":{\"@id\":\"https:\/\/capturly.com\/blog\/#website\"},\"datePublished\":\"2024-04-29T13:30:08+00:00\",\"dateModified\":\"2024-04-22T14:38:27+00:00\",\"author\":{\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/6e7d157539ce12574b010a06b041c27d\"},\"description\":\"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.\",\"breadcrumb\":{\"@id\":\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/capturly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is emotional website design and how to use it?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capturly.com\/blog\/#website\",\"url\":\"https:\/\/capturly.com\/blog\/\",\"name\":\"Capturly Blog\",\"description\":\"Optimize your website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capturly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/6e7d157539ce12574b010a06b041c27d\",\"name\":\"Viktoria Balog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/097e668ff79536141cd3364a51414f58?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/097e668ff79536141cd3364a51414f58?s=96&d=mm&r=g\",\"caption\":\"Viktoria Balog\"},\"sameAs\":[\"http:\/\/capturly.com\"],\"url\":\"https:\/\/capturly.com\/blog\/author\/viktoria-balog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is emotional website design and how to use it?","description":"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/","og_locale":"en_US","og_type":"article","og_title":"What is emotional website design and how to use it?","og_description":"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.","og_url":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/","og_site_name":"Capturly Blog","article_published_time":"2024-04-29T13:30:08+00:00","article_modified_time":"2024-04-22T14:38:27+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2024\/04\/What-is-emotional-website-design-and-how-to-use-it-1.png","type":"image\/png"}],"author":"Viktoria Balog","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Viktoria Balog","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/","url":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/","name":"What is emotional website design and how to use it?","isPartOf":{"@id":"https:\/\/capturly.com\/blog\/#website"},"datePublished":"2024-04-29T13:30:08+00:00","dateModified":"2024-04-22T14:38:27+00:00","author":{"@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/6e7d157539ce12574b010a06b041c27d"},"description":"Want to take your business to the next level? Learn from the bests and harness the power of emotional website design.","breadcrumb":{"@id":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/capturly.com\/blog\/what-is-emotional-website-design-and-how-to-use-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/capturly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is emotional website design and how to use it?"}]},{"@type":"WebSite","@id":"https:\/\/capturly.com\/blog\/#website","url":"https:\/\/capturly.com\/blog\/","name":"Capturly Blog","description":"Optimize your website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capturly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/6e7d157539ce12574b010a06b041c27d","name":"Viktoria Balog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/097e668ff79536141cd3364a51414f58?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/097e668ff79536141cd3364a51414f58?s=96&d=mm&r=g","caption":"Viktoria Balog"},"sameAs":["http:\/\/capturly.com"],"url":"https:\/\/capturly.com\/blog\/author\/viktoria-balog\/"}]}},"_links":{"self":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/12420"}],"collection":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/comments?post=12420"}],"version-history":[{"count":6,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/12420\/revisions"}],"predecessor-version":[{"id":12435,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/12420\/revisions\/12435"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media\/12436"}],"wp:attachment":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media?parent=12420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/categories?post=12420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/tags?post=12420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}