HUMAN COMPUTER INTERACTION shehram.shah@faculty.

mue
Dr. Syed Muhammad Shehram Shah t.edu.pk
MSc (United Kingdom), PhD (Australia)
HUMAN COMPUTER
INTERACTION (HCI)
• Course Learning Outcomes: Upon successful completion of the
course, you will be able to:
CLOs Description Taxonomy PLO
level
1 Identify various interaction C2 1
mechanisms and purpose of a variety
of interfaces along with their
application areas.
2 Distinguish modules that cover the C4 2
entire user-centered design and
evaluation process - from
understanding user needs, to
designing interactive systems that
meet those needs.
HOUSE KEEPING
• Only theory, no practical
• 3 Credit Hour (100 marks)
• Lectures: Monday, Tuesday & Wednesday
• Sessional Marks: Test & Project
• Class performance Matters
RECOMMENDED READING
• Human Computer Interaction Second Edition Dix, Finlay,
Abowd & Beale
• User Interface Design and Evaluation Amazon by Debbie
Stone, Caroline Jarret, Mark Wooroffe and Shailey Minocha
• Design Interfaces: Patterns of Effective Interaction Design by
Jennifer Tidwell
• Internet
HUMAN COMPUTER
INTERACTION (HCI)
What it is?
Human – Computer interaction (HCI) researches the design and use
of computer technology, focusing particularly on the interfaces
between people (users) and computers.

Why its done?

Researchers in the field of HCI both observe the ways in which
humans interact with computers and design technologies that let
humans interact with computers in novel ways.
HUMAN COMPUTER
INTERACTION
• Commonly referred to as HCI
(HCI)
• It is the study of the interaction between humans and computers,
particularly it pertains to the design of technology.
• HCI is the study of designing computers and machines so that they
best serve their users (i.e. humans).
• People who specialize in HCI think about how to design and
implement computer systems that satisfy human users.
• Most research in this field aims to improve human–computer
interaction by improving how an interface is used and understood by
humans.
• The definition of Human-Computer Interaction (HCI) needs to remain
quite broad, as it now covers almost all forms of information
technology (IT).
HOW DOES IT AFFECT US?
INTRODUCTION
• Human-computer interaction (HCI) is a multi/interdisciplinary field of
study focusing on the design of computer technology and, in particular,
the interaction between humans (the users) and computers.
• HCI is interdisciplinary, meaning it combines research methods and
tools from computer science, behavioral science, design, and media
studies.
• While initially concerned with computers, HCI has since expanded to
cover almost all forms of information technology design.
• Multidisciplinary: Involves people from multiple disciplines.
• Example applications: Health, finance, differently abled users, military, space,
extreme computing scenarios
• Common disciplines: computer science, behavioural sciences, design,
and media studies.
MULTIDISCIPLINARY FIELD OF
SCIENCE
HOW MANY COMPUTING
DEVICES CAN YOU THINK
OF?

usability, learnability, findability, the efficiency of use

HOW MANY COMPUTING
DEVICES CAN YOU THINK
OF?
• Any analogue device that has gone digital is now a computing device.
• Computing: An electronic device that can perform some degree of computing.
• Examples: Calculator, Car entertainment System, Smart Watch, Laptop,
Tablets/Phablets etc
• How do you interact with these device?
• Interface is our medium of interaction between that device
• Interfaces which revolutionised the way we communicate/interact with
machines (Interaction paradigms)
• Command Line Interface  Graphical User Interface  voice, gesture
based
INTERFACE: CONDUIT
BETWEEN TWO ENTITIES
• Because human–computer interaction studies a human and a
machine in communication, it draws from supporting knowledge
on both the machine and the human side.
• Factors on the machine side: techniques in computer graphics,
operating systems, programming languages, and development
environments are relevant.
• Factors on the human side: communication theory, graphic and
industrial design disciplines, linguistics, social sciences,
cognitive psychology, social psychology, and human factors
such as computer user satisfaction are relevant.
• And, of course, engineering and design methods are relevant.
WHAT IS HCI CONTEXT
HUMAN actions MACHINE

functions

GOALS
 DISCUSSION
