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.
Prepared by: IRMA T. PLATA

TABLE OF CONTENTS MODULE 4. COGNITIVE FRAMEWORK

4.1 Cognitive Psychology
MODULE 1. INTRODUCTION TO HUMAN- 4.2 Cognition
COMPUTER INTERACTION 4.3 Modes of Cognition
1.1 Computers - Experiential cognition
1.2 Fundamental Truths about Computers - Reflective cognition
1.3 Nature of humans and computers 4.4 Human Information Processing Model
1.4 Introduction to HCI 4.5 Attention and Memory as extensions of
1.5 Role of HCI Human Information Processing Model
1.6 Definition of HCI
1.7 Significance of HCI MODULE 5. HUMAN INPUT-OUTPUT CHANNELS –
1.8 Software engineering and HCI PART 1
1.9 Different Case Scenario 5.1. Input output Channels
5.2 Vision
MODULE 2. GOALS & EVOLUTION OF HUMAN- 5.3 Visual Perception
COMPUTER INTERACTION 5.4 Perceiving brightness
2.1. Goals of HCI 5.5 Perceiving color
Effectiveness, Efficiency, Safety, Utility,
Learnability, and Memorability MODULE 6. HUMAN INPUT-OUTPUT CHANNELS-
2.2. Evolution of HCI PART 2
6.1. Color Theory
MODULE 3. DISCIPLINE OF HUMAN COMPUTER 6.2 Color Harmony
INTERACTION 6.3. Qualities of Colors
3.1. Quality 6.4. Guidelines in choosing colors
3.2. Interdisciplinary nature of HCI
Human-related MODULE 7. COGNITIVE PROCESS – PART 1
Computer-related 7.1. Attention
7.2. Models of attention

IRMA T. PLATA 1|Pag e

Module in HCI
ISUE-ICT-IM-092
7.3. Memory
Sensory
Short term memory
Long term memory
7.4 Revised Memory Model

MODULE 8. COGNITIVE PROCESSESS- PART 2

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

MODULE 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

MODULE 10. UNIVERSAL ACCESS AND “DESIGN

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

IRMA T. PLATA 2|Pag e

Module in HCI
ISUE-ICT-IM-092
 technology on humans and reasons for
these adverse effect;
6. Describe the nature of humans and
MODULE 1. INTRODUCTION TO HUMAN- computers;
COMPUTER INTERACTION 7. Contrast Software engineering from HCI;
and
8. Evaluate a Case where Computer and
Overview Information are involved.
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 Learning Contents
of different users is very broad. Computers are no
more just on your table. Now computer has Computers are Everywhere
become a tool of everyday use. They are • Computer invasion has started
everywhere, at everyplace and in everything. They • Traditional notion of computers
are penetrating in every aspect of our life. They are • Computers are everywhere
taking our lives. • Computers will annoy, infuriate, and even
Now it is twenty first century and during the kill
past thirty years technology has advanced to such
an extent that almost everyone come in contact Fundamental Truths about Computers
with computers in one way or another. Look • Computers are ubiquitous (everywhere)
around yourself how many things are there which – Everything we use is equipped
have some kind of computer embedded in them? with computer technology
Think about a minute about what you use in a • and so is their characteristically poor way
typical day; cell phone, ATM, VCR, remote control, of communicating and behaving
ticketing machine, digital personal organizers, – As we saw in plane example
calculator, watch, photocopier, toaster, bank, air • Communication was precise and exacting
conditioner, broadcasting, satellite, microwave, while still being tragically wrong
medical equipment, factories, companies….the list • Course Deviation Indicator could have
is endless. Computers are everywhere. We are told they pilot that Romeo was the wrong
surrounded by computers. Now they are part of fix but it choose not too
our everyday life. • Computers are unconcerned only cared
about its internal working
• They tell but do not inform.
• They may guide us with precision but they
Learning Objectives do not guide us where we want to go.
At the end of this module, the students should be • Computers are invading every aspect of
able to: modern life, but their communication is
1. Analyze the different case scenario poor
presented in relation to HCI;
2. Determine the role of HCI in interface So who is to be blamed?
designing; Can we Say “Human Error on part of the pilot”
3. Define HCI; Or can we blame the computer for it?
4. Discuss and argue about why HCI is
important with reference to the way in Humans vs. Computers
which technology has developed; Understanding Nature of Computers and
5. Describe the significance of HCI, Humans
particularly adverse impact of computer

IRMA T. PLATA 3|Pag e

Module in HCI
ISUE-ICT-IM-092
 each other’s. For example a store manager was
• 2 species: Human vs. Computers dealing with all the workers performing their
Humans (aka Homo Sapiens) different duties in the store. Someone was
• Complex registering the new arrivals of products, someone
• Intelligent was numbering the products and many more…and
• Animate store manager has to interact with all these human
• Free will beings. If someone was a salesperson, he used to
• Range of emotions interact with different clients and used to deal with
• Make mistakes them according to their mood and desire. He could
judge their mood with their tone, their attitude
“Most interesting and fascinating specie on and with their body language. He could provide
planet” answers relevant to their questions.

Human beings are the most interesting and But now in this age of information technology
fascinating specie on planet. They are the most we are expecting computers to mimic human
complex living being on the earth. It has very much behavior e.g. E-Commerce systems, now there is
diversity in its nature. It is intelligent in its deeds. no need for a salesperson. Web sites are behaving
Human beings think and decide according to their as a salesperson or as a shopping mall. That is now;
own will. Yes, they are free in nature. They like a dumb, unintelligent and inanimate object will
freedom. They think on a problem dynamically and perform the complex task which was performed by
they can find many solutions that may not exist some human being.
before. They can invent. They are not only rational
but they also have emotions. They also think Once Upon a Time…
emotionally. They act emotionally. And fortunately • Humans were responsible for performing
or unfortunately they make mistakes. They make tasks in business world
mistakes which some time become fatal for them • Including interacting with other human
and some time they become blessing for them. beings
• Example: salesperson
Computer Specie • Salesperson would judge customer
• Dumb • Tone
• Unintelligent • Attitude
• Inanimate • Body language
• Only do what they are told to do • Understand questions
• Don’t make mistakes • Provide relevant answers

On contrast, computers are the invention of Now we’re ..

human being. They are also complex but they are • Expecting computers to mimic human
also pretty dumb. It can also think but it can’t think behavior, e.g. e-commerce systems
on its own will, it thinks how it has been directed • Asking a DUMB, INANIMATE object to
to think. No doubt its speed is marvelous. It does perform complex tasks that humans used
not tire. It is emotionless. It has no feelings, no to perform
desires. It works how it has been commanded to • And perform with same level of
work. And they do not make mistakes. EFFICIENCY, EFFECTIVENESS and
ACCURACY as a human
Before penetration of computers in our daily
life, human beings were performing their tasks at HCI and Software Engineers
their on responsibility. In a business domain • Software engineers focus on internal
human beings were dealing and interacting with workings of software

IRMA T. PLATA 4|Pag e

Module in HCI
ISUE-ICT-IM-092
 • 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
Guide Questions: Answer the following:
domain. Formal methods have been developed to
1. What are the significance of Human Computer
represent data, architectural, and procedural
aspects of a software system. Software Interaction (HCI)
engineering approaches deal with managerial and 2. Discuss and argue about why Human computer
financial issues well. Software engineering Interaction (HCI) is important with reference to
methodologies are useful for specifying and the way in which technology has developed
building the functional aspects of a software during past forty years.
system. 3. Compare and contrast human species from
Human-computer interfaces emphasize
computer specie.
developing a deep understanding of user
characteristics and a clear awareness of the tasks a 4. Explain the definition of HCI.
user must perform. HCI specialists test design ideas 5. Explain the different fundamental truths about
on real users and use formal evaluation techniques computer.
to replace intuition in guiding design. This constant
reality check improves the final product. Computer + Information

Role of HCI
Here comes the role of HCI. Human designed
the interfaces we hate; human continue to use
dysfunctional machines even as the awkward
interfaces strain their eyes, ache their backs, and
ruin their wrist tendons. HCI plays a role to bridge
up the gape between the interfaces of machines
and human understanding that we have seen in
Sydney Olympics
the previous examples.
• Bruce Lindsay Maguire vs Sydney
Organising Committee for the Olympics
Games (SOCOG)
HCI – A Formal Definition
• Allegation: SOCOG in breach the Disability
“Human-Computer Interaction is a discipline
Discrimination Act 1992 by failing to make
concerned with the design, evaluation and
accessible to him key parts of its web site
implementation of interactive computing systems
• vast majority of organizations with a web
for human use and with the study of major
site must ensure that their web site is
phenomena surrounding them”
(within certain limits) accessible by
-ACM/IEEE
disabled persons

Riddles for the Information Age

