WHAT IS INTERACTION DESIGN?

Chapter 1

1
 Topics
• Good and Poor Design
• What is an Interaction Design
• The User Experience
• Process of Interaction Design
• Interaction Design and User Experience

2
 Learning Outcomes
• Explain the difference between good and poor interaction
design.
• Describe what interaction design is and how it relates to
human–computer interaction and other fields.
• Explain the relationship between the user experience and
usability.
• Describe what and who is involved in the process of
interaction design.
• Outline the different forms of guidance used in interaction
design.
• Enable you to evaluate an interactive product and explain
what is good and bad about it in terms of the goals and core
principles of interaction design.
3
 Introduction
• Many products that require users to interact with them, such as
smartphones and social networking sites, have been designed
primarily with the user in mind.
• They are generally easy and enjoyable to use. Others, such as
switching from viewing a rented movie on your smart TV to watching
a sports channel, or setting the alarm on a digital clock, have not
necessarily been designed with the users in mind, but have been
engineered primarily as systems to perform set functions.
• While they may work effectively, it can be at the expense of how
they will be used by real people.
• One main aim of interaction design is to reduce the negative
aspects (e.g. frustration, annoyance) of the user experience while
enhancing the positive ones (e.g. enjoyment, engagement).

4
 Good and Poor Design
• A good place to start thinking about how to design
usable interactive products is to compare examples of
well- and poorly-designed ones.
• Through identifying the specific weaknesses and
strengths of different interactive products, we can begin
to understand what it means for something to be usable
or not.
• Two examples of poorly designed products – a voice
mail system used in hotels and the ubiquitous remote
control device – and contrast these with two well-
designed examples of products that perform the same
function.
5
 1) Voice Mail System
• Imagine the following scenario :
• You are staying at a hotel for a week while on a business trip. You discover you have left your cell phone at home
so you have to rely on the hotel's facilities. The hotel has a voice mail system for each room. To find out if you
have a message, you pick up the handset and listen to the tone. If it goes ‘beep, beep, beep’ there is a message.
To find out how to access the message you have to read a set of instructions next to the phone. You read and
follow the first step:
• ‘1. Touch 41.’
• The system responds: ‘You have reached the Sunny Hotel voice message center. Please enter the room number
for which you would like to leave a message.’
• You wait to hear how to listen to a recorded message. But there are no further instructions from the phone. You
look down at the instruction sheet again and read:
• ‘2. Touch*, your room number, and #.’
• You do so and the system replies: ‘You have reached the mailbox for room 106. To leave a message, type in your
password.’
• You type in the room number again and the system replies: ‘Please enter room number again and then your
password.’
• You don't know what your password is. You thought it was the same as your room number, but clearly it's not. At
this point you give up and call reception for help. The person at the desk explains the correct procedure for
recording and listening to messages. This involves typing in, at the appropriate times, the room number and the
extension number of the phone (the latter is the password, which is different from the room number). Moreover, it
takes six steps to access a message and five steps to leave a message. You go out and buy a new cell phone.

6
 1) Voice Mail System
• What is problematic with this voice mail system?
• It is infuriating.
• It is confusing.
• It is inefficient, requiring you to carry out a number of steps for basic
tasks.
• It is difficult to use.
• It has no means of letting you know at a glance whether any
messages have been left or how many there are. You have to pick
up the handset to find out and then go through a series of steps to
listen to them.
• It is not obvious what to do: the instructions are provided partially by
the system and partially by a card beside the phone.

7
8
 Marble Answering Machine
• How does the marble answering machine differ from the
voice mail system?
– It uses familiar physical objects that indicate visually at a glance
how many messages have been left.
– It is aesthetically pleasing and enjoyable to use.
– It only requires one-step actions to perform core tasks.
– It is a simple but elegant design.
– It offers less functionality and allows anyone to listen to any of
the messages.

Video of Durrell Bishop's answering machine at http://vimeo.com/19930744

9
 2) Remote Control Device
• Every home entertainment system, be it the TV, cable, smart TV,
music system, and so forth, comes with its own remote control
device.
• Many have been designed with a dizzying array of small,
multicolored, and double-labeled buttons (one on the button and
one above or below it) that often seem arbitrarily positioned in
relation to one another.
• Many viewers, especially when sitting in their living room, find it
difficult to locate the right ones, even for the simplest of tasks, like
pausing or finding the main menu.
• It can be especially frustrating for those who need to put on their
reading glasses each time to read the buttons.

