CST3180

User Experience
(UX) Design

Week 10 - Emotion and User Experience

 Lecture Content

 What is Emotion?

 Why user experience important?

 The use of Emotion

 Theories of Emotion
 Traditionally, HCI has been about designing effective
and efficient systems

Recently, HCI has moved towards designing user

How user interfaces which aim to:

interfaces
affect people? 


motivate users to learn or play,
explore and be creative,
 encourage users to be social,
 provide a calm environment,
 create feelings of trust etc.
Which of the basic elements of product
design is often ignored when
developing a new product?

 Effectiveness

 Efficiency

 Satisfaction
Dealing with user frustrations

 We can impact the emotions of

users by designing in a way that
that considers the cognition,
disposition and environment of
the user.

 Interfaces, if designed poorly, can

make people look stupid, feel
insulted or threatened

 The effect can make user to lose

their temper

Microsoft Window 98
Emotion

Emotions are psychophysiological changes

which occur naturally due to events in our
surroundings. These changes are mediated
by our cognition (i.e. how we interpret
information), our disposition (i.e. how we feel
at the time) and environmental factors.

Therefore, the role of the designers is to both

understand:

 how we are affected by the products they

design and

 how they can be developed to improve

the associated user experience and our
lives.
 Emotional design

 In the developed world, we have the benefit of choice; if a

product fails to provide us with a positive emotional
experience, we can simply look for an alternative.

 Products/designs must enhance positive aspects of the

user experience and limit or eliminate negative aspects of
the user experience.

 To achieve this we need to understand of

 who the users are,
 where and when they will use the product,
 how the product is going to be used.
Positive and Negative
Emotions

Human emotions can generally be

divided into two groups: positive and
negative.

Emotions are a good example of how

users can overcome the limitations to
create more expressive and enjoyable
interactions.

:) :-)