IRMA T. PLATA 5|Pag e

Module in HCI
ISUE-ICT-IM-092
 • Computer + Alarm Clock
• Computer + Camera
• Computer + Car
• Computer + Warship
• Computer + Airplane

Case #1
What do you get when you cross a computer • Course deviation indicator needle is
with an Airplane? 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
Case #2
What do you get when you cross a computer
In December 1995, American Airlines Flight with a Camera?
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 Here is a riddle for the information age: what
correct. Unfortunately, instead of “ROZO”, the do you get when you cross a computer with a
pilot selected “ROMEO”, 132 miles to the camera? Answer: A computer! Thirty years ago, a
northeast. The jet was southbound descending 35mm Pentax Model H, had a small battery in it
into a valley that runs north-south, and any lateral that powered the light meter. Like a wristwatch
deviation was dangerous. Following indications on battery, I merely swapped in a new one every
the flight computer, the pilots began an easterly couple of years. Fifteen years ago, an electronic
turn and slammed into a granite peak at 10,000 camera, a 35mm Canon T70, used two AA batteries
feet. One hundred and fifty two passengers and all to power its rather simple exposure computer and
eight crewmembers aboard perished. Four its automatic film drive. It had a simple On/Off
passengers survived with serious injuries. switch, so that the batteries wouldn’t wear down
needlessly.
Computer + Airplane Five years ago, a first-generation digital
• NTSB investigates: ‘human error’ camera, had a similar On/Off switch, but this time
• Pilot selected the wrong radio navigation it had the smarts of a rudimentary computer inside
fix 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

IRMA T. PLATA 6|Pag e

Module in HCI
ISUE-ICT-IM-092
put into Rec mode to take pictures and Play mode That old mechanical Pentax had manual
to view them on its small video display. focusing, manual exposure, and manual shutter-
The newest camera, a Nikon CoolPix 900, is a speed, yet it was far less frustrating to use than the
third-generation digital camera and the smartest fully computerized modern Nikon CoolPix 900,
yet. In fact, it has a full-blown computer that which has automatic focusing, exposure, and
displays a Windows-like hourglass while it “boots shutter-speed. Camera may still take pictures, but
up”. Like some mutant fish with extra heads, its it behaves like a computer instead of a camera.
On/Off switch has now grown to have four
settings: Off/ARec/MRec/Play. “ARec” means
CASE #3
“automatic record” and “MRec” means “manual
What do you get when you cross a computer
record.” as far as I can figure out how to turn it on
without a lengthy explanation. with an alarm clock?
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 A computer! I just purchased an expensive
simultaneously running the zoom, charging the new clock-radio for my bedroom, a JVC FS-2000. It
flash, and energizing the display has caused it to has a very sophisticated computer brain, and
run out of power. In self-defense, it suspends its offers high fidelity, digital sound, and lots of
ability to actually take pictures. But I don’t know features. It wakes me up at a preset time by playing
that because I’m liking through the viewfinder, a compact disc, and it has the delicacy and
waving my arms and saying “Smile” and pressing intelligence to slowly fade up the volume when it
the shutter button. The computer detects the begins to play at six o’clock in the morning. This
button press, but it simply cannot obey. In a feature is really pleasant and quite unique, and it
misguided effort to help out, the power compensates for the fact that I want to hurl the
management program instantly takes over and infuriating machine out the window.
makes an executive decision: shed load. It shuts It’s very hard to tell when the alarm is armed,
down the power-greedy LCD video display. I look so it occasionally fails to wake me up on a Monday
at the camera quizzically, wondering why it didn’t and rousts me out of bed early on a Saturday. Sure,
take the picture, shrug my shoulders, and let my it has an indicator to show the alarm is set, but that
arm holding the camera drop to my side. But as doesn’t mean it’s useful. The clock has a
soon as the LCD is turned off, there is more battery sophisticated alphanumeric liquid crystal display
power available for other systems. The power (LCD) that displays all of its many functions. The
management program senses this increase and presence of a small symbol in the upper left corner
realizes that it now has enough electricity to take of the LCD indicates the alarm is armed, but in a
pictures. It now returns control to the camera dimly lit bedroom the clock symbol visible, but the
program, which is waiting patiently to process the backlight comes on when the CD or radio is
command it received when I pressed the shutter explicitly turned on. There’s a gotcha, however, as
button, and it takes a nicely auto-focused, well- the alarm simply won’t ever sound while the CD is
exposed, high-resolution digital picture of my explicitly left on, regardless of the setting of the
kneecap. alarm. It is this paradoxical operation that
frequently catches me unaware.

IRMA T. PLATA 7|Pag e

Module in HCI
ISUE-ICT-IM-092
 It is simple to disarm the alarm: Simply press abnormal situations. Unfortunately, these
the “Alarm” button once, and the clock symbol sometimes backfire. In some early models, if the
disappears from the display. However to arm it, I fuel level in the gas tank got very low---only a
must press the “Alarm” button exactly five times. gallon or so remaining---the centrifugal force of a
The first time I press it, the display shows me the sharp turn could cause the fuel to collect in the side
time of the alarm. On press tow, it shows the time of the tank, allowing air to enter the fuel lines. The
when it will turn the sound off. On press three, it computer sensed this as a dramatic change in the
shows me whether it will play the radio or the CD. incoming fuel mixture, and interpreted it as a
On press four, it shows me the preset volume. On catastrophic failure of the injection system. To
press five, it returns to the normal view, but with prevent damage, the computer would shut down
the alarm now armed. But with just one additional the ignition and stop the car. Also to prevent
press, it disarms the alarm. Sleepy, in a dark damage, the computer would not let the driver
bedroom, it is quite difficult to perform this little restart the engine until the car had been towed to
digital ballet correctly. The alarm clock may still a shock and serviced
wake me up, but it behaves like a computer. When owners of early Boxsters first discovered
By contrast, my old non-computerized alarm this problem, the only solution Porsche could
clock woke me up with a sudden, unholy buzzing. devise was to tell them to open the engine
When it was armed, a single red light glowed. compartment and disconnect the battery for at
When it was not armed, the red light was dark. I least five minutes, giving the computer time to
didn’t like this old alarm clock for many reasons, forget all knowledge of the hiccup. The sports car
but at least I could tell when it was going to wake may still speed down those too-lane black top
me up. roads, but now, in those turns, it behaves like a
Because it is far cheaper for manufacturers to computer.
use computers to control the internal functioning
of devices than it is to use older, mechanical CASE #5
methods, it is economically inevitable that What do you get when you cross a computer
computers will insinuate themselves into every with a warship?
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.

CASE #4
What do you get when you cross a computer
with a car?
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
A computer! Porsche’s beautiful new high-
operation---which resulted in a complete crash of
tech spots car, the Boxster, has seven computers
the entire shipboard control system. Without the
in it to help manage its complex systems. One of
computers, the engine halted and the ship sat
them is dedicated to managing the engine. It has
wallowing in the swells for two hours and fifty-five
special procedures built into it to deal with

IRMA T. PLATA 8|Pag e

Module in HCI
ISUE-ICT-IM-092
minutes until it could be towed into port. Good C. C. Shows preset volume
thing it wasn’t in a war zone. D. D. Shows light
What do you get when you cross a computer 3. The following are characteristics of human
with a warship? Admiral Nimitz is rolling in his species except:
grave! Despite this setback, the Navy is committed A. They think emotionally
to computerizing all of its ships because of the B. They think and decide in their own will
manpower cost savings, and so deflect criticism of C. They are free
this plan, it has blamed the “incident” on human D. They are pretty dumb
error. Because the software creation process is out 4. Which is a characteristic of computer
of control, the high-tech industry must either bring specie?
its process to heel or it will continue to put the A. Its speed is marvelous
blame on ordinary users while ever-bigger B. It has emotions
machines sit dead in the water C. It makes mistakes
So here you saw the result of integrating D. It can think on its own
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.

Activity 2: 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?

Quiz
1. Computer + Camera: The newest camera,
which is very power-hungry and provided
with a sophisticated computer program.
A. 35mm Pentax Model H
B. 35mm Canon T70
C. Panasonic PalmCam
D. Nikon CoolPix 900
2. Computer + Alarm Clock: The functions of
the alarm button are the following, except:
A. Shows time
B. B. Plays radio or CD

IRMA T. PLATA 9|Pag e

Module in HCI
ISUE-ICT-IM-092
 efficiency are self-evident and ubiquitous
objectives. The promotion of safety in relation to
MODULE 2. GOALS & EVOLUTION OF computer systems is of paramount importance in
HUMAN-COMPUTER INTERACTION 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
Overview annoying to users, as you can understand from
The term Human Computer Interaction (HCI) above described incidents.
was adopted in the mid-1980s as a means of
describing this new field of study. This term Human-Computer Interaction
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 module, the students The Shopping Analogy
should be able to: • Types of experiences
 Describe the goals of HCI; – Good or Bad
 Identify and discuss the different • Every user is unique
