Introduction to Human

Computer Interaction (HCI)

•This course provides an overview of a number of areas in human-
computer interaction (HCI). HCI is a discipline concerned with the
design, implementation, and evaluation of interactive computing
of major systems for human use and with the study of major
phenomena surrounding them. HCI addresses any interaction with
computers by humans, as developers or as users, as individuals or
as groups. On completion of the course, students are expected to
have knowledge of and practical experience in the fundamental
aspects of designing, implementing and evaluating interactive
systems that are useful and usable.

TABLE OF CONTENTS
CHAPTER 1. INTRODUCTION TO HUMAN-COMPUTER INTERACTION
1.1. Computers 1
1.2. Fundamental Truths about Computers 1
1.3. Nature of humans and computers 2
1.3. Nature of humans and computers
1.4. Software engineering and HCI
1.5. Role of HCI
1.6. Definition of HCI
1.7. Different HCI Case Scenario

CHAPTER 2. GOALS & EVOLUTION OF HUMAN-COMPUTER INTERACTION

2.1 Goals of HCI
Effectiveness, Efficiency, Safety, Utility, Learnability, and
Memorability
2.2 Evolution of HCI

CHAPTER 3. DISCIPLINE OF HUMAN COMPUTER INTERACTION

3.1. Human Computer Interaction (HCI)
3.2. Interdisciplinary nature of HCI
Human-related
Computer-related

CHAPTER 4. COGNITIVE FRAMEWORK

4.1. Cognitive Psychology
4.2. Cognition
4.3. Modes of Cognition
Experiential cognition
Reflective cognition
4.4. Human Information Processing Model

Module in Human-Computer Interaction (HCI) 1|P age

IRMA T. PLATA
4.5. Attention and Memory as extensions of Human Information Processing
Model

CHAPTER 5. HUMAN INPUT-OUTPUT CHANNELS –PART 1

5.1. Input output Channels
5.2. Vision
5.3. Visual Perception
5.4. Perceiving brightness
5.5. Perceiving color

CHAPTER 6. HUMAN INPUT-OUTPUT CHANNELS- PART 2

6.1. Color Theory
6.2. Color Harmony
6.3. Qualities of Colors
6.4. Guidelines in choosing colors

CHAPTER 7. COGNITIVE PROCESS – PART 1

7.1. Attention
7.2. Models of attention
7.3. Memory
Sensory
Short term memory
Long term memory
7.4. Revised Memory Model

CHAPTER 8. COGNITIVE PROCESSESS- PART 2

8.1. Learning
8.2. Reading, Speaking and Listening, problem solving, planning, reasoning
and decision-making

CHAPTER 9. DESIGN PRINCIPLES

9.1. Conceptual Model
9.2. Seven stages of Action as Design Aids
9.3. Design Principles
Visibility
Affordance
Constraints
Mapping
Consistency
Feedback

CHAPTER 10. UNIVERSAL ACCESS AND “DESIGN FOR ALL”

10.1. Universal Design (“Design for All”)
10.2. Inclusive design
10.3. Accessibility
10.4. Usability

Module in Human-Computer Interaction (HCI) 2|P age

IRMA T. PLATA
 CHAPTER 1. INTRODUCTION TO HUMAN-COMPUTER
INTERACTION

Overview

Traditional notion of computers is no more. Unlike in the early days of computing,

when only highly skilled technical people used computers, nowadays the range of knowledge
and experience of different users is very broad. Computers are no more just on your table.
Now computer has become a tool of everyday use. They are everywhere, at everyplace and in
everything. They are penetrating in every aspect of our life. They are taking our lives.

Now it is twenty first century and during the past thirty years technology has advanced
to such an extent that almost everyone come in contact with computers in one way or
another. Look around yourself how many things are there which have some kind of computer
embedded in them?

Think about a minute about what you use in a typical day; cell phone, ATM, VCR,
remote control, ticketing machine, digital personal organizers, calculator, watch, photocopier,
toaster, bank, air conditioner, broadcasting, satellite, microwave, medical equipment,
factories, companies…. the list is endless. Computers are everywhere. We are surrounded by
computers. Now they are part of our everyday life.

Learning Objectives

At the end of this chapter, the student should be able to:

1. Analyze the different case scenario presented in relation to HCI;
2. Determine the role of HCI in interface designing;
3. Define HCI;
4. Discuss and argue about why HCI is important with reference to the way in
which technology has developed;
5. Describe the significance of HCI, particularly adverse impact of computer
technology on humans and reasons for these adverse effect;
6. Describe the nature of humans and computers;
7. Contrast Software engineering from HCI; and
8. Evaluate HCI Case Scenarios where Computer and Information are involved.

Topics

1.1. Computers
1.2. Fundamental Truths about Computers
1.3. Nature of humans and computers

Module in Human-Computer Interaction (HCI) 3|P age

IRMA T. PLATA
 1.4. Software engineering and HCI
1.5. Role of HCI
1.6. Definition of HCI
1.7. Different HCI Case Scenario

Learning Contents

1.1. Computers are Everywhere

• Computer invasion has started

• Traditional notion of computers
• Computers are everywhere
• Computers will annoy, infuriate, and even kill

1.2. Fundamental Truths about Computers

 Computers are ubiquitous (everywhere) and so is their characteristically poor

way of communicating and behaving
– Everything we use is equipped with computer technology
 Communication was precise and exacting while still being tragically wrong
 Course Deviation Indicator could have told the pilot that Romeo was the wrong
fix but it choose not too
 Computers are unconcerned only cared about its internal working
 They tell but do not inform.
 They may guide us with precision but they do not guide us where we want to go.
 Computers are invading every aspect of modern life, but their communication is
poor

So who is to be blamed?
Can we Say “Human Error on part of the pilot” Or can we blame the computer for it?

1.3. Humans vs. Computers

Understanding Nature of Computers and Humans

2 Species…

Human
Computers

Humans (aka Homo Sapiens)

• Complex “Most interesting
and fascinating
specie on planet”
Module in Human-Computer Interaction (HCI) 4|P age
IRMA T. PLATA
 • Intelligent
• Animate
• Free will
• Range of emotions
• Make mistakes

Human beings are the most interesting and fascinating specie on planet. They are the
most complex living being on the earth. It has very much diversity in its nature. It is intelligent
in its deeds. Human beings think and decide according to their own will. Yes, they are free in
nature. They like freedom. They think on a problem dynamically and they can find many
solutions that may not exist before. They can invent. They are not only rational but they also
have emotions. They also think emotionally. They act emotionally. And fortunately or
unfortunately they make mistakes. They make mistakes which some time become fatal for
them and some time they become blessing for them.

Computer Specie
• Dumb
• Unintelligent
• Inanimate
• Only do what they are told to do
• Don’t make mistakes

On contrast, computers are the invention of human being. They are also complex but
they are also pretty dumb. It can also think but it can’t think on its own will, it thinks how it
has been directed to think. No doubt its speed is marvelous. It does not tire. It is emotionless.
It has no feelings, no desires. It works how it has been commanded to work. And they do not
make mistakes.

Before penetration of computers in our daily life, human beings were performing their
tasks at their own responsibility. In a business domain, human beings were dealing and
interacting with each other’s. For example a store manager was dealing with all the workers
performing their different duties in the store. Someone was registering the new arrivals of
products, someone was numbering the products and many more…and store manager has to
interact with all these human beings. If someone was a salesperson, he used to interact with
different clients and used to deal with them according to their mood and desire. He could
judge their mood with their tone, their attitude and with their body language. He could
provide answers relevant to their questions.

But now in this age of information technology we are expecting computers to mimic
human behavior e.g. E-Commerce systems, now there is no need for a salesperson. Web sites
are behaving as a salesperson or as a shopping mall. That is now; a dumb, unintelligent and
inanimate object will perform the complex task which was performed by some human being.

Once Upon a Time…

• Humans were responsible for performing tasks in business world
• Including interacting with other human beings
• Example: salesperson
• Salesperson would judge customer

Module in Human-Computer Interaction (HCI) 5|P age

IRMA T. PLATA
 • Tone
• Attitude
• Body language
• Understand questions
• Provide relevant answers

Now we’re ..
• Expecting computers to mimic human behavior, e.g. e-commerce systems
• Asking a DUMB, INANIMATE object to perform complex tasks that humans used
to perform
• And perform with same level of EFFICIENCY, EFFECTIVENESS and ACCURACY as a
human

1.4. HCI and Software Engineers

• Software engineers focus on internal workings of software

• In HCI we are concerned with external workings of software

There is a basic fundamental difference between the approaches taken by software

engineers and human-computer interaction specialists. Human-computer interface specialists
are user-centered and software engineers are system-centered.

Software engineering methodologies are good at modeling certain aspects of the

problem domain. Formal methods have been developed to represent data, architectural, and
procedural aspects of a software system. Software engineering approaches deal with
managerial and financial issues well. Software engineering methodologies are useful for
specifying and building the functional aspects of a software system.

Human-computer interfaces emphasize developing a deep understanding of user

characteristics and a clear awareness of the tasks a user must perform. HCI specialists test
design ideas on real users and use formal evaluation techniques to replace intuition in guiding
design. This constant reality check improves the final product.

What is useful or usable?

For something to be useful means that the user can actually achieve the task they
want to. For example, the user wants to write a letter; the system supports letter writing.
Thus a useful system supports the objectives of the user.

For something to be usable, it must allow the users to achieve the task they want to
easily and enjoyably. For example, one letter production system might be easy and pleasant
to use, while another might be difficult and frustrating to use. The point is that both systems
support the objectives of the user – but do so in different ways.

1.5. Role of HCI

 Human designed the interfaces we hate;

Module in Human-Computer Interaction (HCI) 6|P age

IRMA T. PLATA
  Human continue to use dysfunctional machines even as the awkward interfaces
strain their eyes, ache their backs, and ruin their wrist tendons.

Here comes the role of HCI. HCI plays a role to bridge up the gap between the
interfaces of machines and human understanding.
1.6. HCI – A Formal 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.” -ACM/IEEE

Computer + Information

Case Example:

Sydney Olympics
• Bruce Lindsay Maguire vs Sydney Organizing Committee for the Olympics
Games (SOCOG)
• Allegation: SOCOG in breach the Disability Discrimination Act 1992 by failing
to make accessible to him key parts of its web site
• vast majority of organizations with a web site must ensure that their web site
is (within certain limits) accessible by disabled persons

1.7. Different HCI Case Scenario

Module in Human-Computer Interaction (HCI) 7|P age

IRMA T. PLATA
 Case #1: • Computer + Alarm Clock

Case #2: • Computer + Camera

Case #3: • Computer + Car

Case #4: • Computer + Warship

Case #5: • Computer + Airplane

Case #1: What do you get when you cross a computer with an Airplane?

+ =
In December 1995, American Airlines Flight 965 departed from Miami on a regularly
scheduled trip to Cali, Columbia. On the landing approach, the pilot of the 757 needed to
select the next radio navigation fix, named “ROZO”. He entered an “R” into his navigation
computer. The computer returned a list of nearby navigation fixes starting with “R” and the
pilot selected the first of these, whose latitude and longitude appeared to be correct.
Unfortunately, instead of “ROZO”, the pilot selected “ROMEO”, 132 miles to the northeast.
The jet was southbound descending into a valley that runs north-south, and any lateral
deviation was dangerous. Following indications on the flight computer, the pilots began an
easterly turn and slammed into a granite peak at 10,000 feet. One hundred and fifty two
passengers and all eight crewmembers aboard perished. Four passengers survived with
serious injuries.

Computer + Airplane
• NTSB investigates: ‘human error’
• Pilot selected the wrong radio navigation fix

• Course deviation indicator needle is centered when plane is on course

• No indication of wrong fix selection
• Before and after scenario
• Not the pilots fault:
– Computer told pilot he was tracking precisely to the beacon he had selected