10
 TiVo Remote Control
• Why is the TiVo remote so much better designed than
standard remote controls?

– Peanut shaped to fit in hand

– Logical layout and color-coded, distinctive buttons
– Easy to locate buttons

See:
http://gizmodo.com/5017972/story-of-a-peanut-the-tivo-remotes-un
told-past-present-and-future

11
 Dilemma
Which is the best way to interact with a smart TV?

•Standard remote device?

•Apple slimline remote control?
•Minnum’s new keyboard?

http://minuum.com

13
 What is an Interaction Design?
• Designing interactive products to support the way people
communicate and interact in their everyday and working
lives.
• The focus of interaction design is very much concerned with
practice, i.e. how to design user experiences.
• It is not wedded to a particular way of doing design, but is
more eclectic, promoting the use of a range of methods,
techniques, and frameworks.
• Which is given prominence or is currently in vogue will very
much depend on the time and context (Lowgren and
Stolterman, 2004; Saffer, 2010).

14
Components of Interaction Design

Relationship among contributing academic disciplines, design

practices, and interdisciplinary fields concerned with
interaction design (double-headed arrows mean overlapping)
15
 Is interaction design beyond HCI?
• The main difference between Interaction Design (ID) and Human–Computer
Interaction (HCI) are :
– ID has cast its net much wider, being concerned with the theory,
research, and practice of designing user experiences for all manner of
technologies, systems, and products, whereas HCI has traditionally had
a narrower focus, being “concerned with the design, evaluation, and
implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them” (ACM SIGCHI,
1992, p. 6).
• What about Human Factors and Ergonomics?
• Ergonomics and Human Factors as having closely overlapping goals with
HCI, being concerned with understanding the interactions among humans
and other aspects of a system in order to optimize human well-being and
overall system performance.

16
 What Is HCI?
• Human Computer interaction is defined as
a discipline concerned with the design,
evaluation and implementation of
interactive computer systems for human
use and with the study of major
phenomenon surrounding them. ACM
SIGCHI (1992). Computer

Interaction
Human

17
 HCI
• Modern information systems and software tools
are an essential part of most work settings. The
interface is also a tool to be used by the workers.
• Human Computer Interaction concerns with the
factors that contribute to the success and failure of
using computer systems.
• Factors such as capabilities and limitation of
human users when interacting with the computers
and also other related issues.
• Concern all aspects that relates to the interaction
between users and computers and design
interface. 18
 HCI Design Team
• Managers
• System analyst
• software engineers
• programmers
• graphic designers
• engineers and more

19
 The User Experience
• The user experience (UX) is central to interaction design.
• By this it is meant how a product behaves and is used by people in
the real world.
• More specifically, it is about how people feel about a product and
their pleasure and satisfaction when using it, looking at it, holding it,
and opening or closing it.
• It includes their overall impression of how good it is to use, right
down to the sensual effect small details have on them, such as how
smoothly a switch rotates or the sound of a click and the touch of a
button when pressing it.
• An important aspect is the quality of the experience someone has,
be it a quick one, such as topping up a cell phone, a leisurely one,
such as playing with an interactive toy, or an integrated one, such
as visiting a museum (Law et al, 2009).
20
 Activity
The iPod phenomenon
Apple's classic (and subsequent) generations of
iPods (e.g. Touch, Nano, Shuffle) have been a
phenomenal success.
How do you think this happened?

21
 The User Experience
• There are many aspects of the user experience that can be
considered and ways of taking them into account when
designing interactive products.
• Central importance are the usability, the functionality, the
aesthetics, the content, the look and feel, and the sensual
and emotional appeal.
• In addition, Carroll (2004) stresses other wide-reaching
aspects, including fun, health, social capital (the social
resources that develop and are maintained through social
networks, shared values, goals, and norms), and cultural
identity, e.g. age, ethnicity, race, disability, family status,
occupation, education.

22
 The User Experience
McCarthy and Wright propose four core threads that make
up our holistic experiences: sensual, emotional,
compositional, and spatiotemporal:

1.The sensual thread.

This is concerned with our sensory engagement with a situation
and is similar to the visceral level of Norman's model. It can be
equated with the level of absorption people have with various
technological devices and applications, most notable being
computer games, smartphones, and chat rooms, where users can
be highly absorbed in their interactions at a sensory level. These
can involve thrill, fear, pain, and comfort.

