INTERACTION DESIGN

Objectives
The main aims of this chapter are to:
✘ 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.
Objectives

✘ Describe what and who is involved in the process of

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
Interaction Design Aim

✘ Reduce the Negative Aspects

✘ Enhancing the Positive Aspects
✘ Developing interactive products
that are
■ Easy
■ Effective
■ Pleasurable to use
What is Interaction Design?
Interaction Design (IxD) is the design
of interactive products and services in
which a designer’s focus goes beyond
the item in development to include
the way users will interact with it.
Thus, close scrutiny of users’ needs,
limitations and contexts, etc.
empowers designers to customize
output to suit precise demands.
Good and Poor Design
A Good User Interface
http://www.goodui.org/
What is the best way to interact with a smart TV?
What to Design

✘ Designing interactive products

requires:
■ who is going to be using them
■ how they are going to be used
■ where they are going to be used
 What Is Interaction Design?
“ designing interactive products
to support the way people
communicate and interact
in their everyday and
working lives. “ “ it is about creating user
experiences that enhance
and augment the way people
work, communicate, and
interact. ”
 What Is Interaction Design?
“designing spaces for
human communication
“the why as well as the how
and interaction”
- Winograd
of our daily interactions
using computers”
– Thackara
“the art of facilitating interactions
between humans through
products and services”
- Saffer
The Components of Interaction Design
Is interaction design beyond HCI?

✘ Interaction Design
■ concerned with the theory,
research, and practice of
designing user experiences for all
manner of technologies, systems,
and products
Is interaction design beyond HCI?

✘ Human Computer Interaction

■ being “concerned with the design,
evaluation, and implementation of
interactive computing systems for
human use and with the study of
major phenomena surrounding them”
Who Is Involved in Interaction Design?

DESIGNERS
✘ They should know many different things about users,
technologies, and interactions between them
✘ they need to understand how people act and react to
events
✘ how they communicate and interact with each other
✘ create engaging user experiences
✘ understand how emotions work, what is meant by
aesthetics, desirability, and the role of narrative in
human experience.
Who Is Involved in Interaction Design?

DEVELOPERS
✘ Understand the business side, the
technical side, the manufacturing
side, and the marketing side.
USER EXPERIENCE (UX)

✘ central to interaction design

✘ how a product behaves and is used by
people in the real world
✘ how people feel about a product and
their pleasure and satisfaction when
using it, looking at it, holding it, and
opening or closing it.
USER EXPERIENCE (UX)

“all aspects of the interaction

with the company, its
services, and its products.”
Nielsen and Norman (2014)
 What do professionals do in the
35
Interaction Design business?
✘ INTERACTION DESIGNERS
- people involved in the design of all the interactive
aspects of a product

✘ USABILITY ENGINEERS
- people who focus on evaluating products, using
usability methods and principles

✘ WEB DESIGNERS
- people who develop and create the visual design
of websites, such as layouts
www.id-book.com
 What do professionals do in the
Interaction Design business?
36

✘ INFORMATION ARCHITECTS
- people who come up with ideas of how to plan and
structure interactive products

✘ USER EXPERIENCE DESIGNERS (UX)

- people who do all the above but who may also carry out
field studies to inform the design of products

www.id-book.com
USER EXPERIENCE (UX)

One Cannot Design A

User Experience
Only Design For A
User Experience
USER EXPERIENCE (UX)

✘ sometimes refer to UX as UXD

- meant to encourage design thinking

that focuses on the quality of the
user experience rather than on the
set of design methods to use
(Allanwood and Beare, 2014)
 USER EXPERIENCE (UX)
“It is not enough that we build
products that function, that are
understandable and usable, we also
need to build joy and excitement,
pleasure and fun, and yes, beauty to
people's lives.”
Norman (2004)
USER EXPERIENCE (UX)

✘ Usability ✘ Sensual and

✘ Functionality Emotional appeal
✘ Fun
✘ Aesthetics
✘ Health
✘ Content
✘ Social capital
✘ Look and feel
✘ Cultural Identity
McCarthy and Wright propose four core threads
that make up our holistic experiences:

✘ The sensual thread.

✘ The emotional thread.
✘ The compositional thread.
✘ The spatio-temporal thread.
The Process of Interaction Design
The process of interaction design
involves four basic activities:
1. Establishing requirements
2. Designing alternatives
3. Prototyping
4. Evaluating.
Accessibility
✘ refers to the degree to which an
interactive product is accessible by
as many people as possible. A focus
is on people with disabilities.
People are considered to be
disabled if:

✘ They have a mental or physical

impairment.
✘ The impairment has an adverse effect on
their ability to carry out normal day-to-
day activities.
✘ The adverse effect is substantial and long
term (meaning it has lasted for 12 months,
or is likely to last for more than 12 months
or for the rest of their life).
There is a wide range of
disabilities including:

✘ Color-blindness
✘ Dyslexia
✘ Physical Impairment
Interaction Design and
the User Experience

✘ Usability Goals - to ensuring

that interactive products are
easy to learn, effective to use,
and enjoyable from the user's
perspective.
49
User Experience Goals

Desirable aspects
Satisfying helpful fun
Enjoyable motivating provocative
Engaging challenging surprising
Pleasurable enhancing sociability rewarding
exciting supporting creativity entertaining
cognitively stimulating emotionally fulfilling