Module in Human-Computer Interaction (HCI) 8|P age

IRMA T. PLATA
Case #2: What do you get when you cross a computer with a Camera?

Here is a riddle for the information age: what do you get when you cross a computer
with a camera? Answer: A computer! Thirty years ago, a 35mm Pentax Model H, had a small
battery in it that powered the light meter. Like a wristwatch battery, I merely swapped in a
new one every couple of years. Fifteen years ago, an electronic camera, a 35mm Canon T70,
used two AA batteries to power its rather simple exposure computer and its automatic film
drive. It had a simple On/Off switch, so that the batteries wouldn’t wear down needlessly.

Five years ago, a first-generation digital camera, had a similar On/Off switch, but this
time it had the smarts of a rudimentary computer inside it. So if I forgot to turn it off, it
automatically shut down after one minute of inactivity.

One year ago, second-generation digital camera, a Panasonic PalmCam, had an even
smarter computer chip inside it. It was so smart that its On/Off switch had evolved into an
Off/Rec/Play switch. It now had modes: it had to put into Rec mode to take pictures and Play
mode to view them on its small video display.

The newest camera, a Nikon CoolPix 900, is a third-generation digital camera and the
smartest yet. In fact, it has a full-blown computer that displays a Windows-like hourglass while
it “boots up”. Like some mutant fish with extra heads, its On/Off switch has now grown to
have four settings: Off/ARec/MRec/Play. “ARec” means “automatic record” and “MRec”
means “manual record.” as far as I can figure out how to turn it on without a lengthy
explanation.

The new camera is very power-hungry, and its engineers thoughtfully provided it with
a sophisticated computer program that manages the consumption of battery power. A typical
scenario goes like this: I turn the evil off/etc. switch to “MRec,” wait about seven long seconds
for the camera to boot up, then point it at my subject. I aim the camera and zoom in to
properly frame the image. Just as I’m about to press the shutter button, the camera suddenly
realizes that simultaneously running the zoom, charging the flash, and energizing the display
has caused it to run out of power. In self-defense, it suspends its ability to actually take
pictures. But I don’t know that because I’m liking through the viewfinder, waving my arms and
saying “Smile” and pressing the shutter button. The computer detects the button press, but it
simply cannot obey. In a misguided effort to help out, the power management program
instantly takes over and makes an executive decision: shed load. It shuts down the power-
greedy LCD video display. I look at the camera quizzically, wondering why it didn’t take the
picture, shrug my shoulders, and let my arm holding the camera drop to my side. But as soon
as the LCD is turned off, there is more battery power available for other systems. The power
management program senses this increase and realizes that it now has enough electricity to

Module in Human-Computer Interaction (HCI) 9|P age

IRMA T. PLATA
take pictures. It now returns control to the camera program, which is waiting patiently to
process the command it received when I pressed the shutter button, and it takes a nicely auto-
focused, well-exposed, high-resolution digital picture of my kneecap.

That old mechanical Pentax had manual focusing, manual exposure, and manual
shutter-speed, yet it was far less frustrating to use than the fully computerized modern Nikon
CoolPix 900, which has automatic focusing, exposure, and shutter-speed. Camera may still
take pictures, but it behaves like a computer instead of a camera.

Module in Human-Computer Interaction (HCI) 10 | P a g e

IRMA T. PLATA
CASE #3: What do you get when you cross a computer with an alarm clock?

A computer! I just purchased an expensive new clock-radio for my bedroom, a JVC FS-
2000. It has a very sophisticated computer brain, and offers high fidelity, digital sound, and
lots of features. It wakes me up at a preset time by playing a compact disc, and it has the
delicacy and intelligence to slowly fade up the volume when it begins to play at six o’clock in
the morning. This feature is really pleasant and quite unique, and it compensates for the fact
that I want to hurl the infuriating machine out the window.

It’s very hard to tell when the alarm is armed, so it occasionally fails to wake me up
on a Monday and rousts me out of bed early on a Saturday. Sure, it has an indicator to show
the alarm is set, but that doesn’t mean it’s useful. The clock has a sophisticated alphanumeric
liquid crystal display (LCD) that displays all of its many functions. The presence of a small
symbol in the upper left corner of the LCD indicates the alarm is armed, but in a dimly lit
bedroom the clock symbol visible, but the backlight comes on when the CD or radio is explicitly
turned on. There’s a gotcha, however, as the alarm simply won’t ever sound while the CD is
explicitly left on, regardless of the setting of the alarm. It is this paradoxical operation that
frequently catches me unaware.

It is simple to disarm the alarm: Simply press the “Alarm” button once, and the clock
symbol disappears from the display. However to arm it, I must press the “Alarm” button
exactly five times. The first time I press it, the display shows me the time of the alarm. On
press tow, it shows the time when it will turn the sound off. On press three, it shows me
whether it will play the radio or the CD. On press four, it shows me the preset volume. On
press five, it returns to the normal view, but with the alarm now armed. But with just one
additional press, it disarms the alarm. Sleepy, in a dark bedroom, it is quite difficult to perform
this little digital ballet correctly. The alarm clock may still wake me up, but it behaves like a
computer.

By contrast, my old non-computerized alarm clock woke me up with a sudden, unholy

buzzing. When it was armed, a single red light glowed. When it was not armed, the red light
was dark. I didn’t like this old alarm clock for many reasons, but at least I could tell when it
was going to wake me up.

Because it is far cheaper for manufacturers to use computers to control the internal
functioning of devices than it is to use older, mechanical methods, it is economically inevitable
that computers will insinuate themselves into every product and service in our lives. This
means that the behavior of all of our products will be the same as most obnoxious computers,
unless we try something different.

Module in Human-Computer Interaction (HCI) 11 | P a g e

IRMA T. PLATA
CASE #4: What do you get when you cross a computer with a car?

+ =
A computer! Porsche’s beautiful new high-tech spots car, the Boxster, has seven
computers in it to help manage its complex systems. One of them is dedicated to managing
the engine. It has special procedures built into it to deal with abnormal situations.
Unfortunately, these sometimes backfire. In some early models, if the fuel level in the gas tank
got very low---only a gallon or so remaining---the centrifugal force of a sharp turn could cause
the fuel to collect in the side of the tank, allowing air to enter the fuel lines. The computer
sensed this as a dramatic change in the incoming fuel mixture, and interpreted it as a
catastrophic failure of the injection system. To prevent damage, the computer would shut
down the ignition and stop the car. Also to prevent damage, the computer would not let the
driver restart the engine until the car had been towed to a shock and serviced

When owners of early Boxsters first discovered this problem, the only solution
Porsche could devise was to tell them to open the engine compartment and disconnect the
battery for at least five minutes, giving the computer time to forget all knowledge of the
hiccup. The sports car may still speed down those too-lane black top roads, but now, in those
turns, it behaves like a computer.

CASE #5: What do you get when you cross a computer with a warship?

In September of 1997, while conducting fleet maneuvers in the Atlantic, the USS
Yorktown, one of the Navy’s new Aegis guided-missile cruisers, stopped dead in the water. A
Navy technician, while calibrating an on-board fuel valve, entered a zero into one of the
shipboard management computers, a Pentium Pro running Windows NT. The program
attempted to divide another number by that zero---a mathematically undefined operation---
which resulted in a complete crash of the entire shipboard control system. Without the
computers, the engine halted and the ship sat wallowing in the swells for two hours and fifty-
five minutes until it could be towed into port. Good thing it wasn’t in a war zone.

What do you get when you cross a computer with a warship? Admiral Nimitz is rolling
in his grave! Despite this setback, the Navy is committed to computerizing all of its ships
because of the manpower cost savings, and so deflect criticism of this plan, it has blamed the

Module in Human-Computer Interaction (HCI) 12 | P a g e

IRMA T. PLATA
“incident” on human error. Because the software creation process is out of control, the high-
tech industry must either bring its process to heel or it will continue to put the blame on
ordinary users while ever-bigger machines sit dead in the water.

So here you saw the result of integrating computers in our lives. As I said early,
computers will annoy us, infuriate us, and even kill a few of us. In turn, we will be tempted to
kill our computers, but we won’t dare because we are already utterly, irreversibly dependent
on these hopeful monsters that make modern life possible. So we will have to think about
them. We will have to think how we can make them better. We need to fundamentally rethink
how human and machines interact. And rethink the relationship in deep and novel ways, for
the fault for our burgeoning problems lies not with our machines, but with us.

Module in Human-Computer Interaction (HCI) 13 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1:
Multiple Choice. Read each statement carefully, from among the choices given,
choose the best answer and write the letter of your choice on the space provided before the
number.

_______1. The following are characteristics of human species except:

a. They think emotionally
b. They think and decide in their own will
c. They are free
d. They are pretty dumb

_______2. Which is a characteristic of computer specie?

a. Its speed is marvelous
b. It has emotions
c. It makes mistakes
d. It can think on its own

_______3. It is a discipline concerning with the design, evaluation and implementation of

interactive computing systems for human use.
a. Information Systems
b. Information Technology
c. Human Computer Interaction
d. Computer Science

_______4. The role of HCI between the interfaces of machines and human understanding
is to _____
a. Bridge up the gap c. Improve the gap
b. Enhance the gap d. Progress the gap

_______5. While software engineers are system-centered, human-computer interface

specialists are ______.
a. Machine-centered c. Computer-centered
b. User-centered d. Interface-centered

Module in Human-Computer Interaction (HCI) 14 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 2: Answer the following briefly but substantially.

1. What are the significance of Human Computer Interaction (HCI)?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

2. Discuss and argue about why Human computer Interaction (HCI) is important with
reference to the way in which technology has developed during past forty years.
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

3. Compare and contrast human species from computer specie.

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

4. Explain the definition of HCI.

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

5. Explain the different fundamental truths about computer.

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

Module in Human-Computer Interaction (HCI) 15 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 3: Make a reaction paper based on the different case scenario presented.
Summarize the cases and note some important points. Also, answer how computer does affect
once life?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 16 | P a g e

IRMA T. PLATA
 CHAPTER 2. GOALS & EVOLUTION OF HUMAN-COMPUTER
INTERACTION

Overview

The term Human Computer Interaction (HCI) was adopted in the mid-1980s as a
means of describing this new field of study. This term acknowledged that the focus of
interest was broader than just the design of the interface and was concerned with all those
aspects that relate to the interaction between users and computers.

Learning Objectives

At the end of this chapter, the student should be able to:

 Describe the goals of HCI;
 Identify and discuss the different Usability goals;
 Discuss the Evolution of HCI;
 Define quality from different perspectives; and
 Describe the relationship of Usability and Quality.

Topics

2.1 Goals of HCI

Effectiveness, Efficiency, Safety, Utility, Learnability, and
Memorability
2.2 Evolution of HCI

Module in Human-Computer Interaction (HCI) 17 | P a g e

IRMA T. PLATA
 Learning Contents

2.1. Goals of HCI

The goals of HCI are to produce usable and safe systems, as well as functional
systems. These goals can be summarized as ‘to develop or improve the safety, utility,
effectiveness, efficiency and usability of systems that include computers’ (Interacting with
computers, 1989).

In this context, the term ‘system’ derives from systems theory and it refers not just
to the hardware and software but to the entire environment---be it organization of people
at work, at home or engaged in leisure pursuits---that uses or is affected by the computer
technology in question.

Utility refers to the functionality of a system or, in other words, the things it can do.
Improving effectiveness and efficiency are self-evident and ubiquitous objectives. The
promotion of safety in relation to computer systems is of paramount importance in the
design of safety-critical systems.

Usability, a key concept in HCI, is concerned with making systems easy to learn and
easy to use. Poorly designed computer system can be extremely annoying to users, as you
can understand from above described incidents.

Human-Computer Interaction

Example: The Shopping Analogy

