Emotional Web Design

If you have designed a site that addressed five of the six layers of design you have surpassed most sites on the web. Even great designers will fail to address the first five layers in a design. Stopping here however, would ignore one of the fundamental aspects of being human, having emotions.

Emotion is the last aspect of design you should strive to address. Emotion is overlooked when web design is reduced to statistics; users perform desired actions or they don’t. People are not that simple. And as a result, neither is their behavior. By and large, we consider ourselves logical beings, whose emotion just gets in the way. This is not the case; emotion is cause for some of the greatest aspects of modern life and despite websites being inanimate, users actually engage with them in emotional ways.

The most successful designers understand this and harness user emotions. This is no easy task as our understanding of emotion is still evolving. Depending on the discipline, scientists have explained emotion through chemical changes, behavior, and physical reactions. It’s not important to understand all aspects of emotion to design for it, but you do need to understand why it’s important, and how and when it occurs.

By understanding what’s known about emotion, you can create designs that affect users in compelling way. You don’t have to become a psychologist to do this either; you just need a basic understanding. While difficult to quantify, emotional design has tangible benefits. Before we dive into the human emotion, lets look at how it benefits your work.

Why Design for Emotion?

Overemphasis on logic is primarily caused by a devaluing of emotion. In fact, by and large, people overvalue how logic affects what they do and how they feel. We like to think our actions are a result of well thought out reasoning, but that isn’t always the case… In fact, reasoning is often an afterthought.

There was a time when emotion was considered an evolutionary leftover. Not only was it unimportant, but also a barrier to rational thinking. Logic was considered to be a superior and separate entity. We now know the more advanced a species, the more emotional they are. Yet to this day people try and ignore emotion when making important decisions because they are under the impression that it clouds their judgment.

In actuality logic and emotion are so intertwined that no decision is made in absence of emotion. In many cases decisions are made entirely by emotion and only justified later through logic. You can be sure everything a user does on your site is somehow affected by their emotions.

When focused on visuals and usability it’s easy to get tunnel vision. You can end up with a site that is simple to use and looks attractive but completely ignores the emotions of the user. As all behavior and decisions are driven by emotion you fail to address a fundamental design need.

You can use design to impact user emotions and increase the success of a design. More specifically emotion affects user attitudes, influences their behavior, and alters their experience on the site. Even the most logical people would agree that a website should be enjoyable. Yet joy is an emotion, not a rational conclusion.

On the practical side of the equation, emotion affects attitude, motivation, and perception. In terms of experience, emotion is cause for pleasure and relationships. Each of these aspects of emotion can contribute to the success of your site.

Attitude Alteration

Attitudes can be positive or negative and are generally formed through prior knowledge and experience. When encountering something new, one can form an attitude about it almost instantly.

You want a users attitude towards your site to be positive, regardless if it was newly formed or based on prior experience. This won’t always happen; even minor usability issues can cause a user to form a negative attitude. Luckily attitudes by nature are always changing, so negative or indifferent feelings can be swayed towards positive ones. As you may have guessed, this is done through emotional engagement.

Behavioral Influence

Emotion plays a critical role in human decision-making. In his book Emotional Design cognitive scientist Don Norman describes a study by neuroscientist Antonio Damasio who studied people who had diminished emotional capacity (but otherwise normal brain function).

He found that they often had difficulty making decisions, especially in cases of equally valid alternatives. By removing emotion, a simple as “Should we eat now or in fifteen minutes” would be nearly impossible to answer. The phrase “think logically” is often used to encourage rational decision making; ironically enough, without emotion you would be unable to judge which decision was worth making.

Many decisions are based on what “feels good,” which is purely emotional. We may develop reasons for it afterwards, but emotion is what drove the choice.

In the last two chapters we discussed how aesthetic preferences are a result of subconscious visceral responses. Much of human behavior is the same way.

Human survival was once based on the ability to quickly assess a situations danger or safety. In order to avoid danger, assessments needed to happen fast, triggering behavior to avoid perceived threats before it was too late. Understanding the situation was never critical to survival.

When something affects us we often, interpret, react, and analyze later. Don Norman calls this the “affective system,” which he describes as the processes that judge an environment as to what’s good or bad. He further states that the affective system creates judgments, often before they reach a cognitive level. The feeling you get from the affective system is emotion.

Just to clear, not all behavior is caused by emotion — humans also act based on cognition. The take away is that emotions directly affect human behavior and thought. So if you are designing a site that hopes to sell products, emotion is what will be the difference between a user buying or leaving.

Improves Experience and Usability

