What Is Emotional Design

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 37

What is Emotional Design?

Emotional design is the concept of how to create designs that evoke emotions
which result in positive user experiences. Designers aim to reach users on three
cognitive levels—visceral, behavioral and reflective—so users develop only
positive associations (sometimes including negative emotions) with products,
brands, etc.

“Everything has a personality: everything sends an emotional signal. Even where


this was not the intention of the designer, the people who view the website infer
personalities and experience emotions.”

— Don Norman, Grand Old Man of User Experience


Play
01:00
-05:06
Mute
Disable captions
Settings
PIPEnter fullscreen
interaction design or as a usability engineer.
Showvideo transcript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Professor Alan Dix explains why considering emotions is vital when you design
experiences.

Emotional Design is Design that Anticipates and


Accommodates Users’ Needs and Responses
As a designer, you focus on users’ needs in their interactions with your products or
services. It’s logical that the functionality you design should help them achieve
their goals as efficiently and effectively as possible. But you also have to focus on
their responses, which are naturally emotional. As rational as we may like to think
we are, emotions are at the heart of how we interpret reality. Positive experiences
drive curiosity. They help motivate us to grow as individuals. Negative experiences
help us prevent repeated mistakes. However, these not-so-positive experiences can
sometimes be fun—consider the chilling thrills of horror movies. Likewise, users
associate feelings with what they encounter. They also have tempers; some get
frustrated faster than others. The fact is that the emotional design of a product
or service affects its success—and thus the bottom line. Whether or not they
realize it, users have sophisticated thought processes going on most of the time. So,
you must address three levels of cognitive responses when you design:

1. Visceral—Users’ gut reactions to or their first impressions of your design; e.g., an


uncluttered user interface suggests ease of use.
2. Behavioral—Users subconsciously evaluate how your design helps them achieve
goals, and how easily. They should feel satisfied that they’re in control, with
minimum effort required.
3. Reflective—After they encounter your design, users will consciously judge its
performance and benefits, including value for money. If they’re happy, they’ll
keep using it, form emotional bonds with it and tell their friends.
How to Apply Emotional Design
To apply emotional design, you first need a good functional design to work with.
You also need to gain a deep understanding of your users through UX research.
Here are some ways to make emotional design work for you:

1. Give your work a signature personality – a face/mascot for users to identify with
that suits your brand/organization/industry (e.g., MailChimp’s Monkey, Freddie).
2. Have your design engage users as a character. Include personal touches in all
tasks, to reinforce the illusion of a personable helper who knows users like an old
friend.
3. Use color/contrast advantageously (e.g., blue for banking = trustworthiness).
4. Craft copy with the right tone to inspire or accommodate emotions. Write
appropriate terms/phrases (e.g., Slack’s “You’re here! The day just got better.”
greeting). Use fonts and styles that suit the image you want to project.
5. Customize microcopy (labels, etc.) users can relate to which matches your
other copy’s voice/tone.
6. Apply video/sound to carry messages “in character” (like in the above).
7. Personalize the experience for different users. (E.g., show users what else they
might like, based on their information.)
8. Offer prizes and surprises (e.g., let users check how many likes they have and
find new log-in background images). Consider including Easter eggs.
9. Use storytelling.
10. Maintain attention to detail, especially on error messages. Include polite, light-
hearted/humorous messages to alleviate users’ frustration whenever problems arise
(e.g., downtime). Consider treats to compensate for inconveniences – e.g., chances
to win account upgrades.
On the Interaction Design Foundation’s 404 error page, we use light-hearted
language to try to alleviate frustration—and a small treat in the form of an article
on great 404 pages.

Above all, to creative positive emotional engagement, you must have a friendly
presence in your design—to show users you know them. Reinforce this
with happy customer testimonials and pictures of your office/team. Your design
should look different from competitors’. It should also feel different, as a reliable,
pleasurable part of users’ lives. Attractive designs that accommodate users’ needs
and feelings give the impression they work better, too. Whatever the emotions your
design conjures in users, these feelings will affect the bottom line. Even a minor
oversight can trigger the wrong impression overall.

Learn More about Emotional Design


Take our Emotional Design course: https://www.interaction-
design.org/courses/emotional-design-how-to-make-products-people-will-love

Read Smashing Magazine’s in-depth, example-filled piece on Emotional


Design: https://www.smashingmagazine.com/2012/07/the-personality-layer/

