HUMAN COMPUTER INTERACTION [email protected].

p
k
Dr. Syed Muhammad Shehram Shah
HUMAN COMPUTER
INTERACTION (HCI)
• Course Learning Outcomes: Upon successful completion of the course, you will be
able to:
CLOs Description Taxonomy level PLO

1 Identify various interaction mechanisms and C2 1

purpose of a variety of interfaces along with
their application areas.

2 Distinguish modules that cover the entire user- C4 2

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, Wednesday & Thursday
• 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).
• HCI overlaps user-centered design, UI, and UX to create intuitive products and
technologies.
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 of Development of the
the interaction interface software
component (e.g.
(COGNITION) PRINCIPLES)
Human - Computer
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 computing
satisfaction.
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 – transmit
signals to muscles
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 speeds
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/)