23
 The User Experience
2. The emotional thread

Common examples of emotions that spring to mind are sorrow,

anger, joy, and happiness. In addition, the framework points out
how emotions are intertwined with the situation in which they arise
– e.g. a person becomes angry with a computer because it does
not work properly. Emotions also involve making judgments of
value. For example, when purchasing a new cell phone, people
may be drawn to the ones that are most cool-looking but be in an
emotional turmoil because they are the most expensive. They can't
really afford them but they really would like one of them.

24
 The User Experience
3.The compositional thread

This is concerned with the narrative part of an experience, as it

unfolds, and the way a person makes sense of it. For example,
when shopping online, the options laid out to people can lead them
in a coherent way to making a desired purchase or they can lead to
frustrating experiences resulting in no purchase being made. When
in this situation, people ask themselves questions such as: What is
this about? Where am I? What has happened? What is going to
happen next? What would happen if . . . ? The compositional thread
is the internal thinking we do during our experiences.

25
 The User Experience
4.The spatio-temporal thread

This refers to the space and time in which our experiences take
place and their effect upon those experiences. There are many
ways of thinking about space and time and their relationship with
one another: for example, we talk of time speeding up, standing
still, and slowing down, while we talk of space in terms of public and
personal places, and needing one's own space.

The threads are meant as ideas to help designers think and talk more clearly and
concretely about the relationship between technology and experience.

26
 The Process of Interaction Design
• The process of interaction design involves
four basic activities:

1. Establishing requirements
2. Designing alternatives
3. Prototyping
4. Evaluating.
These activities are intended to inform one another and to be repeated.

27
 The Process of Interaction Design
• Evaluating what has been built is very much at the heart
of interaction design.
• Its focus is on ensuring that the product is appropriate.
• It is usually addressed through a user-centered
approach to design, which, as the name suggests, seeks
to involve users throughout the design process.
• There are many different ways of achieving this: for
example, through observing users, talking to them,
interviewing them, modeling their performance, asking
them to fill in questionnaires, and even asking them to
become co-designers.
• Equally important as involving users when evaluating an
28
interactive product is understanding what people do.
 The Process of Interaction Design
• Being aware of cultural differences is also an important
concern for interaction design, particularly for products
intended for a diverse range of user groups from different
countries.
• An example of a cultural difference is the dates and times
used in different countries.
• In the USA, for example, the date is written as month, day, year
(e.g. 05/21/15) whereas in other countries it is written in the
sequence of day, month, year (e.g. 21/05/15).
• This can cause problems to designers when deciding on the
format of online forms, especially if intended for global use.
• It is also a concern for products that have time as a function,
e.g. operating systems, digital clocks, car dashboards.
29
 The Process of Interaction Design

Why is it that certain products, like the iPod,

are universally accepted by people from all
parts of the world, whereas websites are
designed differently and reacted to
differently by people from different cultures?

30
 The Process of Interaction Design
• As well as there being standard differences in the
way cultures communicate and represent
information, designers from different cultures (that
can be cross- or within-country) will often use
different form factors, images, and graphical
elements when creating products and dialog
features for an interface.
• This can take the form of contrasting designs, where
different colors, types of images, and structuring of
information are used to appeal to people in different
countries.
31
The Process of Interaction Design

Anna the online sales agent,

designed to be subtly different for
UK and US customers.
What are the differences and
which is which? What should Anna's
appearance be like for other
countries, like India, South Africa, or
China?

32
 Interaction Design and the User
Experience
• Part of the process of understanding users is to
be clear about the primary objective of
developing an interactive product for user.
• Traditionally, usability goals have been viewed
as being concerned with meeting specific
usability criteria, e.g. efficiency, whereas, more
recently, user experience goals have been
concerned with explicating the nature of the user
experience, e.g. to be aesthetically pleasing.

33
 Interaction Design and the User
Experience
Usability Goals
Usability refers to ensuring that interactive products are easy to
learn, effective to use, and enjoyable from the user's
perspective.
•More specifically, usability is broken down into the following
goals:
•effective to use (effectiveness)
•efficient to use (efficiency)
•safe to use (safety)
•having good utility (utility)
•easy to learn (learnability)
•easy to remember how to use (memorability).
34
 Interaction Design and the User