Usability goals; – Experiences are unique
 Discuss the Evolution of HCI
 Define quality from different perspectives At a every point in life, human beings are
 Describe the relationship of Usability and experiencing. These experiences can be both good
Quality and bad.
Every person, every human being is different.
In the same way that every person’s DNA is
different, every person’s fingerprint is different,
Learning Contents the retinal patterns on the eye are different, and
Goals of HCI experiences are also different.
The goals of HCI are to produce usable and To explain the concept of the user experience,
safe systems, as well as functional systems. let’s take an example – shopping and buying, which
These goals can be summarized as ‘to develop or is a very simple analogy: We’ve all done shopping.
improve the safety, utility, effectiveness, When you visit a shop with a specific goal in mind.
efficiency and usability of systems that include What happens: Can you find what you need? Is the
computers’ (Interacting with computers, 1989). interior and exterior nicely designed? Are the staff
In this context the term ‘system’ derives from helpful and courteous? Is the atmosphere
systems theory and it refers not just to the pleasant? etc. What happens: If you can’t find
hardware and software but to the entire what you want? Staff are not present, unhelpful or
environment---be it organization of people at rude? You can’t find the pay counter? The
work at, home or engaged in leisure pursuits--- atmosphere is unpleasant? The shop is dirty and
that uses or is affected by the computer untidy? The shop is not nicely designed? The shop
technology in question. Utility refers to the is not open!!? The result is an experience – either
functionality of a system or, in other words, the good or bad
things it can do. Improving effectiveness and

IRMA T. PLATA 10 | P a g e
Module in HCI
ISUE-ICT-IM-092
User Experience – A Definition
• The user experience is the holistic Usability & User Experience
combination of everything that the user
– Sees
– Touches
– Feels
– Interacts with User Experience
Usability
Goals
Good and Bad Experiences

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
Usability - Abstract-level Constituents their everyday life. More specifically, usability is
broken down into the following goals:
• Effective to use (effectiveness)
• Efficient to use (efficiency)
• Safe to use(safety)
• Have good utility (utility)
• Easy to learn (learnability)
• Easy to remember how to use
(memorability)
Usability
Ensuring that interactive products are easy to Effectiveness
learn, effective to user and enjoyable from the It is a very general goal and refers to how good
user’s perspective a system at doing what it is supposed to do.
• iDrive system being effective since it
would perform all the tasks
Perspective? • Porsche example the system was effective
• People perceive the same item in enough to detect the high intake of Air in
different ways Fuel system
• What do you see in the Image? • 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

IRMA T. PLATA 11 | P a g e
Module in HCI
ISUE-ICT-IM-092
Efficient “are you sure you want to delete all these
• The way system supports its users in messages?”)
carrying out their tasks
– Talk about the three systems Utility
– Does the product help users • System providing the right kind of
sustain a high level of functionality so that the user can do what
productivity? they want

Safety It refers to the extent to which the system

• Protecting the user from dangerous provides the right kind of functionality so that user
conditions and undesirable situation can do what they need or want to do. An example
– Which of the Cases we discussed of a system with high utility is an accounting
earlier you think was the most software package providing a powerful
unsafe? computational tool that accountants can use to
• Plane work out tax returns. An example of a system with
low utility is a software drawing tool that does not
In relation to the first ergonomics aspect, it allow users to draw free hand but forces them to
refers to the external conditions where people use a mouse to create their drawings, using only
work. For example, where there are hazardous polygon shapes.
conditions---like x-rays machines or chemical
plants---operators should be able to interact with Learnability
and control computer-based system remotely. It refers to how easy a system is to learn to
The second aspect refers to helping any kind of use. It is well known that people do not like
user in any kind of situation avoid the danger of spending a long time learning how to use a
carrying out unwanted action accidentally. It also system. They want to get started straight away
refers to the perceived fears users might have of and become competent at caring out tasks
the consequences of making errors and how this without too much effort. This is especially so far
effects their behavior to make computer-based interactive products intended for everyday use
system safer in this sense involves: (for example interactive TV, email) and those
• Preventing the user from making serious used only infrequently (for example, video
error by reducing the risk of wrong conferencing) to certain extent, people are
keys/buttons being mistakenly activated prepared to spend longer learning more complex
(an example is not placing the quit or system that provide a wider range of
delete-file command right next to the functionality (for example web authoring tools,
save command on a menu.) and word processors) in these situations, CD ROM
• Providing users with various means of and online tutorials can help by providing
recovery should they make errors. Save interactive step by step material with hands-on
interactive systems should engender exercises. However many people find these
confidence and allow the users the tedious and often difficult to relate to the tasks
opportunity to explore the interface to they want to accomplish. A key concern is
carry out new operations. determining how much time users are prepared
to spend learning a system. There seems little
Other safety mechanism include undo point in developing a range of functionality if the
facilities and confirmatory dialog boxes that give majority of users are unable or not prepared to
users another chance to consider their intentions spend time learning how to use it.
(a well-known used in email application is the
appearance of a dialog box after the user has Memorability
highlighted the messages to be deleted, saying:

IRMA T. PLATA 12 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • How easy the system is to remember • Helpful
once learn • Motivating
• Riding a bicycle • Aesthetically Pleasing
It refers to how easy a system is to • Supportive to Creativity
remember how to use, once learned. This is • Rewarding
especially important for interactive systems that • Emotionally Fulfilling
are used infrequently. If users haven’t used a
system or an operation for a few months or The goals of designing interactive products
longer, they should be able to remember or at to be fun, enjoyable, pleasurable, and
least rapidly be reminded how to use it. Users aesthetically pleasing and so on are concerned
shouldn’t have to keep relearning how to carry primarily with the user experience. By this we
out tasks. Unfortunately, this tends to happen mean what the interaction with the system feels
when the operation required to be learning are like to the users. This involves, explicating the
obscure, illogical, or poorly sequenced. Users nature of the user experience in subjective
need to be helped to remember how to do tasks. terms. For example, a new software package for
There are many ways of designing the interaction children to create their own music may be
to support this. For example, users can be helped designed with the primary objectives of being
to remember the sequence of operations at fun and entertaining. Hence, user experience
different stages of a task through meaningful goals differs from the more objective usability
icons, command names, and menu options. Also, goals in that they are concerned with how user
structuring options and icons so they are placed experience an interactive product from their
in relevant categories of options (for example, perspective, rather than assessing how useful or
placing all the drawing tools in the same place on productive a system is from its own perspective.
the screen) can help the user remember where The relationship between two is shown in figure.
to look to find a particular tool at a given stage of Recognizing and understanding the trade-offs,
a task. between usability and user experience goals, is
important. In particular, this enables designers to
“Don’t make me THINK, is the key to a become aware of the consequences of pursuing
usable product” different combinations of them in relation to
fulfilling different users’ needs. Obviously, not all
of the usability goals and user experience goals
User Experience Goals apply to every interactive product being
The realization that new technologies are developed. Some combination will also be
offering increasing opportunity for supporting incompatible. For example, it may not be possible
people in their everyday lives has led researchers or desirable to design a process control system
and practitioners to consider further goals. The that is both safe and fun.
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

IRMA T. PLATA 13 | P a g e
Module in HCI
ISUE-ICT-IM-092
 Quality is meeting the (stated) requirements of
the customer- now and in the future
(Mike Robinson)

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)

Totality of characteristics of an entity that bear on

its ability to satisfy stated and implied needs
(ISO 8402 : 1994)

Product
Usability and Quality
• A generic term that refers to
• What is Quality? – Goods
– You like a product – Services
– Does not break down • Failure to meet quality requirements in
either dimension can have serious
negative consequences
Software Quality – A Definition
• The extent to which a software product
exhibits these characteristics Evolution and History of HCI
– Functionality
– Reliability Groundwork for HCI: 1960s – Early 1970s
– Usability • Man-machine Symbiosis" (Licklider, 1960)
– Efficiency – Symbiotic relationship
– Computers would contribute in
– Maintainability
creative process
– Portability
• “Augmentation of human intellect”
Definitions: (Engelbart, 1963)
Quality is conformance to specifications • SketchPad system at MIT (Sutherland,
(British Defense Industries Quality Assurance Panel) 1963)
– Ideas for displaying, manipulate,
Quality is conformance to requirements copy pictures
(Philip Crosby) – Use of input devices
• Parallel developments
Quality is fitness for purpose or use – Interactive graphic interfaces
(Juran) – Interactive text processing
systems
Quality is a predictable degree of uniformity and – Line and display editors
dependability, at low cost and suited to the – WYSIWYG editors
market – Computer graphics (CAD/CAM)
(Edward Deming)