• Types of experiences
– Good or Bad
• Every user is unique
– Experiences are unique

Module in Human-Computer Interaction (HCI) 18 | P a g e

IRMA T. PLATA
 Every person, every human being is
different. In the same way that
At every point in life, human beings every person’s DNA is different,
are experiencing. These experiences every person’s fingerprint is
can be both good and bad. different, the retinal patterns on the
eye are different, and experiences
are also different.

To explain the concept of the user experience, let’s take an example – shopping and
buying, which is a very simple analogy: We have all done shopping. When you visit a shop with
a specific goal in mind. What happens: Can you find what you need? Is the interior and exterior
nicely designed? Are the staff helpful and courteous? Is the atmosphere pleasant? etc. What
happens: If you can’t find what you want? Staff are not present, unhelpful or rude? You can’t
find the pay counter? The atmosphere is unpleasant? The shop is dirty and untidy? The shop
is not nicely designed? The shop is not open!!? The result is an experience – either good or
bad.

User Experience – A Definition

• The user experience is the holistic combination of everything that the user
– Sees
– Touches
– Feels
– Interacts with
 Good and Bad Experiences

Usability - Abstract-level Constituents

Usability. Ensuring that

interactive products are easy to
learn, effective to user and
enjoyable from the user’s
perspective.

Module in Human-Computer Interaction (HCI) 19 | P a g e

IRMA T. PLATA
Perspective?
• People perceive the same item in different ways.

From the picture presented,

what do you see in the
Image?

Usability and User Experience

Experience Goals

Usability Goals

Usability Goals
To recap, usability in generally regarded as ensuring that interactive products are easy
to learn, effective to use, and enjoyable from user perspective.
It involves optimizing the interactions people have with interactive product to
enable them to carry out their activities at work, school, and in their everyday life. More
specifically, usability is broken down into the following goals:

Module in Human-Computer Interaction (HCI) 20 | P a g e

IRMA T. PLATA
 Effectiveness. It is a very general goal and refers to how good a system at doing
what it is supposed to do.
• iDrive system being effective since it would perform all the tasks
• Porsche example the system was effective enough to detect the high intake
of Air in Fuel system
• The Alarm clock is effective in the way that it would play music in exactly the
same way it is supposed to
• Are these systems really effective? Think again!!
• Main goal of HCI is to evaluate things from the User’s perspective

Efficient. The way system supports its users in carrying out their tasks
– Talk about the three systems
– Does the product help users sustain a high level of productivity?

Safety. Protecting the user from dangerous conditions and undesirable situation
– Which of the Cases we discussed earlier you think was the most unsafe?
• Plane

In relation to the first ergonomics aspect, it refers to the external conditions where
people work. For example, where there are hazardous conditions---like x-rays machines or
chemical plants---operators should be able to interact with and control computer-based
system remotely. The second aspect refers to helping any kind of user in any kind of situation
avoid the danger of carrying out unwanted action accidentally. It also refers to the perceived
fears users might have of the consequences of making errors and how this effects their
behavior to make computer-based system safer in this sense involves:

• Preventing the user from making serious error by reducing the risk of wrong
keys/buttons being mistakenly activated (an example is not placing the quit or
delete-file command right next to the save command on a menu.) and
• Providing users with various means of recovery should they make errors. Save
interactive systems should engender confidence and allow the users the
opportunity to explore the interface to carry out new operations.

Other safety mechanism include undo facilities and confirmatory dialog boxes that
give users another chance to consider their intentions (a well-known used in email
application is the appearance of a dialog box after the user has highlighted the messages to
be deleted, saying: “are you sure you want to delete all these messages?”)

Utility. System providing the right kind of functionality so that the user can do what
they want

It refers to the extent to which the system provides the right kind of functionality so
that user can do what they need or want to do. An example of a system with high utility is an
accounting software package providing a powerful computational tool that accountants can
use to work out tax returns. An example of a system with low utility is a software drawing tool
that does not allow users to draw free hand but forces them to use a mouse to create their
drawings, using only polygon shapes.

Module in Human-Computer Interaction (HCI) 21 | P a g e

IRMA T. PLATA
 Learnability. It refers to how easy a system is to learn to use. It is well known that
people do not like spending a long time learning how to use a system.

They want to get started straight away and become competent at caring out tasks
without too much effort. This is especially so far interactive products intended for everyday
use (for example interactive TV, email) and those used only infrequently (for example, video
conferencing) to certain extent, people are prepared to spend longer learning more complex
system that provide a wider range of functionality (for example web authoring tools, word
processors) in these situations, CD ROM and online tutorials can help by providing
interactive step by step material with hands-on exercises. However many people find these
tedious and often difficult to relate to the tasks they want to accomplish. A key concern is
determining how much time users are prepared to spend learning a system. There seems
little point in developing a range of functionality if the majority of users are unable or not
prepared to spend time learning how to use it.

Memorability. How easy the system is to remember once learn.

It 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. Users shouldn’t have to keep relearning how to
carry out tasks. Unfortunately, this tends to happen when the operation required to be
learning are obscure, illogical, or poorly sequenced. Users need to be helped to remember
how to do tasks. There are many ways of designing the interaction to support this. For
example, users can be helped to remember the sequence of operations at different stages
of a task through meaningful icons, command names, and menu options. Also, structuring
options and icons so they are placed in relevant categories of options (for example, placing
all the drawing tools in the same place on the screen) can help the user remember where to
look to find a particular tool at a given stage of a task.

“Don’t make me THINK, is the key to a

usable product”

User Experience Goals

The realization that new technologies are offering increasing opportunity for
supporting people in their everyday lives has led researchers and practitioners to consider
further goals. The emergence of technologies (for example, virtual reality, the web, mobile
computing) in diversity of application areas (e.g., entertainment, education, home, public
areas) has brought about a much wider set of concerns. As well as focusing primarily on
improving efficiency and productivity at work, interaction design is increasingly concerning
itself with creating systems that are:
• Satisfying
• Enjoyable
• Fun
• Entertaining
• Helpful

Module in Human-Computer Interaction (HCI) 22 | P a g e

IRMA T. PLATA
 • Motivating
• Aesthetically Pleasing
• Supportive to Creativity
• Rewarding
• Emotionally Fulfilling

The goals of designing interactive products to be fun, enjoyable, pleasurable, and

aesthetically pleasing and so on are concerned primarily with the user experience. By this
we mean what the interaction with the system feels like to the users. This involves,
explicating the nature of the user experience in subjective terms. For example, a new
software package for children to create their own music may be designed with the primary
objectives of being fun and entertaining. Hence, user experience goals differs from the more
objective usability goals in that they are concerned with how user experience an interactive
product from their perspective, rather than assessing how useful or productive a system is
from its own perspective. The relationship between two is shown in figure.

Recognizing and understanding the trade-offs, between usability and user experience
goals, is important. In particular, this enables designers to become aware of the consequences
of pursuing different combinations of them in relation to fulfilling different users’ needs.
Obviously, not all of the usability goals and user experience goals apply to every interactive
product being developed. Some combination will also be incompatible. For example, it may
not be possible or desirable to design a process control system that is both safe and fun.

Usability and Quality

• What is Quality?
– You like a product
– Does not break down

Software Quality – A Definition

• The extent to which a software product exhibits these characteristics
– Functionality
– Reliability

Module in Human-Computer Interaction (HCI) 23 | P a g e

IRMA T. PLATA
 – Usability
– Efficiency
– Maintainability
– Portability

Other Definitions:
1. Quality is conformance to specifications (British Defense Industries Quality
Assurance Panel)
2. Quality is conformance to requirements (Philip Crosby)
3. Quality is fitness for purpose or use (Juran Panel)
4. Quality is a predictable degree of uniformity and dependability, at low cost
and suited to the market. (Edward Deming)
5. Quality is synonymous with customer needs and expectations (R J Mortiboys)
6. Quality is meeting the (stated) requirements of the customer- now and in
the future (Mike Robinson)
7. Quality is the total composite product and service characteristics of
marketing, engineering, manufacturing and maintenance through which the
product and service in use will meet the expectations by the customer
(Armand Feigenbaum)
8. Totality of characteristics of an entity that bear on its ability to satisfy stated
and implied needs (ISO 8402 : 1994)

Product
• A generic term that refers to
– Goods
– Services
• Failure to meet quality requirements in either dimension can have serious
negative consequences

2.2. Evolution and History of HCI

Groundwork for HCI: • Man-machine Symbiosis" (Licklider, 1960)

1960s – Early 1970s – Symbiotic relationship
– Computers would contribute in creative process
• “Augmentation of human intellect” (Engelbart, 1963)
• SketchPad system at MIT (Sutherland, 1963)
– Ideas for displaying, manipulate, copy pictures
– Use of input devices
• Parallel developments
– Interactive graphic interfaces
– Interactive text processing systems
– Line and display editors
– WYSIWYG editors
– Computer graphics (CAD/CAM)

Difference in Approach: • US
Late 1970s and 1980s – How computers enrich lives
– Facilitating problem-solving and creativity

Module in Human-Computer Interaction (HCI) 24 | P a g e

IRMA T. PLATA
 – Empirical evaluation
– Psychology of programming
• Europe
- Theories of HCI
- Methods of design
- Formalize usability

Early Days of HCI • Early days of computing computers were used and
operated by Engineers / Technical Staff only
• 1970’s: technology explosion
– Notion of user-interface arises, a.k.a. Man-Machine
Interface (MMI)
– User-interface became a concern for system
designers and researchers
– Growing realization
– Success depended on improving physical aspect of UI
– ‘user friendly’ was often just lip service and making
UI aesthetically pleasing

‘Birth of HCI’
• HCI’ term adopted in mid-1980s
• Another HCI definition
HCI defined:
A set of processes, dialogues, and
actions through which a human
user employs and interacts with a
computer.

Module in Human-Computer Interaction (HCI) 25 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Multiple Choice. Read each statement carefully, from among the choices
given, choose the best answer and write the letter of your choice on the space provided before
the number.
_______1. For something to be ______ it must allow the users to achieve the task they
want to easily and enjoyably.
a. Useful c. Good experience
b. Usable d. Bad Experience
_______2. For something to be _____ means that the user can actually achieve the task
they want to.
a. Useful c. Good experience
b. Usable d. Bad Experience
_______3. Case: An automated teller machine (ATM) for a user wanting to withdraw
money. The ATM is _____ because the user can achieve their task; they can
withdraw money.
a. Useful c. Useless
b. Usable d. Efficient
_______4. The ATM is _____ for most users because it typically takes only a few seconds
and a few obvious key presses to withdraw their money.
a. Useful c. Useless
b. Usable d. Efficient
_______5. The amazon.com website for a user wanting to buy a pet snake
a. Useful c. Useless
b. Usable d. Efficient
_______6. When hazardous conditions like x-rays machines or chemical plants –
operators should be able to interact with and control computer-based system
remotely to practice ___.
a. Effectiveness c. Safety
b. Reliability d. Utility
_______7. Mobile phones providing different features such as text, call, video, music,
download, calculator, locator that users can use.
a. Effectiveness c. Safety
b. Reliability d. Utility
_______8. Users shouldn’t have to keep relearning how to carry out tasks.
a. Utility c. Memorability
b. Learnability d. Efficiency
_______9. It refers to how good a system at doing what it is supposed to do.
a. Effectiveness c. Utility
b. Efficiency d. Learnability
_______10. It refers to the way a system supports users in carrying out their tasks.
a. Effectiveness c. Utility
b. Efficiency d. Learnability
_______11. It is ensuring that interactive products are easy to learn, effective to use, and
enjoyable from use perspective.
a. Usability c. Ease of Use
b. Usefulness d. Effectiveness

Module in Human-Computer Interaction (HCI) 26 | P a g e

