Emotional Design

출처: http://www.boxesandarrows.com/view/emotional-design

Emotional Design with A.C.T. - Part 1

Defining Emotion, Personality and Relationship

by Trevor van Gorp on 2010/08/17

As UX professionals, we strive to design engaging experiences. These experiences help to forge relationships between the products we create and the people who use them. Whether you’re designing a website or a physical product, the formation of a relationship depends on how useful, usable and pleasurable the experience is. Ultimately, we form relationships with products and services for the same reasons we form relationships with people:

• Pleasurable products are attractive and make us feel good. Attractive people can have the same effect.
• Usable products are easy to interact with and easy to understand. Good conversationalists are the same.
• Useful products fulfill our needs in a way that leaves us emotionally satisfied in the long term. Long-term relationships can fulfill our physical, psychological, emotional and spiritual needs.

In a previous article on Boxes and Arrows (Design for Emotion and Flow), I talked about the importance of balancing users’ emotional states to command attention and create flow: the mental/emotional experience where all the user’s attention is totally focused on an activity. The total engagement of the flow experience is highly immersive and encourages user loyalty. The experience of flow during interaction can be seen as one of the foundations for the formation of an ongoing relationship.

In Part 1 of this two-part article, I’ll be discussing how emotions command attention. Then, we’ll dive deeper to explore how design elicits and communicates emotion and personality to users. Emotions result in the experience of pleasure or pain that commands attention. The different dimensions of emotion affect different aspects of behavior as well as communicating personality over time. In Part 2, I’ll introduce a framework for describing the formation of relationships between people and the products they use.

“Affective Design”에 대한 정의

Some time ago, a friend offered me a ride home after work. I got into her SUV and sat down, ready for the short ride. After a few minutes, an annoying beeping sound started. “Oh,” she said, “You’ll need to fasten your seatbelt to make that irritating noise stop.” Grudgingly, I did up my seatbelt and the noise ceased, but the beeping had accomplished its purpose; I fastened my seatbelt.

얼마 전, 한 친구가 일을 마친후 집까지 태워다 주겠다고 했다. 나는 그녀의 차에 앉았고 차가 출발하였다.

몇 분 후 씨끄러운 소리가 울리기 시작했다. "안전벨트를 매야지만 소리가 멈춰." 친구가 이야기 했다. 

불만스럽게 나는 안전벨트를 메었고 그 소리는 사라졌지만, 내가 안전벨트를 메었기 때문에 그 소리는 그 목적을 다한것이나 마찬가지였다.

This is an example of affective design: design that’s intentionally created to capture the user’s attention, triggering an emotional response that will increase the likelihood of performing a certain behavior. The emotional response can be conscious or unconscious. For example, a brightly colored button will attract users’ attention unconsciously by affecting the degree of arousal (i.e. physical stimulation). And the behavior could be any action, from clicking a button or signing up for a newsletter, to making a purchase online.

이것이 Affective Design의 한 예이다. 사용자의 주의를 잡을 수 있는 디자인, 특정한 행동을 수행할 수 있게끔 하는 감정적인 반응을 불러일으키는 것이다.

그 감정적인 반응은 의식적일 수도 있고 무의식 적일 수도 있다.

예를 들어 밝은 컬러의 버튼은 사용자들이 쉽게 알아챌 수 있으므로 사용자의 무의식적인 주의에 영향을 미칠 수 있다. (예: 물질적인 자극) 그리고 그 행동은 또 다른 행동으로 나타난다. (버튼을 클릭하거나 뉴스레터에 가입하거나, 온라인에서 구매를 할 수도 있다.)

To make the unpleasant sound in my friend’s SUV stop, I had to perform a particular behavior. In this case, the stimulus was the unpleasant beeping sound, which triggered my annoyance and led me to fasten my seatbelt. With your latest web app, the stimulus is likely visual, rather than auditory, but the energy that it commands is the same. One thing these stimuli have in common is that they demand and command your attention.

