IT 125

HUMAN COMPUTER
INTERACTION

HCI AND INTERACTION

DESIGN

AIDA A. ESCORIAL, MIT

WMSU
Institute of Computer Studies
Department of Information Technology

1
Learning Objectives:
• Assess the relationship of Interactive
Designs and HCI and apply the process
and principles of interaction design.
• Assess the difference between good and
poor interaction design.
• Demonstrate an understanding on what
“Everyday Things” is
• Evaluate an Everyday Thing and explain
what is good and bad about it in terms of
the goals and principles of interaction
design.
2
GOOD AND POOR
DESIGN

3
Good and Poor Design

• A central concern of interaction design is to

develop interactive products that are usable.
By this is generally meant easy to learn,
effective to use, and provide an enjoyable
user experience.

•A good place to start thinking about how to

design usable interactive products is to
compare examples of well and poorly
designed ones.
4
What to design?
• Designing usable interactive products thus
requires considering who is going to be
using them and where they are going
to be used.
• Understand the kind of activities
people are doing when interacting with
the products.

5
What to design?
• The range of activities that can be
supported is diverse.

6
 Question ?????

How do you optimize the users'

interactions with a system, environment
or product, so that they match the
users' activities that are being
supported and extended?
7
ANSWER:
• Take into account what people are good and bad
at
• Consider what might help people with the way
they currently do things
• Think through what might provide quality user
experiences
• Listen to what people want and getting them
involved in the design
• Use "tried and tested" user-based techniques
during the design process

8
DONALD A. NORMAN
ON EVERYDAY
THINGS

9
Donald A. Norman
• Cognitive • Concerned with
psychologist good design
• University of
California San Diego • Fitting things to
• The Psychology of people, not the other
Everyday Things way around
• Things that Make Us • Formulated
Smart principles of good
• The Invisible design
Computer
10
DESIGN
PRINCIPLES

11
1. VISIBILITY

• Design makes the • Getting trapped

conceptual model between glass
apparent to users doors
• Design tells the • Hinge was not
users what obvious
actions they can • No handles, no
perform panels

12
13
14
 Visibility
…you need to insert your room
card in the slot by the buttons to
get the elevator to work!

How would you make this action more visible?

• make the card reader more obvious

• provide an auditory message, that says what to
do (which language?)
• provide a big label next to the card reader that
flashes when someone enters
• make relevant parts visible
• make what has to be done obvious
2. FEEDBACK

• Provides • Auditory feedback

information about (sidetone) when
the effects of a talking on a
user’s actions telephone
• What has been
done • Tones when
buttons are
• What has been
accomplished pressed

16
17
18
19
3. MAPPING
• Relationships between controls and their
effects on a system

20
21
22
Another Example

23
Mapping
• Why is this a better mapping?

• The control buttons are mapped better onto the

sequence of actions of fast rewind, rewind, play
and fast forward
Mappings in the Kitchen

A B C D
Why is this a better design?
4. AFFORDANCE
• Perceived properties of an artifact
• Provides strong clues for possible usage

27
28
 A Good Example
• Kodak DC-290 digital camera
5. CONSISTENCY
• This refers to designing interfaces to have
similar operations and use similar
elements for achieving similar tasks.

30
Inconsistency interfaces

1 2 3 7 8 9

4 5 6 4 5 6

7 8 9 1 2 3

0 # 0 . =
*

31
6. CONSTRAINTS
• The design concept of constraining refers
to determining ways of restricting the kind
of user interaction that can take place at
a given moment.
• It can be classified:
– Physical Constraints
– Semantic Constraints
– Cultural Constraints
– Logical Constraints

32
DESIGN
CONSTRAINTS

33
Physical Constraints
• Constrain possible operations
• refer to the way physical objects
restrict the movement of things.
• Examples
– different keys fit different locks

34
35
Semantic Constraints
• Rely on the meaning of a situation to
control actions

