Saint Joseph College

COLLEGE OF COMPUTER STUDIES

Maasin City, Southern Leyte

Module I
Human Computer
Interaction 2
1st Semester, AY 2020-2021

Prepared by
MARNULD F. CLIMACO
Instructor
Course Description

This course covers the principles of human-computer interaction and the design
and evaluation of user interfaces. Topics include an overview of human
information processing subsystems (perception, memory, attention, and problem
solving); how the properties of these systems affect the design of user interfaces;
the principles, guidelines, and specification languages for designing good user
interfaces, with emphasis on tool kits and libraries of standard graphical user
interface objects; and a variety of interface evaluation methodologies that can be
used to measure the usability of software.

Grading System

Each student shall be assessed on the following:

1. Premid/PreFi Exams– 25%

2. Midterm/Final - 30%
3. Quizzes - 25%
4. Online Discussions - 10%
5. Online Activities - 10%

Learning Outcomes

At the end of the semester, the students must be able to:

○ Develop appropriate user interfaces for domain specific

applications.

○ Evaluate the effectiveness of a design of an application or product

in solving domain-specific problems

○ Analyze different user populations with regard to their abilities and

characteristics for using both software and hardware products

○ Evaluate the design of existing user interfaces based on the

cognitive models of target user

○ Develop prototypes interfaces for users with specific accessibility

issues

○ Perform usability evaluation of an existing software based on

general principles used in heuristic evaluation, usability
 performance and preference metrics (learning, task time, task
completion, and user satisfaction) and common usability guidelines
and standards

UNIT 5

EMOTIONAL INTERACTION

Objectives

At the end of the lesson, you should be able to:

1. Cover how emotions relate to the user experience.

2. Provide examples of interfaces that are both pleasurable and
usable.
3. Explain what expressive interfaces are and the effects they can
have on people.
4. Describe how technologies can be designed to change people's
attitudes and behavior.
5. Give an overview on how anthropomorphism has been applied in
interaction design.
6. Present well-known models and frameworks of emotion and
pleasure.
7. Enable you to critique the persuasive impact of an online agent on
customers.

5.1 Introduction

An overarching goal of interaction design is to develop products that elicit

positive responses from users, such as feeling at ease, being comfortable,
and enjoying the experience of using them – be it a washing machine or a
flight deck. Designers are also concerned with how to create interactive
products that elicit specific kinds of emotional responses in users, such as
motivating them to learn, play, or be creative or social. There has also been
much interest in designing websites that people can trust, and that make
them feel comfortable about divulging personal information when making a
purchase. Taken together, we refer to this emerging area as emotional
interaction. In this chapter we look at how and why the design of interactive
products may cause certain kinds of emotional responses in people. We
3
begin by looking in general at expressive interfaces, examining the role of an
interface's appearance to users and how it affects usability. We then examine
how interactive products elicit positive effects, e.g. pleasure, and negative
responses, e.g. frustration. How technologies are being designed and used to
persuade people to change their behaviour and attitudes is then covered. We
look, in particular, at ubiquitous technology interventions that are being
designed to improve health and well-being and reduce domestic energy and
water consumption. Following this, we show how anthropomorphism has
been used in interaction design and the implications of designing applications
that have human-like qualities. A number of virtual characters and robot pets
are described that have been developed to motivate people to learn, buy, and
listen and we consider how useful and appropriate they are. Finally, we
present three models that are well known in interaction design that
conceptualize the user experience in terms of emotion, pleasure, and user
experience: (i) Norman's (2004) emotional design model; (ii) Jordan's (2000)
pleasure model for product design; and (iii) McCarthy and Wright's (2004)
technology as experience framework.

5.2 Emotions and the User Experience

Emotional interaction is concerned with how we feel and react when

interacting with technologies. It covers different aspects of the user
experience, from how we feel when first finding out about a new product to
getting rid of it. It also looks at why people become emotionally attached to
certain products (e.g. virtual pets), how social robots might help reduce
loneliness, and how to change human behavior through the use of emotive
feedback. Consider the different emotions you experience for a common
everyday activity – shopping online for a product, such as a new phone, a
washing machine, or a vacation. Firstly, there is the realization of needing or
wanting it, and then the desire and anticipation of purchasing it. This is
followed by the joy or frustration of finding out more about what products are
available and deciding which to choose from potentially hundreds or even
thousands (by visiting numerous websites, such as comparison sites,
reviews, recommendations, blogs). This entails matching what is available
with what you like or need and whether you can afford it. The thrill of deciding
on a purchase may be quickly followed by the shock of how much it costs
and the disappointment that you can't afford it. The process of having to
decide again may be accompanied by annoyance as you can't find one that
is as good as your first choice. You think about other options, such as
seeking advice from an expert in a shopping mall, but you have an aversion
to sales assistants and don't trust their advice, because you think they have
 their own interests (making money), rather than yours, at heart. So you carry