www.id-book.com
50 User Experience Goals
Undesirable aspects
boring unpleasant
frustrating patronizing
making one feel guilty making one feel stupid
annoying cutesy
childish gimmicky

www.id-book.com
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).
Design Principles
✘ used by interaction designers to aid
their thinking when designing for
the user experience.
■ Feedback
■ Findability
Design Principles

✘ derived from a mix of theory-based

knowledge, experience, and
common sense
 Designing for
Human Factors
Can you read this?

Aoccdrnig to rscheearch at Cmabrigde

Uinervtisy, it deosn't mttaer in waht oredr
the ltteers in a wrod are, the olny iprmoetnt
tihng is taht the frist and lsat ltteer be at the
rghit pclae. The rset can be a total mses and
you can sitll raed it wouthit porbelm. Tihs is
bcuseae the huamn mnid deos not raed
ervey lteter by istlef, but the wrod as a
wlohe.
Control
Panel CRT
Human Factors
at work…
Human factors guidelines can help us optimize a
user’s performance.
Visibility
Feedback
Natural mapping
Affordances
Constraints
Design Principles

✘ Visibility.
64
Visibility
• This is a control panel for an elevator

• How does it work?

• Push a button for the floor you want?

• Nothing happens. Push any other button? Still nothing. What

do you need to do?

It is not visible as to what to do!

www.baddesigns.com
www.id-book.com
Visibility and Feedback

Principle #1: Make relevant parts visible.

Principle #2: Give each action an immediate
and obvious effect
Visibility and Feedback
Sound can be used to provide similar
information.

When the electric engine is engaged, the

Prius is quieter than a vacuum cleaner.
 Natural Mappings
✘ Mapping = the relationship
between two things
✘ Natural mappings can be
✗ Cultural
✗ Biological
✗ Spatial

Principle #3: Capitalize on the

concept of natural mappings
Natural Mappings
Natural Mappings
Design Principles
✘ Visibility
✘ Feedback
■ involves sending back information
about what action has been done
and what has been accomplished,
allowing the person to continue
with the activity
■ Audio, tactile, verbal, visual, and
combinations of these
Design Principles
✘ Visibility
✘ Feedback
✘ Constraint
■ refers to determining ways of
restricting the kinds of user
interaction that can take place
at a given moment.
■ deactivate certain menu
options by shading them gray,
thereby restricting the user
only to actions permissible at
that stage of the activity
Constraints
✘ Constraints limit how the design can be used
✘ Types:
✗ Physical
■ Square object and round hole
✗ Cultural
■ Light switches
✗ Logical
■ Order (1,2,3 or a, b, c)

Principle #5: Restrict the kind of interaction that can

take place at a given moment
Design Principles
✘ Visibility
✘ Feedback
✘ Constraint
✘ Consistency
■ This refers to designing interfaces to
have similar operations and use
similar elements for achieving
similar tasks.
■ follows rules: using the same
operation to select all objects.
74
Internal and external consistency
✘ Internal consistency refers to designing
operations to behave the same within an
application
✗ Difficult to achieve with complex interfaces

✘ External consistency refers to designing

operations, interfaces, etc., to be the same
across applications and devices
✗ Very rarely the case, based on different
designer’s preference
www.id-book.com
 Keypad numbers layout
75

✘ A case of external inconsistency

(a) phones, remote controls (b) calculators, computer keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0

www.id-book.com
Design Principles
✘ Visibility
✘ Feedback
✘ Constraint
✘ Consistency
✘ Affordance
■ refer to an attribute of an object
that allows people to know how
to use it.
Affordances
✘ Affordance is a property of the object. They provide
strong clues to the operation of things.

✘ Suggest how the object should be used

✗ “Verb”-able

✘ Users know what to do just by looking at the object.

✗ No instructions needed!

✘ Examples
✗ Door plates
✗ Knobs
✗ Button
Affordances
Affordances

Principle #4: Use the affordances of

objects to help infer their use
 What does ‘affordance’ have to offer
interaction design?
80

✘ Interfaces are virtual and do not have

affordances like physical objects

✘ Norman argues it does not make sense

to talk about interfaces in terms of ‘real’
affordances

www.id-book.com
 What does ‘affordance’ have to offer
interaction design?
81

✘ Instead interfaces are better

conceptualized as ‘perceived’
affordances
✗ Learned conventions of arbitrary mappings
between action and effect at the interface
✗ Some mappings are better than others

www.id-book.com
What is Human Factors?

✘ HFE is a systematic approach to guide the human interactions with a

facility (say, a “control room”) to ensure that all functional aspects of
human involvement are achievable without introducing opportunities
for human error.
✘ HFE considers human...
✗ Capabilities
✗ Limitations
✗ Characteristics
✗ Behaviors
✗ Motivations
…as they impact the design of structures, systems and components.
84
Key points
✘ Interaction design is concerned with designing interactive
products to support the way people communicate and
interact in their everyday and working lives

✘ It is concerned with how to create quality user experiences

✘ It requires taking into account a number of interdependent

factors, including context of use, type of activities, cultural
differences, and user groups

✘ It is multidisciplinary, involving many inputs from wide-

reaching disciplines and fields
www.id-book.com