Difference in Approach: Late 1970s and 1980s

Quality is synonymous with customer needs and
• US
expectations
(R J Mortiboys)
– How computers enrich lives

IRMA T. PLATA 14 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – Facilitating problem-solving and 2. For something to be _____ means that the
creativity user can actually achieve the task they want
– Empirical evaluation to.
– Psychology of programming A. Useful
• Europe B. Usable
– Theories of HCI C. Good experience
– Methods of design D. Bad Experience
– Formalize usability
3. Case: An automated teller machine
(ATM) for a user wanting to withdraw
Early Days of HCI
money. The ATM is _____ because the
• Early days of computing computers were
user can achieve their task; they can
used and operated by Engineers /
withdraw money.
Technical Staff only
A. Useful
• 1970’s: technology explosion
B. Usable
– Notion of user-interface arises,
C. Useless
a.k.a. Man-Machine Interface
D. Efficient
(MMI)
4. The ATM is _____ for most users
– User-interface became a concern
because it typically takes only a few
for system designers and
seconds and a few obvious key presses
researchers
to withdraw their money.
– Growing realization
A. Useful
– Success depended on improving
B. Usable
physical aspect of UI
C. Useless
– ‘user friendly’ was often just lip
D. Efficient
service and making UI
5. The amazon.com website for a user
aesthetically pleasing
wanting to buy a pet snake.
A. Useful
‘Birth of HCI’
B. Usable
• HCI’ term adopted in mid-1980s
C. Useless
• Another HCI definition
D. Efficient
– A set of processes, dialogues, and actions
6. When hazardous conditions like x-rays
through which a human user employs and
interacts with a computer. machines or chemical plants –
operators should be able to interact
with and control computer-based
system remotely to practice ___.

Quiz. Multiple Choice. Write the letter A. Effectiveness

only. B. Reliability
1. For something to be ______ it must allow C. Safety
the users to achieve the task they want to D. Utility
easily and enjoyably. 7. Mobile phones providing different
A. Useful features such as text, call, video,
B. Usable music, download, calculator, locator
C. Good experience that users can use.
D. Bad Experience A. Effectiveness
B. Reliability
C. Safety

IRMA T. PLATA 15 | P a g e
Module in HCI
ISUE-ICT-IM-092
 D. Utility
8. Users shouldn’t have to keep
relearning how to carry out tasks.
A. Utility
B. Learnability
C. Memorability
D. Efficiency
9. It refers to how good a system at doing
what it is supposed to do.
A. Effectiveness
B. Efficiency
C. Utility
D. Learnability
10. It refers to the way a system supports
users in carrying out their tasks.
A. Effectiveness
B. Efficiency
C. Utility
D. Learnability

IRMA T. PLATA 16 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • HCI concerned with:
– Joint performance of tasks by
humans and machines
MODULE 3. DISCIPLINES OF HCI – Structure of communication
between human and machine
– Human capabilities to use
machines
Overview – Algorithms and programming of
HCI understands the Complex Relationship interfaces
between Human and Computers, which are two – Engineering concerns in designing
distinct ‘Species’. Successful Integration is and building interfaces
dependent upon a better understanding of both – Process of design, specification
Species. Hence HCI borrows and establishes its and implementation
roots in Disciplines concerned with both. – Design trade-offs
• Various aspects
– Science
• Human capabilities to use
machines
Learning Objectives
– Engineering
At the end of this module, the students should
• Building interfaces
be able to:
– Design
• Discuss the different disciplines involved
• Design tradeoffs
in HCI
• Interconnect the disciplinary nature of
HCI

Learning Contents

What is HCI?
• HCI is a large interdisciplinary area
• Emerging as specialty concern within
several disciplines, each with different Interdisciplinary Nature of HCI
emphases • HCI is understanding the Complex
– Computer science (application Relationship between Human and
design and engineering of human Computers
interfaces) • Two Distinct “Species”
– Psychology (the application of • Successful Integration is dependent upon
theories of cognitive processes the a better understanding of both Species
and the empirical analysis of user • Hence HCI borrows and establishes its
behavior) roots in Disciplines concerned with both
– Sociology and anthropology • HCI has roots in many disciplines
(interactions between technology, • HCI is inter-disciplinary in nature
work, and organization)
– Industrial design (interactive
products)

IRMA T. PLATA 17 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Impact of a member on group’s
Cognitive Social activities and structure
• Relationship between the
Psychology Linguistics
Organizational structure and activities of
different groups
Anthropology • Informs designers how computers affect
Ergonomics working practices
HCI &
Ergonomics or Human Factors
Philosophy • To define and design tools and various
Design artifacts for different work, leisure and
domestic environment to suit the
Computer capacities and capabilities of users
• Ergonomist translates the above
Science Artificial
Engineering information from the above mentioned
Intelligence sciences into context of design of products
• Increase feelings of comfort and
satisfaction
Interdisciplinary Nature of HCI – Human Side • Concerns
• Cognitive Psychology • Hardware design
• Social Organizational Psychology • Radiation from VDUs
• Ergonomics and human Factors • Repetitive Strain Injury (RPI)
• Linguistics
• Philosophy Linguistics
• Sociology • Scientific study of languages
• Anthropology • Command-object (delete ‘report’ OR
‘report’ delete)
Cognitive Psychology • Understanding structure (syntax) and
• Understanding human behavior and meaning (semantics)
mental processes • HCI goal is to develop natural language
• Human information processing interfaces
• See
• Feel Philosophy, Sociology and Anthropology
• Touch • Contribution in the sense of Soft Sciences
• Smell for HCI
• Taste • Considers introduction of IT in society
• How much information can be processed • Ethnography involves observing people
• Cognitive psychology tries to predict
and remembered
• Computer Supported Cooperative Writing
Social Organizational Psychology
• Studying nature and causes of human Interdisciplinary Nature of HCI – Computer Side
behavior in social context • Computer Science
• Four core concerns • Artificial Intelligence
• Influence of one individual on • Engineering
another person’s attitude and • Design
behavior
• Impact of a group on its member’s Computer Science
attitude and behavior

IRMA T. PLATA 18 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Provides knowledge about capability of • Ticketing System – Recommendations
technology – Immediate booking via Internet
• Developing techniques to support – Automatic print-out of tickets,
software design, development and itineraries and receipts
maintenance – Direct connection between
booking system and accounting
Artificial Intelligence system
• Intelligent Computing concerned with
– Elimination of booking forms
simulating human behavior
• HCI – development of expert and tutoring – Layout of the agency needs to be
systems changed for staff to operate
computers
Engineering – Staff training
• Engineering takes finding of sciences and – Changes to job design
utilizes them in the production of artifacts
– Support to older staff during
Design period of change
• Design contributes creative skills and – Changes to employment
knowledge to this process conditions must be examined
– Staff relationship with other non-
techi staff members (Technology
Power)
Activity 3: Case Study – Ticketing System
• A small ticketing agency has many shops
distributed throughout the country
• Feels 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 Figure shows the main topics that make up the
– Staff unable to understand discipline of HCI. All HCI takes place within a social
messages and organizational context. Different kinds of
• The Result applications are required for different purposes
– Sales figures had dropped and and care is needed to divide tasks between
were disappointing humans and machines, making sure that those
– A large number of sales staff had activities and routine are allocated to machines.
left

IRMA T. PLATA 19 | P a g e
Module in HCI
ISUE-ICT-IM-092
Knowledge of human psychological and
physiological abilities and, more important still
their limitations is important.
As shown in figure, 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 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,
as shown at the bottom of the figure. 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.

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

IRMA T. PLATA 20 | P a g e
Module in HCI
ISUE-ICT-IM-092
  Illustrate and explain the concept of
information processing to conceptualize
MODULE 4. HUMAN SIDE – COGNITION how the mind works; and
FRAMEWORK  Recognize the importance of attention
and memory in the Information
Processing Model