I probably don’t need to convince you that emotions shape the experiences that we have, but would you believe that emotion affects how usable an interface is?

Researchers Masaaki Kurosu and Kaori Kashimura studied this concept by testing ease of use for attractive and unattractive ATM (automatic teller machines) interfaces. Having first tested in Japan, the researchers concluded it must be a cultural phenomenon and redesigned the test for the Israelis (which they considered to be less concerned with beauty.) Despite their expectations to find no correlations, the Israelis also found the more attractive interfaces easier to use. This has evolved into the concept of the “aesthetic-usability effect”, which states aesthetically pleasing things are easier to use.

Psychologist Alice Isen has identified there is a connection between happiness and creative thinking. When you feel good, you are better at problem solving and better able to deal with obstacles. In a relaxed state, your focus is broad, allowing you to think of alternative ideas to solve a problem. When frustrated, your emotions move you towards survival mode. In this state focus is narrowed to the source of frustration (or threat) preventing you from doing anything but dwelling on what’s upsetting you.

Usability issues seem much less significant on emotionally appealing websites. Users may even forget they had them, because their emotional state allows them to find quick solutions when problems are encountered. Users reflect on their experience in a positive manor and ideally find it enjoyable.

Pleasurable Design through Emotion

One of the greatest uses of emotion in any context is creating pleasurable feelings. Scientifically speaking, pleasure is a positive mental state that humans consider enjoyable. It is a broad classification and can encompass a multitude of positive feelings from entertainment to ecstasy. While it may be self evident that pleasure is a good thing, it has particular relevance to the web.

The “pleasure principle” (Freud, 1921) is a psychological theory which describes pleasure as a form of feedback which tells humans what to pursue or avoid. Pleasurable situations motivate humans to recreate the environment which resulted in said pleasure. Therefore, a pleasurable experience naturally motivates users to return to your site. Provided they are the right people, return visitors are one of the most coveted assets of any site. The principle works inversely as well. Negative emotions motivate people to avoid the associated environment. This is why usability is so critical; users who are frustrated are instinctively motivated against returning.

Not all sites are relevant to pleasure. Sites which deal with serious matters would likely be damaged if you tried to make them pleasurable. A site memorializing lost soldiers has no room for pleasure. Users could extrapolate the underlying message as making light of the situation. In other cases making a website pleasurable is unrealistic. I’m reminded of a time it was suggested we make a sign-up form for a class action lawsuit “fun.” While it would be great if that were possible, it isn’t likely that a user would ever find that task enjoyable.

Where possible and relevant, pleasure is one of the most effective uses of emotion. Nothing will increase the popularity of your site like a user who truly enjoys the experience of visiting. I use the word “experience” because pleasure won’t be created through one aspect of design, rather all aspects put together.

To design positive emotional experiences you must understand human emotion. The subject of emotions is complex largely because everything we do is either influenced by, or directly caused by, emotion. Factor in the range and capacity different individuals have for emotion, add in the fact most emotions occur subconsciously, and round this out with the notion most of us are unaware of the true causes of our actions, and the result is a complex puzzle.

Emotional States, Motivation and Behavior

Emotions can be broadly classified as pleasant or unpleasant. Pleasant emotions include happiness, love, and excitement where unpleasant include anger, fear and sorrow. Earlier in this chapter we covered that simple decisions are difficult to make in absence of emotion. The relationship between cognition and emotion is actually even more intimate. They work in conjunction as a way to make sense of the world around you. When analyzing a situation, your cognition assigns meaning and emotion assigns value. If you were to see a billboard about littering, logic would tell you the messaging but emotion would assess if it applied to you. A well-designed billboard would appeal to your emotions causing you to stop littering.

All emotions have an affect, which is the experience or feeling of emotion. Affects are an outcome of processing external stimuli. In the case of the littering billboard, the graphics or copy could be the affect that causes you to experience the emotion of guilt. If the emotion is strong enough it causes a behavioral change; you stop littering. This is a reflective behavioral change, meaning you’re consciously aware of the choice to modify your behavior. Some affects cause unconscious detectable reactions, which are described as “affect display.” Most facial expressions are affect displays; when seeing something disgusting the emotion causes the muscles in your face to constrict in such a way that demonstrates your reaction.

Of course not all emotions are of equal intensity. In his article Emotional Design with A.C.T. – Part 1 on boxesandarrows.com, user experience designer Trevor van Gorp describes level of emotion in terms of arousal. Extreme arousal results in anxiety, and complete lack of arousal causes boredom. This concept is adapted from J.A. Russells Circumplex Model, which was developed to measure the characteristics of emotional responses. Using the model you can identify the dimensions of emotional states, ranging from pleasant anxiety (like the excitement of riding a roller coaster) to unpleasant boredom.

