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

Poverty of Attention
“ What information consumes is rather obvious; it consumes the attention of its recipients … a wealth of information creates a poverty of attention”
(Simon 1971)

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

Attention and Arousal
• Arousal/stimulation level
- Determines strength and clarity of attention
• Attention - Selects relevant information • Focus of attention - Is what enters consciousness (Csikszentmihalyi 1990)

Affecting Arousal Levels
Stimulating
Loud, sudden noises
Bright, high value colors
High contrast
Movement
Calming
Gentle, repetitive noises
Subdued, low value colors
Low contrast
Lack of movement
(van Gorp, 2006) (Fehrman & Fehrman 2000)

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

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

Attention and Flow
Flow
(Csikszentmihalyi 1990)
Few interruptions
Focused attention
Challenge matches skills
Task has clear goals and immediate feedback

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 Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010

Elements of Flow
1. Causes of Flow
2. Characteristics of Flow
3. Consequences of Flow
(Novak, Hoffman and Yung 1999)

1. Causes of Flow
A clear goal
Immediate feedback on the success of attempts to reach that goal
A challenge you’re confident you have the skills to handle
(Csikszentmihalyi 1990)

2. Characteristics of Flow
Total concentration and focused attention
A sense of control over interactions
Openness to new things
Increased exploratory behavior
Increased learning
Positive feelings

3. Consequences of Flow
Loss of consciousness of self
Distortions in the perception of time
Activity is perceived as intrinsically rewarding

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

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

Products as Personalities © Trevor van Gorp, affective design inc. 2010 April 11, 2010

Designing for Flow
A clear goal…

What does this company do?

Designing for Flow
A clear goal…
With immediate feedback on the success of attempts to reach that goal…

Designing for Flow
A clear goal…
With immediate feedback on the success of attempts to reach that goal…
Balancing the perception of challenge against users’ skill level

Perception of Challenge
Novice users
- More experientially oriented
- Less challenging
- More exploratory
- Entertainment-oriented
(Novak, Hoffman and Yung 1999) (King 2003)

Perception of Challenge
Experienced Users
- More challenging & goal directed
- Less exploratory
- Connected with tasks
(e.g. research, work and shopping)
(Novak, Hoffman and Yung 1999)(King 2003)

Goal Directed

Goal Directed vs. Experiential
Match perceived challenge to users
skill level through:
User friendly interface
Support for increased complexity

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.

Content and Flow
Start
Log in with your Client ID and password.
Obtain a Client ID By:
1. Calling the Customer Care Centre at 780-496-4567 (Choose option 3) or…
2. E-mail us at: [email_address]
Use DATS I-Book To:
 View, book and change trips 24 hours a day, 7 days a week.
Book trips online through the Customer Care Centre
Hours: 7:30 A.M. to 5:00 PM - Monday to Friday
7:30 AM to 12:00 PM - Saturday and Sunday.
 View and update your profile to keep information up-to-date.
To Update Your Profile:
1. Please contact our Customer Care Centre at 780-496-4567, (Choose option 3)
2. E-mail us at: [email_address]

Conclusions - Fostering Flow
Clear navigation
Users know where they are and where they’ve been
Include signposts such as breadcrumbs, effective page titles and visited link indicators.

Immediate feedback
All navigation should provide quick and immediate feedback
Provide indicators like progress bars to hold the users’ attention

Balance the perception of challenge with the user’s skill
Balance complexity of the visual design with the number of tasks and features
Consider usage motivations
Tailor product to likely usage scenario
Goal directed - less arousing
Experiential - more arousing

www.affectivedesign.com [email_address] @affectivedesign Get in touch!

Thanks for Coming!

References
Csikszentmihalyi, Mihaly. (1990). Flow - the Psychology of Optimal Experience . New York: Harper Perennial.
Csikszentmihalyi, Mihaly. (1990). Flow – the Psychology of Optimal Experience. New York: Harper Perennial.
Desmet, Pieter, R. (2002). Designing Emotions . Pieter Desmet. Delft.
Russell, J.A. (1980). “A circumplex model of affect”. In Journal of Personality and Social
Csikszentmihalyi, M. (2008). Creativity, Fulfillment and Flow, TED talk. 2008
Fehrman, Kenneth R. and Cherie Fehrman. (2000). Color - The Secret Influence . New Jersey: Prentice Hall, Inc.
King, Andrew B. “Chapter 2 – Flow in Web Design.” 2003. http://www.websiteoptimization.com/speed/2/ accessed on January 21/2007.
Hoffman, D.L, Novak, T (1996), “Marketing in hypermedia computer-mediated environments: conceptual foundations’”, Journal of Marketing, Vol. 60 pp. 50-68.

References
Novak, T.P, Hoffman, D.L (1997), “Measuring the flow experience among Web users,” Interval Research Corporation.
Novak, T, Hoffman, D, Young, Y (1998), “Measuring the flow construct in online environments: a structural modeling approach”, Owen Graduate School of Management, Vanderbilt University, working paper.
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
Rettie, R., (2001), An Exploration of Flow during Internet Use, Internet Research, 11(2), 103 – 113.
Simon, H. A. (1971), “Designing Organizations for an Information-Rich World”, in Martin Greenberger, Computers, Communication, and the Public Interest, Baltimore, MD: The Johns Hopkins Press, ISBN 0-8018-1135-X. pp. 40-41.
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.

http://affectivedesign.com	803
http://www.boxesandarrows.com	431
http://boxesandarrows.com	339
http://interactivemultimediatechnology.blogspot.com	93
http://www.slideshare.net	27
http://interactivemultimediatechnology.blogspot.fr	10
http://xss.yandex.net	9
http://paper.li	8
http://feeds.feedburner.com	7
http://interactivemultimediatechnology.blogspot.fi	7
http://www.netvibes.com	6
http://www.linkedin.com	5
https://admin.instantpage.me	5
http://interactivemultimediatechnology.blogspot.ca	3
http://interactivemultimediatechnology.blogspot.de	3
http://interactivemultimediatechnology.blogspot.pt	3
http://interactivemultimediatechnology.blogspot.co.uk	3
http://beta.affectivedesign.com	3
http://translate.googleusercontent.com	3
http://interactivemultimediatechnology.blogspot.com.ar	2
http://meltwaternews.com	2
http://interactivemultimediatechnology.blogspot.com.au	2
http://namwook.blogspot.com	2
http://jeffhiles.com	2
http://interactivemultimediatechnology.blogspot.ch	1
http://interactivemultimediatechnology.blogspot.com.br	1
http://dayangolden.com	1
http://boxesandarrows.mistermachinework.com	1
http://interactivemultimediatechnology.blogspot.in	1
http://interactivemultimediatechnology.blogspot.jp	1
http://www.lmodules.com	1
http://www.newsblur.com	1
http://interactivemultimediatechnology.blogspot.kr	1
http://interactivemultimediatechnology.blogspot.co.nz	1
http://wiki.autodesk.com	1

Design for Emotion and Flow

by Trevor van Gorp

Accessibility

Categories

Upload Details

Usage Rights

35 Embeds 1,789

Statistics

Design for Emotion and Flow Presentation Transcript