This blog is loaded with industry insights and


examples: http://blog.teamtreehouse.com/emotional-interface-design-the-gateway-
to-passionate-users

For an insightful view of Emotional Design from the Grand Old Man of User
Experience himself, Don Norman, read his book on the
subject: https://www.nngroup.com/books/emotional-design/

Emotional Design — How to Make Products People Will Love

Emotional Design — How to Make Products People Will Love


Closes in
4
days
booked
View Course
Literature on Emotional Design
Here’s the entire UX literature on Emotional Design by the Interaction Design
Foundation, collated in one place:

Featured article

Putting Some Emotion into Your Design –


Plutchik’s Wheel of Emotions
Emotional design is a big buzz word within the UX community. Designs which tap
into the user’s emotions are considered to do more than just respond to their stated
needs and provide a greater level of user experience. One way of understanding
emotions is Plutchik’s Wheel of Emotions – this may help you deliver better
experiences to your users when designing products.

Products that people love are products that people use over and over again.
Products that they like, on the other hand, quickly slip from the user’s mind and are
replaced in time with products that are liked better or even loved. The corner stone
of emotional design is the idea that if you can elicit strong emotions in your users –
you can use those emotions to either create loyalty or to drive a customer to take
action.

Robert Plutchik, was a thought leader in the study of emotions. Before he passed
away in 2006 he was responsible for 8 books (and editing another 7), nearly 300
articles, and 45 chapters in emotional research as a psychologist. He held a
doctorate degree as well as positions at the professorial level at two respected
universities.

Plutchik’s Psycho-evolutionary Theory of Emotion


Robert Plutchik devised the psycho-evolutionary theory of emotion and this helps
categorize emotions into primary emotions and the responses to them. He argued
that the primary emotions are an evolutionary development and that the response to
each such emotion is the one that is likely to deliver the highest level of survival
possibility.
Author/Copyright holder: Machine Elf 1735. Copyright terms and licence: Public
Domain.

He posited 10 points with regard to emotion:

 Emotions are found at all evolutionary levels of species. They are equally
applicable to all animals as they are to human beings.

 Emotions evolved differently in different species and may be expressed differently


between those species.

 The purpose of emotions is an evolutionary survival response enabling the


organism to survive when confronted by environmental challenges.

 While emotions can be displayed and evoked through different mechanisms in


different organisms there are common elements to emotions that can be identified
across all emotional animals.

 There are 8 basic, primary emotions.

 Other emotions are simply a combination of these 8 basic emotions or are derived
from one (or more) of these basic emotions.

 Primary emotions are “idealized” and their properties must be inferred from
evidence but cannot be accurately stated in full.

 Each primary emotion is paired with another and is a polar opposite of that pair.

 Emotions can and do vary in degrees of similarity to each other.

 Emotions exist in varying degrees of intensity.

The 8 basic emotions that Plutchik devised were:

 Anger

 Disgust

 Fear

 Sadness
 Anticipation

 Joy

 Surprise

 Trust

The Wheel of Emotion


From this initial emotional theory Plutchik then developed a Wheel of Emotion. It
was designed to help the user understand the nuances of emotion and how
emotions contrast with each other. He developed both 2 and 3 dimensional models
for this. The 3D model is the “cone-shaped model of emotion”. They were first
described back in 1980.

Author/Copyright holder: xdxd_vs_xdxd. Copyright terms and licence: CC BY-SA


2.0

The wheel can be used by designers to examine the complexities of emotion and 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.

The wheel is a simple model and there are almost certainly additional emotional
inferences that could be drawn from a more complex model – however, it focuses
on the basic emotions that most designers are likely to want to elicit in their users
and as such provides a useful starting point.

Basic Emotional Pairs on

The basic emotional pairs are as follows:

 Joy and Sadness

 Trust and Disgust

 Fear and Anger


 Surprise and Anticipation

Emotions on Plutchik’s wheel may be combined as follows:

 Anticipation + Joy = Optimism (with its opposite being disapproval)

 Joy + Trust = Love (with its opposite being remorse)

 Trust + Fear = Submission (with its opposite being contempt)

 Fear + Surprise = Awe (with its opposite being aggression)

 Surprise + Sadness = Disapproval (with its opposite being optimism)

 Sadness + Disgust = Remorse (with its opposite being love)

 Disgust + Anger = Contempt (with its opposite being submission)

 Anger + Anticipation = Aggressiveness (with its opposite being awe)