IRMA T. PLATA
_______12. It is a set of processes, dialogues, and actions through which a human user
employs and interacts with a computer.
a. Human computer interaction c. Data mining
b. Artificial intelligence d. Knowledge-based Engineering
_______13. ___ is the holistic combination of everything that the user sees, touches,
feels, and interacts with.
a. User goals c. User experience
b. User perspective d. User objectives
_______14. It is an extent to which a software product exhibits these characteristics
like usability, reliability, and functionality among others.
a. User goals c. User experience
b. User perspective d. User objectives
_______15. How easy the system is to remember once learn, has something to do with
____?
a. Utility c. Learnability
b. Functionality d. Memorability

Module in Human-Computer Interaction (HCI) 27 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 2: Essay. Answer briefly but substantially. Write your answer on the spaces
provided.

1. What is the relationship between Usability goals and User experience goals?

Experience Goals

Usability Goals

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

2. What is your own definition of a Perception? From the picture presented, what do
you see in the image?

From the picture presented, what

do you see in the Image?
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 28 | P a g e

IRMA T. PLATA
3. From the discussion on Usability, explain “Don’t make me THINK, is the key to a
usable product”.
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

4. What is the difference between Ease of Use and Usefulness?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

5. Recall an experience you had in using a Computer System e.g. ATM, identify some
good experiences and bad experiences encountered.
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 29 | P a g e

IRMA T. PLATA
 CHAPTER 3. DISCIPLINES OF HCI

Overview

HCI understands the Complex Relationship between Human and Computers, which
are two distinct ‘Species’. Successful Integration is dependent upon a better understanding
of both Species. Hence HCI borrows and establishes its roots in Disciplines concerned with
both.

Learning Objectives

At the end of this chapter, the students should be able to:

• Discuss the different disciplines involved in HCI; and
• Interconnect the disciplinary nature of HCI

Topics

3.1. Human Computer Interaction (HCI)

3.2. Interdisciplinary nature of HCI
Human-related
Computer-related

Learning Contents

3.1. What is HCI?

• HCI is a large interdisciplinary area
• Emerging as specialty concern within several disciplines, each with different
emphases
– Computer science (application design and engineering of human
interfaces)
– Psychology (the application of theories of cognitive processes and the
empirical analysis of user behavior)
– Sociology and anthropology (interactions between technology, work, and
– organization)
– Industrial design (interactive products)

• HCI concerned with:

– Joint performance of tasks by humans and machines

Module in Human-Computer Interaction (HCI) 30 | P a g e

IRMA T. PLATA
 – Structure of communication between human and machine
– Human capabilities to use machines
– Algorithms and programming of interfaces
– Engineering concerns in designing and building interfaces
– Process of design, specification and implementation
– Design trade-offs

• Various aspects
– Science (Human capabilities to use machines)
– Engineering (Building interfaces)
– Design (Design tradeoffs)

3.2. Interdisciplinary Nature of HCI

• HCI is understanding the Complex Relationship between Human and Computers
• Two Distinct “Species”
• Successful Integration is dependent upon the a better understanding of both
Species
• Hence, HCI borrows and establishes its roots in Disciplines concerned with both:
- HCI has roots in many disciplines
- HCI is inter-disciplinary in nature

Module in Human-Computer Interaction (HCI) 31 | P a g e

IRMA T. PLATA
 Cognitive Social

HCI Psychology
Psychology
Organizational
Linguistics

Ergonomics and Human Anthropology

Factors

Philosophy Computer Science

Artificial Intelligence Engineering

Design

Interdisciplinary Nature of HCI – Human Side

• Cognitive Psychology
• Social Organizational Psychology
• Ergonomics and Human Factors
• Linguistics
• Philosophy
• Sociology
• Anthropology

Cognitive Psychology
• Understanding human behavior and mental processes
• Human information processing: See, Feel, Touch, Smell, and Taste
• How much information can be processed and remembered

Social Organizational Psychology

• Studying nature and causes of human behavior in social context
• Four core concerns:
1. Influence of one individual on another person’s attitude and
behavior
2. Impact of a group on its member’s attitude and behavior
3. Impact of a member on group’s activities and structure
4. Relationship between the structure and activities of different groups
• Informs designers how computers affect working practices

Ergonomics or Human Factors

• To define and design tools and various artifacts for different work, leisure and
domestic environment to suit the capacities and capabilities of users
• Ergonomist translates the above information from the above mentioned
sciences into context of design of products
• Increase feelings of comfort and satisfaction
• Concerns
• Hardware design
• Radiation from VDUs

Module in Human-Computer Interaction (HCI) 32 | P a g e

IRMA T. PLATA
 • Repetitive Strain Injury (RPI)

Linguistics
• Scientific study of languages
• Command-object (delete ‘report’ OR ‘report’ delete)
• Understanding structure (syntax) and meaning (semantics)
• HCI goal is to develop natural language interfaces

Philosophy, Sociology and Anthropology

• Contribution in the sense of Soft Sciences for HCI
• Considers introduction of IT in society
• Ethnography involves observing people
• Cognitive psychology tries to predict
• Computer Supported Cooperative Writing

Interdisciplinary Nature of HCI – Computer Side

• Computer Science
• Artificial Intelligence
• Engineering
• Design

Computer Science
• Provides knowledge about capability of technology
• Developing techniques to support software design, development and
maintenance

Artificial Intelligence
• Intelligent Computing concerned with simulating human behavior
• HCI – development of expert and tutoring systems

Engineering
• Engineering takes finding of sciences and utilizes them in the production of
artifacts.

Design
• Design contributes creative skills and knowledge to this process.

To summarize the main topics that make up the discipline of HCI. All HCI takes place
within a social and organizational context. Different kinds of applications are required for
different purposes and care is needed to divide tasks between humans and machines, making
sure that those activities and routine are allocated to machines. Knowledge of human
psychological and physiological abilities and, more important still their limitations is
important.

This involves knowing about such things as human information processing, language,
communication, interaction and ergonomics. Similarly it is essential to know about the range
of possibilities offered by computer hardware and software so that knowledge about humans
can be mapped on to the technology appropriately. The main issues for consideration on the

Module in Human-Computer Interaction (HCI) 33 | P a g e

IRMA T. PLATA
technology side involve input techniques, dialogue technique, dialogue genre or style,
computer graphics and dialogue architecture. This knowledge has to be brought together
somehow into the design and development of computer systems with good HCI. Tools and
techniques are needed to realize systems. Evolution also plays an important role in this
process by enabling designers to check that their ideas really are what users want.

Module in Human-Computer Interaction (HCI) 34 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Multiple Choice. Read each statement carefully, from among the choices
given, choose the best answer and write the letter of your choice on the space provided before
the number.
_______1. An application design and engineering of human interfaces
a. Psychology c. Sociology
b. Computer science d. Industrial design
_______2. The application of theories of cognitive processes and the empirical analysis
of user behavior
a. Psychology c. Sociology
b. Computer science d. Industrial design
_______3. Interactive products
a. Psychology c. Sociology
b. Computer science d. Industrial design
_______4. Interactions between technology, work, and organization
a. Psychology c. Sociology
b. Computer science d. Industrial design
_______5. Which of the following is not an interdisciplinary nature of HCI in the human-
side?
a. Ergonomics c. Design
b. Linguistics d. Philosophy
_______6. A computer-side HCI discipline concerned with simulating human behavior.
a. Computer Science c. Engineering
b. Artificial Intelligence d. Design
_______7. These are all interdisciplinary nature of HCI in the computer-side except ___.
a. Ergonomics c. Computer science
b. Engineering d. Design
_______8. It provides knowledge about capability of technology, developing techniques
to support software design, development and maintenance
a. Computer Science c. Engineering
b. Artificial Intelligence d. Design
_______9. HCI concerned with the following, except with ____.
a. Joint performance of tasks by humans and machines
b. Structure of communication between human and machine
c. Human capabilities to use machines
d. Programmers’ design without consultation with end-users
_______10. Understanding structure (syntax) and meaning (semantics) also HCI goal is to
develop natural language interfaces is under ____ discipline.
a. Linguistics c. Psychology
b. Anthropology d. Sociology

Module in Human-Computer Interaction (HCI) 35 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 2. Essay. Answer briefly but substantially.

1. From the diagram below, what is the relationship between HCI and Cognitive
Psychology?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

2. Explain the relationship of HCI with engineering discipline.

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

3. Why is important to consider interdisciplinary disciplines in HCI?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

4. Why is the two species: human species and computer specie important in HCI?
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 36 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 3 Case Study – Ticketing System

Background: A small ticketing agency has many shops distributed throughout the
country. They feel the need to install efficient ticketing system, for survival
• Manual Issuing Procedure
– Call airlines to check for vacant seats
– Check with customer if the available seat is suitable
– Then ticket is written out manually
– Customer receipts and itinerary
– Accounting for issued tickets every two weeks

• The research on existing ticketing systems reveal

– Computers always going wrong
– Lack of trust in computers
– Staff unable to understand messages
• The Result
– Sales figures had dropped and were disappointing
– A large number of sales staff had left
• Ticketing System – Recommendations
– Immediate booking via Internet
– Automatic print-out of tickets, itineraries and receipts
– Direct connection between booking system and accounting system
– Elimination of booking forms
– Layout of the agency needs to be changed for staff to operate
computers
– Staff training
– Changes to job design
– Support to older staff during period of change
– Changes to employment conditions must be examined
– Staff relationship with other non-techi staff members (Technology
Power)
1. If you are a senior programmer, what are other recommendations that you will
suggest in line with Computer Science and Design discipline?
2. Using wireframe, or any other design tools, make some blueprints/design of the
Ticketing System.

Module in Human-Computer Interaction (HCI) 37 | P a g e

IRMA T. PLATA
 CHAPTER 4. HUMAN SIDE – COGNITION FRAMEWORK

Overview

This chapter looks at how cognitive psychology can inform the design of interactive
systems. Psychology looks at how people understand, perceive and remember things.
Knowing these properties, we can design systems that do not put undue strain on the user’s
capabilities.

Imagine trying to drive a car by using just a computer keyboard. The four arrow keys
are used for steering, the space bar for braking, and the return key for accelerating. To
indicate left you need to press the F1 key and to indicate right the F2 key. To sound your
horn you need to press the F3 key. To switch the headlights on you need to use the F4 key
and, to switch the windscreen wipers on, the F5 key. Now imagine as you are driving along
a road a ball is suddenly kicked in front of you. What would you do? Bash the arrow keys
and the space bar madly while pressing the F4 key? How would rate your chance of missing
the ball?

Most of us would bald at the very idea of driving a car this way. Many early video
games, however, were designed along these lines: the user had to press an arbitrary
combination of function keys to drive or navigate through the game. More recently,
computer consoles have been designed with the user’s capabilities and demands of the
activity in gaming. Much better way of controlling and interacting, such as through using
joysticks and steering wheels, are provided that map much better onto the physical and
cognitive aspects of driving and navigating.

We have to understand the limitations of the people to ease them. Let us see what
cognitive psychology is and how it helps us.

Learning Objectives

At the end of this chapter, the student should be able to:

 Define cognitive psychology
 Recognize the importance of Cognition;
 Discuss modes of cognition;
 Illustrate and explain the concept of information processing to conceptualize
how the mind works; and
 Recognize the importance of attention and memory in the Information
Processing Model

Module in Human-Computer Interaction (HCI) 38 | P a g e

IRMA T. PLATA
 Topics

4.1. Cognitive Psychology

4.2. Cognition
4.3. Modes of Cognition
Experiential cognition
Reflective cognition
4.4. Human Information Processing Model
4.5. Attention and Memory as extensions of Human Information Processing
Model

Learning Contents

Scenario: Going for a Drive

• Driving a Car with a Keyboard
• Steering with Arrow keys
• Brake – Space bar
• Acceleration – Enter
• Indicators • What do you do?
– Left – F1 • What are your chances of survival
– Right – F2
• Horn – F3
• Headlights – F4
• Windscreen Wipe – F5
• Driving along on Highway
• Suddenly a Cow comes in front