Overview
Imagine trying to drive a car by using just a
Learning Contents
computer keyboard. The four arrow keys are
used for steering, the space bar for braking, and
Scenario: Going for a Drive
the return key for accelerating. To indicate left
• Driving a Car with a Keyboard
you need to press the F1 key and to indicate right • Steering with Arrow keys
the F2 key. To sound your horn you need to press • Brake – Space bar
the F3 key. To switch the headlights on you need
• Acceleration – Enter
to use the F4 key and, to switch the windscreen
• Indicators
wipers on, the F5 key. Now imagine as you are
– Left – F1
driving along a road a ball is suddenly kicked in
– Right – F2
front of you. What would you do? Bash the arrow
• Horn – F3
keys and the space bar madly while pressing the • Headlights – F4
F4 key? How would rate your chance of missing • Windscreen Wipe – F5
the ball?
• Driving along on Highway
Most of us would bald at the very idea of
• Suddenly a Cow comes in front
driving a car this way. Many early video games,
• What do you do ?
however, were designed along these lines: the
• What are your chances of survival
user had to press an arbitrary combination of
function keys to drive or navigate through the Cognitive Psychology
game. More recently, computer consoles have • Psychology primarily concerned with
been designed with the user’s capabilities and human behavior and the mental processes
demands of the activity in gaming. Much better
that underlie it.
way of controlling and interacting, such as
• It is primarily concerned with information
through using joysticks and steering wheels, are
processing
provided that map much better onto the physical
and cognitive aspects of driving and navigating.
Cognition
We have to understand the limitations of the • Process by which we became acquainted
people to ease them. Let us see what is cognitive with things or in other words gain
psychology and how it helps us.
knowledge
– Understanding
– Remembering
Learning Objectives – Reasoning
At the end of this module, the students – Attending
should be able to: – Creating a new idea
 Define cognitive psychology • How Humans and Computers interact with
 Recognize the importance of Cognition; one another in terms of knowledge
 Discuss modes of cognition; transmitted by them

IRMA T. PLATA 21 | P a g e
Module in HCI
ISUE-ICT-IM-092
Modes of Cognition It is important to note that many of these
Norman (1993) distinguishes between two cognitive processes are interdependent: several
general modes: may be involved for a given activity. For example,
1. Experiential cognition when you try to learn material for an exam, you
need to attend the material, perceive, and
2. Reflective cognition
recognize it, read it, think about it, and try to
remember it. Thus cognition typically involves a
Experiential and Reflective range of processes. It is rare for one to occur in
• Experiential isolation.
– We perceive, act and react to
events around us effectively Information Processing …
– Identify the cognitions shown in • Lets look at how humans process
previous as experiential information
• Driving a car, reading • Identify the following:
• Reflective
– Involves thinking , comparing and
decision making

What Goes inside the head?

• So what was it ?
The main objective in HCI has been to – An elephant ?
understand and represent how human interact – A Tiger
with computers in term of how knowledge is
– An Apple
transmitted between the two. The theoretical
grounding for this approach stems from – Roses
cognitive psychology: it is to explain how human
Information Processing Analysis
beings achieve the goals they set.
Cognition has also been described in terms of • Trace mental operations
specific kinds of processes. These include: • Example Retrieving a friends phone
number
• Attention
– Identifying friends Name
• Perception and recognition – Retrieving meaning of words
• Memory – Understanding the meaning of set
• Learning of words given in the exercise
• Reading, speaking, and listening – Retrieve number from memory
• Problem solving, planning, reasoning, – Generate plan and formulate the
answer
decision-making.
– Recite digits or write them down

IRMA T. PLATA 22 | P a g e
Module in HCI
ISUE-ICT-IM-092
How come we all recognized them as Roses?
• Behind the scenes of Information
processing in Humans: Quiz
– Input Channels Sight, hearing, 1. Compare and contrast experiential
touch, smell, taste cognition and reflective cognition. Give
– Encoding information from concrete example of experiential and
environment in some kind of reflective cognition.
internal representation 2. Explain the stages (1-4) of information
– Internal representation is processing model.
compared with memorized 3. In the extension of the human
representations (Comparison) information processing model are the
– Concerned with deciding on a inclusion of the processes of .attention
response to the encoded stimulus and memory. What is then the
(Response Selection) importance of the two (attention and
– Organizing response and memory) in cognition?
necessary action (Response 4. Construction! What does this scene
Execution) contain? Extract shapes/objects (early);
recognize(late) Process visually (early);
Human Information Processing Model recognize patterns (late)

Extended Model
• How Information is perceived by the
perceptual processors
• How information is attended to
• How information is processes and stored
in Memory

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

IRMA T. PLATA 23 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Explain the importance of the
different IO channels in HCI; and
MODULE 5. HUMAN INPUT-OUTPUT • Apply the different concepts of IO
CHANNELS –PART 1 channels in the design and
development of system/web site.

Overview
Imagine using a personal computer with a Learning Contents
mouse and a keyboard. The application you are
using has a graphical interface, with menus, icons Input Output channels
and windows. In your interaction with this
system you receive information primarily by A person’s interaction with the outside world
sight, from what appears on the screen. occurs through information being received and
However, you may also receive information by sent: input and output. In an interaction with a
ear: for example, the computer may ‘beep’ at computer the user receives information that is
you if you make a mistake or to draw attention output by the computer, and responds by
to something, or there may be a voice providing input to the computer – the user’s
commentary in a multimedia presentation. output become the computer’s input and vice
Touch plays a part too in that you will feel the versa. Consequently the use of the terms input
keys moving (also hearing the ‘click’) or the and output may lead to confusion so we shall
orientation of the mouse, which provides vital blur the distinction somewhat and concentrate
feedback about what you have done. You on the channels involved. This blurring is
yourself send information to the computer using appropriate since, although a particular channel
your hands either by hitting keys or moving the may have a primary role as input or output in the
mouse. Sight and hearing do not play a direct role interaction, it is more than likely that it is also
in sending information in this example, although used in the other role. For example, sight may be
they may be used to receive information from a used primarily in receiving information from the
third source (e.g., a book or the words of another computer, but it can also be used to provide
person) which is then transmitted to the information to the computer, for example by
computer. fixating on a particular screen point when using
an eye gaze system.

• Interaction with world

Learning Objectives – Occurs through information
At the end of this module, the students
– Interaction with computer
should be able to:
• Determine the roles of input-output – Input and output
channels in HCI; • Human Input
• Identify the different major senses – Through Senses
important in HCI; • Human Output
• Define vision; – Through Effectors
• Recognize the different visual
perceptions related to size and depth,
Input in human is mainly though the senses
brightness and color which are crucial
and output through the motor control of the
to the design of effective visual
effectors. There are five major senses:
interface;
• Sight
• Hearing

IRMA T. PLATA 24 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Touch
• Taste
• Smell
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. Visual Perception
Similarly there are a number of effectors: • Size
• Limbs • Depth
• Fingers • Brightness
• Eyes • Color
• Head
Notions of Size and Distance
• Vocal system. • You are standing on a hill
• Rocks, sheep and small tree on summit
In the interaction with computer, the fingers • Farmhouse on hillside
play the primary role, through typing or mouse • Person walking on track
control, with some use of voice, and eye, head and • Small market town in valley
body position.
Perceiving Size and Depth
Interaction with PC Using Input-Output Channels • Size specified by visual angle
• Using a GUI-based computer • Affected by both
• Information received by sight – Size of object
• Beeps received by ear – Distance from eye
• Feel keyboard and mouse with fingers

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 Perceiving Size and Depth
from incomplete information • Visual angle
– Indicates how much of the field of
Human Eye view is taken by the object
– Measured in degree or minutes of
arc

Visual Angle and Perception

• Visual Acuity

IRMA T. PLATA 25 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – Visual Acuity is the ability of a – Hue
person to perceive fine detail • Determined by the
– Objects with visual angles smaller spectral wavelength
than 0.5 seconds of an arc are not – Blue (short)
visible. – Green (medium)
– Spaces between lines visible at – Red (long)
30s-1min of arc visible • 150 hues determined by
• Law of size constancy eye
– Perception of the object size – Intensity
remains constant even if it visual • Brightness of color
angle changes – Saturation
– Perception depends on factors • Amount of whiteness in
other than visual angle the color
• 7 million colors can be perceived
Factors Affecting Visual Perception
• Perception of depth • Color perception best in fovea, worst at
– Cues to determine relative periphery
positions of objects • 3-4% cones in fovea sensitive to blue light
• Objects overlapping – Blue acuity lower
• Size and height of object • Color blindness
– Provides cue for distance – Cannot differentiate between
• Familiarity green and red
– Certain size helps to judge the – 8% males
distance accordingly – 1% females

Example: Human Visual Perception

• The visual system compensates for:
– movement
– changes in luminance.
• Context is used to resolve ambiguity
Perceiving Brightness
• Brightness
– subjective reaction to levels of
light Quiz
– affected by luminance of object 1. Input-output channels:
• Luminance a. Interaction with world occurs through
– Depends on _________
• Amount of light falling on b. Interaction with computer occurs
object through __
• Reflective properties of c. Human input occurs through ______
object d. Human output occurs through ______
– Measured by photometer 2. What are the two stages of visual
• Contrast perception?
– Function of the luminance of an 3. What are the factors affecting visual
object and the luminance of its perception?
background 4. How do you perceive the diagram below?

Perceiving Color
• 3 components

IRMA T. PLATA 26 | P a g e
Module in HCI
ISUE-ICT-IM-092
 MODULE 6. HUMAN INPUT-OUTPUT Color Theory