Van Gorp concludes that each emotional state causes different levels of behavioral response. High value emotions encourage us to approach or seek out the cause, low value emotions cause us to avoid the cause. The level of arousal dictates how motivated one is to approach or avoid. Minor inconveniences often cause displeasing emotions, but have such low arousal that many would remain uncomfortable rather than expend the energy to avoid them. When you are hungry, you are in an aroused state that highly motivates you towards the pleasurable emotion of a satisfying meal.

Motivating behavior through emotions is not limited to positive emotions. Designers have intentionally created high arousal, unpleasant interactions as a way of getting people’s attention. The alarm clock that you wake up to every day has an intentionally loud, and obnoxious repeating noise. The product is designed to bombard your arousal with negative emotions motivating you to get up and turn it off.

The Circumplex models are a great reference for understanding the dimensions of emotion and it’s affect on motivation and behavior. Use them as a framework for determining what emotional responses are needed to achieve the desired user behavior. However, just knowing you need to arouse the user in a positive manor is only one element of what’s needed to design an emotional response. Emotional responses happen on different levels of processing. Which level used is based on the characteristics of the external stimuli. Knowing the different processes allows you to intentionally create designs which activate them, creating the desired emotional response.

Three Layers of Processing

Scientists have determined that the processing of stimuli happens on three levels. Psychologist Albert Ellis, creator of Rational Emotive Behavior Therapy developed the “ABC model” to describe the levels (Journal of Individual Psychology, 1957). The ABC model classified the levels as Affect (A), Behavior / Belief (B), and Cognition (C). Through his own research, Don Norman developed a similar model where he segmented human processing into visceral, behavioral and reflective (Basic Books, 2005).

Each of level is handled differently and influences emotion (and therefor behavior) differently, with varying levels of awareness. In the communication layer, we talked about design appealing on a visceral level. This is an emotional response processed through the central nervous system. It’s subconscious and can create a pleasurable feeling.

Not surprisingly, behavioral processing relates to stimulation received through behavior. Behavioral processing is primarily subconscious, but can be influenced by the conscious mind. Subconscious behavioral processing is responsible for your ability to drive without consciously thinking about it. It’s also responsible for the enjoyment you get from interacting with an elegantly designed web application.

Reflective processing is contemplative and allows us to study, inter-operate with, and reflect on experiences and emotions. This level allows you to appreciate the nuances of well-composed music and associate places with previous desirable experiences. Nostalgia is a byproduct of reflective processing.

You design for visceral emotional reactions differently than you would behavioral or reflective. The best emotional design engages the users on all three levels, each addressed specifically.

The Visceral Level

The visceral system is the most primitive of the three stimuli referenced above. Visceral interpretation is subconscious. It’s responsible for first impressions and driven by initial sensory inputs such as appearance, feel, and sound.

As a basic safety mechanism, the visceral system allows us to make quick judgments if a situation is dangerous or opportunistic. Signals that communicate danger evoke negative emotions and motivate avoidance. Signals that communicate opportunity motivate approach (or on the web, exploration).

Visceral responses are biological and are interpreted in the context of survival. This incredibly sensitive system is not subjected to reasoning or previous knowledge (both which come into play after a visceral response.) Thus the triggers for these responses are often related to environmental indicators of threat or reward. Visual stimuli associated with increased survival result in pleasurable visceral reactions. Fresh water, for example is an essential component of human survival, which is why so many people are drawn to it. The draw is more complex than a function of thirst quenching. To many people, large bodies of fresh water are extremely desirable to live near, relax by, and look at. This is because long ago your chances of survival were greatly increased if you were near a fresh water source. Thus it feels comforting to be near to this day.

While any visual sensory input can affect the visceral system, those most related to survival generate the most arousal. Positive affects deal with food, safety, procreation, and hydration. Anything that threatens the positive affects is perceived as negative. Don Norman has theorized what he believes are biologically ingrained affects, which I have combined with my list below:

Positive visceral stimuli

• Vibrant colors
• Smiling people
• Smooth objects
• Warm places
• “Attractive” people
• Soft lighting
• Fresh water
• Healthy vegetation (food source)
• Open areas
• Shelter

Negative visceral stimuli