on looking, getting more tired and frustrated. When you do make a decision
you experience a sense of relief. You click merrily though the various options
(such as color, size, and warranty) and then the dreaded online payment
form pops up. You type in all your details and press the final payment button.
A window then appears saying that your credit card number is incorrect. So
you type it in again very slowly. And you notice you need to type the three-
number security code in again. Finally, when all is done you let out a big sigh.
But as you walk away from your computer doubts start to form in your mind –
maybe you should have bought the other one …

This rollercoaster set of emotions is what many of us experience when

shopping online, especially for expensive products, where there are a myriad
of options to choose from and where we want to be sure that we make the
right choice.

ACTIVITY 5.1

Write an example of a product (smart phone, Laptop, robotic toys, online

games, etc.) or any services (website such shopee or lazada) that you
encounter that makes you:

1. Emotionally attached
2. frustration

Emotional interaction is about considering what makes us happy, sad,

annoyed, anxious, frustrated, motivated, delirious, and so on, and translating this
knowledge into different aspects of the user experience, from when we first want
something to when we no longer interact with it or need to replace it. However, it
is not straightforward to achieve as people's moods and feelings are constantly
changing. There are also many reasons that might cause someone to be happy
or sad, such as the sun shining or someone else winning a game. A good place
to start understanding how emotions affect behaviour and how behaviour affects
emotions is to examine how people express themselves and read each other's
expressions. These include understanding the relationship between facial
expressions, body language, gestures, and tone of voice. For example, when
people are happy they typically smile, laugh, and open their bodies up. When
they are angry they shout, gesticulate, and screw up their face. A person's

5
expressions can trigger emotional responses in others. So when someone smiles
it can cause others to feel good and smile back.Emotional skills, especially the
ability to express and recognize emotions, are central to human communication.
Most of us are highly skilled at detecting when someone is angry, happy, sad, or
bored by recognizing their facial expressions, way of speaking, and other body
signals. We are also very good at knowing what emotions to express in a given
situation. For example, when someone has just heard he has failed an exam we
know it is not a good time to smile and be happy. Instead we try to empathize.In
addition to creating user experiences that elicit, avoid, or encourage certain kinds
of emotional reactions, another approach, called affective computing, has
attempted to develop computer-based systems that recognize and express
emotions in the same way humans do (Picard, 1998). A long-standing area of
research in artificial intelligence and artificial life has been the creation of
intelligent robots that behave like humans and other creatures. An early classic
was COG, where a group of researchers attempted to build an artificial two-year-
old. An offspring of COG was Kismet (Breazeal, 1999), which was designed to
engage in meaningful social interactions with humans (see Figure 5.2). Besides
being important theoretical research, the approach also has practical aims. For
example, one application is to consider how to design technologies that can help
people feel better, and which are “capable of soothing a crying child or of
perhaps artificially preventing strong feeling of loneliness, sadness, frustration,
and a host of other strong negative emotions, (Picard and Klein, 2002, p. 23).
However, it should be stressed that designing computers to artificially care for
humans, through listening, empathizing, and being cheerful, is not viewed as a
replacement for human care but as an aid.
 Figure 5.1

Activity 5.2

 Research 3 Ways to Prevent Negative Emotions in the User

Experience of Your Product.

5.3 Expressive Interfaces

7
 Expressive forms like emoticons, sounds, icons, and virtual agents have
been used at the interface to (i) convey emotional states and/or (ii) elicit certain
kinds of emotional responses in users, such as feeling at ease, comfort, and
happiness. Icons and animations have been used to indicate the current state of
a computer or a cell phone, notably when it is waking up or being rebooted. A
classic from the 1980s and 1990s was the happy Mac icon that appeared on the
screen of the Apple computer whenever the machine was booted (see Figure
5.3a). The smiling icon conveyed a sense of friendliness, inviting the user to feel
at ease and even smile back. The appearance of the icon on the screen was also
very reassuring to users, indicating that their computer was working correctly.
This was especially true for situations where users had to reboot their computer
after it had crashed, and where previous attempts to reboot had failed (usually
indicated by a sad icon face – see Figure 5.3b). After nearly 20 years, the happy
Mac icon was laid to rest although the sad Mac icon now shows its face on an
iPod if its software needs restoring (see Figure 5.3c). Apple has since switched
to the use of more abstract icons to indicate starting up and busy with a process,
showing a swirling clock or a colorful beach ball.