내 친구의 차에서 호감가지 않는 소리를 멈추기 위해 나는 특별한 행동을 해야만 했다.

이 사례에서 자극은 호감가지 않는 소리였고, 이것은 내 화를 돋구고 안전벨트를 매게 하였다.

당신의 최근 웹 앱에서도 그 자극은 청각적이기 보단 시각적일 수 있다. 그러나 수행할 수 있게끔 하는석 그 에너지는 동일하다. 동일한 이 자극은 그들이 당신의 주의를 요구하고 수행하게끔 한다.

Attention

Attention has been described as psychic energy.¹ Like energy in the traditional sense, no work can be done without it, and through work that energy is consumed. Csikszentmihalyi (1990) named the mental/emotional state where all our attention is totally focused on an activity “Flow”. Flow is a highly engaging experience, and strong emotional engagement demands and narrows the user’s attention. In order for users to accomplish their tasks and attain Flow, we need to capture and hold their attention by managing the design of their emotional experiences.

The products we design need to attract users based on how they look and sound, persuading them (via their feelings) to approach or avoid. They also need to converse with the people using them. The way these products interact should persuade users to take particular actions in predetermined sequences, while also affording users a feeling of control. If we’ve done our jobs correctly, the result is that users will commit and transact with our system; they click the button, subscribe to the newsletter, make the purchase or book the flight.

These events mark the formation of a relationship between the user and the product or application. Each experience with a company’s products or services shapes the user’s relationship with the company’s brand. In order to build positive brand relationships, companies need to effectively manage the user’s emotional experiences during every encounter with their products or service channels. As we’ll see, the consistent expression of a particular emotion is perceived as a personality trait, and our personality traits determine the relationships we form.

Dimensions of Emotion

To understand how emotional expression becomes personality, we first need to understand emotion itself. All emotional or affective states can be described in terms of two underlying dimensions: value and arousal. “Value” judgments are judgments of good vs. bad. We tend to base these conscious judgments on whether something is pleasant or unpleasant.

어떻게 감정이 개인화되는지를 이해하기 위해 우리는 감정(emotion)에 대하여 알 필요가 있다.

모든 감정 혹은 감정적 상태는 2개의 디멘션으로 기술되어질 수 있다.

가치(value)와 각성(Arousal).

가치(value)판단은 좋고 나쁨의 판단이다.

우리는 어떤 것이 기쁘거나 기쁘지 않은지에 대한 의식적 판단에 기반하는 경향이 있다.

“Arousal” has been used to refer to the unconscious activation of the body, the brain or a particular behavior.² It has been defined by levels of anxiety vs. boredom,³ and we can measure it by monitoring heart rate, respiration, blood pressure and skin conductance. To simplify it, you can think of arousal as the level of stimulation or activation. When we combine these two dimensions of emotion (i.e. the conscious & cognitive, and the unconscious & physical) we get a circular model of emotion.

각성(Arousal)은 신체, 뇌, 혹은 특정 행동의 무의식적인 행위로 언급되어지곤 한다.

그것은 불안과 지루함의 정도로 규정되어지고 우리는 심장의 박동, 호흡, 혈압 등을 봄으로써 이를 측정할 수가 있다.
이를 단순화하기 위해 우리는 자극과 행위의 정도로써 각성을 생각할 수 있다.
우리가 이 감정의 2가지 디멘션을 결합할 때, 우리는 감정의 원형모델을 얻게 된다.

Figure 1: Affect Circumplex (Van Gorp, 2006 adapted from Russell, 1980)³

Because arousal is largely unconscious, it provides an especially powerful channel for designers to command attention and influence behavior. For example, large images, bright saturated colors and high contrast all increase arousal levels. Increasing the size of an image and moving anyone in it closer within the frame will increase arousal levels.⁴ When the level of arousal increases, the focus of attention narrows and goes to whatever is causing the stimulation. A good example of this is a stop sign, which uses a bright red to command attention within the busy visual environment of the street.