• All machines are TOOLS operated by humans who wish to achieve certain
GOALS.
• The human carries out certain actions, which activate functions built into the
machine software, and hopefully these functions achieve the human’s goals. This
will be done in a particular context e.g.. work environment, home computing.
Context is important in HCI.
• For example, if your goal is to move a piece of text from one place to another in
a document, then you carry out certain actions with the mouse/pointer/menu
which activate the cut & paste function of the software, and this should result in
you goal being fulfilled.
• If the software has been ‘well designed’ (i.e.. with the user in mind) then it
should be ‘easy’ for the user to learn, and remember, what functions will achieve
certain goals, and what actions are needed to operate these functions.
• If the actions/functions are not intuitive, or at least easily learned and retained
and/or they take a long time to operate and/or they are error-prone, then we say
the interface does not have good usability.
 DISCUSSION
• Relationship between user’s goals, required actions, and results
must be meaningful, not arbitrary
• In a ‘well-designed’ interface, the relationship between these
things should be ‘meaningful’. That is, it should be fairly
obvious to you what actions are needed to achieve your goal,
and it should be evident that your goal has been achieved.
• The result is (usually) immediately evident – (you see the
characters becoming bold).
• This ‘meaningfulness of the relationship’ is sometimes referred
to as VISIBILITY of the interface (sometimes called
Transparency).
 VISIBILITY
• What does the system does, NOT how does it do it.

Functions
User Interface User of the Results
Components
Goals (controls) Actions system

Feedback
 VISIBILITY (Norman, 1988, 1992)
• What does the system do, NOT how does it do it.
• A knowledge of the ‘functions’ of the system does not imply
a knowledge of the inner working of the machine.
• That is, you need to know WHAT the system can do, but not
HOW it does it.
• The better the visibility, the more obvious are the actions
you need to take to achieve your goal.
• Feedback on the achievement of your goal is essential.
 AFFORDANCE (Norman, 1988, 1992)

• Norman defines affordance as “A technical term that

refers to the properties of objects – what sorts of
operations and manipulations can be done to a particular
object”
• Perceived affordance – what a person thinks an object
can do
• Door
• Piece of paper
• Water tap
• Button
 AFFORDANCE (Norman, 1988, 1992)

• Poor interface may cause:

• Increased mistakes in data entry / system operation
• Inaccessible functionality
• User frustration: low productivity and/or under utilisation
• System failure because of user rejection
• All of these can result from a poor user interface.
• For example - on inaccessible functionality - take a system
with which you are very familiar, such as MSWord. Of all the
functions that MSWord supplies, how many do you think you
use regularly, or even over a period of a year? How many
do you think you actually know about?
 AFFORDANCE (Norman, 1988, 1992)

• It has been estimated that about 80% of users regularly

use (or even know about) only 20% of all the possible
functions.
• Note the ‘user rejection’ effect above. The usability factor
of user attitude is considered very important. If the people
who are going to use the system regularly don’t ‘like’ it,
then productivity will drop or, in extreme cases, the
potential users just won’t use it at all.
• One of the purposes of prototyping is to perhaps show
users a number of potential designs and determine which
one they ‘like best’.
CENTRAL AIM AND
APPROACH OF HCI
Aim: To optimise performance of human and computer
together as a system

Approach: User-Centered
 Users should not have to adapt to the interface
 Interface should be intuitive/natural to learn/use.
 “Talking to users is not a luxury, it’s a necessity”
THE PARTS OF USER
INTERFACE DEVELOPMENT
Development of the User Interface