Other ways of conveying the status of a system are through the use of:

Dynamic icons (e.g. a recycle bin expanding when a file is placed in it and paper
disappearing in a puff when emptied).

Animations (e.g. a beach ball whirling to say the computer is busy).

Spoken messages, using various kinds of voices, telling the user what needs to
be done (e.g. GPS navigation system instructing you politely where to go after
having taken a wrong turn).

Various sonifications indicating actions and events (e.g. whoosh for window
closing, schlook for a file being dragged, ding for new email arriving).

Vibrotactile feedback, such as distinct cell phone buzzes that specifically

represent special messages from friends and family.
 Figure 5.3 Smiling and sad Apple icons for the classic Mac (a) and (b); and for the iPod (c)

One of the benefits of using these kinds of expressive embellishments is

that they provide reassuring feedback to the user that can be both informative
and fun. They can, however, sometimes have the opposite effect on people, who
find them intrusive, causing them at times to get annoyed and even angry. This is
especially so for cutesy ones. How enjoyable they are perceived to be varies
considerably across cultures. In South Korea and Japan, for example, cute
cartoon characters such as those depicted in Manga comics have huge cult
followings. Moreover, their influence has become widespread in the design of
websites, video games, cell phone wallpapers, etc. These include the use of
large-eyed creatures such as those used in Pokemon and Pikachu games, and
bright colors and pastels (Marcus, 2002).

Users themselves have also been inventive in expressing their emotions

at the computer interface. A universal method is the use of emoticons, originally
keyboard symbols that were combined in various ways to convey feelings and
emotions by simulating facial expressions such as smiling, winking, and frowning
on the screen. The meaning of an emoticon depends on the content of the
message and where it is placed in the message. For example, a smiley face
placed at the end of a message can mean that the sender is happy about a piece
of news she has just written about. Alternatively, if it is placed at the end of a
comment in the body of the message, it usually indicates that this comment is not
intended to be taken seriously. Many emoticons are designed to be interpreted
with the viewer's head tilted over to the left (a result of the way the symbols are
represented on the screen). Some of the best-known ones that are commonly
used are presented in Table 5.1. Nowadays, people can select from sets of
ready-made ones that are often 3D, very colorful, and cute such as those shown
in Figure 5.4.

9
 Table 5.1 Some commonly used emoticons

Figure 5.4 A collection of graphical smiley icons

ACTIVITY 5.3

How often do you use emoticons when communicating with your friends via
different social media (texting, emailing, chatting, tweeting, or Face booking)?

Do you use them sparingly or a lot?

Does it vary depending on the social media you are using? Does using them help
you express your emotions effectively?

The style of an interface, in terms of the shapes, fonts, colors, balance, white
space, and graphical elements that are used and the way they are combined,
can also influence its emotional impact. Use of imagery at the interface can result
in more engaging and enjoyable experiences (Mullet and Sano, 1995). The
design of aesthetically pleasing interfaces has also become of central concern to
interaction design. Empirical studies have shown that the aesthetics of an
interface can have a positive effect on people's perception of the system's
usability (e.g. Tractinsky, 1997). When the look and feel of an interface is
pleasing – e.g. beautiful graphics, nice feel to the way the elements have been
put together, well-designed fonts, elegant use of images and color, a good sense
of balance – users are likely to be more tolerant, e.g. they may be prepared to
wait a few more seconds for a website to download. Furthermore, good-looking
interfaces are often more satisfying and pleasurable to use. A key concern,
therefore, is to strike a balance between designing aesthetic and usable
interfaces (Tractinsky et al, 2000).

ACTIVITY 5.4

Figure 5.5 shows two differently designed dialog boxes. Describe how they differ
in terms of style. Of the two, which one do you prefer? Why? Which one do you
think Europeans would like the most and which Americans?

11
Figure 5.5 Square and round dialog boxes designed by Marcus (1993): (a) dialog box designed
for white American women; (b) dialog box designed for European adult male intellectuals

Prayer after Study

T hank You, Lord God, for opening myeyes to the light of Your wisdom.You
have delighted my heart with the knowledge of truth. I ask You,Lord, help
me always to do Your will.

Bless my soul and body, my words and actions.

Grant that Imay grow in grace, wisdom and virtue, that Your name may always
beglorified, Father, Son and Holy Spirit, now and forever. Amen.

13