During the product development process, there is often a disconnect between design, marketing and usability for this very reason. Visual designers and marketers are often focused on increasing arousal through the attention grabbing emotional-impact of bright colors and large images, while usability analysts are focused on controlling arousal and reducing negative emotions by ensuring task completion.

각성(arousal)은 큰 무의식세계이기 때문에 이는 특별히 주의를 수행하고 행동에 영향을 미치는 디자이너들을 위해 매우 영향력있는 채널로 제공된다. 예를 들어 큰 이미지, 밝은 컬러, 그리고 높은 대비는 모두 각성에 대한 정도를 높여준다. 각성의 정도가 높아지면, 주의력은 좁아지고 무엇이든 자극을 유발시키게 된다. 좋은 예는 신호등이다. 이는 주의력을 주는 밝은 빨강을 이용한다.

제품 개발 프로세스 동안, 자주 디자인, 마케팅, 그리고 사용성 사이에 단절현상이 발생하곤 한다.

시각적 디자이너들과 마케터들은 밝은 컬러와 큰 이미지의 감성적 임팩트를 잡는 주의력을 통해 자주 각성이 증가하는 것에 집중하게 된다. 그동안 사용성 분석가들은 과업을 진행함으로써 각성을 조절하고 부정적인 감정을 줄이는데 집중하게 된다.

Dimensions of Behavior

Each dimension of emotion affects a different aspect of behavior. Value affects whether we approach (i.e. pleasure) or avoid (i.e. pain), while arousal levels influence how motivated we are to do either. Both pleasant and unpleasant objects and experiences can increase arousal levels. For example, fear and excitement are both high arousal emotions. The level of arousal also affects how intensely we experience a given emotion, and the more intense the emotion, the more attention is demanded. Arousal also affects our level of motivation. Low anxiety or boredom results in low motivation, while higher anxiety results in higher motivation. This continues to an optimum level (i.e. the balance of Flow), after which motivation and performance decrease, while anxiety increases.

각각의 감정의 차원은 행동의 다른 곳에 영향을 미친다.

가치(value)는  우리가 기쁨에 접근하거나 아픈것을 피하는 것에 영향을 미친다.

그동안 각성(arousal)의 정도는 어떻게 우리가 해야하는 것들에 영향을 미치는지 볼 수 있다.

기쁨과 기쁘지 않은 것들 그리고 경험들 모두 각성의 정도를 높일 수 있다.

예를 들어 두려움과 흥미는 모두 높은 각성 감정상태를 보인다.

각성의 정도는 또한 우리가 주어진 감정을 경험할 때 얼마나 강렬한지에 영향을 미칠 수 있다.

그리고 더 감정이 강렬할 수록 그 주의력은 더 요구되어진다.

각성은 또한 우리의 동기부여의 정도에 영향을 미칠 수 있다.

낮은 갈망과 지루함은 낮은 동기부여를 낳는다. 그동안 높은 갈망은 높은 동기부여를 낳는다.

이는 최적의 레벨로 이어지고 (예: 흐름의 밸런스) 이후, 갈망이 증가하는 동안 그 동기부여와 행동은 감소한다.

Figure 2: Behavior & Motivation Circumplex (adapted from Russell, 1980³ ; van Gorp, 2006⁴)

In the case of the annoying sound in my friend’s SUV, the value of the noise was negative (i.e. unpleasant). This unpleasant feeling creates the urge to avoid. If the volume of the noise had increased, or the rate of the beeping had sped up, this would have unconsciously increased arousal levels, further increasing my motivation to avoid the noise or make it stop.

This is a very simple example within the relatively controlled context of a vehicle, but what happens when the context becomes more layered or complex? What happens when the design is visual and interactive? As we’ll see later, that’s when simple emotional expressions are perceived as personalities.

Emotion and Personality

Humans are such social beings that we perceive the expression of emotion in everything, including products, objects and websites. Because products usually remain the same, any perceived emotional expression becomes a perceived personality trait over time. The person who appears down or sullen the first time you meet is expressing an emotion—sadness. When that same person appears sad the next 20 times you meet, he or she is likely to be seen as “depressed”. When it comes to products and websites, we can think of a personality trait as the long-term expression of a particular emotion. Take a look at the video below to get a better idea.