Experience
• Usability goals are typically operationalized as questions.
• The purpose is to provide the interaction designer with a concrete
means of assessing various aspects of an interactive product and
the user experience.
• Through answering the questions, designers can be alerted very
early on in the design process to potential design problems and
conflicts that they might not have considered.
• However, simply asking ‘is the system easy to learn?’ is not going to
be very helpful.
• Asking about the usability of a product in a more detailed way – for
example, ‘how long will it take a user to figure out how to use the
most basic functions for a new smartwatch; how much can they
• capitalize on from their prior experience; and how long would it take
a user to learn the whole set of functions?’ – will elicit far more
information. 35
Interaction Design and the User
Experience

(a) A safe and unsafe menu.

Which is which and why?
(a) A warning dialog box for Mac OS X

36
 Interaction Design and the User
Experience
User Experience Goals
•A diversity of user experience goals has
been articulated in interaction design, which
cover a range of emotions and felt
experiences.
•These include desirable and undesirable
ones as shown in Table 1.

37
Interaction Design and the User
Experience

38
Table 1
 Interaction Design and the User
Experience
Design Principles
•Design principles are used by interaction designers to aid their
thinking when designing for the user experience.
•These are generalizable abstractions intended to orient designers
towards thinking about different aspects of their designs.
•A well-known example is feedback: products should be designed to
provide adequate feedback to the users to ensure they know what to
do next in their tasks.
•Another one that has become increasingly important is findability
(Morville, 2005).
•This refers to the degree to which a particular object is easy to
discover or locate – be it navigating a website, moving through a
building, or finding the delete image option on a digital camera.

39
 Interaction Design and the User
Experience
Visibility
Visibility refers to the functions/controls
available on the objects should be visible to
user. Controls need to be visible to user with
good mapping for their effect.

40
Interaction Design and the User
Experience

A sign in the restrooms at Cincinnati

airport.
Because it is not visible to the user as to
what to do to turn the faucet (tap) on and
off, a sign has been added to explain what
is normally an everyday and well-learned
activity.
It does not explain, however, what to do if
you are wearing black clothing

41
 Interaction Design and the User
Experience
Feedback
•Feedback involves sending back information about what
action has been done and what has been accomplished,
allowing the person to continue with the activity.
•Various kinds of feedback are available for interaction
design – audio, tactile, verbal, visual, and combinations of
these.
•Deciding which combinations are appropriate for different
kinds of activities and interactivities is central.
•Using feedback in the right way can also provide the
necessary visibility for user interaction.
42
 Interaction Design and the User
Experience
Constraints
•The design concept of constraining refers to
determining ways of restricting the kinds of user
interaction that can take place at a given moment.
•There are various ways this can be achieved.
•A common design practice in graphical user
interfaces is to deactivate certain menu options by
shading them gray, thereby restricting the user
only to actions permissible at that stage of the
activity.
43
 Interaction Design and the User
Experience

A menu showing restricted availability of options as an example of logical

constraining. Shaded areas indicate deactivated options
44
 Interaction Design and the User
Experience

Where do you plug in the mouse and keyboard? This figure shows
part of the back of a computer. There are two sets of connectors; the
two on the right are for a mouse and a keyboard.
They look identical and are physically constrained in the same way.
How do you know which is which? Do the labels help? 45
 Interaction Design and the User
Experience
Consistency
•This refers to designing interfaces to have similar operations and use similar
elements for achieving similar tasks.
•In particular, a consistent interface is one that follows rules, such as using the
same operation to select all objects.
•For example, a consistent operation is using the same input action to highlight
any graphical object at the interface, such as always clicking the left mouse
button.
•Inconsistent interfaces, on the other hand, allow exceptions to a rule.
•An example is where certain graphical objects (e.g. email messages presented
in a table) can be highlighted only by using the right mouse button, while all
other operations are highlighted using the left button..
•A problem with this kind of inconsistency is that it is quite arbitrary, making it
difficult for users to remember and making the users more prone to mistakes.

46
 Interaction Design and the User
Experience
Affordance
Affordance refers to the technical term of
object which is what kind of operation or
manipulation that can be done on a
particular object. In other word, what
operation a person might think of by looking
at the appearance of the objects. The
appearance of object suggests the operation
that can be performed.
47
 Interaction Design and the User
Experience
• Eg: What the user can see that an object
does.
• Chair afford sitting ; handles afford pulling.

Pull the handle,

An affordance for pushing does the door 48
open?
49