Design for Emotion and Flow

Trevor van Gorp
Trevor van GorpFounder, Principal at affective design inc.
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 ,[object Object],[object Object]
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 ,[object Object],[object Object],•  Attention - Selects relevant information •  Focus of attention - Is what enters consciousness (Csikszentmihalyi 1990)
Affecting Arousal Levels ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],(van Gorp, 2006) (Fehrman & Fehrman 2000)
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 ,[object Object],(Csikszentmihalyi 1990) ,[object Object],[object Object],[object Object],[object Object]
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
Elements of Flow ,[object Object],[object Object],[object Object],(Novak, Hoffman and Yung 1999)
1. Causes of Flow ,[object Object],[object Object],[object Object],(Csikszentmihalyi 1990)
2. Characteristics of Flow ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3. Consequences of Flow ,[object Object],[object Object],[object Object]
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
Designing for Flow ,[object Object]
What does this company do?
Design for Emotion and Flow
Design for Emotion and Flow
Designing for Flow ,[object Object],[object Object]
Design for Emotion and Flow
Designing for Flow ,[object Object],[object Object],[object Object]
Perception of Challenge ,[object Object],[object Object],[object Object],[object Object],[object Object],(Novak, Hoffman and Yung 1999) (King 2003)
Experiential © Trevor van Gorp, affective design inc. 2010 April 11, 2010
Perception of Challenge ,[object Object],[object Object],[object Object],[object Object],[object Object],(Novak, Hoffman and Yung 1999)(King 2003)
Goal Directed
Goal Directed vs. Experiential ,[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Conclusions - Fostering Flow ,[object Object],[object Object],[object Object]
Conclusions - Fostering Flow ,[object Object],[object Object],[object Object]
Conclusions - Fostering Flow ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
www.affectivedesign.com [email_address] @affectivedesign Get in touch!
Thanks for Coming!
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1 of 67

Recommended

Stress & burnout 2014 by
Stress & burnout 2014Stress & burnout 2014
Stress & burnout 2014Grant Hamel
2.3K views67 slides
Emotional Resilience: How to empower Yourself using these 7 absolutely simple... by
Emotional Resilience: How to empower Yourself using these 7 absolutely simple...Emotional Resilience: How to empower Yourself using these 7 absolutely simple...
Emotional Resilience: How to empower Yourself using these 7 absolutely simple...Nisha A Sahadevan
1.6K views10 slides
Anger by
AngerAnger
AngerAseel Baljoun
2.5K views25 slides
Self awareness by
Self awarenessSelf awareness
Self awarenesspraveenapv2
1.2K views17 slides
Anger Management by
Anger ManagementAnger Management
Anger ManagementNajish Chaudhary
855 views26 slides
20 empowering questions for personal growth by
20 empowering questions for personal growth20 empowering questions for personal growth
20 empowering questions for personal growthEmotionally Resilient Living
8.7K views24 slides

More Related Content

What's hot

Avoiding burnout by
Avoiding burnoutAvoiding burnout
Avoiding burnoutCrazy Penguin Media
4K views18 slides
Anger management by
Anger management Anger management
Anger management Priya Verma
5.2K views18 slides
Stress management by
Stress managementStress management
Stress managementUnKnown
999 views22 slides
Self awareness by
Self awarenessSelf awareness
Self awarenessGirish Ananthanarayana
8.7K views18 slides
Emotional Intelligence by
Emotional IntelligenceEmotional Intelligence
Emotional IntelligenceDilawar Abbas
1K views22 slides

What's hot(20)

Anger management by Priya Verma
Anger management Anger management
Anger management
Priya Verma5.2K views
Stress management by UnKnown
Stress managementStress management
Stress management
UnKnown 999 views
Anger management 12 strategies for by Emma Yaks
Anger management   12 strategies forAnger management   12 strategies for
Anger management 12 strategies for
Emma Yaks6.1K views
Stress management by -n.g.palit by Nanda Palit
Stress management   by -n.g.palitStress management   by -n.g.palit
Stress management by -n.g.palit
Nanda Palit2.6K views
Controlling Your Anger Before It Controls You by Qasim Ali
Controlling Your Anger Before It Controls YouControlling Your Anger Before It Controls You
Controlling Your Anger Before It Controls You
Qasim Ali1.3K views
Why Personality Development Skills for Employees by StrengthsTheatre
Why Personality Development Skills for Employees Why Personality Development Skills for Employees
Why Personality Development Skills for Employees
StrengthsTheatre4.6K views
STRESS MANAGEMENT And STRESS HANDLING by Ehatsham Riaz
STRESS MANAGEMENT And STRESS HANDLINGSTRESS MANAGEMENT And STRESS HANDLING
STRESS MANAGEMENT And STRESS HANDLING
Ehatsham Riaz1.2K views
Self Care: Healthy Relationships and Boundaries by Celia Munson, BCCC
Self Care: Healthy Relationships and BoundariesSelf Care: Healthy Relationships and Boundaries
Self Care: Healthy Relationships and Boundaries
Celia Munson, BCCC3.3K views
Anger Management : Causes & Relaxation Techniques by The Wellness Corner
Anger Management : Causes & Relaxation TechniquesAnger Management : Causes & Relaxation Techniques
Anger Management : Causes & Relaxation Techniques
Being assertive by RajThilak
Being assertiveBeing assertive
Being assertive
RajThilak 4K views
Managing Emotions (EQ) by Seta Wicaksana
Managing Emotions (EQ)Managing Emotions (EQ)
Managing Emotions (EQ)
Seta Wicaksana10.6K views

Viewers also liked

Why Design for Emotion? by
Why Design for Emotion?Why Design for Emotion?
Why Design for Emotion?Trevor van Gorp
8.5K views63 slides
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu... by
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...Trevor van Gorp
11.7K views68 slides
Principles of Emotional Design by
Principles of Emotional DesignPrinciples of Emotional Design
Principles of Emotional DesignGarron Engstrom
38K views58 slides
Emotional design & Design for emotion by
Emotional design & Design for emotion Emotional design & Design for emotion
Emotional design & Design for emotion Ftma hndy
904 views41 slides
Emotional Design & Human Behavior by
Emotional Design & Human BehaviorEmotional Design & Human Behavior
Emotional Design & Human BehaviorLillian Ayla Ersoy
5.1K views69 slides
Exceptional Design is Emotional Design by
Exceptional Design is Emotional DesignExceptional Design is Emotional Design
Exceptional Design is Emotional DesignMarissa Louie
44.1K views70 slides

Viewers also liked(20)

Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu... by Trevor van Gorp
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
Trevor van Gorp11.7K views
Emotional design & Design for emotion by Ftma hndy
Emotional design & Design for emotion Emotional design & Design for emotion
Emotional design & Design for emotion
Ftma hndy904 views
Exceptional Design is Emotional Design by Marissa Louie
Exceptional Design is Emotional DesignExceptional Design is Emotional Design
Exceptional Design is Emotional Design
Marissa Louie44.1K views
Tutorial_widget_twitter by pnadal
Tutorial_widget_twitterTutorial_widget_twitter
Tutorial_widget_twitter
pnadal345 views
15 Lesssons From Emotion Design Experience Dynamics Web Seminar by Experience Dynamics
15 Lesssons From Emotion Design  Experience Dynamics Web Seminar15 Lesssons From Emotion Design  Experience Dynamics Web Seminar
15 Lesssons From Emotion Design Experience Dynamics Web Seminar
Experience Dynamics2.4K views
Bedrijfspresentatie Crea en Artiva Nederland B.V. by tomravenstein
Bedrijfspresentatie Crea en Artiva Nederland B.V.Bedrijfspresentatie Crea en Artiva Nederland B.V.
Bedrijfspresentatie Crea en Artiva Nederland B.V.
tomravenstein242 views
Learning to Love Humans: Emotional Interface Design by Aarron Walter
Learning to Love Humans: Emotional Interface DesignLearning to Love Humans: Emotional Interface Design
Learning to Love Humans: Emotional Interface Design
Aarron Walter4.6K views
Considering Socio-cultural Sustainability in the Architectural Design Process... by Galala University
Considering Socio-cultural Sustainability in the Architectural Design Process...Considering Socio-cultural Sustainability in the Architectural Design Process...
Considering Socio-cultural Sustainability in the Architectural Design Process...
Galala University2.5K views
Architecture Debates مناظرات معمارية by Galala University
Architecture Debates مناظرات معمارية Architecture Debates مناظرات معمارية
Architecture Debates مناظرات معمارية
Galala University1.1K views

Similar to Design for Emotion and Flow

Design to Convert. Design for emotions by
Design to Convert. Design for emotionsDesign to Convert. Design for emotions
Design to Convert. Design for emotionsPentia
341 views146 slides
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc... by
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...UXPA International
1.2K views77 slides
Empathy Field Guide - Stanford DSchool by
Empathy Field Guide - Stanford DSchoolEmpathy Field Guide - Stanford DSchool
Empathy Field Guide - Stanford DSchoolRodrigo Narcizo
1.2K views9 slides
User experience & seduction: why every touch matters by Julie Jancen by
User experience & seduction: why every touch matters by Julie JancenUser experience & seduction: why every touch matters by Julie Jancen
User experience & seduction: why every touch matters by Julie JancenJulie Jancen, UX Strategist
658 views35 slides
Strategies for Successful Oral Presentation (2).pptx by
Strategies for Successful Oral Presentation (2).pptxStrategies for Successful Oral Presentation (2).pptx
Strategies for Successful Oral Presentation (2).pptxRanaHuzaifaShoukat
75 views46 slides
User Persona by
User PersonaUser Persona
User PersonaDiane Leeper
3.6K views36 slides

Similar to Design for Emotion and Flow(20)

Design to Convert. Design for emotions by Pentia
Design to Convert. Design for emotionsDesign to Convert. Design for emotions
Design to Convert. Design for emotions
Pentia 341 views
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc... by UXPA International
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...
User Experience Doesn’t Happen on a Screen - It Happens in the Mind. Introduc...
UXPA International 1.2K views
Empathy Field Guide - Stanford DSchool by Rodrigo Narcizo
Empathy Field Guide - Stanford DSchoolEmpathy Field Guide - Stanford DSchool
Empathy Field Guide - Stanford DSchool
Rodrigo Narcizo1.2K views
Strategies for Successful Oral Presentation (2).pptx by RanaHuzaifaShoukat
Strategies for Successful Oral Presentation (2).pptxStrategies for Successful Oral Presentation (2).pptx
Strategies for Successful Oral Presentation (2).pptx
The Dynamics of Rapport: Using Neurolinguistics to Improve Communication by HRDQ-U
The Dynamics of Rapport: Using Neurolinguistics to Improve CommunicationThe Dynamics of Rapport: Using Neurolinguistics to Improve Communication
The Dynamics of Rapport: Using Neurolinguistics to Improve Communication
HRDQ-U67 views
Handout for "Getting the message across" a presentation by Thomas Zangerle/Wo... by Thomas Zangerle
Handout for "Getting the message across" a presentation by Thomas Zangerle/Wo...Handout for "Getting the message across" a presentation by Thomas Zangerle/Wo...
Handout for "Getting the message across" a presentation by Thomas Zangerle/Wo...
Thomas Zangerle676 views
Praticing Anthropology in Business and Design by Amy L. Santee
Praticing Anthropology in Business and DesignPraticing Anthropology in Business and Design
Praticing Anthropology in Business and Design
Amy L. Santee2K views
"From Insights to Action" by Andrew Vincent, a Revelation Great Research Thin... by Revelation Next
"From Insights to Action" by Andrew Vincent, a Revelation Great Research Thin..."From Insights to Action" by Andrew Vincent, a Revelation Great Research Thin...
"From Insights to Action" by Andrew Vincent, a Revelation Great Research Thin...
Revelation Next1.8K views
Handout for "Proven Presentation Techniques", an InfoComm approved workshop b... by Thomas Zangerle
Handout for "Proven Presentation Techniques", an InfoComm approved workshop b...Handout for "Proven Presentation Techniques", an InfoComm approved workshop b...
Handout for "Proven Presentation Techniques", an InfoComm approved workshop b...
Thomas Zangerle766 views
Webinar: How do consumers really feel about your brand? by UserZoom
Webinar: How do consumers really feel about your brand?Webinar: How do consumers really feel about your brand?
Webinar: How do consumers really feel about your brand?
UserZoom374 views
Public speaking by trainpart
Public speakingPublic speaking
Public speaking
trainpart232 views
Prepared Speech Presentation by Yi-Hung Peng
Prepared Speech PresentationPrepared Speech Presentation
Prepared Speech Presentation
Yi-Hung Peng77.3K views
131005preparedspeechslideshare 131005101417-phpapp01 by Takane Tokuda
131005preparedspeechslideshare 131005101417-phpapp01131005preparedspeechslideshare 131005101417-phpapp01
131005preparedspeechslideshare 131005101417-phpapp01
Takane Tokuda209 views
131005preparedspeechslideshare 131005101417-phpapp01 by Takane Tokuda
131005preparedspeechslideshare 131005101417-phpapp01131005preparedspeechslideshare 131005101417-phpapp01
131005preparedspeechslideshare 131005101417-phpapp01
Takane Tokuda255 views

Recently uploaded

New Icon Presentation.pdf by
New Icon Presentation.pdfNew Icon Presentation.pdf
New Icon Presentation.pdfsydneyjrichardson
20 views5 slides
Scopic UX Design Test Task.pdf by
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfAtiqur Rahaman
283 views36 slides
217 Drive - All on upper.pptx by
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptxvidstor282
14 views7 slides
Nomor Meja RUANG-4.doc by
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.docssuserc40b91
6 views3 slides
StratPlanning Manual 220713.pdf by
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdfLakewalk Media
15 views43 slides
TISFLEET WEB DESIGN PROJECT by
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECTRabius Sany
38 views13 slides

Recently uploaded(20)

Scopic UX Design Test Task.pdf by Atiqur Rahaman
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman283 views
217 Drive - All on upper.pptx by vidstor282
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28214 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media15 views
TISFLEET WEB DESIGN PROJECT by Rabius Sany
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
Oregon Ducks 4 Spencer Webb Hoodie by brandshop1
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop112 views
Design System in Figma A to Z.pdf by Atiqur Rahaman
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman18 views
SS25 Fashion Key Items trend book by Peclers Paris
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris123 views
Big Deal Curmel Moton Shirt by brandshop1
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views
Designing Effective AR Experiences by Kumar Ahir
Designing Effective AR ExperiencesDesigning Effective AR Experiences
Designing Effective AR Experiences
Kumar Ahir5 views
Presentation (1).pdf by hjksa
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa17 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency

Design for Emotion and Flow

  • 1. 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:
  • 2. Information Overload © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 3. Competing for Your Attention © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 4.
  • 5. 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
  • 6. Dimensions of Emotion Emotional States (van Gorp 2006 - adapted from Russell 1980) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 7. Emotional States (van Gorp 2006 - adapted from Russell 1980) Dimensions of Emotion © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 8. Dimensions of Emotion Emotional States (van Gorp 2006 - adapted from Russell 1980) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 9.
  • 10.
  • 11. Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 12. Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 13. Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 14. Contrast and Hue © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 15. Interpersonal Distance © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 16. Interpersonal Distance © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 17. 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
  • 22.
  • 23. Attention and Flow Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 24. Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 25. Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 26. Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 27. Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 28. Attention and Flow Level of Physiological Arousal Anxiety, Boredom and Flow (Csikszentmihalyi 1990) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 29. Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 30. Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 31. Attention and Flow Flow and Emotion (Csikszentmihalyi 2008) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. Designing for Flow “ Balance is the aim of all living creatures. It is our home…“ Rolf Gates
  • 37. What is this? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 38. © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 39. © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 40. © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 41. Emotion and Personality (Desmet 2002) © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 42. Emotion and Personality © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 43. A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 44. A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 45. A Question of Confidence? © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 46. Products as Personalities © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 47.
  • 48. What does this company do?
  • 51.
  • 53.
  • 54.
  • 55. Experiential © Trevor van Gorp, affective design inc. 2010 April 11, 2010
  • 56.
  • 58.
  • 59. 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.
  • 60.
  • 61.
  • 62.
  • 63.
  • 66.
  • 67.

Editor's Notes

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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 .
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. Here’s an example of contrast. Notice which one of the two words arouses more of your attention?
  12. Similarly, which of these words arouses more of your attention?
  13. Increasing the size of an image and moving anyone in it closer within the frame also increases arousal levels.
  14. Now that we understand more about what makes unconscious shifts in emotions, let’s explore the concept of flow.
  15. In psychology, the Yerkes-Dodson law describes how arousal or stress levels affect performance
  16. As stress rises, so does performance,
  17. Up to an optimum point. After this point, arousal continues to rise...
  18. while performance declines From this law, we can see that some stress or anxiety is good for performance, but too much damages performance.
  19. 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.
  20. 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.
  21. So, to illustrate, as we increase the challenges we face,
  22. we become more anxious.
  23. Re-entering flow involves increasing our skills to match these challenges and reduce anxiety
  24. Similarly, as we increase our skills, we become bored.
  25. And re-entering flow involves increasing the challenge to match our increased skills
  26. 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.
  27. 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.
  28. 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.
  29. 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).
  30. 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
  31. 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
  32. 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.
  33. 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.
  34. 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.
  35. This is a white circle
  36. With two black dots on top of it
  37. 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.
  38. 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.
  39. 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.
  40. 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."
  41. Based on user feedback, the team estimated the best blue color could generate an additional $80 million to $90 million in ad sales.
  42. 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.
  43. 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.
  44. 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:
  45. Instead, they encounter this…. Can anyone tell me what this company does? Anyone?
  46. A site designed to present the user with clear options for proceeding according to their evolving goals.
  47. 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
  48. 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.
  49. In the case of the affectivedesign site, users se a visual shift for the active tab and a page layout change.
  50. 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.
  51. Novice users tend to be more experiential, less challenging, more exploratory and entertainment oriented .
  52. 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.
  53. 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. .
  54. 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.
  55. 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.
  56. 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?
  57. Or this?
  58. 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.
  59. 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).
  60. 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.
  61. If you’re interested in talking more, you can speak with me after this talk or contact me here.
  62. So thank you all for coming!