Behavioral Constructional
Development Development
of the of the
interaction interface
component software
(COGNITION) (e.g.
Human - Computer
PRINCIPLES)
THE PARTS OF USER
INTERFACE DEVELOPMENT
•The first thing to note is that, for ‘interaction’ to take place
there must be at least TWO elements - in this case HUMANS
and COMPUTERS.
• In order to design effective interfaces for productive
interaction, we will need some knowledge about both.
• On the HUMAN side we need knowledge about how people
‘behave’ in interactive situations. This is where cognition
comes into HCI.
• On the COMPUTER side, the interface designer needs
knowledge of, for example, programming as well as certain
‘HCI design principles’.
COGNITION
• Cognitive scientists analyse ‘what the mind does’.
• Investigate mechanisms/processes from which mental phenomena
emerge and also nature/structure of human knowledge.
• Mental phenomena such as:
• Perceiving – Learning – Remembering.
• Controlling actions.
• Thinking – Emotion.
• Planning – Imagining – Creating.
• Understanding language and others.
• Communicating with others.
• Making decisions – Solving problems.
USABILITY
• Generally, relates to Learnability, Efficiency, Memorability, Errors, Satisfaction.
• The definition of usability in the ISO 9241 standard is: "The extent to
which a product can be used by specified users to achieve specified
goals with effectiveness, efficiency, and satisfaction in a specified
context of use“
• This definition can be expanded, and made more comprehensive, by
including five characteristics which must be met for the users of a
product:
• Effective
• Efficient
• Engaging
• Error Tolerant
• Easy to Learn
DISCUSSION
• The Association for Computing Machinery (ACM) defines
human–computer interaction as "a discipline that is concerned
with the design, evaluation, and implementation of interactive
computing systems for human use and with the study of major
phenomena surrounding them".
• HCI helps to make interfaces that increase productivity,
enhance user experience, and reduce risks in safety-critical
systems. Poorly designed machines lead to many unexpected
problems, sometimes just user frustration, but sometimes,
chaotic disasters.
• An important facet of HCI is user satisfaction (or End-User
Computing Satisfaction).
• Usability is key metric of end user satisfaction or end user
DISCUSSION – USABILITY
CHARACTERISTICS
• Effective: Effectiveness is the completeness and accuracy with
which users achieve specified goals. It is determined by looking at
whether the user’s goals were met successfully and whether all
work is correct.
• Efficient: Efficiency can be described as the speed (with accuracy)
in which users can complete the tasks for which they use the
product. ISO 9241 defines efficiency as the total resources
expended in a task. Efficiency metrics include the number of clicks
or keystrokes required or the total ‘time on task’.
• Engaging: An interface is engaging if it is pleasant and satisfying
to use. The visual design is the most obvious element of this
characteristic.
DISCUSSION – USABILITY
CHARACTERISTICS
• Error Tolerant: The ultimate goal is a system which has no
errors. But product developers are human, and computer
systems far from perfect, so errors may occur. An error
tolerant program is designed to prevent errors caused by the
user’s interaction, and to help the user in recovering from any
errors that do occur.
• Easy to Learn: An interface which is easy to learn allows
users to build on their knowledge without deliberate effort.
This goes beyond a general helpfulness to include built-in
instruction for difficult or advanced tasks, access to just-in-
time training elements, connections to domain knowledge
bases which are critical to effective use.
THE MODEL HUMAN
PROCESSOR
• Concept used extensively in HCI. This is a quite
oversimplified idea about the mind but has been
successful in allowing fairly simple predictions to be
made about how people will interact with a system.
• Brain is viewed as three interacting subsystems (each
with memory store and processor)
• Perceptual System: Detection and storage of signals from
senses e.g. images, sounds; Short Term Memory: Sensory
Register
• Cognitive System: Ability to think, analyse, and recall from
LTM, STM(working memory)
• Motor System: Called on when physical response is required
MODEL HUMAN PROCESSOR
• Perception (Visual)
• Knowledge
• Attention
• Language etc
PERCEPTION
• Why do things look the way they do?
• Perception is translation of physical world into a pattern
of neural activity that can be used by the brain to guide
behavior.
• Perceptual Organisation: Understanding of how we
put together basic features (edges, colours, motion,
depth etc.) to see a coherent and organised world of
things/surfaces.
PERCEPTION IN COMPUTING
• Perception is a cognitive issue relating to HCI
• Fundamental for HCI
• Perceive information presented at/through interface
• Theories of perception influence interface design
• Present information in easily
understandable/unambiguous manner i.e. user-
centered
• Active process
WHY STUDY PERCEPTION ?
• Practical Reasons:
• Identify/rectify environmental hazards (Design Decisions).
• Design devices
I. To optimize perceptual performance;
II. For people with perceptual impairments.

• Perception and Pleasure:

• Visual art/music/gourmet cuisine engage sensory system in
ways that we find pleasurable/enjoyable.
• Understanding perception allows us to heighten our
sensory experiences.
• Perception and Intellectual Curiosity
VISUAL PERCEPTION
• Perceptual world can be different from real world
• Human system is capable of perceiving objects
• Brightest of sunlight/darkest of night
• Rapidly moving objects/rapidly decaying events
• Perception and Pleasure: Human system cannot
perceive
• Bullet being shot / Plant growing / Infrared light
• Similarly, the info that we can obtain from displays is
variable
• Which vary in quality, size and other characteristics
• but not with uniformity across whole spectrum and all
PROPERTIES OF VISION
• People draw distinctions between what is seen
• “Object recognition”
• This could mean “is this a fish or a bicycle?”
• It could mean “is this George Washington?”
• It could mean “is this poisonous or not?”
• It could mean “is this slippery or not?”
• It could mean “will this support my weight?”
• Great mystery
• How to build programs that draw useful distinctions based
on image properties.
TEXT DENSITY
• On paper, text density of 70-80% is common (70% of page covered in
text)
• Readable but on computer screen it would be difficult.
• On screen, 15-20% is recommended
• On its own, text density is not sufficient measure of readability
• Way text is structured also very important (e.g. search info)
• E.g. phone directory in tabular form to make easier to search
• However, text density alone is not a sufficient measure of
readability, the way the text is structured on the screen is also
very important.
• This is especially true when the user is required to search for information
on the screen (as opposed to simply reading all the text sequentially).
• For example, a telephone directory is deliberately set out in tabular form to
make it easier to find information.
TEXT LEGIBILITY
• Legibility: the quality of text being clear enough to read.
• Legibility is the ease with which a reader can decode
symbols (text).
• Use standard rules for UPPER and/or lower case.
• Longer text passages are easier read using standard
capitalization rules rather than using all capital letters.
• READING ALL CAPITAL LETTERS CAN TAKE LONGER
• AS WORDS LOSE CHARACTERISTIC SHAPE -
• WORDS BECOME RECTANGULAR
• Improper grammar/punctuation slows reading speed
TEXT LEGIBILITY - VISUAL
CODING
•Different types of Visual Coding may be used to draw a user’s
attention to certain information in an interface.
•This refers to a number of techniques that might be used to attract
attention, or to focus attention on particular elements on the
screen.
•These include,
• Elements of differing intensity, (brightness or lightness) but of the same hue.
If you are going to use differing intensities to distinguish between elements,
make sure the difference is quite significant.
• [Experiment with a ‘colour wheel’ to see the effect of changing hue,
saturation and intensity of an object e.g. a text character.]
• People are good at recognising, or picking out, unusual shapes. So, for
example, text placed within, say, a ‘cloud’ shape, or even a box, will stand
out from the surroundings.
TEXT LEGIBILITY - VISUAL
CODING
• Colour and shading can be used to good effect (more on this later).
• Underlining is not really recommended in printed text because it
interferes with the descenders of letters (see the g, y, p in this
sentence). This, LIKE CAPITAL LETTERS, destroys the characteristic
shape of words and can slow down the reading speed. It can be
used in handwriting where it is more difficult to use other methods
of emphasis such as bold or Italic text.
• Blinking, reverse video and moving icons might be eye catching,
but they can become very irritating after a short time. It is
preferable to have some way of turning such features off, or don’t
use them at all unless it is to warn of some urgent action required -
an action that will correct a fault, say, and hence make the effect
go away.
TEXT LEGIBILITY -
CONTINUED
• Some font styles might look
decorative, but they are not
necessarily legible
• Stick to common fonts
• Rule: don’t use >3 fonts and font sizes per document
• Font styles suitable for documents are usually not appropriate for
presentations
• If yu mst use abbrev mke sre th usrs r famlr wth thm
• Keep text lines short
• Long line lengths can be difficult to read
VISUAL CODING
• Differing Intensity (brightness, lightness)
• Shape e.g. box frame (recognise/pickout)
• Colour and/or shading
• Underlining (not recommended in printed text –
can slow reading)
• Character size and font
• Movement e.g. ‘micons/transitions’
• Sound and/or synthesized speech
EXAMPLE OF SCREEN DESIGN –
VISUALISATION / AID TO ACCESSIBILITY

(Source: http://www.cs.umd.edu/projects/hcil/chi96/paper/cps1txt.htm)
 IMPROVED DESIGN –
WHAT FEATURES AID READABILITY /
UNDERSTANDING?

(Source: http://www.cs.umd.edu/projects/)