Criticisms of Plutchik’s Model


The biggest criticism of this model is its failure to take into account the pairing of
Pride and Shame. These are emotions which designers often play to. For
example, gamification efforts may attempt to tap into a user’s pride through
leaderboards or badges. Conversely charitable and campaigning organizations may
try to tap into shame to encourage action.

It is also often felt that the model is too simplistic and that there are greater
emotional nuances not captured within it.

However, it is generally agreed that the Wheel of Emotion is a good starting point
when considering what emotions a design may elicit. It does not prevent the UX
designer from looking for additional tools to aid in emotional design.

The Take Away


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.
References
Course: “Emotional Design — How to Make Products People Will Love”

You can find several emotional models here on Wikipedia here.

You can find some great ideas for emotional metrics for emotional design at
Smashing Magazine here.

UX Review looks at emotional mapping for design here.

Hero Image: Author/Copyright holder: shellgreenier. Copyright terms and licence:


CC BY-NC-ND 2.0

Show full article

Learn more about Emotional Design

Take a deep dive into Emotional Design with our course Emotional Design —
How to Make Products People Will Love .

What separates great products from good ones? Attractive designs? User testing?
Genius designers? Well, these might be contributory factors, but the true
distinction lies in how they make users feel. Every experience has an emotional
component, and using products is no different. Incorporating emotion should
therefore be a key consideration when designing products or websites. This course
will provide you with an understanding of emotional responses and how to create
designs that encourage them.

An understanding of emotional design—how users feel and what affects these


feelings—is essential if you want to provide great user experiences. There are
probably things near you right now that are not necessarily the best, and they might
not even be particularly attractive, but you are nonetheless still using them. Take a
seashell from your favorite beach, or your very first tennis racket, for example;
they are meaningful to you, and you consequently feel a connection to them. These
connections are powerful; they subconsciously affect you and have the capacity to
turn inanimate objects into evocative extensions of you as an individual.

In this course, we will provide you with the information necessary to elicit such
positive emotional experiences through your designs. Human-computer interaction
(HCI) specialist Alan Dix provides video content for each of the lessons, helping to
crystallize the information covered throughout the course. By the end of it, you
will have a better understanding of the relationship between people and the things
they use in their everyday lives and, more importantly, how to design new products
and websites which elicit certain emotional responses.

Norman's Three Levels of Design


by Andreas Komninos | 2 years ago | 34 min read

1,008shares
ShareShare page on FacebookTweetShare page on TwitterShareShare
page on LinkedIn
In the human mind there are numerous areas responsible for what we refer to
as emotion; collectively, these regions comprise the emotional system. Don
Norman proposes the emotional system consists of three different, yet
interconnected levels, each of which influences our experience of the world in a
particular way. The three levels are visceral, behavioral, and reflective. The
visceral level is responsible for the ingrained, automatic and almost animalistic
qualities of human emotion, which are almost entirely out of our control. The
behavioral level refers to the controlled aspects of human action, where we
unconsciously analyze a situation so as to develop goal-directed strategies most
likely to prove effective in the shortest time, or with the fewest actions, possible.
The reflective level is, as Don Norman states, "...the home of reflection, of
conscious thought, of learning of new concepts and generalisations about the
world". These three levels, while classified as separate dimensions of the
emotional system, are linked and influence one another to create our overall
emotional experience of the world.
In Emotional Design: Why we love (or hate) everyday things, Don Norman (a
prominent academic in the field of cognitive science, design,
and usability engineering) distinguishes between three aspects, or levels, of the
emotional system (i.e. the sum of the parts responsible for emotion in the human
mind), which are as follows: the visceral, behavioral and reflective levels. Each of
these levels or dimensions, while heavily connected and interwoven in the
emotional system, influences design in its own specific way. The three
corresponding levels of design are outlined below:

Visceral Design – "Concerns itself with appearances". This level of design refers to
the perceptible qualities of the object and how they make the user/observer feel. For
example, a grandfather clock offers no more features or time-telling functions than
a small, featureless mantelpiece clock, but the visceral (deep-rooted, unconscious,
subjective, and automatic feelings) qualities distinguish the two in the eyes of the
owner. Much of the time spent on product development is now dedicated to
visceral design, as most products within a particular group (e.g.,
torches/flashlights, kettles, toasters, and lamps) tend to offer the same or a similar
set of functions, so the superficial aspects help distinguish a product from its
competitors. What we are essentially referring to here is 'branding'—namely, the
act of distinguishing one product from another, not by the tangible benefits it offers
the user but by tapping into the users’ attitudes, beliefs, feelings, and how they
want to feel, so as to elicit such emotional responses. This might be achieved by
using pictures of children, animals or cartoon characters to give something the
appearance of youthfulness, or by using colors (e.g., red for 'sexy' and black for
'powerful'), shapes (e.g., hard-lined shapes) or even styles (e.g., Art Deco) that are
evocative of certain eras. Visceral design aims to get inside the
user's/customer's/observer's head and tug at 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 customer/user/observer to
make a purchase, to suit the company's/business's/product owner's objectives).

Behavioral Design – "...has to do with the pleasure and effectiveness of use."


Behavioural design is probably more often referred to as usability, but the two
terms essentially refer to the practical and functional aspects of a product or
anything usable we are capable of using in our environment. Behavioral design (we
shall use this term in place of usability from now on) is interested in, for example,
how users carry out their activities, how quickly and accurately they can achieve
their aims and objectives, how many errors the users make when carrying out
certain tasks, and how well the product accommodates both skilled and
inexperienced users. Behavioral design is perhaps the easiest to test, as
performance levels can be measured once the physical (e.g., handles, buttons,
grips, levers, switches, and keys) or usable parts of an object are changed or
manipulated in some way. For instance, buttons responsible for two separate
operations might be positioned at varying distances from one another so as to test
how long it takes the user to carry out the two tasks consecutively. Alternatively,
error rates might be measured using the same manipulation(s). Examples of
experiences at the behavioral level include the pleasure derived from being able to
find a contact and make a call immediately on a mobile phone, the ease of typing
on a computer keyboard, the difficulty of typing on a small touchscreen device,
such as an iPod Touch, and the enjoyment we feel when using a well-designed
computer game controller (such as, in my humble opinion, the N64 control pad).
The behavioral level essentially refers to the emotions we feel as a result of either
accomplishing or failing to complete our goals. When products/objects enable us to
complete our goals with the minimum of difficulty and with little call for conscious
effort, the emotions are likely to be positive ones. In contrast, when products
restrict us, force us to translate or adjust our goals according to their limitations, or
simply make us pay close attention when we are using them, we are more inclined
to experience some negative emotion.

Reflective Design – "...considers the rationalization and intellectualization of a


