Human Computer Interaction – Lecture Notes 2nd Semester, S.Y.

2018-2019
I. College Mission, Vision and Objectives of Program
Vision: To produce Quality Human Resources for Global Competitiveness
Mission: NLPSC is committed to educate diverse learners who will become responsible leaders in a
culturally-oriented community through affordable and quality education in harmony with technology-
based instruction, research and extension.
II. Foundation of Human Interaction
The term HCI was adopted in mid-1980s:
Association for Computing Machinery (ACM): “discipline concerned with the design, evaluation &
implementation of interactive computer systems for human use & with the study of major phenomena
surrounding them” (1992)
Dix: “HCI is study of people, computer technology and the ways these influence each other. We study
HCI to determine how we can make this computer technology more usable by people” (1998)
Carroll: “HCI is the study and practice of usability. It is about understanding and creating software
and other technology that people will want to use, will be able to use, and will find effective when used.”
(2002)

Human: Individual user, a group of users working together, a sequence of users in an organization

Computer: Desktop computer, large-scale computer system, Pocket PC, embedded system (e.g.,
photocopier, microwave oven), software (e.g., search engine, word processor)

User interface: Parts of the computer that the user contacts with

Interaction: Usually involve a dialog with feedback & control throughout performing a task (e.g., user
invokes “print” command and then interface replies with a dialog box).

A. THE HUMAN

 Humans are limited in their capacity to process data.

 Information is received and responses given via a number of input and output channels:
o visual channel - refers to information received visually such as, sight, color, dreams, and
visions. It can include stories, mythology and intuition. Reading is a function of the visual
channel.
o auditory channel – describes the way vocal signals can be used to produce language. The
speaker uses a vocal tract (containing most of the speech organs) to produce speech sounds,
and the hearer employs an auditory apparatus (the sense of hearing) to receive and
process the speech sounds.
o haptic channel - is the science of applying tactile sensation to human interaction with
computers. A haptic device is one that involves physical contact between the computer
and the user, usually through an input/output device
o movement - the act or process of moving and especially changing place or position
 Information is stored in memory:
o sensory memory - is stored in sensory memory just long enough to be transferred to
short-term memory. Humans have five traditional senses: sight, hearing, taste, smell,
touch. Sensory memory (SM) allows individuals to retain impressions of sensory
information after the original stimulus has ceased.

o short-term (working) memory – is the capacity to keep a small amount of information in

mind in an active, readily available for a short period of time.
o long-term memory - is the phase or type of memory responsible for the storage of
information for an extended period.
o
 Information is processed and applied:
o Reasoning - the action of thinking about something in a logical, sensible way. The process
by which we use the knowledge we have to draw conclusions or infer something new
about the subject of interest
o problem solving - Use information we have to find solutions in new situations
o skill acquisition - also referred to as motor learning and control is the interdisciplinary
science of intention, perception, action, and calibration of the performer-environment
relationship.
o Error - the state or condition of being wrong in conduct or judgment.
Types of error
Slips
right intention, but failed to do it right
causes: poor physical skill, inattention etc.
change to aspect of skilled behaviour can cause slip

Mistakes
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
wrong intention
cause: incorrect understanding

B. THE COMPUTER

A computer system comprises various elements, each of which affects the user of the system.

 Input devices for interactive use, allowing text entry, drawing and selection from the screen:
o text entry: traditional keyboard, phone text entry, speech and handwriting

Text entry- refers to the process of creating messages composed of characters, numbers, and symbols
using mobile devices. Text entry can be performed using small physical keys, virtual keyboards presented
on touch sensitive screens, gesture or handwriting recognition, speech recognition, and various other
technologies.

A computer keyboard is one of the primary input devices used with a computer. Similar to an
electric typewriter, a keyboard is composed of buttons that create letters, numbers, and symbols, as well
as perform other functions. Although there is not a single set of rules dictating the number of keys on
a keyboard, most companies use the PC keyboard with 104 keys as a de facto standard.

Alternatively referred to as speech recognition, voice recognition is a computer software program or

hardware device with the ability to decode the human voice. Voice recognition is commonly used to operate
a device, perform commands, or write without having to use a keyboard, mouse, or press any buttons.
Today, this is done on a computer with ASR (automatic speech recognition) software programs. Many
ASR programs require the user to "train" the ASR program to recognize their voice so that it can more
accurately convert the speech to text. For example, you could say "open Internet" and the computer would
open the Internet browser.