Figure 3: American Express Video

As human beings, we assign personalities to objects, interfaces and websites based on the way they behave and appeal to our senses. Even though we consciously know that computers and media are not animate and do not have feelings, we still respond socially and automatically when viewing, interacting and evaluating them.⁵ It has been suggested that products should be viewed as “living objects with which people have relationships.”⁶ Through the relationships that are formed by using products, people can be made to feel happy or sad, angry or passive, relaxed or anxious, proud or ashamed, and motivated or demotivated.

Personality Traits and Relationships

Like perceptions of emotion, our first impressions of personality are based on the information received by our senses (i.e. sight, smell, hearing, taste and touch). These impressions are formed quickly and unconsciously. With websites and applications, personality is inferred from the use of language, user prompts, sounds, navigation, proportions, layout, contrast, color, images and fonts that comprise the formal properties of the design. In fact, these perceptions of personality are so automatic and unconscious, they occur regardless of whether the people experiencing them believe they are appropriate. Other, more conscious decisions about personality are based on how the object we interact with behaves over time.

In human relationships, personality traits are an important part of attraction and conversation. They shape our relationships by determining who we like and what we expect from those we encounter. They also influence how well we get along with others. In this respect, perceived personalities in products and websites are no different. Unlike us, however, product personalities can exist in fictional worlds and be controlled by designers so that they appear at particular times and places. They can often be simpler, more consistent and more easily identifiable than real personalities, reducing uncertainty and promoting trust.⁵

Dimensions of Personality

Although human personality traits are complex, psychologists have grouped product personalities into a small number of categories that have a similar character. They’ve identified two major dimensions of personality that are readily assigned to products, computers and interfaces by users: dominant vs. submissive⁵ and friendly vs. unfriendly.⁷

비록 사람의 성격의 특성이 복잡할지라도 심리학자들은 비슷한 특징이 있는 작은 수의 카테고리로 특성을 그룹핑한다.

그들은 사용자들이 사용하는 제품, 컴퓨터, 인터페이스에 2개의 주요한 특징을 확립하였다.

1. 지배걱인, 2. 복종하는. 그리고

1. 친근한, 2.친근하지 않은

Figure 4: Personality Circumplex (adapted from Reeves & Nass, 1998⁵; van Gorp, 2006⁴)

Take a look at the simple objects below. Are they expressing emotion? As static objects, any emotions they’re expressing will remain consistent over time. If the major dimensions of personality are friendliness and dominance, which object do you perceive to be friendlier? Which do you perceive is more dominant? Check the comments people left below the photos. Happiness is associated with a friendly demeanor, pleasure and approach behaviors, while sadness is associated with unfriendliness, pain and avoidance.

아래 간단한 물체를 확인해보라. 이것들이 감정을 표현하는가?

정적인 물체로써 어떤 감정도 시간을 넘어 일관적으로 남을 수 있다.

만일 주된 감정의 차원이 친근하고 복종적이라면 어떤 물체를 당신은 더 친근하게 받아들일 수 있을까?

어떤걸 당신은 보다 복종적이라고 받아들일 수 있을까?

사진 아래 사람들의 댓글들을 확인해보면 행복은 친근함, 기쁨, 행동으로 이어짐으로 관련이 있고

반면에 슬픔은 친근하지 않은 것, 아픔, 도피와 관련이 있다.

Figure 5: Objects Displaying Personality – (photos courtesy of Jim Leftwich)

Designing Personality: Dominant or Submissive?

Dominant visual features could be described as angular, straight, cold/cool, dark, silver, black…with a heavy base. Submissive visual features could be described as round, warm, light/lucid, soft/delicate, golden.⁸ When a personality is not represented with overt dominant visual or interactive characteristics, the tendency is to describe it as more submissive. Of the two sites in Figure 6, which site is more dominant and which is more submissive? Which site is friendly and which is unfriendly?

