<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Boxes and Arrows &#187; Trevor van Gorp</title>
	<atom:link href="http://boxesandarrows.com/author/trevvg/feed/" rel="self" type="application/rss+xml" />
	<link>http://boxesandarrows.com</link>
	<description>Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business.</description>
	<lastBuildDate>Tue, 14 May 2013 13:36:54 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Emotional Design with A.C.T. &#8211; Part 1</title>
		<link>http://boxesandarrows.com/emotional-design-with-a-c-t-part-1/</link>
		<comments>http://boxesandarrows.com/emotional-design-with-a-c-t-part-1/#comments</comments>
		<pubDate>Wed, 18 Aug 2010 06:25:44 +0000</pubDate>
		<dc:creator>Trevor van Gorp</dc:creator>
				<category><![CDATA[Big Ideas]]></category>
		<category><![CDATA[Design Principles]]></category>
		<category><![CDATA[Learning From Others]]></category>

		<guid isPermaLink="false">http://boxesandarrows.com/emotional-design-with-a-c-t-part-1/</guid>
		<description><![CDATA[We form relationships with products and services for the same reasons we form them with people. In this first of two installments, Trevor explains how emotion commands attention.]]></description>
				<content:encoded><![CDATA[<p>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&#8217;re designing a website or a physical product, the formation of a relationship depends on how <em>useful, usable</em> and <em>pleasurable</em> the experience is. Ultimately, we form relationships with products and services for the same reasons we form relationships with people:</p>
<ul>
<li>Pleasurable products are attractive and make us feel good. Attractive people can have the same effect.</li>
<li>Usable products are easy to interact with and easy to understand. Good conversationalists are the same.</li>
<li>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.</li>
</ul>
<p>In a previous article on Boxes and Arrows (<a href="http://www.boxesandarrows.com/view/design-for-emotion">Design for Emotion and Flow</a>), I talked about the importance of balancing users&#8217; emotional states to command attention and create flow: the mental/emotional experience where all the user&#8217;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.</p>
<p>In Part 1 of this two-part article, I&#8217;ll be discussing how emotions command attention. Then, we&#8217;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&#8217;ll introduce a framework for describing the formation of relationships between people and the products they use.</p>
<p></p>
<p>
<h3>Defining &#8220;Affective Design&#8221;</h3>
</p>
<p>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. &#8220;Oh,&#8221; she said, &#8220;You&#8217;ll need to fasten your seatbelt to make that irritating noise stop.&#8221; Grudgingly, I did up my seatbelt and the noise ceased, but the beeping had accomplished its purpose; I fastened my seatbelt.</p>
<p>This is an example of <b>affective design</b>: design that&#8217;s intentionally created to capture the user&#8217;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&#8217; 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.</p>
<p>To make the unpleasant sound in my friend&#8217;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 <b>attention</b>.</p>
<p></p>
<p>
<h3>Attention</h3>
</p>
<p>Attention has been described as psychic energy.<sup><a href="#fn1">1</a></sup> 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 &#8220;Flow&#8221;. Flow is a highly engaging experience, and strong emotional engagement demands and narrows the user&#8217;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.</p>
<p>The products we design need to <em>attract</em> users based on how they look and sound, persuading them (via their feelings) to approach or avoid. They also need to <em>converse</em> 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&#8217;ve done our jobs correctly, the result is that users will commit and <em>transact</em> with our system; they click the button, subscribe to the newsletter, make the purchase or book the flight.</p>
<p>These events mark the formation of a relationship between the user and the product or application. Each experience with a company&#8217;s products or services shapes the user&#8217;s relationship with the company&#8217;s brand. In order to build positive brand relationships, companies need to effectively manage the user&#8217;s emotional experiences during every encounter with their products or service channels. As we&#8217;ll see, the consistent expression of a particular emotion is perceived as a personality trait, and our personality traits determine the relationships we form.</p>
<p></p>
<p>
<h4>Dimensions of Emotion</h4>
</p>
<p>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: <b>value</b> and <b>arousal</b>. &#8220;Value&#8221; judgments are judgments of good vs. bad. We tend to base these conscious judgments on whether something is pleasant or unpleasant.</p>
<p>&#8220;Arousal&#8221; has been used to refer to the unconscious activation of the body, the brain or a  particular behavior.<sup><a href="#fn2">2</a></sup> It has been defined by levels of anxiety vs. boredom,<sup><a href="#fn3">3 </a></sup> 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 &#038; cognitive, and the unconscious &#038; physical) we get a circular model of emotion.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/figure1new.jpg" width="700" height="224" alt="Figure 1 " title="Figure 1 "/></p>
<p><b>Figure 1:</b> Affect Circumplex  (Van Gorp, 2006 adapted from Russell, 1980)<sup><a href="#fn3">3</a></sup> </p>
<p>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.<sup><a href="#fn4">4</a></sup> 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.</p>
<p>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.</p>
<p></p>
<p>
<h4>Dimensions of Behavior</h4>
</p>
<p>Each dimension of emotion affects a different aspect of behavior. Value affects whether we <b>approach</b> (i.e. pleasure) or <b>avoid</b> (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.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/figure2newer.jpg" width="700" height="224" alt="" title=""/></p>
<p><b>Figure 2:</b> Behavior &#038; Motivation Circumplex (adapted from Russell, 1980<sup><a href="#fn3">3 </a></sup>; van Gorp, 2006<sup><a href="#fn4">4</a></sup>)</p>
<p>In the case of the annoying sound in my friend&#8217;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.</p>
<p>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&#8217;ll see later, that&#8217;s when simple emotional expressions are perceived as personalities.</p>
<p></p>
<p>
<h3>Emotion and Personality</h3>
</p>
<p>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 &#8212; sadness. When that same person appears sad the next 20 times you meet, he or she is likely to be seen as &#8220;depressed&#8221;. 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.</p>
<p><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/m56F4EKN9hg&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/m56F4EKN9hg&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></p>
<p><b>Figure 3:</b> American Express Video</p>
<p>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.<sup><a href="#fn5">5</a></sup> It has been suggested that products should be viewed as <i>&#8220;living objects with which people have relationships.&#8221;</i><sup><a href="#fn6">6</a></sup> 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.</p>
<p></p>
<p>
<h3>Personality Traits and Relationships</h3>
</p>
<p>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.</p>
<p>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.<sup><a href="#fn5">5</a></sup></p>
<p></p>
<p>
<h4>Dimensions of Personality</h4>
</p>
<p>Although human personality traits are complex, psychologists have grouped product personalities into a small number of categories that have a similar character. They&#8217;ve identified two major dimensions of personality that are readily assigned to products, computers and interfaces by users: <b>dominant</b> vs. <b>submissive</b><sup><a href="#fn5">5 </a></sup> and <b>friendly</b> vs. <b>unfriendly</b>.<sup><a href="#fn7">7</a></sup></p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/figure4new.jpg" width="700" height="216" alt="Figure 4" title="Figure 4"/></p>
<p><b>Figure 4:</b> Personality Circumplex (adapted from Reeves &#038; Nass, 1998<sup><a href="#fn5">5</a></sup>; van Gorp, 2006<sup><a href="#fn4">4</a></sup>)</p>
<p>Take a look at the simple objects below. Are they expressing emotion? As static objects, any emotions they&#8217;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.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/figure5new.jpg" width="575" height="311" alt="" title=""/></p>
<p><b>Figure 5:</b> Objects Displaying Personality &#8211; (photos courtesy of Jim Leftwich)</p>
<p></p>
<p>
<h3>Designing Personality: Dominant or Submissive?</h3>
</p>
<p>Dominant visual features could be described as <i>angular, straight, cold/cool, dark, silver, black&#8230;with a heavy base</i>. Submissive visual features could be described as <i>round, warm, light/lucid, soft/delicate, golden</i>.<sup><a href="#fn8">8</a></sup> 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?</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/Figure_6.jpg" width="576" height="215" alt="" title=""/></p>
<p><b>Figure 6:</b> <a href="http://www.marthastewart.com">Martha Steward</a> and <a href="http://www.wwe.com">WWE</a> &#8211; Submissive and Dominant Designs</p>
<p>Notice which one of the sites above you&#8217;re more naturally attracted to. Which one do you feel more compelled to <i>approach</i> or <i>avoid</i>? 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 <b>similar</b> to his or her own. When it comes to attraction, we&#8217;re attracted to things that look similar to the way we are, or the way we&#8217;d like to see ourselves.</p>
<p></p>
<p>
<h4>Friendly or Unfriendly?</h4>
</p>
<p>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. </p>
<p>Which of the statements below would you rather hold a conversation with? Which one do you feel more compelled to <i>approach</i> or <i>avoid</i>? Which one naturally grabs more of your attention? When it comes to conversation, someone has to lead, and opposites attract.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/Figure_7.jpg" width="492" height="138" alt="" title=""/><br />
<b>Figure 7:</b> Personality and Meaning<sup><a href="#fn4">4</a></sup><br />
</p>
<p>
<h3>Similar or Complementary?</h3>
</p>
<p><i>Similarity</i> is the theory that people are more attracted to those with personalities similar to their own, over those who display different personalities.<sup><a href="#fn5">5 </a></sup>  <i>Complementarity</i> is the theory that people are attracted to people with personalities that complement their own level of dominance or submissiveness (Markey 2007<sup><a href="#fn9">9</a></sup>; Personality Research<sup><a href="#fn10">10</a></sup>). It comes down to the old question of whether relationships work better when people are the same or opposite? And the answer is <b>yes.</b></p>
<p>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.<sup><a href="#fn11">11 </a></sup> 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<sup><a href="#fn9">9</a></sup>; Wikipedia 2009<sup><a href="#fn12">12</a></sup>)</p>
<p>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.</p>
<p></p>
<p>
<h3>Conclusion</h3>
</p>
<p>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&#8217;s attention and trigger an emotional response that will increase the likelihood of the user performing a desired behavior. </p>
<p>The <b>value</b> dimension of emotion influences our behavior (i.e. whether we approach or avoid), while the <b>arousal</b> 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.</p>
</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/emotional-design/figure8newer.jpg" width="550" height="126" alt="Emotions, Behavior &#038; Motivation and Personality" title=""/><br />
<b>Figure 8:</b> Emotions, Behavior &#038; Motivation and Personality<sup><a href="#fn4">4</a></sup></p>
<p>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.</p>
<p>Useful, usable and pleasurable experiences help facilitate the formation of relationships. In Part 2, we&#8217;ll look at the different ways people experience love to get an even better understanding of how relationships form. Then, I&#8217;ll introduce a new framework that describes how to systematically provide experiences in the different ways that are necessary to form relationships.<br />
</p>
<p>
<h3>Citations</h3>
</p>
<p id="fn1"><sup>1</sup>Csikszentmihalyi, Mihaly. (1990). <i>Flow: The Psychology of Optimal Experience</i>. New York: Harper Perennial.</p>
<p id="fn2"><sup>2</sup>Cacioppo, J. T., and Petty, R. E.  (1989). The Elaboration Likelihood Model: The Role of Affect and Affect-laden Information Processing in Persuasion. In A. Tybout and P. Cafferata (Eds.), <i>Cognitive and Affective Responses to Advertising</i> (69-89). Lexington, MA: Lexington Books.</p>
<p id="fn3"><sup>3</sup>Russell, J. A. (1980). A Circumplex Model of Affect. <i>Journal of Personality and Social  Psychology</i>, 39, 1161-1178.</p>
<p id="fn4"><sup>4</sup>Van Gorp, Trevor, J. (2006). Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction. University of Calgary, Faculty of Environmental Design, Master’s Degree Project.</p>
<p id="fn5"><sup>5</sup>Reeves, Byron and C. Nass. (1998). <i>The Media Equation: How People Treat Computers, Television and New Media Like Real People and Places</i>. Cambridge: Cambridge University Press.</p>
<p id="fn6"><sup>6</sup>Jordan, Patrick, W. (2000). <i>Designing Pleasurable Products</i>. London: Taylor &#038; Francis.</p>
<p id="fn7"><sup>7</sup>Desmet, Pieter, R. (2002). <i>Designing Emotions</i>. Pieter Desmet. Delft.</p>
<p id="fn8"><sup>8</sup>Wellman, Katrin and Ralph Bruder, Karen Oltersdorf. (2004). Gender Designs: Aspects of Gender Found in the Design of Perfume Bottles. In D. McDonagh and P. Hekkert, (Eds.), <i>Design and Emotion: The Experience of Everyday Things</i>. New York: Taylor &#038; Francis.</p>
<p id="fn9"><sup>9</sup>Markey, P.M.&amp; Markey, C. N. (2007). Romantic Ideals, Romantic Obtainment, and Relationship Experiences: The Complementarity of Interpersonal Traits among Romantic Partners. <i>Journal of Social and Personal Relationships</i>, 24(4), 517-533.</p>
<p id="fn10"><sup>10</sup>Personality Research. (August 1999). <a href="http://www.personalityresearch.org/interpersonal/complementarity.html">Interpersonal Complemetarity</a>. Retrieved December 19, 2009, from <a href="http://www.personalityresearch.org">Personality Research</a>.</p>
<p id="fn11"><sup>11</sup>Vinacke, W. E., Shannon, K., Palazzo,V, Balsavage,L., et-al. (1988). Similarity and Complementarity in Intimate Couples. <i>Genetic, Social, and General Psychology Monographs</i>, 114, 51-76.</p>
<p id="fn12"><sup>12</sup><a href="http://www.Wikipedia.com">Wikipedia</a> (2010, January 2). <a href="http://en.wikipedia.org/wiki/Interpersonal_attraction">Interpersonal Attraction</a>. Retrieved March 18, 2009, from Wikipedia, The Free Encyclopedia.</p>
]]></content:encoded>
			<wfw:commentRss>http://boxesandarrows.com/emotional-design-with-a-c-t-part-1/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Design for Emotion and Flow</title>
		<link>http://boxesandarrows.com/design-for-emotion-and-flow/</link>
		<comments>http://boxesandarrows.com/design-for-emotion-and-flow/#comments</comments>
		<pubDate>Thu, 07 Aug 2008 08:42:20 +0000</pubDate>
		<dc:creator>Trevor van Gorp</dc:creator>
				<category><![CDATA[Design Principles]]></category>
		<category><![CDATA[Learning From Others]]></category>

		<guid isPermaLink="false">http://boxesandarrows.com/design-for-emotion-and-flow/</guid>
		<description><![CDATA[Trevor van Gorp explains how psychologist Mihaly Csikszentmihalyi's concept of "flow" can help you design emotional web experiences by cutting through information overload to engage users.]]></description>
				<content:encoded><![CDATA[<p>We create software and websites to display and represent information to people. That information could be anything; a company’s product list, pictures of your vacation, or an instant message from a friend. At this moment, there’s more information available to you than at any other time in history.</p>
<p>All this information has a lot of positive effects, but it also creates challenges. &#8220;What information consumes is rather obvious; it consumes the <em>attention</em> of its recipients &#8230; a wealth of information creates a poverty of attention&#8221; (Simon 1971). When attention becomes a scarce resource, it’s important to invest it wisely. Information architects and designers play a critical role in ensuring the products they design provide users’ with a return on their investment of attention.</p>
<p>The psychologist Mihaly Csikszentmihalyi (1990) has described focused attention as &#8220;psychic energy&#8221;. Like energy in the traditional sense, no work can be done without it, and through work that energy is consumed. Most of us have experienced a mental/emotional state where all of our attention (or energy) is totally focused on an activity. Csikszentmihalyi (1990) named this state &#8220;flow,&#8221; based on how participants in his studies described the experience.</p>
<p>In this state of consciousness, people often experience intense concentration and feelings of enjoyment, coupled with peak performance. Hours pass by in what seems like minutes. We tend to enter these states in environments with few interruptions, where our attention becomes focused by a <em>challenge</em> that we’re confident we can handle with our existing <em>skills</em>. Feedback is instantaneous, so we can always judge how close we are to accomplishing our task and reaching our goal. The importance of the task influences our level of motivation and perceptions of how difficult the task will be.</p>
<h3>Attention and Flow</h3>
<p>The elements associated with the flow state can be classified into the three areas; 1. Causes of Flow 2. Characteristics of Flow 3. Consequences of Flow (Novak, Hoffman and Yung, 1999).</p>
<p><strong>1. Causes of Flow</strong></p>
<ul>
<li>A clear goal</li>
<li>Immediate feedback on the success of attempts to reach that goal</li>
<li>A challenge you’re confident you have the skills to handle</li>
</ul>
<p><strong>2. Characteristics of Flow</strong></p>
<ul>
<li>Total concentration and focused attention</li>
<li>A sense of control over interactions</li>
<li>Openness to new things</li>
<li>Increased exploratory behavior</li>
<li>Increased learning</li>
<li>Positive feelings</li>
</ul>
<p><strong>3. Consequences of Flow</strong></p>
<ul>
<li>Loss of consciousness of self</li>
<li>Distortions in the perception of time</li>
<li>Activity is perceived as intrinsically rewarding</li>
</ul>
<p>As designers, we focus on the elements that precede or cause flow. Users visit sites with pre-existing goals (e.g., finding information about a product). These goals evolve over time as users complete tasks and their attention is drawn to other information. The main elements designers can control are:</p>
<ul>
<li>Providing immediate feedback</li>
<li>Balancing the perception of challenge against users’ skills</li>
</ul>
<h3>Designing for Flow</h3>
<p>You don’t need to take a course or learn a new software package to design for flow. In fact, you’re probably already doing it. Begin by considering the desired outcome of every interaction and then removing everything that distracts the user from accomplishing that outcome.</p>
<p>Start by removing distractions or impediments wherever possible. For both physical and interactive products, this means reducing or eliminating both external (i.e., environmental) and internal (i.e., pain, discomfort, anxiety) distractions that cause emotional responses like frustration or physical discomfort. Emotions demand and divert the user’s attention. Providing immediate feedback for all user actions helps to reduce user anxiety. The effective use of layout, information design, typography, interaction design and information architecture all help in balancing the perception of challenge against the user’s skill level. Information should be broken down into manageable &#8220;chunks&#8221; that don’t overwhelm users cognitive faculties.</p>
<p>When it comes to balancing the users’ perception of challenge, think of it this way: too much challenge with too little skill causes anxiety; and too little challenge with too much skill causes boredom.</p>
<p>Flow occurs at the boundary between boredom and anxiety. Think of it as a channel that runs between anxiety and boredom.(Figure 1)</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/design-for-emotion/Designing_flow_9.jpg" alt="Concept of flow" width="400" height="259" /><strong><br />Figure 1:</strong> Anxiety, Boredom and Flow (Csikszentmihalyi, 1990)<br />(captions added van Gorp, 2006)</p>
<p>As the challenges we face increase, we become more anxious and lose flow. Re-entering flow involves increasing our skills to match these challenges and reduce anxiety. As we increase our skill level, we become bored unless we increase the challenge to match our greater abilities.</p>
<p>To understand how we can reduce distractions, let’s examine the different elements of flow again to see how each can be applied to user experience. The causes of flow have the most implications for website and application design.</p>
<h3>Causes of Flow</h3>
<p><strong>1. A clear goal&#8230;</strong></p>
<p>The user navigates to accomplish a task, like seeking information on a particular topic or surfing for fun. This is an evolving goal, dependent on the options presented to the user and aided by logical information architecture, intuitive navigation, effective wayfinding and clear options for proceeding like information scent, breadcrumbs, meaningful labels, clear page titles, etc.</p>
<p><strong>2. With immediate feedback on the success of attempts to reach that goal&#8230;</strong></p>
<p>The user receives quick, sensory feedback in the form of a visual shift and/or sound from links, buttons, menus, or other navigation items.</p>
<p><strong>3. Presented as a challenge that you have the skills to handle.</strong></p>
<p>The opportunities for action are balanced with the user’s ability. At a basic level, this is accomplished by providing an uncluttered interface and eliminating unnecessary information to limit the user’s cognitive load. As the users’ skill increases over time, the interface can increase its complexity as well. Adaptive interface technologies allow the user to adjust the complexity of the interface to meet their enhanced skills.</p>
<h3>Flow and Emotion</h3>
<p>Flow tends to occur in situations with higher levels of challenge and skill. If the challenge is too easy, or user skill levels are very high, anxiety can be so low that there is little motivation to do anything. This level of activation or &#8220;arousal&#8221; in the body is the physiological (i.e., bodily) dimension of emotion. The level of arousal affects how intensely we experience a given emotion, and intense emotions demand our attention. In evolutionary terms, it’s easy to see why; the more attention your ancestors paid to predators, the more likely they were to survive and reproduce, passing their genes on to their descendants, people like you and me.</p>
<p>Both pleasant and unpleasant objects and experiences can increase arousal levels. Frustration and the excitement both increase arousal levels. So do large images, bright colors, and high contrast (van Gorp, 2006). For example, increasing the size of an image and moving anyone in it closer within the frame increase arousal levels.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/design-for-emotion/Designing_flow_9-1.jpg" alt="Interpersonal distance and arousal" width="450" height="180" /><br /><strong>Figure 2:</strong> Interpersonal Distance and Arousal<br /><em>How does looking at the picture on the right make you feel compared to the one on the left?</em></p>
<p>The key to balancing arousal is to match the perceived challenge to the users’ skill level. Since skill levels differ from one user to the next based on their previous experiences and the type of task, interfaces should be very user-friendly but also allow more advanced users to find challenges appropriate for their skill level. These challenges can include the visual aspects as well as the content (King 2003). To put it simply, everything about a site, including content, information architecture, interaction design, and visual design can contribute to flow.</p>
<h3>Goal-directed vs. Experiential Use</h3>
<p>Different motivations for using a website require different designs to facilitate flow (Novak, Hoffman and Yung 1996). Novice users tend to see the Internet in a playful way, while more experienced users tend to view the Internet in a more utilitarian way (King 2003). This leads to a distinction between experiential and goal-directed use. Flow tends to occur more often during goal-directed use, because of the higher challenge involved.</p>
<p><strong>Novice Users – Experiential use</strong></p>
<ul>
<li>Less challenging</li>
<li>More exploratory</li>
<li>Entertainment-oriented</li>
</ul>
<p><strong>Experienced Users – tendency towards Goal-directed use</strong></p>
<ul>
<li>More challenging</li>
<li>Less exploratory</li>
<li>Connected with tasks (e.g. research, work and shopping)</li>
</ul>
<p>The lower level of challenge in an entertainment-oriented, experiential site means there is a lower level of anxiety connected with its use. Someone who is less anxious is more capable of using creative thought to determine how to navigate a website and overlook minor problems. Motivation here is driven by subconscious arousal triggered by interesting visual elements, bright colors or high contrast. Experiential sites can and should be more arousing visually to demand the greater attention that can lead to flow experiences.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/design-for-emotion/Designing_flow_9-2.jpg" alt="Disturbia film site" width="450" height="306" /><br /><strong>Figure 3:</strong> Disturbia film site<br /><em>An example of a visually rich, entertainment-oriented site with little or no challenge involved.</em></p>
<p>The greater challenge of completing tasks (possibly under deadlines) on a goal-directed site creates more higher arousal. Anxiety makes users less able to think creatively when problems are encountered. If a product will be used in a stressful environment, like a hospital operating room, usability becomes crucial. All relevant information needs to be close at hand and visible and feedback should be clear and immediate. A goal-directed site can and should be less visually rich so that users, already anxious at the prospect of a challenging task, are not overwhelmed.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/design-for-emotion/Designing_flow_9-3.jpg" alt="Yahoo" width="450" height="304"><br /><strong>Figure 4:</strong> <a href="http://www.yahoo.com">Yahoo</a></p>
<p>When tasks are particularly unpleasant, we often lack the motivation necessary to complete them. In these cases, increasing the arousal level through the use of narrative can increase the user’s motivation. The Tango Tax website uses visual elements that resemble those found in movie posters and has a high contrast, cinematic feel that increases arousal. The software also introduces the classic cinematic narrative element of &#8220;us vs. them&#8221; to help increase user motivation.</p>
<p><img src="http://www-boxesandarrows-com.zippykid.netdna-cdn.com/files/banda/design-for-emotion/Designing_flow_9-4.jpg" alt="Tango Tax" width="450" height="337"><br /><strong>Figure 5:</strong> <a href="http://www.tangotax.com">Tango Tax</a> website</p>
<h3>Conclusions – Traits of Websites that Encourage Flow</h3>
<p>How you apply these ideas depends on your target audience, as well as their internal and external use contexts. Consider the likely emotional state of your users. Are there loud noises, crowds, brightly colored objects or other distractions in the user’s environment?</p>
<p>Here are some basic website traits that will help to encourage flow.</p>
<ul>
<li><strong>Clear navigation:</strong> Make it easy for the user to know where they are, where they can go, and where they’ve been, by including signposts such as breadcrumbs, effective page titles, and visited link indicators.</li>
<li><strong>Immediate Feedback:</strong> Make sure all navigation, such as links, buttons, and menus provide quick and effective feedback. Offer feedback for all user actions. When this isn’t possible, provide an indicator to hold the user’s attention while waiting (e.g., progress bar).</li>
<li><strong>Balance the Perception of Challenge With the User’s Skill:</strong> Since user skill levels differ, it’s up to you to balance the complexity of the visual design with the number of tasks and features people can use. Consider whether they are likely surfing experientially for fun or completing an important task. Tailor your sites to your audience’s scenario of use: more visually rich for experiential use and less so for goal-directed use.</li>
</ul>
<p>Adaptable interfaces that allow the user to increase or decrease the perceived challenge by choosing how much detail is displayed. Simplicity helps reduce anxiety for both novices and experts, which is especially crucial in highly stressful situations. Options for information-rich displays can introduce challenge for more experienced users.</p>
<p>Whether you’re an information architect, interaction designer or visual designer, your work should compel users to invest their attention, and then provide them with a return on that investment.Remember, designing for flow doesn’t require a new set of tools or skills – only a different way of thinking. Finding the right balance of design and challenge can help focus attention and create flow, which results in immersive and engaging user experiences.</p>
<h3>References</h3>
<p>Csikszentmihalyi, Mihaly. (1990). Flow – the Psychology of Optimal Experience. New York: Harper Perennial.</p>
<p>Csikszentmihalyi, M. (1977). Beyond Boredom and Anxiety, San Francisco: Jossey-Bass. Copyrights: Journal of E-Business (International Academy of E-Business). All rights reserved. Journal of E-Business, Vol. 1, Issue 2, December 2001.</p>
<p>King, Andrew B. &#8220;Chapter 2 – Flow in Web Design.&#8221; 2003. <a href="http://www.websiteoptimization.com/speed/2/">http://www.websiteoptimization.com/speed/2/</a> accessed on January 21/2007.</p>
<p>Fogg, B.J. (2003). Persuasive Technology – Using Computers to Change What We Think and Do. San Francisco: Morgan Kaufmann Publishers.</p>
<p>Hoffman, D.L, Novak, T (1996), &#8220;Marketing in hypermedia computer-mediated environments: conceptual foundations’&#8221;, Journal of Marketing, Vol. 60 pp. 50-68.</p>
<p>Norman, Donald A. (2004). Emotional Design – Why We Love (or Hate) Everyday Things. New York: Basic Books.</p>
<p>Novak, T.P, Hoffman, D.L (1997), &#8220;Measuring the flow experience among Web users,&#8221; Interval Research Corporation.</p>
<p>Novak, T, Hoffman, D, Young, Y (1998), &#8220;Measuring the flow construct in online environments: a structural modeling approach&#8221;, Owen Graduate School of Management, Vanderbilt University, working paper.</p>
<p>Novak, T. P., Hoffman, D. L., and Yung, Y. 2000. Measuring the Customer Experience in Online Environments: A Structural Modeling Approach. Marketing Science 19, 1 (Jan. 2000), 22-42</p>
<p>Rettie, R., (2001), An Exploration of Flow during Internet Use, Internet Research, 11(2), 103 – 113.</p>
<p>Simon, H. A. (1971), &#8220;Designing Organizations for an Information-Rich World&#8221;, in Martin Greenberger, Computers, Communication, and the Public Interest, Baltimore, MD: The Johns Hopkins Press, <span class="caps">ISBN 0</span>-8018-1135-X. pp. 40-41.</p>
<p>Simon, H. A. (1996), The Sciences of the Artificial (3rd ed.), Cambridge, MA: The <span class="caps">MIT</span> Press, <span class="caps">ISBN 0</span>-262-69191-4. pp. 143-144.</p>
<p>van Gorp, Trevor, J. (2006). Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction. University of Calgary, Faculty of Environmental Design, Master’s Degree Project.</p>
]]></content:encoded>
			<wfw:commentRss>http://boxesandarrows.com/design-for-emotion-and-flow/feed/</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
	</channel>
</rss>