CHANNELS - PART II • Primary Color
• Secondary Color
• Tertiary Color
• Color Harmony
Overview • Color Context

Color theory encompasses a multitude of

definitions, concepts and design applications. All Primary Color Red, yellow and blue
the information would fill several encyclopedias.
3 pigment colors that
cannot be mixed
Learning Objectives
Cannot be formed by any
At the end of this module, the students
PRIMARY combination of other color
should be able to: COLORS
• Recognize colors in the color theory and Red, yellow
apply them in designs; and blue
• Identify the categories of colors as to Secondary Color formed by mixing the
primary, secondary and tertiary color; primary colors
• Define color harmony;
• Identify the different formulas for color
harmony; and
• Discuss the different guidelines in
choosing colors
SECONDARY
COLORS
Green, orange and
purple
Learning Contents Tertiary Color formed by mixing one
primary and one secondary
Why Study Color? 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 TERTIARY
COLORS
in the spectrum between wavelengths 0.4 - 0.7
Yellow-orange, red-orange, red-purple,
micrometers. blue-purple, blue-green and yellow-green

Color Harmony

IRMA T. PLATA 27 | P a g e
Module in HCI
ISUE-ICT-IM-092
• pleasing arrangement of parts, whether it
be music, poetry, color, or even an ice
cream sundae
• When something is not harmonious, it's
either boring or chaotic
• extreme unity leads to under-stimulation
• extreme complexity leads to over-
stimulation.
• Harmony is a dynamic equilibrium. Color Context
• Some Formulas for Color Harmony • How color behaves in relation to other
– analogous colors colors and shapes is a complex area of
• any three colors which are color theory.
side by side on a 12 part • Compare the contrast effects of different
color wheel color backgrounds for the same red square
• yellow-green, yellow, and
yellow-orange
• Usually one of the three
colors predominates.

• Different readings of the same color

Which is
the lighter
vertical
bar?
• Some Formulas for Color Harmony
– complementary colors
Fi Fi
• any two colors which are
directly opposite each gu gu
other re re
• red and green and red-
a b
purple and yellow-green

Color Sensitivity & Image Detection

• Most sensitive to the center of the
spectrum
– blues & reds must be brighter than
greens & yellows
• Nature provides a perfect departure point • Brightness determined mainly by R+G
for color harmony
– combine brightness & color
• red yellow and green create a harmonious
differences for sharpness
design, regardless of whether this
• Shapes detected by finding edges
combination fits into a technical formula
• Implications?
for color harmony – hard to deal w/ blue edges & blue
shapes
• As we age

IRMA T. PLATA 28 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – lens yellows & absorbs shorter – -+60 degree of straight head
wavelengths à? position.
• sensitivity to blue is even – Not uniform across the whole field
more reduced of vision
– fluid between lens and retina • Limit of color awareness
absorbs more light – -+90 degree of straight head
• perceive a lower level of position
brightness • Cultural issue
• Implications? – Society classifies color differently
– don’t rely on blue for text or small
objects!
– older users need brighter colors

Color Guidelines
• Opponent colors go well together
– (red & green) or (yellow & blue)
– Hering's opponent colors diagram Quiz

• Pick non-adjacent colors on the hue circle 1. What are the three components of color?
• Size of detectable changes in color varies 2. What are things you need to consider as
– hard to detect changes in reds, HCI designer when it comes to color?
purples, & greens 3. In the diagram below, which of the color
– easier to detect changes in yellows combinations do you think is most
& blue-greens appealing? Justify your answers.
• Older users need higher brightness levels
to distinguish colors
• Hard to focus on edges created by color
alone ?
– use both brightness & color
differences
• Avoid red & green in the periphery - why?
– lack of RG cones there -- yellows &
blues work in periphery
• Avoid pure blue for text, lines, & small
shapes
– blue makes a fine background
color 4. Which is most appealing? Why?
– 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 shouldn’t
differ only by amount of
red
– helps color-deficient observers
• Accurate color discrimination

IRMA T. PLATA 29 | P a g e
Module in HCI
ISUE-ICT-IM-092
IRMA T. PLATA 30 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Color can be a powerful tool to improve
user interfaces, but its inappropriate use
can severely reduce the performance of
MODULE 7. COGNITIVE PROCESSES the systems we build

Models of Attention

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.
Focused Attention
• Only one thing can be the focus of
attention
Learning Objectives
• Attention focus is voluntary or involuntary
At the end of this module, the students should
• Factors affecting attentional focus
be able to:
– meaningfulness
• Define attention;
– structure of display
• Differentiate focused attention from
– use of color, intensity,
divided attention;
– use of modalities
• Recognize the differences among sensory,
STM, and LTM;
Example 1 (Preece, P. 103)
• Illustrate the revised memory model
• Apply the concepts of attention, memory
in the design and development of a
system/web site

Learning Contents

Attention
• What is attention.
– many competing stimuli, but.
– only limited capacity.
– therefore need to focus, and
select.
• Visual attention.
– based on location and colour. Attention and Automatic Action
• Auditory attention.
– based on pitch, timbre, intensity, • Frequent activities become automatic.
etc.

IRMA T. PLATA 31 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Carried out without conscious attention. – structure his/her task, e.g. help
• User does not make conscious decision. • 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
• Requiring confirmation does not google.com example of crisp, simple
necessarily reduce errors! design
• Avoid using too much colors because the
software allows it

An example of over-use of graphics

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

• ‘You can’t do 2 things at once?’ Is it true? Memory

• Can’t have 2 conversations/watch 2 TV
shows? • Cognitive models of memory
• Activation in memory
• Can talk while we drive / listen to music
• Implications of memory models
while exercising • Applications of memory models
o i.e. distracted to things we’re
listening to if relevant BRAIN – 2 halves/lobes
Different strengths/functions
Consequences Left Lobe Right Lobe
• 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.

IRMA T. PLATA 32 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – sensory memory
• input buffer
• visual or acoustic
– short term memory
• ‘scratchpad’ store
• visual or acoustic
– Long term memory
• stores facts and meanings
• semantically organized

Revised Memory Model

The brain (responsible for the behaviour which
• Working memory is a subset of LTM.
psychologists study) has two halves, or ‘lobes’ - the
• Items are semantically linked.
left brain and the right brain. It is generally agreed
• items in working memory are activated.
that each half of the brain has certain strengths, or
• activation is supplied from other linked
functions, which the other half doesn’t have (at
chunks and from sensory input.
least, not to the same extent).

• Involves encoding and recalling

knowledge and acting appropriately
• We don’t 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
Revised Human Processor Model and Related
A Model of Memory
Memory

• Three memory stores Sensory Memory/ Perceptual Store

IRMA T. PLATA 33 | P a g e
Module in HCI
ISUE-ICT-IM-092
 • Visual and auditory impressions
– Visuospatial sketchpad, Long Term Memory
phonological loop • Organized as a network of connected
• Very brief, but veridical representation of chunks of knowledge
what was perceived • active chunks are in the working memory
– Details decay quickly (~.5 sec) • activation spreads through the network
– Rehearsal prevents decay – strength of connection
– Another task prevents rehearsal – retrieval of items into WM
• Types • Repository for all our knowledge
– Iconic: for visual stimulus – slow access ~ 1/10 second
(fireworks trail, finger moving) – slow decay, if any
– Aural: for auditory stimulus – huge or unlimited capacity
(repeat a question)
– Haptic: touch stimulus LTM - semantic network
• 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
• 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 LTM processes
– rapid decay ~ 200ms • 3 processes
– limited capacity - 7± 2 chunks – Storage
(chunk formation called “closure”) – Forgetting
• Memory flushing example – Information retrieval
– ATM machine provides ATM card
to user before cash Memory Characteristics
• Things move from STM to LTM by
• Example rehearsal & practice and by use in context
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 LTM – retrieval

(The Cat Ran Up The Tree) • recall

IRMA T. PLATA 34 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – information reproduced from • File management and retrieval is a real
memory can be assisted by cues, problem to most users
e.g. categories, imagery • Research on information retrieval can be
• recognition usefully applied
– information gives knowledge that • Memory involves 2 processes
it has been seen before – recall-directed and recognition-
– less complex than recall - based scanning
information is cue – Recall is based on context
– Not recognizing neighbour in bus
The problem with the classic ‘72’ • Recognition rather than recall
– Browser bookmarks
• George Miller’s theory of how much – GUI interface icons
information people can remember
• People’s immediate memory capacity File Management
is very limited • File management systems should be
• Many designers have been led to designed to optimize both kinds of
believe that this is useful finding for memory processes
interaction design • Facilitate existing memory strategies and
try to assist users when they get stuck
What some designers get up to… • Help users encode files in richer ways
– Provide them with ways of saving
• Present only 7 options on a menu files using colour, flagging, image,
• Display only 7 icons on a tool bar flexible text, time stamping, etc
• Have no more than 7 bullets in a list
• Place only 7 items on a pull down menu People
• Place only 7 tabs on the top of a website
page • Good
• But this is wrong? Why? – Infinite capacity LTM
– LTM duration & complexity
• Bad
– Limited capacity STM
– Limited duration STM
– Unreliable access to LTM
Why?
– Error-prone processing
• Inappropriate application of the theory
– Slow processing
• 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 Quiz
• Sometimes a small number of items is
good design 1. What are the cognitive issues relating to
• But it depends on task and available screen the model of the human processor?
estate
2. Discuss Sensory Registers.
3. Compare/Contrast : Short Term Memory
More appropriate application of memory (STM) vs. Long Term Memory (LTM)
research 4. What can you say about this: “Negative
attitude results in slower learning”.