4.1. Cognitive Psychology

• Psychology primarily concerned with human behavior and the mental processes
that underlie it.
• It is primarily concerned with information processing.

4.2. Cognition

• Process by which we became acquainted with things or in other words gain

knowledge
– Understanding
– Remembering
– Reasoning
– Attending
– Creating a new idea

Module in Human-Computer Interaction (HCI) 39 | P a g e

IRMA T. PLATA
 • How Humans and Computers interact with one another in terms of knowledge
transmitted by them.
4.3. Modes of Cognition

Norman (1993) distinguishes between two general modes:

1. Experiential cognition
2. Reflective cognition

Experiential and Reflective

• Experiential
– We perceive, act and react to events around us effectively
– Identify the cognitions shown in previous as experiential
• Driving a car, reading
• Reflective
– Involves thinking , comparing and decision making

What goes inside the head?

The main objective in HCI has been to understand and represent how human
interact with computers in term of how knowledge is transmitted between the two. The
theoretical grounding for this approach stems from cognitive psychology: it is to explain how
human beings achieve the goals they set.
Cognition has also been described in terms of specific kinds of processes. These
include:
• Attention
• Perception and recognition
• Memory
• Learning
• Reading, speaking, and listening
• Problem solving, planning, reasoning, decision-making.

It is important to note that many of these cognitive processes are interdependent:

several may be involved for a given activity. For example, when you try to learn material for
an exam, you need to attend the material, perceive, and recognize it, read it, think about it,
and try to remember it. Thus cognition typically involves a range of processes. It is rare for
one to occur in isolation.

Module in Human-Computer Interaction (HCI) 40 | P a g e

IRMA T. PLATA
Information Processing …
• Let us look at how humans process information
• Identify the following:

• So what was it?

– An elephant?
– A Tiger
– An Apple
– Roses
Information Processing Analysis
• Trace mental operations
• Example Retrieving a friends phone number
– Identifying friends Name
– Retrieving meaning of words
– Understanding the meaning of set of words given in the exercise
– Retrieve number from memory
– Generate plan and formulate the answer
– Recite digits or write them down

4.4. Human Information Processing Model

How come we all recognized them as Roses?

• Behind the scenes of Information processing in Humans:
– Input Channels Sight, hearing, touch, smell, taste
– Encoding information from environment in some kind of internal
representation
– Internal representation is compared with memorized representations
(Comparison)
– Concerned with deciding on a response to the encoded stimulus
(Response Selection)
– Organizing response and necessary action (Response Execution)

Extended Model
• How Information is perceived by the perceptual processors
• How information is attended to

Module in Human-Computer Interaction (HCI) 41 | P a g e

IRMA T. PLATA
• How information is processes and stored in Memory

Module in Human-Computer Interaction (HCI) 42 | P a g e

IRMA T. PLATA
4.5. Extension to the Information Processing Model

Human Processor Model

• Helps conceptualize human behavior
• Models of users: Model human Processor
– Perceptual System
– Motor System
– Cognitive System

Module in Human-Computer Interaction (HCI) 43 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Multiple Choice. Read each statement carefully, from among the choices
given, choose the best answer and write the letter of your choice on the space provided before
the number.
_______1. It is a process by which we became acquainted with things or in other words
to gain knowledge by understanding, remembering, and reasoning.
a. Cognition c. Observation
b. Perception d. Opinion

_______2. It is primarily concerned with human behavior and the mental processes
that underlie it.
a. Social Psychology c. Clinical Psychology
b. Cognitive Psychology d. Clinical Psychology

_______3. It is a mode of cognition where we perceive, act and react to events around
us effectively.
a. Experiential c. Meditative
b. Reflective d. Philosophical

_______4. It is a mode of cognition where it involves thinking, comparing and decision

making.
a. Experiential c. Meditative
b. Reflective d. Philosophical

_______5. Information processing in humans involve input channels, encoding,

comparison, response selection and ___.
a. Response addition c. Response execution
b. Response deletion d. Response attention

Module in Human-Computer Interaction (HCI) 44 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 2. Essay. Answer briefly but substantially.

1. Compare and contrast experiential cognition and reflective cognition. Give concrete
example of experiential and reflective cognition.
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

2. Explain the stages (1-4) of information processing model.

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

3. In the extension of the human information processing model are the inclusion of
the processes of .attention and memory. What is then the importance of the two
(attention and memory) in cognition?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

Module in Human-Computer Interaction (HCI) 45 | P a g e

IRMA T. PLATA
4. Explain Human Information Processing Modell illustrated in the diagram below.

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

5. Construction! What does this scene contain? Extract shapes/objects (early);

recognize(late) Process visually (early); recognize patterns (late)

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

Module in Human-Computer Interaction (HCI) 46 | P a g e

IRMA T. PLATA
 CHAPTER 5. HUMAN INPUT-OUTPUT CHANNELS –PART 1

Overview

Imagine using a personal computer with a mouse and a keyboard. The application
you are using has a graphical interface, with menus, icons and windows. In your interaction
with this system you receive information primarily by sight, from what appears on the
screen. However, you may also receive information by ear: for example, the computer may
‘beep’ at you if you make a mistake or to draw attention to something, or there may be a
voice commentary in a multimedia presentation. Touch plays a part too in that you will feel
the keys moving (also hearing the ‘click’) or the orientation of the mouse, which provides
vital feedback about what you have done. You yourself send information to the computer
using your hands either by hitting keys or moving the mouse. Sight and hearing do not play
a direct role in sending information in this example, although they may be used to receive
information from a third source (e.g., a book or the words of another person) which is then
transmitted to the computer.

Learning Objectives

At the end of this chapter, the student should be able to:

• Determine the roles of input-output channels in HCI;
• Identify the different major senses important in HCI;
• Define vision;
• Recognize the different visual perceptions related to size and depth,
brightness and color which are crucial to the design of effective visual
interface;
• Explain the importance of the different IO channels in HCI; and
• Apply the different concepts of IO channels in the design and development
of system/web site.

Topics
5.1. Input output Channels
5.2. Vision
5.3. Visual Perception
5.4. Perceiving brightness
5.5. Perceiving color

Module in Human-Computer Interaction (HCI) 47 | P a g e

IRMA T. PLATA
 Learning Contents

5.1. Input Output Channels

A person’s interaction with the outside world occurs through information being
received and sent: input and output. In an interaction with a computer the user receives
information that is output by the computer, and responds by providing input to the
computer – the user’s output become the computer’s input and vice versa. Consequently
the use of the terms input and output may lead to confusion so we shall blur the distinction
somewhat and concentrate on the channels involved. This blurring is appropriate since,
although a particular channel may have a primary role as input or output in the interaction,
it is more than likely that it is also used in the other role. For example, sight may be used
primarily in receiving information from the computer, but it can also be used to provide
information to the computer, for example by fixating on a particular screen point when using
an eye gaze system.

Input in human is mainly though the senses and output through the motor control of
the effectors. There are five major senses:

Module in Human-Computer Interaction (HCI) 48 | P a g e

IRMA T. PLATA
 Of these first three are the most important to HCI. Taste and smell do not currently
play a significant role in HCI, and it is not clear whether they could be exploited at all in
general computer systems, although they could have a role to play in more specialized
systems or in augmented reality systems. However, vision hearing and touch are central.
Similarly there are a number of effectors:
• Limbs
• Fingers
• Eyes
• Head
• Vocal system.

In the interaction with computer, the fingers play the primary role, through typing or
mouse control, with some use of voice, and eye, head and body position.

Interaction with PC Using Input-Output Channels

• Using a GUI-based computer
• Information received by sight
• Beeps received by ear
• Feel keyboard and mouse with fingers

5.2. Vision

• Highly complex activity

• Physical and perceptual limitations
• 2 stages of visual perception:
– Physical reception of the stimulus
– Interpretation/processing of stimulus
• Processing allows construction of images from incomplete information

Human Eye

5.3. Visual Perception

 Size (depth)
 Brightness
 Color

Module in Human-Computer Interaction (HCI) 49 | P a g e

IRMA T. PLATA
Notions of Size and Distance

Perceiving Size and Depth

• Size specified by visual angle
• Affected by both
– Size of object
– Distance from eye

Perceiving Size and Depth

• Visual angle
– Indicates how much of the field of view is taken by the object
– Measured in degree or minutes of arc

Visual Angle and Perception

• Visual Acuity
– Visual Acuity is the ability of a person to perceive fine detail
– Objects with visual angles smaller than 0.5 seconds of an arc are
not visible.
– Spaces between lines visible at 30s-1min of arc visible
• Law of size constancy

Module in Human-Computer Interaction (HCI) 50 | P a g e

IRMA T. PLATA
 – Perception of the object size remains constant even if it visual
angle changes
– Perception depends on factors other than visual angle

Factors Affecting Visual Perception

• Perception of depth
– Cues to determine relative positions of objects
• Objects overlapping
• Size and height of object
– Provides cue for distance
• Familiarity
– Certain size helps to judge the distance accordingly
Example:

5.4. Perceiving Brightness

Brightness. Subjective reaction to levels of

light affected by luminance of object.

Luminance. Depends on amount of light

falling on object and reflective properties of
object measured by photometer.

Contrast. Function of the luminance of an

object and the luminance of its
background.

5.5. Perceiving Color

Hue. Determined by the spectral

Components
wavelength
 Blue (short)
 Green (medium)
 Red (long)
Hue Intensity Saturation
150 hues determined by eye.

Intensity. Brightness of color.

 7 million colors can be perceived
 Color perception best in fovea, worst at Saturation. Amount of whiteness
periphery in the color.
 3-4% cones in fovea sensitive to blue light;
Blue acuity lower
 in Color
Module blindness: 8%
Human-Computer males; 1%
Interaction females
(HCI) 51 | P a g e
IRMA T. PLATA




Human Visual Perception
• The visual system compensates for:
– movement
– changes in luminance.
• Context is used to resolve ambiguity

Module in Human-Computer Interaction (HCI) 52 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Multiple Choice.

1. Input-output channels:
a. Interaction with world occurs through _________
b. Interaction with computer occurs through __
c. Human input occurs through ______
d. Human output occurs through ______

Quiz 2. Essay.

1. What are the two stages of visual perception?

2. What are the factors affecting visual perception?
3. How do you perceive the diagram below?

Module in Human-Computer Interaction (HCI) 53 | P a g e

IRMA T. PLATA
 CHAPTER 6. HUMAN INPUT-OUTPUT CHANNELS - PART II

Overview

Color theory encompasses a multitude of definitions, concepts and design

applications. All the information would fill several encyclopedias.

Learning Objectives

At the end of this chapter, the student should be able to:

• Recognize colors in the color theory and apply them in designs;
• Identify the categories of colors as to primary, secondary and tertiary color;
• Define color harmony;
• Identify the different formulas for color harmony; and
• Discuss the different guidelines in choosing colors

Topics

6.1. Color Theory

6.2. Color Harmony
6.3. Qualities of Colors
6.4. Guidelines in Choosing Colors

Learning Contents

Why Study Color? Color can be a powerful tool to improve user interfaces, but its
inappropriate use can severely reduce the performance of the systems we build.

Color. Sensory response to electromagnetic radiation in the spectrum between

wavelengths 0.4 - 0.7 micrometers.

Module in Human-Computer Interaction (HCI) 54 | P a g e

IRMA T. PLATA
6.1. Color Theory

• Primary Color
• Secondary Color
• Tertiary Color

Primary Color  Red, yellow and blue

 Three pigment colors that cannot be mixed
 Cannot be formed by any combination of other
color

PRIMARY COLORS
Red, yellow and blue

Secondary Color  Formed by mixing the primary colors

SECONDARY
COLORS
Green, orange and
purple

