Advertisement
Design for Emotion and Flow
Report
Trevor van GorpFollow
Founder, Principal at affective design inc.Apr. 13, 2010•0 likes•15,783 views
50 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
Design for Emotion and Flow
Apr. 13, 2010•0 likes•15,783 views
50 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Design
Over the last few years, Mihaly Csikszentmihalyi’s concept of flow has become a popular topic within design circles. Many designers and information architects now view the psychological state of flow as a desirable goal for the end users of the products and interfaces they create. User experience professionals now have a clear target around which to center their design efforts. Although the characteristics of the flow experience are well defined in psychological circles, there are a number of questions that have not been addressed with regard to this psychological state. • How do users’ emotional states affect the creation of flow? • What are the differences between novice and experienced users when it come to creating flow? • How do differences in the goals (i.e. experiential vs. goal directed) of users affect the creation of flow? This presentation will explore the role of emotions in determining the creation of flow. This includes the role that emotional states play in affecting how we focus attention, learn, process and use information. The creation of flow is ultimately determined by a combination of our individual skill levels, the challenge provided by the task at hand, and the level of motivation we have to complete that task. Understanding how to enhance users’ experiences by creating flow states allows us to tailor the design of products, websites and software to different user groups with different levels of skill. This is important because products that can elicit flow tend to create higher levels of loyalty amongst users. Viewers will learn about the underlying causes, characteristics and consequences of flow. They will also learn how flow is related to emotional design, and how to take user goals into consideration when designing for flow.
Trevor van GorpFollow
Founder, Principal at affective design inc.Advertisement
Advertisement
Advertisement
Design for Emotion and Flow
- by Trevor van Gorp Trevor van Gorp, BFA, M.E.Des, IAI, ACE Principal, affective design inc. Edmonton, Alberta, Canada TEL: 780.240.4889 BLOG: http://www.affectivedesign.com WEB: http://affectivedesign.com Design for Emotion and Flow:
- Information Overload © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Competing for Your Attention © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Emotion, Attention and Arousal “ You may not be able to bring your unconscious mind’s activity into awareness as thoughts, but this activity will always be reflected in the body…“ Eckhart Tolle
- Dimensions of Emotion Emotional States (van Gorp 2006 - adapted from Russell 1980) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Emotional States (van Gorp 2006 - adapted from Russell 1980) Dimensions of Emotion © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Dimensions of Emotion Emotional States (van Gorp 2006 - adapted from Russell 1980) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Interpersonal Distance © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Interpersonal Distance © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Arousal, Attention and Flow “ Don’t wish for fewer problems, wish for more skills. Don’t wish for less challenges, wish for more wisdom…“ Earl Shoaf
- Arousal and Performance
- Arousal and Performance
- Arousal and Performance
- Arousal and Performance
- Attention and Flow Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Designing for Flow “ Balance is the aim of all living creatures. It is our home…“ Rolf Gates
- What is this? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Emotion and Personality (Desmet 2002) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Emotion and Personality © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Products as Personalities © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- What does this company do?
- Experiential © Trevor van Gorp, affective design inc. 2010 April 11, 2010
- Goal Directed
- Content and Flow Welcome to DATS I-Book Login; an online booking tool that allows our clients to book, cancel and view their trips on the web. In order To use DATS I-Book, you will need a Client ID and password. If you need this information, please contact our Customer Care Centre at 780-496-4567, Option 3 or e-mail us at dats@edmonton.ca DATS I-Book was designed to better serve our clients: this online booking tool allows registered clients to better access and control their transportation plans. Some of the features available to DATS I-Book users include: The option of viewing and canceling trips 24 hours a day, 7 days a week. The choice to independently book trips online during the same hours our Customer Care Centre is available to clients: 7:30 A.M. – 5:00 P.M. Monday to Friday and 7:30 – 12:00 P.M. Saturday to Sunday. The ability to check one’s profile in order to keep information up-to-date. If you would like to change any information in your profile, please contact our Customer Care Centre at 780-496-4567, Option 3 or e-mail us at dats@edmonton.ca. Please use the Help function if you need any assistance in using DATS I-Book.order To use DATS I-Book, you will need a Client ID and password.
- www.affectivedesign.com [email_address] @affectivedesign Get in touch!
- Thanks for Coming!
Editor's Notes
- Good morning everyone. Welcome to Design for Emotion and Flow! I’m Trevor van Gorp, the founder and principal of Affective Design, a Canadian User Experience Consultancy with a focus on emotional user experience design. Today we’re going to talk about emotion, personality, and how to foster the creation of a state of “flow” in your users.
- But first, I’d like to set the stage. At this moment, there’s more information available to you than at any other time in history. And we’re creating more information at a rate that is rapidily increasing. Now all this information has a lot of positive effects, but it also creates challenges for those who consume it.
- And, with email, text messaging, youtube, facebook, twitter and a dozen other channels, our mental spaces are beginning to resemble Times Square in terms of all the things competing for our our attention.
- Herbert Simon, one of the founding fathers of several of today's important scientific domains including artificial intelligence, information processing, attention economics, organization theory said: “What information consumes is rather obvious; it consumes the attention of its recipients … a wealth of information creates a poverty of attention” (Simon 1971) So, with all these competing channels, and a dwindling amount of attention to invest, YOU play a critical role in ensuring the products you create provide users’ with a return on their investment of attention.
- So, at this point, many of you may be wondering, “how does attention relate to designing for emotion and flow ?” But in order to understand that, we first need to learn a little about emotion.
- Emotion has been described on a circumplex diagram as a combination of two dimensions. Everything we experience is either good or bad, or somewhere in between .
- This is called “value” and it’s defined as the difference between pleasant and unpleasant Judgments of Value are conscious and cognitive. In other words, we have to think about them.
- All of our experiences occur within the context of our level of physical stimulation. Emotion researchers call it the level of stimulaiton or “arousal” in the body and it’s defined as the difference between anxiety and boredom This unconscious, physiological dimension of emotion controls the INTENSITY of pleasant and unpleasant feelings. In other words, we don’t have to think about this part of emotion, it’s constantly being processed by the unconscious and adjusted by the body. Both pleasant and unpleasant objects and experiences can increase arousal levels. As human beings, we’re experiencing our emotions all the time, but we tend to notice our emotions only when they get intense enough to demand our attention. When that happens, it’s because our level of stimulation… or as they call it in emotion research, “arousal”, has increased.
- The level of arousal determines the strength and clarity of our attention. Attention is required to make other mental events happen, like thinking, remembering and making decisions. It selects relevant pieces of information from all the information that is available to our senses And the focus of attention determines what enters our consciousness and what doesn’t. The unconscious nature of arousal makes it particularly attractive for designers, who can adjust arousal levels to determine the strength of attention.
- 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.
- Here’s an example of contrast. Notice which one of the two words arouses more of your attention?
- Similarly, which of these words arouses more of your attention?
- Increasing the size of an image and moving anyone in it closer within the frame also increases arousal levels.
- Now that we understand more about what makes unconscious shifts in emotions, let’s explore the concept of flow.
- In psychology, the Yerkes-Dodson law describes how arousal or stress levels affect performance
- As stress rises, so does performance,
- Up to an optimum point. After this point, arousal continues to rise...
- while performance declines From this law, we can see that some stress or anxiety is good for performance, but too much damages performance.
- In an environment with few interruptions, when attention becomes focused by the stimulation of a challenge that people know they can handle with their existing skills, and the task has clear goals and immediate feedback, a great sense of enjoyment, coupled with peak performance, is experienced. Mihaly Csikszentmihalyi calls this state “Flow”. Any of you that have put your head down and worked intensely for an hour, only to look up and see that 3 hours have passed, have experienced flow. Flow is a good state. Afterward we feel as though we’ve increased our skills, and our self confidence increases.
- In short, achieving flow is about balancing a person’s emotional state. Or in other words, maintaining arousal levels in an optimum area for work activities. 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. Flow occurs at the boundary between boredom and anxiety. Think of it as a channel that runs between the two.
- So, to illustrate, as we increase the challenges we face,
- we become more anxious.
- Re-entering flow involves increasing our skills to match these challenges and reduce anxiety
- Similarly, as we increase our skills, we become bored.
- And re-entering flow involves increasing the challenge to match our increased skills
- Going back to the emotion circumplex, Csikszentmihalyi also mapped flow onto a similar diagram with more emotions shown mapping to challenges and skills. We can see the area where flow occurs. Too much challenge or skill and we’d move out of flow. Too little and we wouldn’t care enough to keep going.
- Too much challenge with too little skill causes anxiety. Advertising research has revealed that negative, “unpleasant” things draw more attention than positive ones. You might have noticed that the evening new usually focuses on negative things to get your attention. So I’ve placed the flow area more on the positive side of the circumplex, since paying too much attention to negative things will break the flow. (Cacioppo et al 2004) Flow is a good goal state for work or task-oriented behaviour, but isprobably not be the best state to be in for every context.
- While too much skill with too little challenge cause boredom or relaxation This makes Flow a great goal state for work or task-oriented behaviour and a good motivational state.
- So, to examine what we as user experience professionals can do to help create flow states in our users, let’s do what we do best and begin breaking down and categorizing the elements associated with flow. These elements have been classified into the three areas; Causes of Flow 2. Characteristics of Flow and 3. The Consequences of Flow (Novak, Hoffman and Yung, 1999).
- The causes of flow include: A clear goal Immediate feedback on the success of attempts to reach that goal and A challenge you’re confident you have the skills to handle
- The Characteristics of flow include: Total concentration and focused attention A sense of control over interactions Openness to new things Increased exploratory behavior Increased learning and Positive feelings
- And finally the consequences of flow include: Loss of consciousness of self Distortions in the perception of time and the Activity is perceived as intrinsically rewarding Looking through this list, it becomes obvious that Flow is a good state to design for. The characteristics of flow could be taken directly from a design brief. Concentration, a sense of control, openness to new things, increased exploratory behavior and learning and positive feelings are all things we strive for in interactive design.
- So, at this point, many of you may be wondering, “how do I use these ideas to design for flow?” Begin by considering the desired outcome of every interaction and then removing everything that distracts the user from accomplishing that outcome. Start by removing distractions or impediments wherever possible. For both physical and interactive products, this means reducing or eliminating both external environmental and internal (i.e., pain, discomfort, anxiety) distractions that cause emotional responses like frustration or physical discomfort.
- Now please if any of you can tell me. What is This? { Wait until someone says “a happy face” } Ok. I heard a happy face. But, this is definitely NOT a happy face.
- This is a white circle
- With two black dots on top of it
- And a black line. The fact that we can view this image as expressing emotion is an example of the way that we as humans beings attribute emotion and personality to EVERYTHING.
- In fact, if we look at Desmet’s matrix of Affective States, we can see that the only thing that separates emotion from personality is time and intent.
- Emotions are short-term and intentional while Personality traits are long-terml and non-intentional. In other words, a perceived “personality trait” is merely an emotion that is expressed over time without being directed towards anything in particular. Let’s see if we can find an example that illustrates this.
- Before Microsoft launched Bing to replace Live Search, they did a great deal of A/B testing to see if the new designs improved how often users clicked on Search resultsearch results. Bing's predecessor, Live Search, used a pale blue for Search results. UX researchers at Microsoft said "Live Search results were a faint blue that was like, 'Hey ... here are your results,' " "It lacked confidence."
- Based on user feedback, the team estimated the best blue color could generate an additional $80 million to $90 million in ad sales.
- Now 80 million is nothing to sneeze at, even for Microsoft! So let’s look at what the difference is here. The Bing search results show higher contrast against the background, and therefore captures more attention. This higher contrast seems bolder and more “confident”. It also likely creates associations with other symbols meant to instill “confidence” like police uniforms. And, since confidence is a desirable quality in search results, this darker blue helps facilitates flow by removing an emotional impediment - A lack of confidence or trust. So, in other words, Bing portrays a more confident personality than Live Search did.
- Ok, so now we know that users emotions affect whether they can reach flow states. But can the emotions that your product appears to express actually affect how users react to that product? Let’s watch this and get a better idea.
- So, getting back to designing for flow. We know that the characteristics and consequences of flow are beneficial for users. And as designers, we can focus on the elements that precede or cause flow. So first off, a clear goal… Users visit sites with pre-existing goals (e.g., finding information about a product or service) But these goals evolve over time as users complete tasks. Goals are also dependent on the options presented to the user and aided by logical IA, intuitive navigation, effective wayfinding and clear options for proceeding like information scent, breadcrumbs, meaningful labels, clear page titles, etc. This why a user coming to the affective design site does not encounter the “Times Square” of websites:
- Instead, they encounter this…. Can anyone tell me what this company does? Anyone?
- A site designed to present the user with clear options for proceeding according to their evolving goals.
- Clear goals are represented in the form of navigation, with link titles that match page titles to reduce user confusion and anxiety and foster flow
- The next thing that designers can control is the feedback they provide users. Providing immediate feedback on the success of attempts to reach a goal usually arrives as quick, sensory feedback in the form of a visual shift and/or sound from links, buttons, menus, or other navigation items.
- In the case of the affectivedesign site, users se a visual shift for the active tab and a page layout change.
- And finally, we come to balancing the perception of challenge. Here, the opportunities for action are balanced with the user’s ability. This can be tricky since skill levels differ from novices to experienced users. Each will require a different level of challenge to math their skill levels. In addition, novice users tend to be more experiential in their use, while experienced users tend to be more task oriented. 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.
- Novice users tend to be more experiential, less challenging, more exploratory and entertainment oriented .
- 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.
- Experienced users tend to be gravitate towards more challenging and goal directed use. They are less exploratory and more focused on getting the job done. .
- As the users’ skill increases over time, the interface can increase its complexity as well The greater challenge of completing tasks (possibly under deadlines) on a goal-directed site creates more 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.
- 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.
- Content is a major contributor to balancing users’ emotional states. Often, on sites, we see pages formatted with too much unnecessary text, no subheads and densely formatted typography. This can create a feeling of overwhelm and discourage users from actually digesting you information. Which page is less overwhelming to you? This?
- Or this?
- Clear navigation: 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.
- Immediate Feedback: 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).
- Balance the Perception of Challenge With the User’s Skill: 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. 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. 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.
- If you’re interested in talking more, you can speak with me after this talk or contact me here.
- So thank you all for coming!
Advertisement