FOUNDATIONS OF HUMAN–

COMPUTER INTERACTION

LECTURE 1

1
Introduction
Human Computer Interface (HCI) was
previously known as the man-machine
studies or man-machine interaction.
It deals with the design, execution and
assessment of computer systems and
related phenomenon that are for human use.
HCI can be used in all disciplines wherever
there is a possibility of computer
installation.

2
Definition
Human-Computer Interaction is a
discipline concerned with the design,
evaluation and implementation of
interactive computing systems for human
use and with the study of major
phenomena surrounding them.
HCI (human-computer interaction) is the
study of how people interact with
computers and to what extent computers are
or are not developed for successful
interaction with human beings.
3
Definition
The study of interaction between
people and computer-based
systems concern with the physical,
psychological and theoretical
aspects of this process.

4
Overview of HCI

5
Cont’ed
HCI consists of three parts:
 the user
 the computer itself
 the ways they work together – the
interaction

6
User
By "user", we may mean an individual user, a
group of users working together.
 An appreciation of the way people's sensory
systems (sight, hearing, touch) relay information
is vital.
 Also, different users form different conceptions
or mental models about their interactions and
have different ways of learning and keeping
knowledge
 In addition, cultural and national differences play
a part.

7
Computer
When we talk about the computer, we're
referring to any technology ranging from
desktop computers, to large scale computer
systems.
For example, if we were discussing the
design of a Website, then the Website itself
would be referred to as "the computer".
Devices such as mobile phones or VCRs can
also be considered to be“computers”.

8
Interaction
HCI attempts to ensure that both humans &
machines get on with each other and interact
successfully.
 In order to achieve a usable system, you need to
apply what you know about humans and
computers, and consult with likely users throughout
the design process.
 In real systems, it is vital to find a balance
between what would be ideal for the users and
what is feasible in reality.

9
Goals
The basic goal of HCI is:
To improve the interactions between users
and computers.
By making computers more usable and
receptive to the user's needs.
A long term goal of HCI is:
To design systems that minimize the barrier
between the human's cognitive model of
what they want.
To accomplish and the computer's
understanding of the user's task.
10
Goals of HCI
understand the factors that determine
how people use technology
 develop tools and techniques to enable
building suitable systems
 achieve efficient, effective, and safe
interaction
 put people first
 People needs, capabilities and preferences should come
first. People should not have to change the way that they
use a system. Instead, the system should be designed to
match their requirements
11
Why do human-computer interaction?
To enable us to design interactive
products to support people in their
everyday and working lives.
Develop usable products:
◦ Easy to learn
◦ Effective to use
◦ Provide an enjoyable experience

12
Why is human-computer interaction
important?
There is a lot of design about that can
cause problems for users.
Good design involves understanding
how users interact with computers,
and enabling them to do so effectively.

13
Some problematic designs
How fast am I going?

14
To avoid problematic design we
need to...
Take into account
 who the users are
 what activities are being carried out
 where the interaction is taking place
Optimise the interactions users have with a
product
 such that they match users’ activities and needs

15
Understanding users’ needs
Need to take into account what the target
people are good and bad at.
 Consider what might help people in the
way they currently do things.
 Listen to what people want and get them
involved.
 Use tried and tested user-based methods.

16
Cont’ed
Underlying the whole theme of HCI, is the
belief that people using a computer system
should come first.
 Their needs, capabilities and preferences
for conducting various tasks should direct
developers in the way that they design
systems.
 People should not have to change the way
that they use a system in order to fit in with
it. Instead, the system should be designed
to match their requirements.
17
Usability Goals
Concerned with making systems easy to
learn and use. A usable system is:
 easy to learn
 easy to remember how to use
 effective to use
 efficient to use
 safe to use
 enjoyable to use

18
Why is usability important?
Many everyday systems and products seem
to be designed with little regard to usability.
 This list contains examples of interactive
products:
mobile phone, computer, personal organizer,
remote control, soft drink machine, coffee
machine, ATM, ticket machine, library
information
system, the web, photocopier, watch, printer,
stereo, calculator, videogame etc….
19
DEFINING THE USER INTERFACE
User interface, design is a subset of a field
of study called human-computer
interaction (HCI).
Human-computer interaction is the study,
planning, and design of how people and
computers work together so that a person's
needs are satisfied in the most effective
way.
 HCI designers must consider a variety of
factors:

20
DEFINING THE USER INTERFACE
what people want and expect, physical
limitations and abilities people possess,
how information processing systems work,
what people find enjoyable and attractive.
Technical characteristics and limitations
of the computer hardware and software must
also be considered.

21
Cont’ed
The user interface is;
 the part of a computer and its software that people
can see, hear, touch, talk to, or otherwise
understand or direct.
The user interface has essentially two components:
input and output.
 Input is how a person communicates his / her
needs to the computer. – Some common input
components are the keyboard, mouse, trackball,
one's finger, and one's voice.
Output is how the computer conveys the results of
its computations and requirements to the user.
22
Cont’ed
Proper interface design will provide a mix
of well designed input and output
mechanisms that satisfy the user's needs,
capabilities, and limitations in the most
effective way possible.
The best interface is one that it not noticed,
one that permits the user to focus on the
information and task at hand, not the
mechanisms used to present the information
and perform the task.