Handwriting recognition is a technology that allows a computer to recognize and interpret text written
by a human hand. It is generally used with devices where text has been handwritten, but and needs to be
changed over to digital characters. Good examples are tablets and PDAs.

o pointing: principally the mouse, but also touchpad, stylus, and others.
Pointing is a gesture specifying a direction from a person's body, usually indicating a location, person,
event, thing or idea.

Pointing device - a generic term for any device (e.g., a graphics tablet, mouse, stylus, pointing stick, or
trackball) used to control the movement of a cursor on a computer screen.

A computer mouse is a handheld hardware input device that controls a cursor in a GUI and can move
and select text, icons, files, and folders. For desktop computers, the mouse is placed on a flat surface such
as a mouse pad or a desk and is placed in front of your computer.

Two methods for detecting motion

A mechanical mouse is a computer mouse that contains a metal or rubber ball on its under side. When
the ball is rolled in any direction, sensors inside the mouse detect this motion and move the on-screen
mouse pointer in the same direction.

The optical mouse is a computer mouse first introduced by Microsoft on April 19, 1999, that
utilizes LEDs (light-emitting diodes) or laser to help track movement.

o 3D interaction devices

3D Interaction - a form of human-computer interaction where users are able to move and
perform interaction in a three-dimensional space.

 Output display devices for interactive use:

o different types of screen mostly using some form of bitmap display

A bitmap may refer to any of the following:

1. A graphic file format with the file extensions of *.bmp or *.dib (device-independent bitmap) used
in Microsoft Windows and OS/2. Bitmap images can be saved as either 4-bit (16 colors), 9-bit (256
colors), 16-bit (65,536 colors), or 24-bit (16.7 million colors) and saved as uncompressed images. Because
of their larger file size when compared to other images formats, bmp and dib images are not commonly
used or recommended outside of the Microsoft Windows environment.
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
2. A bitmap is also used to describe raster or bitmapped image formats.

Raster may refer to any of the following:

1. A raster image is an image file format that is defined by a pixel that has one or more numbers
associated with it. The number defines the location, size, or color of the pixels. Raster images are
commonly .BMP, .GIF, .JPEG,and .PNG, files. Today, almost all of the images you see on the Internet and
images taken by a digital camera are raster image.

One of the biggest disadvantages of a raster image is the inability to resize the image without
getting jaggies or another type of distortion. For example, if you have a small raster image that you
increase the size of it will become distorted because the image editor is resizing each of the pixels in the
image.

Because of this disadvantage many printing companies that print business cards, posters, or any other
large printing will require that the image be a vector image. Vector images are used for logos, graphics,
and text because of the ability to be resized in any direction without distortion.

2. Raster is lines on the inside of the screen traced by an electron beam to create an image called a
horizontal scan line. These lines appear on a CRT monitor or a TV screen.

o large displays and situated displays for shared and public use
o digital paper may be usable in the near future
 Virtual reality systems and 3D visualization have special interaction and display devices.

VR is a computer-generated artificial environment that allows a user to view, explore, and manipulate the
environment and a term popularized by Jaron Lanier. Virtual reality is a computer generated reality
manipulated and explored using various input devices such as goggles, headphones, gloves, or a
computer. Using these devices a user can browse throughout a virtual world or pickup and manipulate
virtual objects.

 Various devices in the physical world:

o physical controls and dedicated displays
o sound, smell and haptic feedback
o sensors for nearly everything including movement, temperature, bio-signs
 Paper output and input: the paperless office and the less-paper office:
o different types of printers and their characteristics, character styles and fonts
o scanners and optical character recognition
 Memory:
o short-term memory: RAM
o long-term memory: magnetic and optical disks
o capacity limitations related to document and video storage
o access methods as they limit or help the user
 Processing:
o the effects when systems run too slow or too fast, the myth of the infinitely fast machine
o limitations on processing speed
o networks and their impact on system performance.

Capabilities and Limitations of a Computer