Tertiary Color  Formed by mixing one primary and one secondary

color.

TERTIARY COLORS
Yellow-orange, red-
orange, red-purple, blue-
purple, blue-green and
yellow-green

6.2. Color Harmony

• Pleasing arrangement of parts, whether it be music, poetry, color, or even an ice

cream sundae.

Module in Human-Computer Interaction (HCI) 55 | P a g e

IRMA T. PLATA
 • When something is not harmonious, it is either boring or chaotic.
• Extreme unity leads to under-stimulation.
• Extreme complexity leads to over-stimulation.
• Harmony is a dynamic equilibrium.
• Some Formulas for Color Harmony
– analogous colors
• any three colors which are side by side on a 12 part color wheel
• yellow-green, yellow, and yellow-orange
• Usually one of the three colors predominates.

• Some Formulas for Color Harmony

– complementary colors
• any two colors which are directly opposite each other
• red and green and red-purple and yellow-green

• Nature provides a perfect departure point for color harmony

• Red yellow and green create a harmonious design, regardless of whether this
combination fits into a technical formula for color harmony.

6.3. Color Context

• How color behaves in relation to other colors and shapes is a complex area of
color theory.
• Compare the contrast effects of different color backgrounds for the same red
square

Module in Human-Computer Interaction (HCI) 56 | P a g e

IRMA T. PLATA
• Different readings of the same color

Which is
the lighter
vertical
bar?

Fi Fi
gu gu
re re
a b

Color Sensitivity and Image Detection

Most sensitive to the •blues and reds must be brighter

center of the spectrum than greens and yellows

Brightness determined •combine brightness and color

mainly by R+G differences for sharpness

Shapes detected by
finding edges

Implications?
Hard to deal w/ blue edges and blue
shapes

Module in Human-Computer Interaction (HCI) 57 | P a g e

IRMA T. PLATA
 As we less yellows and absorbs shorter
wavelengths
age...
sensitivity to blue is even more
reduced
fluid between lens and retina absorbs
more light
perceive a lower level of brightness

Implications?
- Do not rely on blue for text or small
objects!
- Older users need brighter colors

6.4. Color Guidelines

 Opponent colors go well together

– (red and green) or (yellow and blue)
– Hering's opponent colors diagram
 Pick non-adjacent colors on the hue circle
 Size of detectable changes in color varies
– hard to detect changes in reds, purples, and greens
– easier to detect changes in yellows and blue-greens
 Older users need higher brightness levels to distinguish colors
 Hard to focus on edges created by color alone
– use both brightness and color differences
 Avoid red and green in the periphery - why?
– lack of RG cones there -- yellows and blues work in periphery
 Avoid pure blue for text, lines, and small shapes
– blue makes a fine background color
– avoid adjacent colors that differ only in blue
 Avoid single-color distinctions
– mixtures of colors should differ in 2 or 3 colors
• e.g., 2 colors should not differ only by amount of red
– helps color-deficient observers
 Accurate color discrimination
– -+60 degree of straight head position.
– Not uniform across the whole field of vision
 Limit of color awareness
– -+90 degree of straight head position
 Cultural issue
– Society classifies color differently

Module in Human-Computer Interaction (HCI) 58 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Multiple Choice.

Module in Human-Computer Interaction (HCI) 59 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 1. Essay

1. What are the three components of color?

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

2. What are things you need to consider as HCI designer when it comes to color?
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

3. In the diagram below, which of the color combinations do you think is most
appealing? Justify your answers.

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

Module in Human-Computer Interaction (HCI) 60 | P a g e

IRMA T. PLATA
4. Which is most appealing? Why?

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

Module in Human-Computer Interaction (HCI) 61 | P a g e

IRMA T. PLATA
 CHAPTER 7. COGNITIVE PROCESSES

Overview

The cognitive processes, commonly referred to as cognition, are the many processes
working together in the formation of thought. Cognition helps us to acquire information and
make conscious and subconscious conclusions about the world around us. Our five
conventional senses are utilized in this complex process as a means of gathering information.

Learning Objectives

At the end of this chapter, the student should be able to:

• Define attention;
• Differentiate focused attention from divided attention;
• Recognize the differences among sensory, STM, and LTM;
• Illustrate the revised memory model; and
• Apply the concepts of attention, memory in the design and development of
a system/web site.

Topics

7.1. Attention
7.2. Models of attention
7.3. Memory
Sensory
Short term memory
Long term memory
7.4. Revised Memory Model

Module in Human-Computer Interaction (HCI) 62 | P a g e

IRMA T. PLATA
 Learning Contents

7.1. Attention

Attention is the selection of one of a number of possible perceptual and mental

activities to focus on. The idea is that we have limited cognitive capabilities, and therefore
have to be selective in what we perceive or think about.

Lack of attention can result in failing to carry out tasks (forgetting them – a ‘lapse’) or
carrying out a similar, more familiar, task in place of the desired one (a ‘capture error’).
Focusing attention of the wrong elements of a user interface can lead to distractions, making
the user’s task harder, and to the user missing important stimuli (such as notification of an
emergency).

The word attention is used in at least three senses:

 Attention is about how we make the choice between different stimuli. Our
attention is selective. We process some information, but reject other inputs,
either at an early stage or after significant amounts of processing before we
decide, it is not important.

Practical Implications for Design

Since our attention is selective, we need to understand how to design
interfaces such that users’ attention is drawn to the important features or
information on the screen. An item on a screen should be sufficiently striking
in size, location, color or style to attract attention. It should also be in an
expected location. A “click here to continue” button which appears on the
screen at different points –even just at different heights – can prove very
frustrating.

 Attention refers to our capacity to process information. Clearly, we are

limited in the amount of information we can deal with overall. Our attention
is limited.

Practical Implications for Design

Since our capacity for attention is limited, if your website or application
bombards people with lots and lots of information, they will make mistakes
or even give up.

 Our attention often declines over the time that we spend on a task. We
talk of changes in our concentration of vigilance.

Practical Implications for Design

Our ability to maintain attention is limited. Over time our concentration will
tend to decrease, particularly if we are tired. If the task us uninteresting, the
decline will be even more marked – so make your applications as interesting
and attractive as possible.

Module in Human-Computer Interaction (HCI) 63 | P a g e

IRMA T. PLATA
 Many competing stimuli, but only limited capacity therefore need to focus, and select.

Types of Attention

Visual Attention Auditory Attention

Based on location and Based on pitch,
colour. timbre, intensity, etc.

Color can be a powerful tool to improve user interfaces, but its

inappropriate use can severely reduce the performance of the systems
we build.

7.2. Models of Attention

Models of
Attention

Divided Focused
Attention Attention

Module in Human-Computer Interaction (HCI) 64 | P a g e

IRMA T. PLATA
Focused Attention
• Only one thing can be the focus of attention
• Attention focus is voluntary or involuntary
• Factors affecting attentional focus
– Meaningfulness, structure of display, use of color, intensity, and use
of modalities.
Example:

Attention and Automatic Action

• Frequent activities become automatic.
• Carried out without conscious attention.
• User does not make conscious decision.

• Requiring confirmation does not necessarily reduce errors!

Module in Human-Computer Interaction (HCI) 65 | P a g e

IRMA T. PLATA
 Activity

Can you draw these 2 figures at the same time using left and right hands
respectively?

You cannot do 2 things at once? Is it true?

Can’t have 2 conversations/watch

2 TV shows? Can’t talk while we drive / listen to
music while exercising.

i.e. distracted to things we’re listening to if relevant.

Module in Human-Computer Interaction (HCI) 66 | P a g e

IRMA T. PLATA
Consequences
• Design to assist attentional focus in the right place.
• Help user to:
– attend his/her task not the interface;
– decide what to focus on, based on their tasks, interest, etc;
– to stay focused, do not provide unnecessary distractions; and
– structure his/her task, e.g. help
• Create distraction, when really necessary! Use alerts (only) when appropriate!
• Make information salient when it needs attending to
• Use techniques that make things stand out like colour, ordering, spacing,
underlining, sequencing and animation.
• Avoid cluttering the interface - follow the google.com example of crisp, simple
design.
• Avoid using too much colors because the software allows it.

An example of over-use of graphics

7.3. Memory

• Cognitive models of memory

• Activation in memory
• Implications of memory models
• Applications of memory models

The brain (responsible for the behaviour which psychologists study) has two halves,
or ‘lobes’ - the left brain and the right brain. It is generally agreed that each half of the brain
has certain strengths, or functions, which the other half doesn’t have (at least, not to the same
extent).

Module in Human-Computer Interaction (HCI) 67 | P a g e

IRMA T. PLATA
 BRAIN – 2 halves/lobes

Left Lobe Right Lobe

Different strengths/functions
• Involves encoding and recalling knowledge and acting appropriately
• We do not remember everything - involves filtering and processing
• Context is important in affecting our memory
• We recognize things much better than being able to recall things
– The rise of the GUI over command-based interfaces
• Better at remembering images than words
– The use of icons rather than names

A Model of Memory

Memory

Sensory Short term Long term

memory memory memory

‘scratchpad’ stores facts

input buffer
store and meanings

visual or visual or semantically

acoustic acoustic organized

7.4. Revised Memory Model

• Working memory is a subset of Long Term Memory (LTM).

• Items are semantically linked.
• Items in working memory are activated.
• Activation is supplied from other linked chunks and from sensory input.

Module in Human-Computer Interaction (HCI) 68 | P a g e

IRMA T. PLATA
Revised Human Processor Model and Related Memory

Sensory Memory/ Perceptual Store

• Visual and auditory impressions
– Visuospatial sketchpad, phonological loop
• Very brief, but veridical representation of what was perceived
– Details decay quickly (~.5 sec)
– Rehearsal prevents decay
– Another task prevents rehearsal
• Types
– Iconic: for visual stimulus (fireworks trail, finger moving)
– Aural: for auditory stimulus (repeat a question)
– Haptic: touch stimulus
• Buffers for stimuli received through senses
– iconic memory: visual stimuli
– echoic memory: aural stimuli
– haptic memory: tactile stimuli
• Examples
– “sparkler” trail, finger moving
– stereo sound

Module in Human-Computer Interaction (HCI) 69 | P a g e

IRMA T. PLATA
 • Continuously overwritten
Short Term Memory
• Display format should match memory system used to perform task
• New info can interfere with old info
• Scratch-pad for temporary recall
– rapid access ~ 70ms
– rapid decay ~ 200ms
– limited capacity - 7± 2 chunks (chunk formation called “closure”)
• Memory flushing example
– ATM machine provides ATM card to user before cash
• Example
35 x 6
Step 1: 30 x 6
Step 2: 5 x 6
Ans: step 1 + step 2
• Example
212348278493202 (difficult)
0121 414 2626 (easy)
HEC ATR ANU PTH ETR EET
(The Cat Ran Up The Tree)

Long Term Memory

Long-term memory (LTM) contrasts with short-term or working memory,
having strikingly different properties and thus implying two distinct modules within
the one system.
Long-term memory is organized as a network of connected ‘chunks’ of
knowledge. It includes facts

• Organized as a network of connected chunks of knowledge

• active chunks are in the working memory
• activation spreads through the network
– strength of connection
– retrieval of items into WM
• Repository for all our knowledge
– slow access ~ 1/10 second
– slow decay, if any
– huge or unlimited capacity

LTM - semantic network

Module in Human-Computer Interaction (HCI) 70 | P a g e

IRMA T. PLATA
 Storage

LTM
Forgetting
processes

Information
retrieval

Memory Characteristics
• Things move from STM to LTM by rehearsal and practice and by use in
context.

LTM – retrieval
• recall
– information reproduced from memory can be assisted by cues,
e.g. categories, imagery
• recognition
– information gives knowledge that it has been seen before
– less complex than recall - information is cue

The problem with the classic ‘72’