:-/ :-(
 z
Expressive User
Interfaces

Icons and animation have been used to

indicate the current state of a computer
or cell phone.

 A classic from the 1980s

 The Happy Mac icon

 “a sense of friendliness”
 z
Do you think that computers should say
they are sorry?

Hall - “ I am sorry Dave …

I'm afraid I can't do that...”

(A Space Odyssey 2001)

 User Frustration
 When an application doesn't work properly or crashes

 When a system doesn't do what the user wants it to do

 When a user's expectations aren't met

 When the system doesn't provide enough information to

enable the user to know what to do next

 When error messages pop up that are vague

 When the user does a long series of steps to complete a

task, only to discover an error was made and they have to
start over again
 Affordances

 Affordances in design are a key concept in helping to avoid

negative experiences during use.

 “Actionable properties between the world and an actor”

 In other words, things a person can do to the world or things in it
 About the relationship between person and the world

 Perceivable qualities indicate action

 Flatness, rigidity, orientation, size, etc
Using Affordances to Avoid Negative
Emotional Responses A watering can must have a
spout that at least points
 The design of physical or digital away from the filling hole.
object must afford the same level of
understanding to the users who
created them for the first time.
Especially in digital design, visual
elements of the interface must allow
the user to readily understand what
the result of interacting with them will
be.

 it is important that the visible and

perceptible characteristics provide
potential users with sufficient
information to make their judgments
without the need for direct contact.
Katerina Kamprani’s water can
 z

 Objects should signal

function with perceptible
cues
 Rex Hartson, a computer scientist at Virginia Tech (2003), proposed four
levels of “affordances”:

• Cognitive affordance: a design feature that helps users to know

something (e.g. a label on a button explaining what will happen if it is
clicked).
Four levels of • Physical affordance: a design feature that helps users to perform a
“affordances” physical action in the interface (e.g., making buttons on a touchscreen
large enough so they can easily be pressed with a finger)

• Sensory affordance: a design feature that that it helps users sense it more
easily (e.g., making the button label font large enough so it can be read
from a typical user-device distance)

• Functional affordance: a design feature that that helps users accomplish

some work (e.g., the ability to sort a folder’s contents based on filename,
date modified or other parameters).
The Product-Emotion Cycle

The Product-Emotion Cycle addresses the effect a product or object has on the user, and
the effect of the user's resulting actions on the behaviour of the thing itself.

By considering the cognitive, physical, sensory and functional affordances of a design

element, we can help users in intuitively understanding how to use products and what
purpose they might be good for.
Norman's Three Levels
of Design

Don Norman Norman introduced

the idea that product design should
address three different levels of
cognitive and emotional processing:
visceral, behavioural, and reflective.
 z
Emotional Design Model

 Visceral design helps us make rapid

decisions about what is good, bad, safe,
or dangerous. The focus of visceral
design is principally on aesthetics.

 Behavioral design lets us manage simple,

everyday behaviors, which according to
Norman, constitute the majority of human
activity. Behavioural design is probably
more often referred to as usability.

 Reflective design involves conscious

consideration and reflection on past
experiences.
 Visceral/Behavioural/Reflective Design
 Visceral design aims to get inside the users/customer head and affect his/her
emotions either to improve the user experience (e.g., improving the general visual
appeal) or to serve some business interest (e.g., emotionally blackmailing the
user/customer to make a purchase, to suit the company/business/product owner’s
objectives).

 Behavioural design is fundamentally concerned with use—how the users carry out
their tasks and how the product can support them in carrying out the component
actions required for successful, efficient and error-free goal completion.

 Reflective design presents the biggest challenge to designers, because customers

and users may have different opinions, attitudes, memories, and life experiences
which are called upon when we make value judgments during reflective
processing.
 Applying Norman's Model of Emotion: Colors in
Logo Design
Colours have a significant part to
play in our behavioural and
reflective experiences. For
example, colours are used to
distinguish elements in tangible
and graphical user interfaces,
z
which improves usability.

At the reflective level, colours

form part of our conscious
perception of a product.

https://www.interaction-design.org
 The biggest criticism of Plutchik’s Wheel of Emotions is its
failure to take into account the pairing of Pride and Shame.
z These are emotions which designers often play with.
Wheel of Emotions

 Emotional design is a big buzz word

within the UX community.

 One way of understanding emotions is

Plutchik’s Wheel of Emotions – this
may help you deliver better
experiences to your users when
designing products.

 The wheel can be used by designers to

act as a “colour palette” for emotional
design – with the idea being that
blending different emotions will create
different levels of emotional response
and intensities of that response.

https://en.wikipedia.org/wiki/Robert_Plutchik
 Using Plutchik’s Wheel to measure
emotion
Measuring emotional engagement right at the start is
the key to the design of effective, efficient and
satisfactory products.

We can assume the user starts at an emotional state

of 0, or neutral.

 The central circle are worth either negative or

positive 3

 The 2nd circle are worth negative or positive 2

 The 3rd layer are worth negative or positive 1

Read the paper on Capturing and Measuring Emotions in
UX by Sarah E. Garcia and Laura M Hammond.
 The Wheel of Emotion
The basic emotional pairs are as
follows:
 Joy and Sadness
 Trust and Disgust
 Fear and Anger
 Surprise and Anticipation
The biggest criticism of this model is
its failure to take into account the
pairing of Pride and Shame.
The Wheel of Emotion is a
useful tool to get UX designers
thinking about how they may
elicit certain emotions through
their product design. It is not
considered to be a complete
emotional design toolkit and may
be too simplistic for some
situations and may neglect other
strong emotions completely.

Patrick W. Jordan has proposed an
affective model called “Pleasure
Model”
His model focuses more on the
pleasurable aspects of our
interactions with products.
“Designing Pleasurable Products”
Patrick W. Jordan (2000)
Pleasure Model
We need to understand
people’s practical needs,
personalities, emotions, hopes,
fears, dreams and aspirations.
We need to know how people
want to feel about themselves
and the role that the products
and services that they use can
play in this.”
 Patrick W. Jordan
z
Pleasure Model

 Physio-pleasure - bodily pleasures connected

to sensory experiences, e.g. touch, taste, and
smell

 Psycho-pleasure - people's emotional and

cognitive reactions to a product- This is similar
to the behavioral level of Norman's model)

 Socio-pleasure - the enjoyment of being in the

company of others such as loved ones,
friends, and colleagues

 Ideo-pleasure - people's values - this is akin to

the reflective level of Norman's model.
 Emotional design

Researchers Keith Oatley and Philip Johnson-Laird (1987), at the

Universities of Glasgow and Cambridge respectively, suggest that our
emotions help us choose which goals to pursue, as they act as a barometer
for determining the possibility of success when we take a particular
approach to a problem.

if a product fails to provide us with a positive emotional experience, we can

simply look for an alternative.
z

• You can find out whether key user journeys will leave the user in a positive emotional
state

• You can identify features that are eliciting negative emotions and make sure these are
replaced with opposing, positive emotion

• It gives your personas real life emotions and assesses how well your system caters for
each one on an emotional level
 References

 Paul Jarvis, The importance of emotion in design, 2014.

https://thenextweb.com/dd/2014/02/25/importance-em..

 Hartson, R. (2003). Cognitive, physical, sensory, and functional

affordances in interaction design. Behaviour & Information Technology,
22(5), 315-338.

 Oatley, K., & Johnson-Laird, P. N. (1987). Towards a cognitive theory

of emotions. Cognition and emotion, 1(1), 29-50.