Lecture Notes: Introduction to Human-Computer

Interaction (HCI)
1. Definition of HCI
 Human-Computer Interaction (HCI) is the study, design, and use of computer technology focusing
on the interfaces between people (users) and computers.
 It involves understanding how humans interact with computers and designing technologies that let
humans interact with computers in novel ways.

2. Objectives of HCI
 To improve the usability of systems.
 To make systems more efficient, effective, and satisfying.
 To design user-centered systems that support human needs.
 To ensure accessibility for diverse users (e.g., different cultures, ages, abilities).

3. Importance of HCI
 Enhances user experience (UX).
 Reduces errors and increases productivity.
 Improves system acceptance and reduces training costs.
 Critical in areas like web design, mobile applications, virtual reality, and AI systems.

4. Key Components of HCI

1. The User (Human)
o Physical abilities: vision, hearing, motor skills.
o Cognitive abilities: memory, perception, learning styles.
o Psychological aspects: motivation, satisfaction.
2. The Computer (Machine)
o Input devices (keyboard, mouse, touchscreen, voice input).
o Output devices (screen, speakers, haptic feedback).
o Software applications and operating systems.
3. The Interaction
o Dialogue between the user and computer.
o User interface (UI) as the bridge between both.

1|Page
5. HCI Disciplines
HCI is interdisciplinary and combines knowledge from:

 Computer Science → software, AI, system design.

 Psychology → cognition, perception, human behavior.
 Design → aesthetics, visual communication, usability.
 Engineering → ergonomics, human factors.
 Social Sciences → cultural and social context of technology use.

6. Usability in HCI
According to ISO 9241, usability refers to:

 Effectiveness – can users complete tasks accurately?

 Efficiency – how quickly and easily can they do it?
 Satisfaction – is the interaction pleasant and acceptable?

7. Interaction Styles
 Command Line Interfaces (CLI) → typed commands.
 Graphical User Interfaces (GUI) → icons, menus, windows.
 Form Fill-in Interfaces → structured data entry forms.
 Direct Manipulation → drag-and-drop, touchscreens.
 Natural User Interfaces (NUI) → voice, gesture, VR/AR.

8. User-Centered Design (UCD)

 Design approach that involves users throughout the design process.
 Stages:
1. Identify needs and context.
2. Specify requirements.
3. Create design solutions.
4. Evaluate designs with users.

9. Challenges in HCI
 Designing for diverse users (age, culture, disability).
 Keeping up with rapid technology changes.
 Balancing functionality and simplicity.
2|Page
  Ensuring privacy and security while maintaining usability.

10. Applications of HCI

 Mobile and web applications.
 Virtual reality (VR) and augmented reality (AR).
 Smart devices (IoT).
 Healthcare systems.
 Assistive technologies for people with disabilities

Affordance in HCI
Definition

 Affordance refers to the properties of an object or interface that suggest how it can be used.
 Coined by psychologist James J. Gibson (1977) and later popularized in design by Don Norman
(1988).
 In HCI, affordances are clues or signals in the interface that indicate possible actions to the user.

Types of Affordances in HCI

1. Perceived Affordance
o What the user thinks they can do with an object.
o Example: A button on a screen looks “clickable” because of shading, shape, or color.
2. Physical Affordance
o Actual properties that determine how an object can be used.
o Example: A door handle that can be pulled vs. a flat plate that can be pushed.
3. Cognitive Affordance
o Supports the user’s thought process or understanding.
o Example: A magnifying glass icon suggesting “search.”
4. Sensory Affordance
o Helps the user sense an action through sight, sound, or touch.
o Example: A button that changes color when hovered, or a phone vibrating when touched.
5. Hidden or False Affordances
o Hidden: When possible actions exist but are not obvious (e.g., swiping gestures on a phone).
o False: When the interface suggests an action that doesn’t work (e.g., a decorative element that
looks like a button but isn’t clickable).

Examples of Affordances in HCI

 Scroll bar → suggests dragging up and down.

 Trash bin icon → suggests deleting files.
 Hyperlinks (underlined/colored text) → suggest they can be clicked.

3|Page
  Touchscreen pinch gesture → suggests zooming in/out.

Importance of Affordance in Design

 Improves usability by making interactions intuitive.

 Reduces the need for instructions.
 Helps users learn quickly how to use new interfaces.
 Prevents errors caused by confusing or misleading designs.

👉 In short: Affordance = how design tells users what they can do.

On-line Meetings and Distance Learning

HCI has become a major factor in computer-based training and on-line meetings for corporations and
government organizations. Corporate employees can “attend” meetings anywhere in the world by taking
advantage of electronic (on-line) meetings. The HCI aspects of such meetings build on the user’s skills of
knowing how to use a computer and software (the affordance factor). Electronic meetings allow users to view
documents on-line, which is an ingrained skill for anyone who regularly uses a computer

Psychological factors affecting human-computer interaction

Software designers and programmers are constantly developing useful and innovative
packages which are commercial failures because they are unusable by those who are
inexperienced. They have often been designed from the programmer's perspective and are
sometimes simply a means for the programmer to display his or her skills.

User Freindly

A user-friendly interface is less frustrating and less stressful to use, and the user can therefore work more
quickly. Documentation accompanying the program should also be user-friendly. The user should not have to
wade through a lot of confusing material to learn about basic features of the software, such as how to start the
program or print out the results. One of the best methods of ensuring that software interfaces are user-friendly
is to pay end users to test the completed version before release. Testers should be picked to include novice
users

Easy access to help

Some help screens can be very off-putting. They frequently use unfamiliar terms in their explanation. Help
screens should explain things simply, giving the user examples.