IRMA T. PLATA 35 | P a g e
Module in HCI
ISUE-ICT-IM-092
 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?

IRMA T. PLATA 36 | P a g e
Module in HCI
ISUE-ICT-IM-092
 Procedural
According to procedural learning we come to
any object with questions like how to use it? How
MODULE 8. COGNITIVE PROCESSES – to do something? For example, how to use a
PART 2 computer-based application?

Declarative
Overview According to declarative learning we try to find
the facts about something. For example, using a
In order to understand the complexity of computer-based application to understand a given
cognitive processes, it is necessary to have a broad topic.
perception of how humans generally view the Jack Carroll and his colleagues have written
world. There is a plethora of information around us extensively about how to design interfaces to help
at all moments, allowing decisions to be made learners develop computer-based skills. A main
about the environment. The process of taking the observation is that people find it very hard to learn
information available in through our senses and by following sets of instructions in a manual.
translating it into conclusions or actions is made
possible by cognition. 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
Learning Objectives
phrases is the same regardless of the mode in
At the end of this module, the students
which it is conveyed. For example, the sentence
should be able to:
“Computer are a wonderful invention”
• Compare and contrast procedural and
essentially has the same meaning whether one
declarative learning;
reads it, speaks it, or hears it. However, the ease
• Identify the similarities and differences
with which people can read, listen, or speak
among reading, speaking and listening as
differs depending on the person, task, and
cognitive processes; and
context. For example, many people find listening
• Discuss problem solving, planning,
much easier than reading. Specific differences
reasoning and decision-making as
between the three modes include:
cognitive processes involving reflective
• Written language is permanent while
cognition; and
listening is transient. It is possible to reread
• Apply the different cognitive processes in
information if not understood the first time
the development of a computer- round. This is not possible with spoken
based/web-based system. information that is being broadcast.

• Reading can be quicker than speaking or

listening, as written text can be rapidly
Learning Contents scanned in ways not possible when
listening to serially presented spoken
works.
Learning
Learning can be considered in two terms: • Listening require less cognitive effort than
• Procedural reading or speaking. Children, especially,
• Declarative often prefer to listen to narratives
provided in multimedia or web-based

IRMA T. PLATA 37 | P a g e
Module in HCI
ISUE-ICT-IM-092
 learning material than to read the we may ask others use a map, get instructions
equivalent text online. from the web, or a combination of these.
Reasoning also involves working through
Incorporating Language processing in different scenarios and deciding which is the best
applications option or solution to a given problem. In the
Many applications have been developed route-planning activity we may be aware of
either to capitalize on people’s reading writing alternative routes and reason through the
and listening skills, or to support or replace them advantages and disadvantages of each route
where they lack or have difficulty with them. before deciding on the best one. Many family
These include: arguments have come about because one
• Interactive books and web-based material member thinks he or she knows the best route
that help people to read or learning foreign while another thinks otherwise.
languages.
Reasoning
• Speech-recognition systems that allow
Reasoning is the process by which we use
users to provide instructions via spoken
the knowledge we have to draw conclusions or
commands.
infer something new about the domain of
• Speech-output systems that use artificially interest. There are a number of different types of
generated speech reasoning:
• Deductive reasoning
• Natural-language systems that enable • Inductive reasoning
users to type in questions and give text- • Adductive reasoning
based responses.

• Cognitive aids that help people who find it

difficult to read, write, and speak. A Problem solving
number of special interfaces have been If reasoning is a means of inferring new
developed for people who have problems information from what is already known, problem
with reading, writing, and speaking. solving is the process of finding a solution to an
• Various input and output devices that unfamiliar task, using the knowledge we have.
allow people with various disabilities to Human problem solving is characterized by the
have access to the web and use word ability to adapt the information we have to deal
processors and other software packages. with new situations. However, often solutions
seen to be original and creative.
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,

IRMA T. PLATA 38 | P a g e
Module in HCI
ISUE-ICT-IM-092
 MODULE 9. DESIGN PRINCIPLES

Overview

Learning Objectives • Design Model

At the end of this module, the students should – Designer’s conceptual model
be able to: • User’s Model
• Explain conceptual model; – Mental Model
• Recognize the six design principles that • System Image
can be applied in HCI and site several – Results from physical structure
examples on how it will be applied in that has been built
actual design and implementation of an • Documentation
interactive systems and real-life situation; • Instructions
and • Labels, etc.
• Apply the different design principles in
the development of project/system Conceptual Model
• “A description of the proposed system in
terms of a set of integrated ideas and
concepts about what it should do, behave
Learning Contents and look like, that will be understandable
by the users in the manner intended.”
Mental Models and Conceptual Models • “The way designers choose to represent
the working of the program to the user.”

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

User Model, Conceptual Model and System Image

Fallacy of Designers

IRMA T. PLATA 39 | P a g e
Module in HCI
ISUE-ICT-IM-092
 Designer’s expect USER MODEL to be the • Gulf of Execution
same as the DESIGN MODEL, – Difference between intentions
and allowable actions
Conceptual Model Example • 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

7 Stages of Action
What Designers Should Aim For?

Match CONCEPTUAL MODEL with MENTAL

MODELS of users

Visibility
Gulfs of Execution and Evaluation
• Correct parts must be visible
• People DO NOT have difficulty with:
• More visible functions are, more likely
– Understanding of goal
users will be able to know what to do next
• People DO have difficulty with:
• “Out of sight” functions make them
– Determining relationship between
difficult to use and find
intended actions and mechanisms
• Make relevant parts visible
of a system
• This critical principle violated again and
– Determining functions of controls
again in everyday things
– Determining relationship between
– Crucial parts carefully hidden
specific manipulations and
away
functions in each controls
– Determining intended actions
Visibility – Bad Example
were done successfully

IRMA T. PLATA 40 | P a g e
Module in HCI
ISUE-ICT-IM-092
Visibility – Good Example

Visibility Example

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.
Visibility Example
Affordance – Examples

IRMA T. PLATA 41 | P a g e
Module in HCI
ISUE-ICT-IM-092
 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
• Physical
• Logical
• 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
Affordance in Software (UI)
floppy disk into a computer

Logical Constraints
• Exploits people’s everyday common sense
reasoning about the way the world works
• An example is they 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

– Hyperlinks – underlined (web)

– Button – 3D (software, web)

IRMA T. PLATA 42 | P a g e
Module in HCI
ISUE-ICT-IM-092
 Constraints in UI
Deactivating menu options by shading them.

Designing them More Logically

Mapping

• Relationship between controls and their

effects in the world
• Why is this a poor mapping of control
buttons?

Cultural Constraints
• Learned arbitrary conventions
like red triangles for warning
• Can be universal or culturally specific • Why is this a better mapping?

Which are Universal Which are Culturally-

Specific? • 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

Activity on Mappings

• Which controls go with which rings

(burners)?

IRMA T. PLATA 43 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – 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

Why is this a Better Design?

Consistency
(a) Phones, remote controls
• 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
(b) calculators, computer keypads
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, Feedback
making them more prone to errors
• Sending information back to the user
Internal and External Consistency about what has been done
• Internal consistency refers to designing • Includes sound, highlighting, animation
operations to behave the same within an and combinations of these
application

IRMA T. PLATA 44 | P a g e
Module in HCI
ISUE-ICT-IM-092
 – e.g. when screen button clicked
on provides sound or red
highlight feedback:

Design Guidelines
• Useful feedback in response to user input
• Easy-to-understand and intuitive ways of
interacting with the system
• Clear and easy-to-follow instructions
• Appropriate online help and tutorials
• Context-sensitive guidance for users

Quiz
1. Discuss Seven Principles of Universal
Design
2. Which interface would be considered most
effective? Provide rationale for your
answer.

IRMA T. PLATA 45 | P a g e
Module in HCI
ISUE-ICT-IM-092
 by as many people as possible without