We see computer everywhere: at home, in school, in the hospital, in the bank, in bookstores and
department stores, at recreation centers and in man other places. They are important pieces of equipment
and they help man in so many ways.
Many people depend so much on computers. They use computers to do their work, to have fun. to
keep in touch with their loved ones, to store important documents and so on. Why is this so? Because
computers are capable of doing so many things. The following items are the capabilities of a computer.
1. The computer processes information very fast. Would you believe that computer can get the
average of a million sets of numbers in a few seconds by pressing a button? It is like getting the sum or
total of one hundred different sets of numbers in one click.
2. The computer gives accurate results. Some scientists use the computer in their experiments. The
needed data for their experiments is processed in the computer. They can get almost perfect and more
accurate results through it.
3. The computer stores large amount of data and information. Most computers have storage or
accessories wherein the user can save information or document. These are called floppy diskettes, hard
disks and zip disks.
4. The computer enables one to restore or bring back any of his works. You try to bring your old work
when you want to make another copy of it, or when you want to change something in it. A computer
makes all these possible.
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
5. It is automatics. You don’t have to wait long for a computer to do a certain job. Most of the time,
you just have to click a button and the computer’s processor will do the rest of the work.
6. The computer can do two things at the same time. You may open two or more programs at the
same time. You may work with the first one while you minimize or hide the other program.
7. The computer can be improved and upgraded. The computer is unlike other machines or appliances
that your parents discard or throw away when they do not function properly anymore. Today, it is very
easy to replace damaged and obsolete computer parts. You just have to go to the nearby computer store
or ask a service technician to do installation and repair work for your computer.

However, the computer is not a supermachine. Thus, it has its own limitations, like the following:

1. The computer can only do what you tell it to do.

Do not expect the computer to give you something which you never tell it to do. It will only give you
what you ask it.
2. It cannot generate information on its own.
Your computer depends on you. It will not run unless you operate it. In the same way, it cannot give
you information you need if you do not feed it with the necessary data.
3. The computer will give you wrong information if you feed it with wrong data.
The computer cannot distinguish between correct data and wrong data. Thus, if you feed your
computer with wrong data, it will result with the computer giving wrong information.
4. The computer cannot correct wrong instruction.
If you give the computer wrong instruction, it will not able to do anything to correct it. It will only stop
functioning. Then, the computer will depend on you to correct your mistake.

C. THE INTERACTION

The Interaction – is a kind of action that occur as two or more objects influence one another.

3 terms of Interaction:
Domain – the area of work under the study.
Goal – what do you want to achieve.
Task – how you go about doing it.

Ergonomics – is the process of designing or arranging workplace, products and systems so that they fit
the people who use them.
Ergonomics examples:
 arrangement of controls and displays
e.g. controls grouped according to function or frequency of use, or sequentially
 surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of user
 health issues
e.g. physical position, environmental conditions (temperature, humidity), lighting, noise,
 use of colour
e.g. use of red for warning, green for okay, awareness of colour-blindness etc.

Interaction Styles – It refers to all the ways the user can communicate or otherwise interact with the
computer system.
- It is a primarily different ways in which a user and computer system can communicate
between each other.
Common Interaction Styles:
• Command Line Interface - short for command-line interface, CLI is an interface found on network
devices, such as network routers. The interface allows the management and control of that network
device.
- is a user interface that is navigated by typing commands at prompts, instead of using
the mouse.
• Menus - is a list of commands or choices offered to the user through the menu bar.
- It is commonly used in GUI operating systems and allow a user to access various
options the software program is capable of performing.
- File menus are commonly accessed using the computer mouse; however, may also
sometimes be accessed using shortcuts or the keyboard.
• Natural Language - is the idea of creating a programming language that uses the grammar,
vocabulary, and syntax of the human language.
• Question/Answer and Query Dialogue - commonly used to describe a question or request that is
made by a user or another computer or device. For example, when you use a search engine such
as Google, the text you enter is considered the search query.
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
• Form-Fills and Spreadsheets - e-form or form is a web page or paper that contains a listing of
questions or fields that ask for user input.
• WIMP - Short for windows, icons, menus, pointer, WIMP is a term coined by Merzouga Wilberts
to describe a type of GUI (graphical user interface) interaction first used with the Xerox Alto
computer.
• Point and Click - is the action of moving the mouse to a specific location and clicking an object to
perform a specific task. For example, when you click on any hyperlink on a web page you are
moving the mouse to point at that link and then clicking the link to open the page.
• Three–Dimensional Interfaces - is a description of a visual object that has the appearance of height,
width and depth.

D. PARADIGMS

Paradigm commonly refers to a new method of thinking about a problem or situation.

The Initial Paradigm:

Batch Processing/Batch System (Impersonal computing) Alternatively referred to as a batch

system, batch processing is a technique of processing data that occur in one large group instead of
individually. Batch processing is usually done to help conserve system resources and allow for any
modifications before being processed. For example, a bank will batch process all their transactions once
every hour instead of processing each transaction immediately. Another example is the Microsoft Outlook
e-mail program, which will keep all your e-mails in an Outbox that is processed every few minutes allowing
you to edit or delete before sending.