Providing short-cuts for experts

Expert users, many of whom type quickly, are
able to memorise commands composed of
combinations of keys and this saves them time
4|Page
 compared with using the mouse and clicking on
icons and pull-down menus.
Making use of human long-term memory to maximise efficiency
To develop software which is easy to learn, developers must understand how learning
occurs.
Human thinking, in many ways, is like a computer with different memory areas. There are
three main areas: the sensory register, short term storage and long-term storage.The sensory
register reacts almost immediately to stimuli to our senses. For example, we quickly move
our hand away from a source of heat.
Short-term storage is where data is held temporarily. An example of this is when we ask
someone for a phone number without writing it down and then remember it for the short
period it takes us to dial the number.

Long-term storage is for those things we need to remember over a longer period. The more
often anything committed to long-term memory is rehearsed, the longer it will usually be
remembered for.
Command structures and menus
Command interfaces make use of commands which the user enters via the
keyboard to accomplish certain tasks. The main advantage of this approach
is that the user can achieve a lot with one simple command. For example, in
the command-driven operating system MS-DOS, the user issues commands
such as `FORMAT A:' to format a floppy disk in the A drive. Commands are
quick if you are an experienced user but prone to typing errors for the novice
user.

When designing a menu system there are a number of things to bear in mind:
 There should be an opening menu, or general menu, from which other menus can be
accessed, but you should never go more than three or four levels deep.
 The grouping of items in each menu should be natural and comprehensible.
 There
Sample should be either letters or numbers that allow the user to gain quick access to a
Error
particular item in the menu.
Messages
Screen design
If a source document, such as an application form or an order form, is used to supply the
information, then the input screen should mirror the form so that time is not wasted
5|Page
 matching an item on the form with its equivalent on the screen. It is much better if a single
screen can be used rather than multiple screens, even if it means that the screen is cluttered.
It is also important that screen designs are consistent across all the departments in an
organisation.

Tips on screen design:

 Put the user in control.
 Do not overwhelm the user's memory. It is a good idea to put a nine-item limit on
menus and lists.
 Do not overwhelm the user's senses: use colour and animation wisely.
 Make the design consistent.
 Make sure that help is never more than one click away.
 Layers should be no more than three deep.
 User mistakes should be easily rectifiable. The system should enable users to go
forwards and backwards, undo and redo, enter and exit, with ease.

Error messages

Error messages can be infuriating to the user if they just say what is wrong without offering any suggestion as
to what to do about it. On the other hand, there is a limit to the help the package can provide since the
computer cannot mind-read. If an error message is given and it is impossible for the computer to anticipate
what was intended, then the help facility should provide some guide to the likely problems

Ease of learning
There are a number of factors that make software easy to learn, including:

 Make the operation of the package similar the operation of other packages (this is a
significant factor that makes Windows-based software easy to learn).

 Have an on-line tutorial that takes the user through the basics of the package. This
should be interactive and make use of multimedia to add interest and involve the
user.

 Provide a user-friendly manual, preferably written with the novice user in mind.

 A solution based on one of the popular packages for which there are many books and
training guides facilitates learning.

 The software should be able to anticipate what the user is trying to do and offer
appropriate help.

 The user should be able to get out of trouble easily, for example by pressing the ESC
key. This will encourage the user to experiment and not worry too much about the
6|Page
 consequences.

7|Page
The features of a sophisticated HCI
The features to consider including when providing a sophisticated
human/computer interface are outlined below.
On-line help facility

Graphical user interface (GUI)

Increased numbers of ways of performing the same operation

Multi-tasking capabilities

Faster searching of help files

The resource implications of sophisticated human/computer interfaces (HCIs)

Resource implications for the processor
The greater the demands placed on the processor by sophisticated operating
systems and applications software, the slower they will run. Processors are
continually being developed to cope with the demands placed on them by
new software. Graphics-hungry applications stretch the capabilities of the chip,
and to run such software quickly requires a processor with a high clock speed.
Resource implications for the immediate access store (IAS)
To manipulate large graphics files on the screen the IAS (i.e. the main memory)
needs to be large, otherwise the system will be very slow and frustrating to use.
Having a large main memory [e.g. 256 MB instead of 128 or 64 MB) means
that many windows can be opened at the same time without any appreciable
loss of speed
Resource implications for backing storage
The large files associated with a sophisticated HCI will need a high-capacity hard
drive as well as high-capacity removable storage (not floppy disks) such as a
Zip drive to enable backup copies to be taken
Design of forms for data entry

8|Page
Forms are used to enter the data into some packages (such as databases) in a user-friendly way.
These forms must be designed carefully, since some staff will be using them for several hours a
day and entering large amount of data

There are a number of things that can be done to make it easy for the person who
does the keying in. They include:

 The most important fields (i.e. the primary key and keys) should be
situated in the most prominent place (usually the top left of the screen).

 The fields on the database form should be in exactly the same positions
as the fields on the application form. This means that the person keying
in the data knows exactly where to look.

 Help menus that pop up when the cursor is moved to a field can be
included; these should give an indication as to the type and format of
data required.

 Suitable fonts and font sizes should be used. Do not use many
different styles and sizes – go for consistency.

 Colours should be used very carefully. Do not use bright colours

inappropriately and choose colour combinations that work together.

 An inexperienced user might not understand specialist terms, so these

must not be used on the form.

 There should be a limit to the number of fields on one screen;

otherwise the user could be overwhelmed.

Validation checks should be included, along with useful validation messages that appear if
the wrong data is entered or it is entered in the wrong format

9|Page