36
37
38
Cultural Constraints
• rely on learned convention
• Accepted cultural conventions that control
actions

39
40
41
Logical Constraints
• rely on people's understanding of the way
the world works
• They rely on people's common-sense
reasoning about actions and their
consequences.
• Relationship between spatial or functional
layout of components and the things they
affect

42
Logical or ambiguous design?

• Where do you plug the

mouse?

• Where do you plug the

keyboard?

• top or bottom connector?

• Do the color coded icons

help?
From: www.baddesigns.com
 More Logically Constrained
Provides direct adjacent
mapping between icon
and connector

Provides color coding to

associate the
connectors with the
labels

From: www.baddesigns.com
45
WHAT’S WRONG
WITH THIS
PICTURE?

46
47
48
49
50
51
52
53
54
55
INTERACTION
DESIGN

56
What is Interaction Design?
• “Designing interactive products to
support people in their everyday and
working lives.”
• “The design of spaces for human
communication and interaction.” -
Winograd (1997)

57
The makeup of interaction design
• The importance of understanding how
users act and react to events and how
they communicate and interact together
has led people from a variety of
disciplines, such as psychologists and
sociologists, to become involved.

58
The makeup of interaction design
• the growing importance of understanding
how to design different kinds of interactive
media in effective and aesthetically
pleasing ways has led to a diversity of
other practitioners becoming involved,
including graphic designers, artists,
animators, photographers, film experts,
and product designers

59
Brief History of Interaction Design
• In the early days, engineers designed hardware
systems for engineers to use.
• The computer interface was relatively
straightforward, comprising various switch
panels and dials that controlled a set of internal
registers. With the advent of monitors (then
referred to as visual display units or VDUs) and
personal workstations in the late '70s and early
'80s, interface design came into being (Grudin,
1990).
60
Brief History of Interaction Design
• One of the biggest challenges at that time
was to develop computers that could be
accessible and usable by other people,
besides engineers, to support tasks
involving human cognition (e.g., doing
sums, writing documents, managing
accounts, drawing plans).

61
Brief History of Interaction Design
• Computer scientists and software
engineers developed high-level
programming languages (e.g., BASIC,
Prolog), system architectures, software
design methods, and command-based
languages to help in such tasks, while
psychologists provided information about
human capabilities (e.g., memory,
decision making).
62
Brief History of Interaction Design
• Research into and development of
graphical user interfaces (GUI for short,
pronounced "goo-ee") for office-based
systems took off in a big way.

63
Brief History of Interaction Design
• In the mid '80s, the next wave of
computing technologies such as speech
recognition, multimedia, information
visualization, and virtual reality-presented
even more opportunities for designing
applications to support even more people.

64
Brief History of Interaction Design
• As further waves of technological
development surfaced in the '90s-
networking, mobile computing, and
infrared sensing-the creation of a diversity
of applications for all people became a
real possibility.

65
Brief History of Interaction Design
• In the mid '90s, many companies realized
it was necessary again to extend their
existing multidisciplinary design teams to
include professionals trained in media
and design, including graphical design,
industrial design, film, and narrative.

66
Brief History of Interaction Design
• Now in the 'OOs, the possibilities afforded by
emerging hardware capabilities-e.g., radio-
frequency tags, large interactive screens, and
information appliances has led to a further
realization that engineers, who know about
hardware, software, and electronics are needed
to configure, assemble, and program the
consumer electronics and other devices to be
able to communicate with each other (often
referred to as middleware).
67
What is involved in the process of
interaction design?
• Essentially, the process of interaction design
involves four basic activities:
1. Identifying needs and establishing
requirements.
2. Developing alternative designs that meet those
requirements.
3. Building interactive versions of the designs so
that they can be communicated and assessed.
4. Evaluating what is being built throughout the
process.
68
Three key characteristics of the interaction
design process:
• 1. Users should be involved through the
development of the project.
• 2. Specific usability and user experience
goals should be identified, clearly
documented, and agreed upon at the
beginning of the project.
• 3. Iteration through the four activities is
inevitable.