product. Can I tell a story about it? Does it appeal to my self-image, to my pride?"
This is the highest level of emotional design; representing the conscious thought
layer, where we consciously approach a design; weighing up its pros and cons,
judging it according to our more nuanced and rational side, and extracting
information to determine what it means to us as an individual. Reflective thinking
allows us to rationalise environmental information to influence the behavioural
level. Take for example smartwatches. On that note, researchers Jaewon Choi and
Songcheol Kim at the University of Korea examined users’ intentions to adopt
smartwatches under two major factors, namely a user’s perception of the device as
a technological innovation and as a luxury fashion product. Users’ view of
the smartwatch as a technological innovation relates to their perception of the
device’s usefulness and ease of use (the behavioral level). On the other hand, the
users’ view of the smartwatch as a luxury fashion product relates to their
perception of how much they would enjoy the smartwatch and the levels of self-
expressiveness the device will afford to them, i.e. the ability to express themselves
and to enhance their image. Both enjoyment and self-expressiveness are influenced
by the visceral level ("Does the watch look beautiful?") but also very much by the
reflective level ("What will my friends think when they see me wearing this watch?
"). The reflective level mediates the effects of the behavioral level – users may well
put up with difficulties and shortcomings in the usability of the smartwatch
because they believe they will gain other, non-functional benefits from it. Apple’s
first version of their smartwatch was riddled with functional problems and usability
issues, but that didn’t stop the company from generating the second largest worldwide
revenue in the watch industry within the first year of selling it!

The Take Away


Here, we have introduced Don Norman's three levels of design: The visceral,
behavioral, and reflective level of design. The visceral level of design refers to the
first impression of a design, both in terms of how the user perceives the product
and how it makes the user feel. The behavioral level refers to the experience of the
product in use. We often think of this level when we think of user experience. The
reflective level refers to the user's reflections about the product, both before,
during, and after use. The three levels all combine to form the entire product
experience.

Human Cognition and its effect on


design

How can i do it? What am i supposed to do?


Should i use this?

Almost done, wait a second. What if i do it this


way?

What if this action causes a drop out?

Every designer has gone through these kind of situation and


problem occurs every time when designers fail to understand their
users behaviour and thought process. User’s nature and behaviour
decide how the product should work. Whereas, the product’s
interface and feedback is responsible for how users react to it. Before
starting off, every interaction designer should understand how
humans perceive any product.
Let’s try and understand how our users interact with products like
websites, web application and mobile applications. It’s all about
cognitive psychology.

Cognitive psychology

In simple words, cognitive psychology is the way users process


information or the way users deal with product and it depends on
their mental ability to think, perception, memory, learn, remember,
reason and perceive.

These are the following factors which responsible for how users
perceive and respond to a product -

Visual perception
The first impression of a product depends on the aesthetics of that
product. It depend on the following:

Pattern:- How users look at product depending on design pattern


and arrangement of elements. Visual pattern is also responsible for
how users make relationship among different groups of element.

Colour:- Colour can easily stir emotions and evoke different mood
in users.

Language & Typography

Language and Typography of a product influences reading and


comprehension. Inappropriate Language and typography often
misleads users.

Scanning

Usually users do not get involved deeply on every website. They do


not even read all the content. They just scan the pages. It depends on
the type of websites and design of the products, our users follow
certain scanning pattern like Z-Pattern, Zig-Zag Pattern and F-
Pattern to scan the pages.

Memory

It depends on user’s memory how they acquire knowledge, build


concepts for new things, deal with information overload, and their
working memory to accomplished task.

Problem solving and decision making


Users choose among different possibilities, build strategies, take
decisions and solve the problems with help of their knowledge,
previous experience and common sense.

Cognitive Processing

It is a known fact that emotions drive behaviour. Don Norman


introduced the idea that, there are three different levels of cognitive
and emotional processing which are -

Visceral

Visceral processing is that when users react immediately and make


rapid decisions. Visceral emotions are the ones we are born with.

For instance, to see product’s aesthetics users assume the nature of


product and react accordingly before any significant interaction.

Behavioural

Behavioural processing is the most common human activity. This


level of processing we use in our everyday behaviour.

i.e. when we interact with product, the way we handle it, the
emotion of gaining knowledge and understanding whether it feel
good or bad.

Reflective
Reflective processing is the conscious way to processing. This is least
immediate level of processing and mostly depends on our previous
experience.

This level of cognitive processing is accessible only via memory not


through direct interaction or perception.

Users have their own ability and limitations to


understand and perceive the information, and a good
interaction design always respect the limitation of
human mind and body.

credit: giphy

Sometimes design goes too complex to understand. User does not


able to figure out something easily and needs to put extra effort it
means cognitive load increases.
Cognitive Load

Cognitive load is the amount of energy used by brain while


performing any task or the amount of mental resources that is
required to operate the system.

There are two types of Cognitive load -

Intrinsic cognitive load

Whenever we interact with websites or application mental effort is


required to figure out those new things and information which we
don’t know. Intrinsic cognitive load is the effort of understanding
new information. It is unavoidable and essential to perform any
task.

Extraneous cognitive load

Extraneous cognitive load is also mental effort to deal with product


but that is not necessarily help us to understand the product. It can
be avoidable and manageable.

For example - irrelevant images, confused navigation.

Causes of Cognitive Load

There are many reasons which responsible for increasing Cognitive


load, here are few of them-

1. Irrelevant images or inappropriate typography increases


cognitive load.
2. If there is no clarity and user reaches goal after many
unnecessary clicks.

3. A long form which needs to be fill and most of the fields are
mandatory.

4. If there are multiple choices and need to chose one of them.

5. When users do not get result as they anticipate.

Designers can not remove cognitive load completely


but minimize it surely.

Here are some principle and laws which help to understand human
psychology, minimize cognitive load and improve user experience.

Fitt’s Law

“It is easier and faster to hit larger target closer to you than smaller
target further from you”

In interaction design size of an object and distance from where we


want to interact with that object is matter a lot.

This law helps designers to understand how to categories task and


how to give them priority with appropriate placing, because users
always find approachable way to deal with products.

Gestalt laws
Gestalt laws are simple principle which tell us how different element
are perceived when combining them in a certain way or order and
numbers of different aspect of human thought and human vision.

They give us suggestions of how to draw attention to elements that


are important or how to create an impression of balance and
stability.

Here are basics laws of gestalt —

Law of Similarity

Law of Similarity

When individual objects which appear similar ( in terms of shape,


size, colour or any other particular characteristics ) to each other, we
perceive them as related.

Law of Continuation
Law of Continuation

This law explain that how our brain experience visual lines or
continuation of elements. Naturally human eye follow the straight
line or curved line and prefer to see connected and continuous figure
to disconnected and disjointed ones.

Law of Closure

Law of Closure

When object is incomplete or a space is not completely enclose but


brain often ignore contradictory information and fill the gap.

Law of Proximity
Law of Proximity

The law of proximity indicates that elements which are close to each
other tend to be perceived as a group or single unit.

Law of Figure & Ground

Law of Figure & Ground


This law explain the relationship between an object and it’s
surrounding area. It depends on the shape or size or colour and
contrast of object that how human eye differentiate an object
(figure) from it’s surrounding area (ground).

Hick’s Law

“Increasing the number of choices will increase decision time”

Often users get confused when they need to choose one option
among many options and it takes extra time too.

Hick’s law helps designers to categorise choices, make easy


navigation and accessible user flow. It saves users time and energy.
And also improve decision making power.

Miller’s Law

“An average person can hold 7 (+/- 2) numbers of items in their


working memory”

Simply it tells us that users remember information in chunks.


Chunking is the process of grouping information together related by
perceptual features.

It helps designer to breakdown content according to nature and keep


clear visual hierarchies with most relevant information in group so
that user can easily adopt information and remember important
thing. It also improve user’s ability to comprehend.
Interaction between digital product are integral part of our life and it
is very important that products are able to understand human
behaviour. To understand Human Cognition and applying simple
law of design into design process make big and positive changes
in User Experience.

What is Emotional Design?


Emotional design is the concept of how to create designs that evoke emotions
which result in positive user experiences. Designers aim to reach users on three
cognitive levels—visceral, behavioral and reflective—so users develop only
positive associations (sometimes including negative emotions) with products,
brands, etc.

“Everything has a personality: everything sends an emotional signal. Even where


this was not the intention of the designer, the people who view the website infer
personalities and experience emotions.”

— Don Norman, Grand Old Man of User Experience


Play
01:00
-05:06
Mute
Disable captions
Settings
PIPEnter fullscreen
interaction design or as a usability engineer.
Showvideo transcript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Professor Alan Dix explains why considering emotions is vital when you design
experiences.

Emotional Design is Design that Anticipates and


Accommodates Users’ Needs and Responses
As a designer, you focus on users’ needs in their interactions with your products or
services. It’s logical that the functionality you design should help them achieve
their goals as efficiently and effectively as possible. But you also have to focus
ontheir responses, which are naturally emotional. As rational as we may like to
think we are, emotions are at the heart of how we interpret reality. Positive
experiences drive curiosity. They help motivate us to grow as individuals. Negative
experiences help us prevent repeated mistakes. However, these not-so-positive
experiences can sometimes be fun—consider the chilling thrills of horror movies.
Likewise, users associate feelings with what they encounter. They also have
tempers; some get frustrated faster than others. The fact is that the emotional
design of a product or service affects its success—and thus the bottom
line. Whether or not they realize it, users have sophisticated thought processes
going on most of the time. So, you must address three levels of cognitive responses
when you design:

1. Visceral—Users’ gut reactions to or their first impressions of your design; e.g., an


uncluttered user interface suggests ease of use.
2. Behavioral—Users subconsciously evaluate how your design helps them achieve
goals, and how easily. They should feel satisfied that they’re in control, with
minimum effort required.
3. Reflective—After they encounter your design, users will consciously judge its
performance and benefits, including value for money. If they’re happy, they’ll
keep using it, form emotional bonds with it and tell their friends.
How to Apply Emotional Design
To apply emotional design, you first need a good functional design to work with.
You also need to gain a deep understanding of your users through UX research.
Here are some ways to make emotional design work for you:

1. Give your work a signature personality – a face/mascot for users to identify with
that suits your brand/organization/industry (e.g., MailChimp’s Monkey, Freddie).
2. Have your design engage users as a character. Include personal touches in all
tasks, to reinforce the illusion of a personable helper who knows users like an old
friend.
3. Use color/contrast advantageously (e.g., blue for banking = trustworthiness).
4. Craft copy with the right tone to inspire or accommodate emotions. Write
appropriate terms/phrases (e.g., Slack’s “You’re here! The day just got better.”
greeting). Use fonts and styles that suit the image you want to project.
5. Customize microcopy (labels, etc.) users can relate to which matches your
other copy’s voice/tone.
6. Apply video/sound to carry messages “in character” (like in the above).
7. Personalize the experience for different users. (E.g., show users what else they
might like, based on their information.)
8. Offer prizes and surprises (e.g., let users check how many likes they have and
find new log-in background images). Consider including Easter eggs.
9. Use storytelling.
10. Maintain attention to detail, especially on error messages. Include polite, light-
hearted/humorous messages to alleviate users’ frustration whenever problems arise
(e.g., downtime). Consider treats to compensate for inconveniences – e.g., chances
to win account upgrades.
On the Interaction Design Foundation’s 404 error page, we use light-hearted
language to try to alleviate frustration—and a small treat in the form of an article
on great 404 pages.

Above all, to creative positive emotional engagement, you must have a friendly
presence in your design—to show users you know them. Reinforce this
with happy customer testimonials and pictures of your office/team. Your design
should look different from competitors’. It should also feel different, as a reliable,
pleasurable part of users’ lives. Attractive designs that accommodate users’needs
and feelings give the impression they work better, too. Whatever the emotions your
design conjures in users, these feelings will affect the bottom line. Even a minor
oversight can trigger the wrong impression overall.

Learn More about Emotional Design


Take our Emotional Design course: https://www.interaction-
design.org/courses/emotional-design-how-to-make-products-people-will-love

Read Smashing Magazine’s in-depth, example-filled piece on Emotional


Design: https://www.smashingmagazine.com/2012/07/the-personality-layer/

This blog is loaded with industry insights and


examples: http://blog.teamtreehouse.com/emotional-interface-design-the-gateway-
to-passionate-users

For an insightful view of Emotional Design from the Grand Old Man of User
Experience himself, Don Norman, read his book on the
subject: https://www.nngroup.com/books/emotional-design/

Emotional Design — How to Make Products People Will Love

Emotional Design — How to Make Products People Will Love


Closes in
4
days
booked
View Course
Literature on Emotional Design
Here’s the entire UX literature on Emotional Design by the Interaction Design
Foundation, collated in one place:

Featured article

Putting Some Emotion into Your Design –


Plutchik’s Wheel of Emotions

Emotional design is a big buzz word within the UX community. Designs which tap
into the user’s emotions are considered to do more than just respond to their stated
needs and provide a greater level of user experience. One way of understanding
emotions is Plutchik’s Wheel of Emotions – this may help you deliver better
experiences to your users when designing products.

Products that people love are products that people use over and over again.
Products that they like, on the other hand, quickly slip from the user’s mind and are
replaced in time with products that are liked better or even loved. The corner stone
of emotional design is the idea that if you can elicit strong emotions in your users –
you can use those emotions to either create loyalty or to drive a customer to take
action.

Robert Plutchik, was a thought leader in the study of emotions. Before he passed
away in 2006 he was responsible for 8 books (and editing another 7), nearly 300
articles, and 45 chapters in emotional research as a psychologist. He held a
doctorate degree as well as positions at the professorial level at two respected
universities.

Plutchik’s Psycho-evolutionary Theory of Emotion


Robert Plutchik devised the psycho-evolutionary theory of emotion and this helps
categorize emotions into primary emotions and the responses to them. He argued
that the primary emotions are an evolutionary development and that the response to
each such emotion is the one that is likely to deliver the highest level of survival
possibility.

Author/Copyright holder: Machine Elf 1735. Copyright terms and licence: Public
Domain.

He posited 10 points with regard to emotion:

 Emotions are found at all evolutionary levels of species. They are equally
applicable to all animals as they are to human beings.

 Emotions evolved differently in different species and may be expressed differently


between those species.
 The purpose of emotions is an evolutionary survival response enabling the
organism to survive when confronted by environmental challenges.

 While emotions can be displayed and evoked through different mechanisms in


different organisms there are common elements to emotions that can be identified
across all emotional animals.

 There are 8 basic, primary emotions.

 Other emotions are simply a combination of these 8 basic emotions or are derived
from one (or more) of these basic emotions.

 Primary emotions are “idealized” and their properties must be inferred from
evidence but cannot be accurately stated in full.

 Each primary emotion is paired with another and is a polar opposite of that pair.

 Emotions can and do vary in degrees of similarity to each other.

 Emotions exist in varying degrees of intensity.

The 8 basic emotions that Plutchik devised were:

 Anger

 Disgust

 Fear

 Sadness

 Anticipation

 Joy

 Surprise

 Trust

The Wheel of Emotion


From this initial emotional theory Plutchik then developed a Wheel of Emotion. It
was designed to help the user understand the nuances of emotion and how
emotions contrast with each other. He developed both 2 and 3 dimensional models
for this. The 3D model is the “cone-shaped model of emotion”. They were first
described back in 1980.

Author/Copyright holder: xdxd_vs_xdxd. Copyright terms and licence: CC BY-SA


2.0

The wheel can be used by designers to examine the complexities of emotion and 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.

The wheel is a simple model and there are almost certainly additional emotional
inferences that could be drawn from a more complex model – however, it focuses
on the basic emotions that most designers are likely to want to elicit in their users
and as such provides a useful starting point.

Basic Emotional Pairs on

The basic emotional pairs are as follows:

 Joy and Sadness

 Trust and Disgust

 Fear and Anger

 Surprise and Anticipation

Emotions on Plutchik’s wheel may be combined as follows:

 Anticipation + Joy = Optimism (with its opposite being disapproval)

 Joy + Trust = Love (with its opposite being remorse)

 Trust + Fear = Submission (with its opposite being contempt)


 Fear + Surprise = Awe (with its opposite being aggression)

 Surprise + Sadness = Disapproval (with its opposite being optimism)

 Sadness + Disgust = Remorse (with its opposite being love)

 Disgust + Anger = Contempt (with its opposite being submission)

 Anger + Anticipation = Aggressiveness (with its opposite being awe)

Criticisms of Plutchik’s Model


The biggest criticism of this model is its failure to take into account the pairing of
Pride and Shame. These are emotions which designers often play to. For
example, gamification efforts may attempt to tap into a user’s pride through
leaderboards or badges. Conversely charitable and campaigning organizations may
try to tap into shame to encourage action.

It is also often felt that the model is too simplistic and that there are greater
emotional nuances not captured within it.

However, it is generally agreed that the Wheel of Emotion is a good starting point
when considering what emotions a design may elicit. It does not prevent the UX
designer from looking for additional tools to aid in emotional design.

The Take Away


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.

References
Course: “Emotional Design — How to Make Products People Will Love”

You can find several emotional models here on Wikipedia here.

You can find some great ideas for emotional metrics for emotional design at
Smashing Magazine here.
UX Review looks at emotional mapping for design here.

Hero Image: Author/Copyright holder: shellgreenier. Copyright terms and licence:


CC BY-NC-ND 2.0

Show full article

Learn more about Emotional Design

Take a deep dive into Emotional Design with our course Emotional Design —
How to Make Products People Will Love .

What separates great products from good ones? Attractive designs? User testing?
Genius designers? Well, these might be contributory factors, but the true
distinction lies in how they make users feel. Every experience has an emotional
component, and using products is no different. Incorporating emotion should
therefore be a key consideration when designing products or websites. This course
will provide you with an understanding of emotional responses and how to create
designs that encourage them.

An understanding of emotional design—how users feel and what affects these


feelings—is essential if you want to provide great user experiences. There are
probably things near you right now that are not necessarily the best, and they might
not even be particularly attractive, but you are nonetheless still using them. Take a
seashell from your favorite beach, or your very first tennis racket, for example;
they are meaningful to you, and you consequently feel a connection to them. These
connections are powerful; they subconsciously affect you and have the capacity to
turn inanimate objects into evocative extensions of you as an individual.

In this course, we will provide you with the information necessary to elicit such
positive emotional experiences through your designs. Human-computer interaction
(HCI) specialist Alan Dix provides video content for each of the lessons, helping to
crystallize the information covered throughout the course. By the end of it, you
will have a better understanding of the relationship between people and the things
they use in their everyday lives and, more importantly, how to design new products
and websites which elicit certain emotional responses.

You might also like