• George Miller’s theory of how much information people can remember

• People’s immediate memory capacity is very limited
• Many designers have been led to believe that this is useful finding for
interaction design

Module in Human-Computer Interaction (HCI) 71 | P a g e

IRMA T. PLATA
 What Present only 7 options on a menu
some
designers Display only 7 icons on a tool bar
get up
to…
Have no more than 7 bullets in a list

Place only 7 items on a pull down menu

Place only 7 tabs on the top of a website page

But this is wrong? Why?

Inappropriate application of the theory

WHY?
People can scan lists of bullets, tabs, menu items till
they see the one they want

They don’t have to recall them from memory having

only briefly heard or seen them

Sometimes a small number of items is good design

But it depends on task and available screen estate

More appropriate application of memory research

• File management and retrieval is a real problem to most users
• Research on information retrieval can be usefully applied
• Memory involves 2 processes
– recall-directed and recognition-based scanning
– Recall is based on context
– Not recognizing neighbour in bus
• Recognition rather than recall
– Browser bookmarks
– GUI interface icons

File Management
• File management systems should be designed to optimize both kinds of
memory processes
• Facilitate existing memory strategies and try to assist users when they get
stuck
• Help users encode files in richer ways
– Provide them with ways of saving files using colour, flagging,
image, flexible text, time stamping, etc
Module in Human-Computer Interaction (HCI) 72 | P a g e
IRMA T. PLATA
 People
Good Bad

Infinite capacity LTM Limited capacity STM

LTM duration & complexity Limited duration STM
Unreliable access to LTM
Error-prone processing
Error-prone processing

Module in Human-Computer Interaction (HCI) 73 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 2. Essay

1. What are the cognitive issues relating to the model of the human processor?
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

2. Discuss Sensory Registers.

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

3. Compare/Contrast : Short Term Memory (STM) vs. Long Term Memory (LTM)
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

4. What can you say about this: “Negative attitude results in slower learning”.
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 74 | P a g e

IRMA T. PLATA
 Name: _____________________________________________________
Course/Yr/Section: ___________________________________________

Quiz 3. Research Work

1. What is your own understanding about Covert attention?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

2. What are the tips in structuring information interface?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

3. What are the techniques in getting the attention of the readers?

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

Module in Human-Computer Interaction (HCI) 75 | P a g e

IRMA T. PLATA
 CHAPTER 8. COGNITIVE PROCESSES – PART 2

Overview

In order to understand the complexity of cognitive processes, it is necessary to have

a broad perception of how humans generally view the world. There is a plethora of
information around us at all moments, allowing decisions to be made about the environment.
The process of taking the information available in through our senses and translating it into
conclusions or actions is made possible by cognition.

Learning Objectives

At the end of this chapter, the student should be able to:

 Compare and contrast procedural and declarative learning;
 Identify the similarities and differences among reading, speaking and
listening as cognitive processes;
 Discuss problem solving, planning, reasoning and decision-making as
cognitive processes involving reflective cognition; and
 Apply the different cognitive processes in the development of a computer-
based/web-based system.

Topics

8.1. Learning
8.2. Reading, Speaking and Listening, problem solving, planning, reasoning
and decision-making

Module in Human-Computer Interaction (HCI) 76 | P a g e

IRMA T. PLATA
 Learning Contents

8.1 Learning
Learning can be considered in two terms:

Learning

Procedural Declarative

Procedural
According to procedural learning we come to any object with questions like
how to use it? How to do something? For example, how to use a computer-based
application?

Declarative
According to declarative learning we try to find the facts about something.
For example, using a computer-based application to understand a given topic.
Jack Carroll and his colleagues have written extensively about how to design
interfaces to help learners develop computer-based skills. A main observation is that
people find it very hard to learn by following sets of instructions in a manual.

8.2. Reading, Speaking and Listening

These three forms of language processing have both similar and different properties.
One similarity is that the meaning of sentences or phrases is the same regardless of the
mode in which it is conveyed. For example, the sentence “Computers are a wonderful
invention” essentially has the same meaning whether one reads it, speaks it, or hears it.
However, the ease with which people can read, listen, or speak differs depending on the
person, task, and context. For example, many people find listening much easier than
reading. Specific differences between the three modes include:

Module in Human-Computer Interaction (HCI) 77 | P a g e

IRMA T. PLATA
 Reading
Written
Listening
language

Forms of
Language
Processing

• Written language is permanent while listening is transient. It is possible to reread

information if not understood the first time round. This is not possible with spoken
information that is being broadcast.
• Reading can be quicker than speaking or listening, as written text can be rapidly
scanned in ways not possible when listening to serially presented spoken works.
• Listening require less cognitive effort than reading or speaking. Children,
especially, often prefer to listen to narratives provided in multimedia or web-
based learning material than to read the equivalent text online.

Incorporating Language Processing in Applications

Many applications have been developed either to capitalize on people’s reading
writing and listening skills, or to support or replace them where they lack or have difficulty
with them. These include:
• Interactive books and web-based material that help people to read or learning
foreign languages.
• Speech-recognition systems that allow users to provide instructions via spoken
commands.
• Speech-output systems that use artificially generated speech
• Natural-language systems that enable users to type in questions and give text-
based responses.
• Cognitive aids that help people who find it difficult to read, write, and speak. A
number of special interfaces have been developed for people who have problems
with reading, writing, and speaking.
• Various input and output devices that allow people with various disabilities to have
access to the web and use word processors and other software packages.

Problem Solving, Planning, Reasoning and Decision-making

Problem solving, planning, reasoning and decision-making are all cognitive
processes involving reflective cognition. They include thinking about what to do, what the
options are, and what the consequences might be of carrying out a given action. They often
involve conscious processing (being aware of what one is thinking about), discussion with
others, and the use of various kinds of artifacts, (e.g., maps, books, and pen and paper). For
example, when planning the best route to get somewhere, say a foreign city, we may ask
others use a map, get instructions from the web, or a combination of these.

Module in Human-Computer Interaction (HCI) 78 | P a g e

IRMA T. PLATA
 Reasoning also involves working through different scenarios and deciding which is
the best option or solution to a given problem. In the route-planning activity we may be
aware of alternative routes and reason through the advantages and disadvantages of each
route before deciding on the best one. Many family arguments have come about because
one member thinks he or she knows the best route while another thinks otherwise.

Reasoning
Reasoning is the process by which we use the knowledge we have to draw
conclusions or infer something new about the domain of interest. There are a number of
different types of reasoning:
• Deductive reasoning
• Inductive reasoning
• Adductive reasoning

Problem solving
If reasoning is a means of inferring new information from what is already known,
problem solving is the process of finding a solution to an unfamiliar task, using the knowledge
we have. Human problem solving is characterized by the ability to adapt the information we
have to deal with new situations. However, often solutions seen to be original and creative.

Module in Human-Computer Interaction (HCI) 79 | P a g e

IRMA T. PLATA
 CHAPTER 9. DESIGN PRINCIPLES

Overview

Learning Objectives

At the end of this chapter, the student should be able to:

• Explain conceptual model;
• Recognize the six design principles that can be applied in HCI and site several
examples on how it will be applied in actual design and implementation of
an interactive systems and real-life situation; and
• Apply the different design principles in the development of project/system.

Topics

9.1. Conceptual Model

9.2. Seven stages of Action as Design Aids
9.3. Design Principles
Visibility
Affordance
Constraints
Mapping
Consistency
Feedback

Module in Human-Computer Interaction (HCI) 80 | P a g e

IRMA T. PLATA
 Learning Contents

9.1. Mental Models and Conceptual Models

User Model, Conceptual Model and System Image

• Design Model - Designer’s conceptual model

• User’s Model - Mental Model
• System Image - Results from physical structure that has been built
• Documentation
• Instructions
• Labels, etc.

Conceptual Model
• “A description of the proposed system in terms of a set of integrated ideas and
concepts about what it should do, behave and look like, that will be
understandable by the users in the manner intended.”
• “The way designers choose to represent the working of the program to the user.”

Module in Human-Computer Interaction (HCI) 81 | P a g e

IRMA T. PLATA
Conceptual Models and Designers
• Designer does not talk directly with user
– Communication via SYSTEM IMAGE
• If SYSTEM IMAGE does not make DESIGN MODEL clear and consistent, then user
will have wrong USER MODEL

Fallacy of Designers

Designers expect USER MODEL to be the same as the

DESIGN MODEL.

Conceptual Model Example:

What Designers Should Aim For?

Match CONCEPTUAL MODEL with MENTAL MODELS of users.

Module in Human-Computer Interaction (HCI) 82 | P a g e

IRMA T. PLATA
Gulfs of Execution and Evaluation

• People DO NOT have difficulty with:

– Understanding of goal
• People DO have difficulty with:
– Determining relationship between intended actions and mechanisms of a
system
– Determining functions of controls
– Determining relationship between specific manipulations and functions in
each controls
– Determining intended actions were done successfully

• Gulf of Execution
– Difference between intentions and allowable actions
• Gulf of Evaluation
– Amount of effort a person must exert to interpret the physical state of the
system and determine how well the expectations and intentions have been
met

Bridging Gulfs of Execution and Evaluation

• Use 7 Stages of Action as basic checklist to bridge gulfs

– Use design principles and good conceptual model

9.2. Seven (7) Stages of Action

Module in Human-Computer Interaction (HCI) 83 | P a g e

IRMA T. PLATA
9.3. Design Principles

(1) Visibility
• Correct parts must be visible
• More visible functions are, more likely users will be able to know what to do
next
• “Out of sight” functions make them difficult to use and find
• Make relevant parts visible
• This critical principle violated again and again in everyday things
– Crucial parts carefully hidden away

Visibility – Bad Example

Module in Human-Computer Interaction (HCI) 84 | P a g e

IRMA T. PLATA
Visibility – Good Example

Visibility Example

Visibility Example

Module in Human-Computer Interaction (HCI) 85 | P a g e

IRMA T. PLATA
(2) Affordance
• The presence and actual properties of a thing
– These properties determine how the things could be used
• Attribute of an object that allows people to know how to use it
• To Afford - to give a clue
• If affordances of a physical object are perceptually obvious, it is easy to
know how to interact with it.

Affordance – Examples

Module in Human-Computer Interaction (HCI) 86 | P a g e

IRMA T. PLATA
Affordance in Software (UI)

Hyperlinks – underlined (web)

Button – 3D (software, web)

(3). Constraints
• “Restricting the kind of user interaction that can take place at a given moment
in time”
• Prevents user from taking the wrong actions

Types of Constraints

Module in Human-Computer Interaction (HCI) 87 | P a g e

IRMA T. PLATA
 Physical

Types of
Logical
Constraints

Cultural

Physical Constraints
• Refer to the way physical objects restrict the movement of things
– E.g. only one way you can insert a key into a lock
• How many ways can you insert a CD or DVD disk into a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a floppy disk into a computer

Logical Constraints
• Exploits people’s everyday common sense reasoning about the way the world
works.
• An example is the logical relationship between physical layout of a device and
the way it works as the next slide illustrates.

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

Designing them More Logically

Module in Human-Computer Interaction (HCI) 88 | P a g e

IRMA T. PLATA
 Cultural Constraints
• Learned arbitrary conventions
like red triangles for warning
• Can be universal or culturally specific

Constraints in UI
Deactivating menu options by shading them.

(4). Mapping
• Relationship between controls and their effects in the world
• Why is this a poor mapping of control buttons?

Module in Human-Computer Interaction (HCI) 89 | P a g e

IRMA T. PLATA
 • 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
– Map configuration onto directionality of actions

(5). 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

When Consistency Breaks Down

• What happens if there is more than one command starting with the
same letter?
– e.g. save, spelling, select, style
• Have to find other initials or combinations of keys, thereby breaking the
consistency rule
– E.g. ctrl+S, ctrl+Sp, ctrl+shift+L
• Increases learning burden on user, making them more prone to errors

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