69
The goals of interaction design
1. Usability
– effective to use (effectiveness)
– efficient to use (efficiency)
– safe to use (safety)
– have good utility (utility)
– easy to learn (learnability)
– easy to remember how to use (memorability)

70
• Efficiency refers to the way a system supports users in
carrying out their tasks.
• Safety involves protecting the user from dangerous
conditions and undesirable situations. It also refers to the
perceived fears users might have of the consequences of
making errors and how this affects their behavior.
• Utility refers to the extent to which the system provides the
right kind of functionality so that users can do what they need
or want to do.
• Learnability refers to how easy a system is to learn to use.
• Memorability refers to how easy a system is to remember
how to use, once learned. This is especially important for
interactive systems that are used infrequently. If users
haven't used a system or an operation for a few months or
longer, they should be able to remember or at least rapidly
be reminded how to use it. 71
The goals of interaction design
2 . User Experience
creating systems that are:
– satisfying - motivating
– enjoyable - aesthetically pleasing
– fun - supportive of creativity
- rewarding
– entertaining
- emotionally fulfilling
– helpful

72
Heuristics and usability principles
• Heuristics Principles
– emphasizes that something has to be done
with them when they are applied to a given
problem.
– Design principles are being practiced

• Usability Principles
– "speak the user's language."

73
Ten Usability principles
• Developed by Nielsen(2001) and his
colleagues
1. Visibility of system status-always keep users
informed about what is going on, through
providing appropriate feedback within
reasonable time
2. Match between system and the real world-
speak the users' language, using words,
phrases and concepts familiar to the user,
rather than system oriented terms
74
Ten Usability principles
3. User control and freedom- provide ways of
allowing users to easily escape from places
they unexpectedly find themselves, by using
clearly marked 'emergency exits'
4. Consistency and standards -avoid making
users wonder whether different words,
situations, or actions mean the same thing

75
Ten Usability principles
5. Help users recognize, diagnose, and
recover from errors-use plain language to
describe the nature of the problem and
suggest a way of solving it
6. error prevention-where possible prevent
errors occurring in the first place
7. Recognition rather than recall-make objects,
actions, and options visible

76
Ten Usability principles
8. Flexibility and efficiency of use - provide
accelerators that are invisible to novice users,
but allow more experienced users to carry out
tasks more quickly
9. Aesthetic and minimalist design - avoid
using information that is irrelevant or rarely
needed
10. Help and documentation - provide
information that can be easily searched and
provides help in a set of concrete steps that
can easily be followed 77
Key Points
• Interaction design is concerned with designing
interactive products to support people in their everyday
and working lives.
• Interaction design is multidisciplinary, involving many
inputs from wide-reaching disciplines and fields.
• Interaction design is now big business: many companies
want it but don't know how to do it.
• Optimizing the interaction between users and interactive
products requires taking into account a number of
interdependent factors, including context of use, type of
task, and kind of user.

78
Key Points
• Interactive products need to be designed to
match usability goals like ease of use and
learning.
• User experience goals are concerned with
creating systems that enhance the user
experience in terms of making it enjoyable, fun,
helpful, motivating, and pleasurable.
• Design and usability principles, like feedback
and simplicity, are useful heuristics for analyzing
and evaluating aspects of an interactive product.
79
Activity:
• Work on the workbook and answer the
exercises 1 to 2 under Activity 2 – HCI
and Interaction Design

80
REFERENCES
• Dix, A. Finlay J., Abowd, G, and Beale, R. (2004)
Human Computer Interaction 3rd ed., Pearson
Education Limited
• Rogers, Y., Sharp, H and Preece, J. (2007).
Interaction Design: Beyond Human Computer
Interaction, Second Edition, Wiley & Sons
• Norman, D. (2013). The DESIGN of EVERYDAY
THINGS. Basic Books, A Member of the Perseus
Books Group

81