Figure 6: Martha Steward and WWE – Submissive and Dominant Designs

Notice which one of the sites above you’re more naturally attracted to. Which one do you feel more compelled to approach or avoid? Which one naturally grabs more of your attention? How well do these sites match the likely personalities of their target audiences? Generally speaking, you can attract the user by presenting a visual personality that is similar to his or her own. When it comes to attraction, we’re attracted to things that look similar to the way we are, or the way we’d like to see ourselves.

Friendly or Unfriendly?

Friendly visual features could be described as positive, while unfriendly visual features could be described as negative. Friendliness is not only determined by what is said, but also by how it is said (i.e. the tone of the conversation). Our tendency to assign and characterize personality based on conversation is easily recognizable in the example below. This example uses contrast, visual weight, , color value, size and typography to alter the meaning that is conveyed by the words. The content conveys the message, but the look and feel change how that message is interpreted, altering the meaning.

Which of the statements below would you rather hold a conversation with? Which one do you feel more compelled to approach or avoid? Which one naturally grabs more of your attention? When it comes to conversation, someone has to lead, and opposites attract.

Figure 7: Personality and Meaning⁴

Similar or Complementary?

Similarity is the theory that people are more attracted to those with personalities similar to their own, over those who display different personalities.⁵ Complementarity is the theory that people are attracted to people with personalities that complement their own level of dominance or submissiveness (Markey 2007⁹; Personality Research¹⁰). It comes down to the old question of whether relationships work better when people are the same or opposite? And the answer is yes.

When it comes to personalities, different things stir our emotions at different stages of a relationship. Researchers found that Similarity takes precedence early in relationships, playing a vital role in initial attraction. Complementarity becomes more important as relationships develop over time.¹¹ People in long-term relationships are more satisfied when their partners are either more or less dominant than they are. Two dominant persons may experience conflicts as both attempt to lead, while two submissive individuals may lack initiative, as neither is willing to lead. (Markey 2007⁹; Wikipedia 2009¹²)

Generally speaking, interaction between the system and the user should be complementary, where the user takes up the dominant role, while the product, interface or service takes on the submissive role. These roles might flip in the case of a guided tour, or an application where the system is guiding the process or has an air of authority.

Conclusion

In Part 1, we learned that emotion commands attention. We also learned that affective design is a term used to describe design created to intentionally capture the user’s attention and trigger an emotional response that will increase the likelihood of the user performing a desired behavior.

The value dimension of emotion influences our behavior (i.e. whether we approach or avoid), while the arousal dimension influences how motivated we are to do either.

Emotions influence different aspects of behavior, and their expressions are perceived as different aspects of personality over time. Value influences the perception of friendliness, while arousal influences the perception of dominance.

파트 1에서 우리는 감정이 주의력을 만든다는 것을 배웠다.

우리는 또한 Affective Design이 의도적으로 사용자들의 주의력을 잡아내고 감정적인 반응을 이끌어 내기 위해 디자인을 묘사할 때 쓰이는 용어임을 배웠다.

감정의 가치는 우리의 행동에 영향을 미치고

반면에 각성은 우리가 어떻게 동기부여하는지에 영향을 미친다.

감정은 행동의 다른 면에 영향을 미치고

그것들의 표현은 시간을 넘어선 다른 성격(특징)으로 인지되어진다.

가치는 친근함의 인지에 영향을 미치며

각성은 지배적인 것의 인지에 영향을 미친다.

Figure 8: Emotions, Behavior & Motivation and Personality⁴

And finally, we learned that customers are attracted to things that they perceive have a personality similar to their own. Over time however, they prefer to interact with things that take up a role which is complementary to their own.

Useful, usable and pleasurable experiences help facilitate the formation of relationships. In Part 2, we’ll look at the different ways people experience love to get an even better understanding of how relationships form. Then, I’ll introduce a new framework that describes how to systematically provide experiences in the different ways that are necessary to form relationships.