• Heights
• Darkness
• Empty or desolate terrains
• Overly dense terrain or crowded areas
• Decaying foods
• Sharp objects
• Bodily fluids
• Deformed bodies
• Dirty water
• Dead bodies or blood
• Disease
• Some dangerous animals (spiders, snakes, dogs, etc…) (Norman)

Because the nervous system causes visceral responses they are the most consistent across all human beings. You might think this would make design easy, but users still have personal preferences. Some people are more prone to fear of animals such as dogs or spiders where others are unaffected. This again speaks to the necessity of designing specifically to the target users.

The Behavioral Level

Like visceral response, behavioral processing is subconscious. While it can be influenced by the conscious mind, much of our behavioral actions are performed automatically. For an experienced keyboarder, typing has become behavioral. You no longer have to think about pressing each key to type a sentence, your mind knows where they keys are and how to push them. Most human actions are performed on a behavioral level, with much less cognitive involvement than you may think.

Behavioral processing falls between fast acting visceral reactions and the slow reflective process. Because of this it can be enhanced or dulled by reflection and has the potential to do the same to visceral responses. Repeated exposure to spiders is a common way to get over the visceral fear of arachnophobia. For these reasons behavioral processing is perfect for learning routine patterns and performing them efficiently.

On an emotional level, the behavioral level is all about how you feel while performing. In relation to design, this would be how you feel while using a product or website. Outside of design, you can get behavioral pleasure from riding a horse or even chopping wood. In these cases the act of doing something skilled creates positive arousal.

Visceral enjoyment is all about sensory engagement. The way something looks, feels, smells, etc. feels pleasurable. Behavioral enjoyment is obtained through action. Performing a skilled activity feels good, whether you are playing basketball or dicing an onion. Using something that is well designed is also pleasurable, as it allows you to complete a task and achieve a goal with less effort.

On the web, using a website to accomplish tasks quickly and easily creates a similar emotional response. The sense of accomplishment and efficiency is rewarding; it feels as if you’ve done something well and used a well-designed tool (the site) to do it. If the website was poorly designed and the user suffered frustrations along the way, the site would create negative arousal. This is why much of user experience design focuses on behavioral enjoyment.

The Reflective Level

The highest level of processing is conscious and reflective. This is where logic is used to make sense of the world around us, including rationalizing our visceral responses and behavior. Seeing a large spider may instantly give you negative arousal (visceral), which causes you to jump and scream (behavioral). It is only afterwards that you reflect on what happened and use logic to rationalize your action (such as being afraid of poisonous spiders). Visceral and behavioral emotions fade fast, but the reflective emotions are long term. You might not remember how the Amazon.com design made you feel the first time you saw it (visceral), or what it was like the first time you placed an order (behavioral), but you won’t likely forget how the site seemingly sells everything (reflective).

Reflection is the most volatile of the three levels, influenced by culture, experience, and knowledge. It is also closely tied to self-image, so with reflection comes pride or embarrassment. When someone says they love Nike shoes, it’s because they have identified those shoes help define who they are. They might have reached that point because the shoes are pleasant looking and help them perform better, but the conclusion occurs through self-identification with the product. Emotions like self-identification, deal with social standing and are reflective. This includes accomplishment, recognition and service.

Reflective emotions are the hardest to design for. As they are influenced by almost every factor of human existence (race, age, gender, culture, experiences) everyone will have different reflective responses to the same stimuli. The yin to the yang is that reflective emotions are the longest lasting, so they have the greatest reward.

The highly cognitive nature of this processing level allows us to appreciate the nuances of art, music, and literature. In music, there is a visceral appeal to pleasant harmonies. Much of the enjoyment of music is through appreciation of the nuances, such as technique, unique approaches, or related subject matter. Those with more knowledge about a subject will appreciate different aspects at this level. Web designers are likely to appreciate fine graphical details such as kerning and letter spacing, where those untrained will simply see the combined visual effect and find it enjoyable or appealing.

Experiences from all three processes get stored in memory, allowing users to reactivate some of their emotions when recalling experiences at a later date. This is called the “nostalgia effect” and is why people are so attached to photographs, home movies, journals, and mementos.

Experiences occur through all three levels of processing, the extent of which depends on the situation. Some experiences are more visceral in nature where others more reflective. Some of the most memorable experiences tap into all three. Looking through someone’s photo album combines the visual emotion of seeing photos of people you know, the sensory actions of turning the page or clicking on thumbnails, and the reflective experience of remembering the times that those photos aptly captured.

How experiences affect a user is largely depended on the individual. As mentioned earlier, even the most consistent processing (visceral) is subject to genetic differences. Designing specific emotional responses requires an understanding of the users emotional characteristics.