the need for adaptation.
MODULE 10. UNIVERSAL ACCESS AND  "Design for All is design for human
“DESIGN FOR ALL”
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
Overview
All products exclude some users, often users, applications and services. The
unnecessarily. In this module, we look different requirement for universal design stems
approaches, methods and practices for the design from the impact of emerging technologies
of interactive systems that can be used by anyone, and the different dimensions of diversity
anytime, anywhere. intrinsic to the information society – as
Universal access, for example, refers to
well the cultural diversity between and
system designs that can be used by anyone,
anytime, anywhere. The term “design for all” has within different countries.
a similar meaning. It indicates a system design that
can be used by all users, regardless of their
Examples of Design for All
strengths and weaknesses, their level of expertise,
disabilities and environments. 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:
Learning Objectives
Audiobook
At the end of this module, the student Automatic door
should be able to : Electric toothbrush
Flexible drinking straw
1. Describe and distinguish between
Goofle
accessibility and usability
2. Describe common accessibility and Low-floor bus
usability issues in website design Trolley case
3. Evaluate the accessibility and usability of
a website or other interactive product Principles of Universal Design
4.

Principle one: Equitable Use

Learning Contents
The design is useful and marketable to people with
diverse abilities.
Universal Design (“Design for All”) Guidelines
 The term Design for All (DfA) is used to
 Provide the same means of use for all users:
describe a design philosophy targeting
identical whenever possible; equivalent
the use of products, services and systems when not.

IRMA T. PLATA 46 | P a g e
Module in HCI
ISUE-ICT-IM-092
  Avoid segregating or stigmatizing any users.  Maximize "legibility" of essential
 Provisions for privacy, security, and safety information.
should be equally available to all users.  Differentiate elements in ways that can
 Make the design appealing to all users. be described (i.e., make it easy to give
instructions or directions).
 Provide compatibility with a variety of
Principle two: Flexibility in Use
techniques or devices used by people
The design accommodates a wide range of with sensory limitations.
individual preferences and abilities.

Guidelines Principle five: Tolerance for Error

The design minimizes hazards and the adverse
 Provide choice in methods of use. consequences of accidental or unintended
 Accommodate right- or left-handed actions.
access and use.
 Facilitate the user's accuracy and Guidelines
precision.  Arrange elements to minimize hazards
 Provide adaptability to the user's pace. and errors: most
used elements, most accessible;
Principle three: Simple and Intuitive hazardous elements eliminated, ISOlated,
Use of the design is easy to understand, or shielded.
regardless of the user's experience, knowledge,  Provide warnings of hazards and errors.
language skills, or current concentration level.  Provide fail-safe features.
 Discourage unconscious action in tasks
Guidelines that require vigilance.
 Eliminate unnecessary complexity.
 Be consistent with user expectations and Principle six: Low Physical Effort
intuition. The design can be used efficiently and comfortably
 Accommodate a wide range of literacy and with a minimum of fatigue.
and language skills.
 Arrange information consistent with its Guidelines
importance.  Allow user to maintain a neutral body
 Provide effective prompting and feedback position.
during and after task completion.  Use reasonable operating forces.
 Minimize repetitive actions.
Principle four: Perceptible Information  Minimize sustained physical effort
The design communicates necessary information
effectively to the user, regardless of ambient Principle seven: Size and Space for Approach and
conditions or the user's sensory abilities. Use
Appropriate Size and space is provided for
Guidelines approach, reach, manipulation, and use
 Use different modes (pictorial, verbal, regardless of user's body Size, posture, or
tactile) for redundant presentation of mobility.
essential information.
 Provide adequate contrast between Guidelines
essential information and its  Provide a clear line of sight to important
surroundings. elements for any seated or standing user.

IRMA T. PLATA 47 | P a g e
Module in HCI
ISUE-ICT-IM-092
  Make reach to all components
comfortable for any seated or standing
user. Poor Inclusive Design
 Accommodate variations in hand and grip Examples of poor inclusive design are
Size. everywhere. Many products present unnecessary
 Provide adequate space for the use of difficulties for many users and thus they are often
assistive devices or personal assistance. 'disabled by design'.

Principles c 1997 NC State University, The Center When you look closely at everyday products,
for Universal Design 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
Equitable use; flexibility in use; Simple are often trivial, but fortunately the solution may
and intuitive use; perceptible often be trivial as well. For example, if an on/off
information; tolerance for error; low button is difficult to operate because it is too small,
physical effort; size and space for then replace it with a larger one.
approach and use
1. A typical household’s collection of remote
Inclusive Design controllers – all looking very different!
 The British Standards Institute (2005) 2. Helpful color coding of sockets and
defines inclusive design as: 'The design of connectors
mainstream products and/or services that 3. The control on the left clearly has a ‘top’
are accessible to, and usable by, as many and a ‘bottom’; not so the one on the
people as reasonably possible ... without right
the need for special adaptation or 4. Keyboard and mouse connectors – color
specialized design.' coded, but it might have been better to
 Every design decision has the potential to have the symbols alongside the sockets
include or exclude customers. Inclusive 5. Is the coffee machine ‘on’ when the
design emphasizes the contribution that shaded bar is out – or pressed down.
understanding user diversity makes to
informing these decisions, and thus to
Accessibility
including as many people as possible.
Accessibility is about design for everyone. It is
User diversity covers variation in about making the information and services that
capabilities, needs, and aspirations. you provide online available to users, irrespective
of age and ability.

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

IRMA T. PLATA 48 | P a g e
Module in HCI
ISUE-ICT-IM-092
 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.
The user has a role at each stage of user-
Examples of accessibility problems
centered design. Task analysis, for example,
If a website has not been designed to
involves the user in carrying out the tasks that the
accommodate flexibility, use of access technology
new system is intended to support; and the
such as magnification, screen readers or Braille
requirements specification forms the basis for the
display can cause a number of problems. Here are
development and evaluation of a prototype
some problems related to accessibility.
system by the users.
In the real world, there is considerable
 Some websites only fix the background
variance within a group users. This variance should
color and leave the text color to default. be taken into account: either by providing a wide
 Sometimes developers assume that a range of designs (‘design for all’) or by providing
particular font and font size will be used, alternative means of access to the new system
and put text in frames with no scroll bars. (e.g. ‘universal access’). These solutions can be
 Forgetting to include alternative texts supported by the judicious use of adaptable and
adaptive systems to provide greater variance in
descriptions for images, graphical links or
the design solutions available.
buttons so that they are accessible to Moreover, as users become more expert in the
visually impaired users who are using a use of a system, they will need faster methods with
screen reader. which to access the features of that system.
Experienced users tend to prefer shortcuts such as
keyboard commands, rather than working through
Usability a set of menus.
Another aspect is ageing, as people get older,
In general terms, a usable system design is one they tend to accumulate minor disabilities,
which ensures that the functions are presented in including:
such a way that they can be used by users.  Sensory problems (vision or hearing),
Usability is defined by the International  Cognitive difficulties (perception,
Standards Organization (ISO) as
concentration or memory)
…the effectiveness, efficiency and satisfaction  Psychomotor skill deficiencies ( hand
with which specified users achieve specified goals or arm movement or posture)
in particular environments.

If a user is unable to find what they want

within a reasonable time, then your site needs to
Quiz
be re-examined. Usability is a huge subject and
1. For this assessment, select one of the
there are plenty of resources dedicated to this
following products to carry out an
evaluation to see if it accommodates the

IRMA T. PLATA 49 | P a g e
Module in HCI
ISUE-ICT-IM-092
 seven principles of universal design Copyright Virtual University of Pakistan.
satisfactorily. (2010).
 Television 7. Preece, Jenny. Human Computer Interaction
8. Feo, Roberto & Hurtado, Rosario &
 DVD player
Optimastudio Diseños para Todos/Designs
 Mobile phone for AllMadrid 2008, ISBN 978-84-691-3870-
0 Downloadable free version of Designs for
What design features do you like? What All. Retrieved 2013-07-26.
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?

References:
1. Sears, Andrew and Jacko Julie A. (Eds).
Human Computer Interaction
Fundamentals. CRC Press, Taylor and Francis
Group. 2009.
2. Dix, Alan, Finlay, Janet, Abowd, Gregory, and
Beale, Russell. Human-Computer
rd
Interaction. 3 Edition 2007.
3. Smith-Atakan, Serengul. Human-Computer
Interaction. Middlesex University Press, a
division of Thomson Learning. 2006.
4. Shneiderman, Ben. Designing the User
Interface Ben 3rd Edition 2008
5. Vincent Aleven. Human-Computer
Interaction Institute (HCII), United States,
Pennsylvania, Pittsburgh 2010-08-26
Carnegie Mellon University. 2010.
6. Hussain, Imran. Human Computer
Interaction (CS408). University of
Management and Technology (UMT).

IRMA T. PLATA 50 | P a g e
Module in HCI
ISUE-ICT-IM-092