Keypad Numbers Layout

• A case of external inconsistency

Module in Human-Computer Interaction (HCI) 90 | P a g e

IRMA T. PLATA
 (a) Phones, remote controls

(b) calculators, computer keypads

(6). 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:

Design Guidelines

Module in Human-Computer Interaction (HCI) 91 | P a g e

IRMA T. PLATA
Module in Human-Computer Interaction (HCI) 92 | P a g e
IRMA T. PLATA
 Quiz 1. Essay. Answer briefly but substantially.
1. Discuss Feedback as one of the Principles of Universal Design
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

2. Which interface would be considered most effective? Provide rationale for your
answer.

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

3. Which are Universal? Which are culturally- Specific?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
4. Which controls go with which rings (burners)?

Module in Human-Computer Interaction (HCI) 93 | P a g e

IRMA T. PLATA
 _____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

5. Why is this a Better Design?

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________

Module in Human-Computer Interaction (HCI) 94 | P a g e

IRMA T. PLATA
 CHAPTER 10. UNIVERSAL ACCESS AND “DESIGN FOR ALL”

Overview

Universal access, for example, refers to system designs that can be used by anyone,
anytime, anywhere. It involves both suitable system designs and suitable means of access to
the systems. The term “design for all” has a similar meaning. It indicates a system design that
can be used by all users, regardless of their strengths and weaknesses, their level of expertise,
disabilities and environments.
All products exclude some users, often unnecessarily. In this module, we look
different approaches, methods and practices for the design of interactive systems that can be
used by anyone, anytime, anywhere.

Learning Objectives

At the end of this chapter, the student should be able to:

 Describe and distinguish between accessibility and usability;
 Describe common accessibility and usability issues in website design; and
 Evaluate the accessibility and usability of a website or other interactive
product.

Topics

10.1. Universal Design (“Design for All”)

10.2. Inclusive design
10.3. Accessibility
10.4. Usability

Module in Human-Computer Interaction (HCI) 95 | P a g e

IRMA T. PLATA
 Learning Contents

10.1. Universal Design (“Design for All”)

The term Design for All (DfA) is used to describe a design philosophy
targeting the use of products, services and systems by as many people
as possible without the need for adaptation.

"Design for All is design for human diversity, social inclusion and equality"
(EIDD Stockholm Declaration, 2004).

Universal design (“design for all”) is an inclusive and hands-on approach

which aims to accommodate diversity in the users, applications and
services. The requirement for universal design stems from the impact
of emerging technologies and the different dimensions of diversity
intrinsic to the information society – as well the cultural diversity
between and within different countries.
.

Examples of Design for All

The following examples of Designs for All were presented in the book Designs for
All published in 2008 by Optimastudio with the support of Spain's Ministry of Education,
Social Affairs and Sports (IMSERSO) and CEAPAT:
 Audiobook
 Automatic door
 Electric toothbrush
 Flexible drinking straw
 Goofle
 Low-floor bus
 Trolley case

Principles of Universal Design

The following “Principles of Universal Design” can be found at the website of the
Center for Universal Design, North Carolina State University: www.design.ncsu.edu/cud. The
authors are working group of architects, product designers, engineers and environmental
design researchers who collaborated to establish these principles to guide a wide range of
design disciplines, including environmental, product and communication design.
These seven principles can be applied to evaluate existing designs, guide the design
process and educate both designers and consumers about the characteristic of more usable
products and environments.

Module in Human-Computer Interaction (HCI) 96 | P a g e

IRMA T. PLATA
 Principle one: • The design is useful and marketable to
Equitable Use people with diverse abilities.

Guidelines
 Provide the same means of use for all users: identical whenever possible;
equivalent when not.
 Avoid segregating or stigmatizing any users.
 Provisions for privacy, security, and safety should be equally available to all
users.
 Make the design appealing to all users.

Principle two: • The design accommodates a wide range of

Flexibility in Use individual preferences and abilities.

Guidelines
 Provide choice in methods of use.
 Accommodate right- or left-handed access and use.
 Facilitate the user's accuracy and precision.
 Provide adaptability to the user's pace.

Principle three: • Use of the design is easy to understand,

regardless of the user's experience, knowledge,
Simple and Intuitive language skills, or current concentration level.

Guidelines
 Eliminate unnecessary complexity.
 Be consistent with user expectations and intuition.
 Accommodate a wide range of literacy and language skills.
 Arrange information consistent with its importance.
 Provide effective prompting and feedback during and after task completion.

Principle four: • The design communicates necessary information

Perceptible effectively to the user, regardless of ambient
Information conditions or the user's sensory abilities.

Guidelines
 Use different modes (pictorial, verbal, tactile) for redundant presentation of
essential information.

Module in Human-Computer Interaction (HCI) 97 | P a g e

IRMA T. PLATA
  Provide adequate contrast between essential information and its
surroundings.
 Maximize "legibility" of essential information.
 Differentiate elements in ways that can be described (i.e., make it easy to
give instructions or directions).
 Provide compatibility with a variety of techniques or devices used by people
with sensory limitations.

• The design minimizes hazards and the

Principle five:
adverse consequences of accidental or
Tolerance for Error unintended actions.

Guidelines
 Arrange elements to minimize hazards and errors: most
used elements, most accessible; hazardous elements eliminated, ISOlated,
or shielded.
 Provide warnings of hazards and errors.
 Provide fail-safe features.
 Discourage unconscious action in tasks that require vigilance.

Principle six: Low • The design can be used efficiently and

Physical Effort comfortably and with a minimum of fatigue.

Guidelines
 Allow user to maintain a neutral body position.
 Use reasonable operating forces.
 Minimize repetitive actions.
 Minimize sustained physical effort.

Principle seven: • Appropriate Size and space is provided for

approach, reach, manipulation, and use
Size and Space for regardless of user's body Size, posture, or
Approach and Use mobility.

Guidelines
 Provide a clear line of sight to important elements for any seated or standing
user.
 Make reach to all components comfortable for any seated or standing user.
 Accommodate variations in hand and grip Size.

Module in Human-Computer Interaction (HCI) 98 | P a g e

IRMA T. PLATA
  Provide adequate space for the use of assistive devices or personal
assistance.

10.2. Inclusive Design

 The British Standards Institute (2005) defines inclusive design as: 'The design of
mainstream products and/or services that are accessible to, and usable by, as
many people as reasonably possible ... without the need for special adaptation
or specialized design.'
 Every design decision has the potential to include or exclude customers.
Inclusive design emphasizes the contribution that understanding user diversity
makes to informing these decisions, and thus to including as many people as
possible. User diversity covers variation in capabilities, needs, and aspirations.

Poor Inclusive Design

Examples of poor inclusive design are everywhere. Many products present unnecessary
difficulties for many users and thus they are often 'disabled by design'.

When you look closely at everyday products, you will quickly begin to notice where people
may have difficulties using them. Many of those difficulties will be caused by design decisions
made without considering the user. As such, their causes are often trivial, but fortunately the
solution may often be trivial as well. For example, if an on/off button is difficult to operate
because it is too small, then replace it with a larger one.

1. A typical household’s collection of remote controllers – all looking very different!

2. Helpful color coding of sockets and connectors
3. The control on the left clearly has a ‘top’ and a ‘bottom’; not so the one on the right
4. Keyboard and mouse connectors – color coded, but it might have been better to
have the symbols alongside the sockets
5. Is the coffee machine ‘on’ when the shaded bar is out – or pressed down.

10.3. Accessibility

Accessibility is about design for everyone. It is about making the information and
services that you provide online available to users, irrespective of age and ability.

Module in Human-Computer Interaction (HCI) 99 | P a g e

IRMA T. PLATA
 An accessible system design ensures that system functions can be accessed by users
with disabilities or those working in extreme circumstances.

A popular choice in the course for least accessible website ever is Yvette’s Bridal
Forum

Examples of accessibility problems

If a website has not been designed to accommodate flexibility, use of access
technology such as magnification, screen readers or Braille display can cause a number of
problems. Here are some problems related to accessibility.

 Some websites only fix the background color and leave the text color to default.
 Sometimes developers assume that a particular font and font size will be used, and
put text in frames with no scroll bars.
 Forgetting to include alternative texts descriptions for images, graphical links or
buttons so that they are accessible to visually impaired users who are using a screen
reader.

10.4. Usability

In general terms, a usable system design is one which ensures that the functions are
presented in such a way that they can be used by users.
Usability is defined by the International Standards Organization (ISO) as

…the effectiveness, efficiency and satisfaction with which specified users achieve
specified goals in particular environments.

If a user is unable to find what they want within a reasonable time, then your site
needs to be re-examined. Usability is a huge subject and there are plenty of resources
dedicated to this topic. Jacob Nielsen’s website, for example, is very useful: www.useit.com

User diversity
In user-centered design, the role of the use is central. In traditional methods like
Waterfall, however, emphasis is more upon the technology and on signing off individual stages
in the design process.

Module in Human-Computer Interaction (HCI) 100 | P a g e

IRMA T. PLATA
 The user has a role at each stage of user-centered design. Task analysis, for example,
involves the user in carrying out the tasks that the new system is intended to support; and the
requirements specification forms the basis for the development and evaluation of a prototype
system by the users.
In the real world, there is considerable variance within a group users. This variance
should be taken into account: either by providing a wide range of designs (‘design for all’) or
by providing alternative means of access to the new system (e.g. ‘universal access’). These
solutions can be supported by the judicious use of adaptable and adaptive systems to provide
greater variance in the design solutions available.
Moreover, as users become more expert in the use of a system, they will need faster
methods with which to access the features of that system. Experienced users tend to prefer
shortcuts such as keyboard commands, rather than working through a set of menus.
Another aspect is ageing, as people get older, they tend to accumulate minor
disabilities, including:
 Sensory problems (vision or hearing),
 Cognitive difficulties (perception, concentration or memory)
 Psychomotor skill deficiencies ( hand or arm movement or posture)

Module in Human-Computer Interaction (HCI) 101 | P a g e

IRMA T. PLATA
 Quiz
1. For this assessment, select one of the following products to carry out an evaluation
to see if it accommodates the seven principles of universal design satisfactorily.
 Television
 DVD player
 Mobile phone
What design features do you like? What features do you dislike?
 All the problems that you encountered
 The design features that you like or dislike.

2. The population is getting older we are living longer, and these trends are due to
continue, How do you see the future, of inclusive design and its counterparts such as
universal design? What is going to affect companies’ design practices?
3. Is there a gap between usability and accessibility?

Module in Human-Computer Interaction (HCI) 102 | P a g e

IRMA T. PLATA
References:

Sears, Andrew and Jacko Julie A. (Eds). Human Computer Interaction Fundamentals. CRC
Press, Taylor and Francis Group. 2009.

Dix, Alan, Finlay, Janet, Abowd, Gregory, and Beale, Russell. Human-Computer Interaction. 3rd
Edition 2007.

Smith-Atakan, Serengul. Human-Computer Interaction. Middlesex University Press, a division

of Thomson Learning. 2006.

Shneiderman, Ben. Designing the User Interface Ben 3rd Edition 2008

Vincent Aleven. Human-Computer Interaction Institute (HCII), United States, Pennsylvania,

Pittsburgh 2010-08-26 Carnegie Mellon University. 2010.

Hussain, Imran. Human Computer Interaction (CS408). University of Management and

Technology (UMT). Copyright Virtual University of Pakistan. (2010).

Preece, Jenny. Human Computer Interaction

Feo, Roberto & Hurtado, Rosario & Optimastudio Diseños para Todos/Designs for AllMadrid
2008, ISBN 978-84-691-3870-0 Downloadable free version of Designs for All. Retrieved 2013-
07-

Module in Human-Computer Interaction (HCI) 103 | P a g e

IRMA T. PLATA