23
Importance of the User Interface
A well designed interface and screen
is important to our users. It is their
window to view the capabilities of the
system.
It is also the vehicle through which
many critical tasks are presented.
These tasks often have a direct impact
on an organization's relations with its
customers, and its profitability.

24
Importance of the User Interface
A screen's layout and appearance affect a
person in a variety of ways. If they are
confusing and inefficient, people will have
greater difficulty in doing their jobs and
will make more mistakes.
 Poor design may even chase some people
away from a system permanently. It can
also lead to frustration, and increased stress.

25
Benefits of Good Design
A Good user-interface can:
1. Earn a company billions.
2. Increase users loyalty.
3. Increase users trust.
4. Makes users happy

26
 Why ..(cont.)
A Bad user-interface can:
1. be annoying, embarrassing, frustrating, and
even deadly.
2. Increase mistakes in data entry and system
operation.
3. Makes functions become completely
inaccessible.
4. System failure because of user rejection.

27
 Factors affecting usability
Style of feedback
 Visibility
 affordance
Constraints
Mapping
Consistency

28
Visibility and Affordance
Visibility is the mapping between a
control and its effect.
 Affordance of an object is the sort of
operations and manipulations that can be
done to it.
 The important factor for design is
perceived affordance – what a person
thinks can be done with an object

29
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!
30
Visibility

 You need to insert your room key –a card –into the slot by
the buttons
 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

31
Cont’ed
Visibility is the mapping between a control and
its effect.
 For example, controls in cars are generally
visible – the steering wheel has just one function,
there is good feedback and it is easy to understand
what it does.
 Mobile phones and VCRs often have poor
visibility – there is little visual mapping between
controls and the users’ goals, and controls can have
multiple functions.

32
Cont’ed
The affordance of an object is the sort of
operations and manipulations that can be done
to it.
 A door affords opening, a chair affords support.
The important factor for design is perceived
affordance – what a person thinks can be done
with an object. For example, does the design of a
door suggest that it should be pushed or pulled to
open?

33
Feedback
Sending information back to the user about
what has been done
Includes sound, highlighting, animation and
combinations of these
–e.g. when screen button clicked on provides
sound or red highlight feedback:

“clickkk”

34
Constraints
Restricting the possible actions that can be
performed
Helps prevent user from selecting
incorrect options.
Three main types;
physical
cultural
logical

35
 Physical constraints
Refer to the way physical objects restrict
the movement of things.
E.g. design only one way to insert a mouse
connection; and only one way to insert a
keyboard connection, and make them
different

36
Logical constraints
Exploit people’s reasoning about
relationships between objects in the world
Where do you plug the mouse?
 Where do you plug the keyboard?
 Top or bottom connector?
 Do the color coded icons help?

37
Logical constraints
(i) A provides direct adjacent mapping
between icon and connector
(ii) B provides color coding to associate the
connectors with the labels

38
Cultural constraints
Learned arbitrary conventions which help
us use technologies
Can apply in a number of ways
Icons, menus
Keyboards, number pads

39
Consistency
Design interfaces to have similar
operations and use similar elements for
similar tasks
For example:
 always use ctrl key plus first initial of the
command for an operation –ctrl+C, ctrl+S,
ctrl+O
Main benefit is consistent interfaces are
easier to learn and use

40
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
designers’ preference

41
Mapping
Relationship between controls and their
movements and the results in the world
Why is this a poor mapping of control
buttons?
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
Disciplines contributing to HCI
Some of the main disciplines which have
contributed to HCI are:
1. Computer Science
Technology
Software design, development and
maintenance
User Interface Management Systems
(UIMS) and User Interface Development
Environments (UIDE)
Prototyping tools
 Graphics
44
Disciplines contributing to HCI
2. Cognitive Psychology
 Information processing
 Capabilities
 Limitations
Cooperative working
Performance prediction

3. Social Psychology : Social and organizational

structures
4. Ergonomics/Human Factors
Hardware design
Display readability

45
Disciplines contributing to HCI
6. Linguistics: natural language interfaces
7. Artificial Intelligence: intelligent
software
8. Philosophy, Sociology and
Anthropology: Computer supported
cooperative work (CSCW)
9. Engineering and Design
Graphic design
Engineering principles

46
Multidisciplinary field of HCI

47
Historical Evolution
Early computer (e.g. ENIAC, 1946):
Improvement in the H/W technology
brought massive increase in computing
power. People started thinking on innovative
ideas.
 Visual Display Unit (1950s): SAGE (semi-
automatic ground environment), an air
defense system of the USA used the earliest
version of VDU.

48
 Historical Evolution
Development of the Sketchpad (1962): Ivan
Sutherland developed Sketchpad and
proved that computer can be used for more
than data processing.
Douglas Engelbart introduced the idea of
programming toolkits (1963): Smaller
systems created larger systems and
components.
Introduction of Word Processor, Mouse
(1968): Design of NLS (oNLine System).

49
Historical Evolution
Computer Supported Cooperative Work
(1990’s): Computer mediated
communication.
WWW (1989): The first graphical browser
(Mosaic) came in 1993.
 Ubiquitous Computing: Currently the most
active research area in HCI. Sensor
based/context aware computing also known
as pervasive computing.

50