3/5/2013
Chapter 5:
Emotional Interaction
Anna Loparev
Intro HCI
03/05/2013
Emotional interaction
What?
http://www.guardian.co.uk/science/2008/apr/14/sciencenews.news
2
1
3/5/2013
Emotional interaction
Where to start
3
Emotional interaction
Beware the cute
4
2
3/5/2013
Emotional interaction
Different strokes
5
www.id-book.com
Emotional interaction
Methods
http://www.maclife.com/article/feature/50_things_we_miss_about_oldschool_apple
6
3
3/5/2013
Methods
Dynamic icons
7
http://blog.iskysoft.com/comparing-windows-7-snow-leopard-icons/
Methods
Animations
http://gizmodo.com/5481544/apples-original-beach-ball-of-death
8
4
3/5/2013
Methods
Spoken messages
http://www.technicalwriterblog.com/wp-content/uploads/2012/10/garmin-nuvi-265w-gps1.jpg
9
Methods
Sonification
10
5
3/5/2013
Methods
Vibrotactile feedback
http://mentalfloss.com/article/30960/why-do-people-feel-phantom-cellphone-vibrations
11
Emotional interaction
Stylistic choices
12
6
3/5/2013
Stylistic choices
Shape
13
Stylistic choices
Font
14
7
3/5/2013
Stylistic choices
Color
15
Stylistic choices
Balance
http://24ways.org/2007/get-in-shape/
16
8
3/5/2013
Stylistic choices
Whitespace
17
https://www.google.com/
Stylistic choices
Graphical elements
18
9
3/5/2013
Emotional interaction
Sources of Frustration
19
Sources of frustration
Friendly agent
www.id-book.com
20
10
3/5/2013
Sources of frustration
Gimmick
21
http://www.campbellstationwine.com/website-under-construction/
Sources of frustration
Waiting
http://gratia-scientiae.mcgill.ca/labPhotos2.php
22
11
3/5/2013
Sources of frustration
Upgrading
http://www.neowin.net/forum/topic/1120242-office-2013-interface-really-this-is-the-best-they-can-do/page__st__15,
23
http://office.about.com/od/WebApps/ss/Gallery-Of-Features-In-Microsoft-Word-2013_8.htm
Emotional interaction
Sources of Frustration:
Error Message Guidelines
24
12
3/5/2013
SoF: Error message guidelines
Courteous
25
http://spreadsheetpage.com/index.php/joke/
SoF: Error message guidelines
Avoid scary terms
http://cwpakistani.blogspot.com/2012/05/how-to-fix-fatal-exception-error.html,
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx
26
13
3/5/2013
SoF: Error message guidelines
Avoid scary colors and !!!!
27
www.id-book.com
SoF: Error message guidelines
Avoid code #s and UPPERCASE
http://cwpakistani.blogspot.com/2012/05/how-to-fix-fatal-exception-error.html,
http://www.jasonyousef.com/2011/06/ssis-to-sybase-oledb-connection-error.html
28
14
3/5/2013
SoF: Error message guidelines
Audio warnings
29
SoF: Error message guidelines
Precision
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx
30
15
3/5/2013
SoF: Error message guidelines
Multiple levels
http://answers.microsoft.com/en-us/windows/forum/windows_7-performance/
microsoft-net-framework-error-message-popup-at/7ceca6f1-c3c2-4f67-b939-d2606cccb714
31
SoF: Error message guidelines
State how to fix
http://www.papajohn.org/MM2-Importing-Video-MPEG2.html
32
16
3/5/2013
SoF: Error message guidelines
Help icon/command
33
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx
Emotional interaction
Sources of Frustration:
Appearance
34
17
3/5/2013
SoF: Appearance
Text/Graphics overload
35
http://blog.howto.gov/2012/03/06/website-makeover-dept-of-labor/
SoF: Appearance
Sound/music overuse
36
18
3/5/2013
SoF: Appearance
Featuritis
37
http://www.elivecd.org/Main/Screenshots/Applications
SoF: Appearance
Input device layout
http://www.techradar.com/reviews/pc-mac/peripherals/input-devices/mice-and-trackballs/
gyration-air-mouse-elite-912885/review
38
19
3/5/2013
SoF: Appearance
Examples
• Friendly agent
• Gimmick
• Waiting
• Upgrading
• Error message
• Appearance
39
Emotional interaction
Persuasive Technology
40
20
3/5/2013
Persuasive technology
Efficiency
41
http://www.rajeshsetty.com/2010/01/02/just-one-more-step/
Persuasive technology
Recommendations
http://www.amazon.com/ThinkGeek-Inevitable-Betrayal-Shirt/dp/B003VAAGW8/ref=pd_sbs_a_10
42
21
3/5/2013
Persuasive technology
Splash page
43
http://www.qvc.com/
Persuasive technology
Gamification
44
http://www.mrdaley.com/wordpress/2011/07/27/education-levels-up-a-newbs-guide-to-gamifying-your-classroom/
22
3/5/2013
Persuasive technology
Frequent feedback
45
Persuasive technology
Representation
www.id-book.com
46
23
3/5/2013
Persuasive technology
Peer pressure
47
www.id-book.com
Persuasive technology
Social norms
48
24
3/5/2013
Persuasive technology
Example
• Gamification
• Frequent feedback
• Representation
• Peer pressure
• Social norms
49
https://en.wikipedia.org/wiki/Mario
Emotional interaction
Anthropomorphism and
Zoomorphism
50
25
3/5/2013
Anthro/Zoomorphism
What?
51
Anthro/Zoomorphism
Generate output
52
26
3/5/2013
Anthro/Zoomorphism
Recognize and respond
53
Anthro/Zoomorphism
Cope with conversation
54
27
3/5/2013
Anthro/Zoomorphism
Contribute to conversation
55
Anthro/Zoomorphism
Movement
56
28
3/5/2013
Anthro/Zoomorphism
Appearance
58
Anthro/Zoomorphism
Personality and traits
http://jdy-ramble-on.blogspot.com/2013/01/how-to-develop-your-personality-tips.html
59
29
3/5/2013
Anthro/Zoomorphism
Example
• Recognize and respond
• Generate output
• Cope with convo
• Contribute to convo
• Movement
• Appearance
• Personality and traits
60
https://en.wikipedia.org/wiki/Mario
Emotional interaction
Models of Emotion
61
30
3/5/2013
Models of emotion
Models of Emotion:
Emotional Design Model
62
Emotional design model
Visceral
http://authenticgeek247.blogspot.com/2010/08/plants-vs-zombies-almost-sued-by.html
63
31
3/5/2013
Emotional design model
Behavioral
64
http://www.trespassmag.com/review-drive/
Emotional design model
Reflective
65
32
3/5/2013
Emotional design model
Overview
66
www.id-book.com
Models of emotion
Models of Emotion:
Pleasure Model
67
33
3/5/2013
Pleasure model
Physio-pleasure
68
www.id-book.com
Pleasure model
Socio-pleasure
https://ca.youtube.com/watch?v=Veg63B8ofnQ
69
34
3/5/2013
Pleasure model
Psycho-pleasure
70
Pleasure model
Ideo-pleasure
http://www.tumblr.com/tagged/psych%20pilot
71
35
3/5/2013
Pleasure model
Example
• Physio-pleasure
• Socio-pleasure
• Psycho-pleasure
• Ideo-pleasure
72
https://en.wikipedia.org/wiki/Mario
Models of emotion
Models of Emotion:
Technology as Experience
Framework
73
36
3/5/2013
Tech as EXP framework
Sensual thread
74
http://www.pcgamer.com/review/amnesia-the-dark-descent-review/
Tech as EXP framework
Emotional thread
http://www.thehacktory.org/?p=196,
http://crackerpie.com/2013/02/24/google-glass-how-to-get-a-google-glass/
75
37
3/5/2013
Tech as EXP framework
Compositional thread
76
http://www.amazon.com/
Tech as EXP framework
Spatio-temporal thread
http://www.explosm.net/comics/940/
77
38
3/5/2013
Tech as EXP framework
Example
• Sensual thread
• Emotional thread
• Compositional thread
• Spatio-temporal thread
https://en.wikipedia.org/wiki/Mario
78
39