An overview of how designing for emotion relates to UX and flow, how the appearance and interaction of products communicate a personality to the user, and how emotions can be "chained" to enhance persuasion and influence behaviour.

1. Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction by Trevor van Gorp Dr. Ron Wardell Faculty of Environmental Design University of Calgary Edie Adams Microsoft Research © Trevor van Gorp, 2006 March 26th, 2006 Trevor van Gorp, BFA (Hon.), M.E.Des (Industrial Design) User Experience Consultant nForm User Experience Edmonton, Alberta, Canada

2. Why is Emotion Important to UX? “ Let's not forget that the little emotions are the great captains of our lives and we obey them without realizing it.“ Vincent Van Gogh, 1889

5. What differentiates one emotion from another?

8. What emotional states should be our goal?

12. Anxiety, Boredom and Flow (Csikszentmihalyi 1990 - Dots and text added: van Gorp 2006) Level of Physiological Arousal

13. Emotional States (van Gorp 2006 - adapted from Desmet 2002, Russell 1980) Flow (adapted from Csikszentmahalyi 1990)

14. What specific product properties elicit changes in emotions?

16. Interaction as Conversation http://www.amp88.plus.com/file%20open%20error.JPG

17. Interaction as Conversation Omni Graffle 4

18. Interaction as Conversation

19. Personalities and Conversations • What visual characteristics are associated with personality type? Submissive • smaller • lighter in colour • lighter in weight • rounded • feminine Dominant • larger • darker • heavier • angular • masculine www.sitesdesignedbysites.com www1.folha.uol.com.br

20. In what sequence should we elicit emotions?

21. State Chaining Emotional States (van Gorp 2006 - adapted from Desmet 2002) Flow (adapted from Csikszentmahalyi 1990)

22. State Chaining Pacing, Rapport and Leading: Interaction, Personality and Behaviour (van Gorp 2006)

24. The Affect Circumplex (van Gorp 2006) adapted from (Desmet 2002)

25. State Chaining Example - New User (van Gorp 2006)

26. Design Process

27. Existing Application Interaction

28. Interface Wireframes

29. Interface Wireframes

30. Interface Wireframes

31. Interface Wireframes

32. Interface Wireframes

33. Interface Wireframes

34. Interface Wireframes

35. Interface Wireframes

36. Interface Wireframes

37. Interface Wireframes

38. Visual Design

39. © Trevor van Gorp, 2006

40. © Trevor van Gorp, 2006

41. © Trevor van Gorp, 2006

42. © Trevor van Gorp, 2006

43. © Trevor van Gorp, 2006

44. © Trevor van Gorp, 2006

45. © Trevor van Gorp, 2006

46. © Trevor van Gorp, 2006

47. © Trevor van Gorp, 2006

48. © Trevor van Gorp, 2006

49. © Trevor van Gorp, 2006

50. © Trevor van Gorp, 2006

51. © Trevor van Gorp, 2006

52. © Trevor van Gorp, 2006

53. © Trevor van Gorp, 2006

54. © Trevor van Gorp, 2006

55. © Trevor van Gorp, 2006

56. © Trevor van Gorp, 2006

57. © Trevor van Gorp, 2006

58. © Trevor van Gorp, 2006

59. © Trevor van Gorp, 2006

60. © Trevor van Gorp, 2006

61. © Trevor van Gorp, 2006

62. © Trevor van Gorp, 2006

63. © Trevor van Gorp, 2006

64. © Trevor van Gorp, 2006

65. www.nform.ca [email_address]