Time sharing (Interactive Computing) The process of giving multiple users access to a system or group of
systems at the same time. With a time sharing setup, a computer gives users a small portion of its
processing power in pieces. This enables the computer's processing power to be more evenly distributed.

Network (Community Computing) is a collection of computers, servers, mainframes, network devices,

peripherals, or other devices connected to one another to allow the sharing of data. An excellent example
of a network is the Internet, which connects millions of people all over the world. Below is an example
image of a home network with multiple computers and other network devices all connected to each
other and the Internet.

Graphics (Direct manipulation) -is an image or visual representation of an object. Therefore, Computer
Graphics are simply images displayed on a computer screen. Graphics are often contrasted with text,
which is comprised of characters, such as numbers and letters, rather than images.

Alternately referred to as a processor, central processor, or microprocessor, the CPU (pronounced

sea-pea-you) is the central processing unit of the computer. A computer's CPU handles
all instructions it receives from hardware and software running on the computer.

World Wide Web, the WWW, W3, or web is a graphical interface for the Internet that was first introduced
to the public on August 6, 1991, by Tim Berners-Lee. A few days later on August 23, 1991, it was available
to everyone.

Tip: The WWW is different from the Internet although most people today think the WWW is the Internet.
The Internet is what connects your computer with other computers. The WWW is what you're viewing
while looking at your browser (e.g., this web page).

Ubiquitous computing is a paradigm in which the processing of information is linked with each activity or
object as encountered. It involves connecting electronic devices, including embedding microprocessors to
communicate information. Devices that use ubiquitous computing have constant availability and are
completely connected.
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
III. The Design Process
Overview
• Software engineering and the design process for interactive systems
• Standards and guidelines as design rules
• Usability engineering
• Iterative design and prototyping
• Design rationale

Introduction
 Paradigms and principles concentrated on examining the product of interactive system design.
 Now we focus on the process of design.
 Software engineering is the emerging discipline for understanding the design process, or life cycle.
 Designing for usability occurs at all stages of the life cycle, not as a single isolated activity

The software life cycle:

The waterfall model

designer and customer try to capture what the system is expected to

provide.

high-level description of how the system will provide the

services required.

needs to satisfy both functional and nonfunctional

requirements.

refinement of architectural components and

interrelations to identify modules to be
implemented separately.

the refinement is governed by the

nonfunctional requirements.

implementing and testing the individual modules

in some executable programming language.

combining modules to produce components from the architectural

description

product is delivered to customer and any problems/enhancements are provided by

designer while product is still live.

the largest share of the life cycle.

Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
Verification and validation

Verification designing the product right.

Validation designing the right product.

Principles of design rule

The most abstract design rules are general principles, which can be applied to the design of an
interactive system in order to promote its usability. The main principle to follow are learnability,
flexibility and robustness.

Learnability

Learnability revolves around the features of an interactive system that allow novice users to
understand how to use it at first and then how to attain a maximal level of performance.
Learnability makes use of various factor to familiarize a user to a new system:

 Predictability - It makes use of the user past knowledge of interacting with a similar system
to ease the new system interaction. For example the transiti on from windows 7 to windows
8 had a rough path because of how much the system was changed. The start button as
everyone knows ended up sending the user to the tiles windows instead of the expected
menu. The notion of predictability deals with the user’s ability to determine the effect of
possible interaction to the operations on the system. Another form of predictability has to
do with the user’s ability to know which actions can be executed.

 Synthesizability - Synthesizability the ability of the user to assess the effect of past
operations on the current state. A user expects to see any important change that is occurring
while he is interacting with the system. For example, when the user makes a payment he
expects to receive a receipt, otherwise he will think that the transaction failed or that he is
been scammed. The synthesizability relies on the principle of honesty of the user interface
to provide an observable and informative account of occurring change.
 Familiarity - The principle of familiarity is to make use of the new users past experience
with other applications. This experience can come from real life situation interaction to
interaction with other computer system. For example a danger alert on any system is red,
this immediately warns the user that there is a possible threat since red is used in everyday
life as such.
 Generalization - Generalizability can be seen as a form of consistency. Users often try to
extend their knowledge of specific interaction behavior to situations that are similar but
previously unknown. Generalization can occur within a single application or across a variety
of applications. For example, Microsoft office software menus act more or less the same
way. This concept of generalization is what makes it easy for people to tr ansition from
Microsoft Word to Excel.
 Consistency - Consistency relates to the similarities in behavior arising from alike situations
