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
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
and interaction” how of our daily
- Winograd interactions using
computers”
“the art of facilitating – Thackara
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
34
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
35
Interaction Design business?
✘ 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
✘Aesthetics appeal
✘ Fun
✘Content
✘ Health
✘Look and feel
✘ Social capital
✘ 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.
48
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
49 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
 a n s a r e
Hum r t a in
e d f o r c e
hardw i r .
be h a v i o r
ty pe s o f

We’re inheren
tly
and we’re inhe good at some things…
rently not goo
d at others.
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 facto
rs
Human factorsguidelines can
guidelines canhelp
helpusuoptimize a
optimize a us
user’s performance. s
er’s
performance.
Visibility
Feedback
Natural mapping
Affordances
Constraints
Design Principles
✘ Visibility.
63
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.
73
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
74

✘ 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
79
interaction design?

✘ 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
80
interaction design?

✘ 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.
83
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
ACTIVITY:
Find an everyday handheld device, e.g. remote control,
digital camera, smartphone, and examine how it has been
designed, paying particular attention to how the user is
meant to interact with it.
a. From your first impressions, write down what first
comes to mind as to what is good and bad about the way
the device works.
b. Give a description of the user experience resulting
from interacting with it.
c. Finally, discuss possible improvements to the interface