or alike task objectives. It can be expressed in terms of the form of input terms or output
responses with respect to the meaning of actions in the conceptual of the system. For
example, a user expects a radio button to allow only one choice of the available options.

Flexibility
Flexibility refers to the diversity of ways in which the user and the system exchange
information. This can be achieved through categorized ways, consisting mainly of Dialog
Initiative, Multithreading, Task migratability, Substitutivity and Customizability.
 Dialog initiative - There is two ways to achieve that. One of them is User pre-emptive.
In this communication model, the user is the one to initiate an action on the system.
An example, is a tourist using the map system in an airport to obtain direction to his
flight fate. The other method is system pre-emptive where it is the system that initiates
an action for the user to respond to. For example a system warning where the user can
only click on the ok button.
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
 Multithreading - It is the ability to support more than one task of the user system dialog
interaction at a time. Concurrent multi-threading allows simultaneous communication
of information concerning separate tasks. Interleaved multi-threading allows a temporal
overlap between separate tasks, but stipulates that at any given instant the
communication is restricted to a single task.
 Task migratability - task migratability is the ability to transfer the control for task
execution between system and user. A new system need to be able to change from a
state to another that provides more advantages. Any system need to be design with the
idea that it will need to be changed in the future and if an error occurs revert back to
the previous. For example, some task like maintaining an airplane in the correct
direction is managed by the computer system but in case of emergency, the pilot can
control the direction manually.
 Substitutivity - It requires that equivalent values can be substituted for each other. It
contributes towards flexibility of the system by letting a user choose which action best
suits his needs. For example, a user can double click on an icon to open it or can select
it and then press enter on the keyboard. It also need to cater to the presentation of
output in different ways. For example, a temperature can be displayed by a graph if it
needs to capture a trend or it can be simply displayed for the user to see at a particular
time.
 Customizability - It refers to the modifiability of the user interface by the user or the
system. The term “adaptability” is used when the interface can be modified by the user
and the term “adaptivity” is used when it can be modified by the system. Under
adaptability, the principle of lexical customization is applied to limit what the user can
change. It can be that the user is only allowed to change the color scheme of the
interface.

Robustness
Robustness concerns itself with supporting the user in successfully accomplishing an action
with the system and assessment of the action. There are various principles to be applied to
support a system robustness: observability, Recoverability, Responsiveness, Task
Conformance
 Observability - Observability allows the user to evaluate the internal state of the system
by means of its perceivable representation at the interface. It is further broken down
into five other principles:
o Browsability
Allows the user to explore the current internal state of the system without
modifying it.
o Default
Assist the user by passive recall, such as suggesting the user possible words
based on his text input.
o Reachability
Allows the user to navigate through observable states.
o persistence
This principle deals with the duration of an observable state.
o task performance
It covers the extent to which a system services support all of the tasks the user
wishes to perform and in a way that the user understands them
 Recoverability - It is the ability of a system to recover in case of an error. There are
two directions in which recovery can occur, forward or backward. Forward error recovery
Human Computer Interaction – Lecture Notes 2nd Semester, S.Y. 2018-2019
accepts that an error has occurred in the current state and negotiation from that state
towards the desired state. This situation is encountered when there is a disk failure and
windows OS is trying to repair it. Backward error recovery is attempting to undo the
effects of previous interaction in order to return to a state prior to the error occurrence.
 Responsiveness - Responsiveness deals with the time needed for the system to
communicate with the user. In general, short durations and instantaneous response
times are desirable. Moreover, the response time need to be stable. Response time
stability covers the invariance of the duration for identical or similar computational
resources. For example, the user expects the same time response as clicking on a drop
down menu as clicking on a radio button. Variations in response time will impede
anticipation of the user.
 Task conformance - Task conference ensure that the system allows a user to perform
task he needs and in an expecting way. Task completeness covers whether a system
can perform all tasks of interest. Task adequacy deals with the user ability to understand
the tasks. It is important that a system allows the user to perform any desired task in
an application as specified in the system specification prior to the delivery of the system.

IV. Implementation Support

Overview
• programming tools provide levels of services for programmers
• windowing systems as core support for separate and simultaneous user-system threads
• programming the application and control of dialogue
• interaction toolkits bring programming closer to level of user perception
• user interface management systems help to control relationship between presentation and
functionality of objects
Introduction
Up to now, our concern has been slanted away from concerns of the actual programmer.
Advances in coding have elevated programming from hardware-specific to interaction technique
specific.
Layers of development tools
• windowing systems
• interaction toolkits
• user interface management systems

V.