Introduction to Human

Computer Interaction
Human Computer Interaction
Outline

1. Human Computer Interaction: definition

2. Why study user interface design?
3. History
4. Goals of HCI
5. Five key ideas in HCI
6. Optical Illusions
7. Understanding users
8. User productivity, adoption and usability
9. Disciplines contributing to HCI
10. HCI engineering as a branch of software engineering

11. User interface malfunctions

12. Case studies in user interface malfunction
13. Key points to review
What is
HCI?
Definition – HCI

● The study of people and computing and the way they influence each other

● A set of processes, dialogues, and actions through which a human user

employs and interacts with a computer

● A discipline concerned with the design, evaluation and implementation of

interactive computing systems for human use with the study of major
phenomena surrounding them.

Automated teller machine

 Human-Computer Interaction
(HCI)
● Human
○ the end-user of a program
○ the others in the organization
The System

● Computer
○ the machine the program runs on
Input Output

● Interaction
○ the user tells the computer what
they want The User
○ the computer communicates with
results

M. A. Wadud
 Why Study User Interface Design?
● 75% or more of development effort can go into the user interface
○ 40% to 70% is typical
○ A study by Nielsen (2003) shows that
■ if corporations spend 10% of their development budget on
usability, they can improve usability by 135%

● User interface software is becoming more complex

○ Complexity increase is faster than other aspects of systems
○ Graphical user interfaces have provided the biggest jump in complexity
■ What we had earlier?
○ Applications tend to grow to fill available computing resources

M. A. Wadud
 Why Study User Interface Design?
(cont’d)
● Another study found
○ 51% of major websites violate the most basic design guidelines.

● These studies and more demonstrate that

○ there is a need for a more systematic treatment of HCI in the
development process and
○ more HCI experts are needed.

M. A. Wadud
 Financial benefits & Costs of improved user
interfaces
● There are direct financial benefits from improved user interfaces:

● Increased user productivity

○ Direct financial savings

● Increased revenues from sales

○ The system is more attractive and customer satisfaction is
higher

● Decreased training and support costs

○ The system is more intuitive

● Decreased maintenance cost

○ The system does what user wants
○ Much maintenance involves fixing UI problems
○ Pay a little during development, or pay a lot after
application/product release!

M. A. Wadud
 Financial benefits & Costs of
improved user interfaces (Cont’d)
● But
○ Staff must be trained in user interface analysis and design
○ Users must participate
○ UI design tools are needed

● The benefits almost always outweigh the costs

M. A. Wadud
 What Constitute a Good Interface?

● A good user interface:

○ Achieves necessary performance by operator, control,
and maintenance personnel

○ Minimizes skill and personnel requirements and

training time

○ Achieve reliability of Human-Computer arrangement

(reliability, availability, security, and data integrity)

○ Fosters design standardization within and among

systems (integration, consistency, portability)

M. A. Wadud
 Measureable Goals of a Good
Interface

● Some measurable goals:

○ Time to learn how to operate the system
○ Speed of performance
○ Error rate
○ User’s retention time of information presented
○ User’s satisfaction with the system

M. A. Wadud
 History
● Early days of computing:
○ Computers cost more than people
○ Computers had little functionality
○ Mainly research used by experts

● The UI was unimportant

● Early 1970s
○ Field of ‘Man Machine Interface’ (MMI) born.
○ Term changed gradually to ‘User Interface’ (UI)
○ Ideas for first ‘Graphical User Interface’ (GUI)
■ Dynabook at Xerox

● Late 1970s and 1980s

■ Products were called ‘user friendly’
■ No science in this: Just a market buzzword
■ First real GUI’s developed
● Xerox Star --> Smalltalk and Macintosh

M. A. Wadud
 History (Cont’d)

● 1980s
○ Term ‘Human-Computer Interaction’ (HCI or CHI) came into use
■ wider scope than UI (help, work practices etc.)
○ MS-Windows
○ X-Windows (a computer software system and network protocol that provides a basis for
graphical user interfaces (GUI) for networked computers) follow the Mac
○ Intense research into HCI

● 1990s and early 2000s

○ Virtual reality, speech and handwriting I/O

Good BUT also Bad UI’s continue to be

developed!!!

M. A. Wadud
 Goals of HCI

● Improve productivity and reduce costs through:

○ Safety:
■ Does the system prevent danger?
■ E.g. Nuclear power plant, Aviation Engineering

○ Functionality:
■ How many things can the system do?

○ Efficiency:
■ How few resources does it take to get a task done?

○ Usability :
■ How easy to learn and use is the system?

M. A. Wadud
 Source: Dix, A., Finlay et al. (2004): Human-Computer Interaction , 3rd Ed., Pearson Education.

M. A. Wadud
 Goals of HCI (Cont’d)

● BUT
○ High functionality (many ways of doing the same
thing) can actually reduce usability
■ Create confusion

People should not have to change radically to fit in with the

system, the system should be designed to match their
requirements.

M. A. Wadud
 Five Key Ideas in HCI
● Goal
○ A state the user wants to reach
■ to be talking with somebody on the phone
■ to have saved a file
● Visibility
○ Tips
■ Control needs to be visible
■ Good mapping with their effects
■ Suggest functionality
○ The UI should help the user always understand...
■ The current state of the system
■ What operations can be done
■ Windows XP … shutdown and update!
○ E.g.
■ When you position the cursor over a point on the screen, it should be clear
what would happen if you clicked the mouse

● Feedback
○ When anything changes it should be made visible
■ When you delete a file, the system should not just say ‘ready’
■ Automobile --- steering and wheel!

M. A. Wadud
 Five Key Ideas in HCI (Cont’d)
● Affordance
○ A technical term refers the property of objects
○ The set of operations and procedures that can be done to an object

○ ‘Perceived affordance’ is what typical users think can be done to an

object
■ Should a door be pulled or pushed?
■ What does this icon mean?

○ To improve visibility/feedback we need to:

■ Choose objects with good perceived affordance
■ Design the UI to generate better perceived affordance

M. A. Wadud
 Five Key Ideas in HCI (Cont’d)
● Task
○ An action the user wants to do
■ to call somebody
■ to save the file
○ Goals beget tasks, tasks beget goals.

M. A. Wadud
The Human:

• Following are the basic five characteristics of the subject Human:

• Information i/o: visual, auditory, haptic, movement
• Memory: Sensory, Long term, Short term
• Processing and Applied: Reasoning, problem-solving, skill, error
• Influenced by emotion
• Every human is different from one another.
Vision

A human sees through eyes. And it has two stages of human vision:
• Physical reception
• Processing and interpretation of visual.
Physical Reception
• An eye receives light from the environment and transforms into
electrical energy. When light reflects from different objects and enters
into the retina in gives the 3D view of the object. When visual enters
the eye it focuses inverted in the back of our eye. and last but not
least, there are color cones in the human eye which determine the
color of an object.
Interpreting the Signal:
• The size and depth of an image depend upon the distance of an eye
from the object. Here optical illusions occur too like “Ponzo illusion”
and “Muller Lyer illusion”
 Optical Illusions
An optical illusion (also called a visual illusion) is characterized
by visually perceived images that differ from objective reality.

The information gathered by the eye is processed in the brain to

give a perception that does not tally with a physical measurement
of the stimulus source. (source: Wiki)

Duck Rabbit illusion

M. A. Wadud
M. A. Wadud
 Understanding Users
● “Dual Processor" Theory:
○ Every interactive system is a distributed system
running on two processors:

○ User interface design specifies/constrains both:

• User behavior
• System behavior

M. A. Wadud
 Understanding Users (Cont’d)
● Users can be categorized:
○ By class/role
■ Determined by the pattern of use:
■ e.g., manager, salesperson, shipper, client
○ By personality type
■ Shy or reticent
■ Inarticulate
■ Disinterested or defensive
■ Intimidated
■ Involved designer!
○ By ability
■ Physical disability
● innovative I/O may be needed
■ Colorblind
● don’t use colors as the only means of conveying information
■ Dyslexia or other cognitive glitches
■ Illiteracy
● icons may be needed
■ Computer illiteracy
■ Ignorance of domain/learner

M. A. Wadud
 User Productivity & Usability
● User productivity =
Functionality (what the computer can do)
*
Usability (what people can do with the computer)

● If either of these is zero, the system is useless

● Factors Influencing User Productivity

○ Kind and number of tasks/jobs/services
○ Characteristics of users (ability, experience etc.)
○ Work environment (distractions etc.)
○ Training and documentation
○ Functionality and usability of available software and hardware

M. A. Wadud
 Ergonomics

M. A. Wadud
 Workstation ergonomics

M. A. Wadud
 A Model of Usability Factors

M. A. Wadud
 Disciplines Contributing to HCI
● Cognitive psychology
○ Capabilities and limitations of human senses and thought processes
○ People tend to select cognitive strategies that minimizes cognitive efforts

● Ergonomics
○ Hardware and software efficiency of use and safety

● Linguistics
○ Syntax and semantics of commands
○ Speech I/O

● Artificial intelligence
○ Speech I/O
○ Intelligent ‘guessing’ what the user wants to do
○ Knowledge representations of users and tasks

● Sociology and social psychology

○ Assisting people to work in groups with software
○ Ensuring software works in different cultures

● Engineering and industrial design

○ Disciplined measurement-based approaches
○ Esthetics
○ Storyboarding etc.

M. A. Wadud
 Human Information Processing (HIP)
• A model developed by Stuart Card, Tom Moran and Allen Newell (1983)

Attention

Memory Processors

Working Long-term
Memory Memory Perception Cognition Motor

M. A. Wadud
 Human Information Processing (HIP) –
cont’d
Attention

Memory Processors

Working Long-term
Memory Memory Perception Cognition Motor

The perceptual processor senses, detects, and accepts

inputs from the external sources and stores parts of them
into working memory
 Human Information Processing (HIP) –
cont’d
Attention

Memory Processors

Working Long-term
Memory Memory Perception Cognition Motor

The cognitive processor interprets (consults with long-

term memory), manipulates and makes decision about the
inputs

M. A. Wadud
 Human Information Processing (HIP) –
cont’d
Attention

Memory Processors

Working Long-term
Memory Memory Perception Cognition Motor

The motor processor is responsible for interpreting cognitive

decisions into physical actions

M. A. Wadud
Human Information Processing (HIP) –
cont’d
Attention is needed to facilitate and control the
cognitive system.

Attention

Memory Processors

Working Long-term
Memory Memory Perception Cognition Motor
Human Cognitive system

● The fit between the user’s mental model of the system and the actual model of the
system affects complexity.
○ The greater the fit, the easier it is to determine how to translate goals into
action

● Perception and representation

○ Some displays can be hard to interpret
■ Blue foreground
■ Optical illusions
■ Contrast in color but not brightness
■ Too many colors
○ There are two ways to use graphics:
■ For modeling
● direct images of concepts
■ For coding
● representing underlying ideas, e.g., displaying
quantitative data
○ E.g. chart, curves
Examples
Examples
 Bad User Interface

M. A. Wadud
Good User Interface
Which one is better?

Different designs for elevator buttons.

Human Cognitive system (Cont’d)

● Attention limitations
○ People can be readily distracted
■ Provide cues about what to focus on

○ People get lost in complexity

■ Structure information so it is easy to browse through
● not too many items
● not too few items
● grouped logically

○ People multitask
■ Make the ‘state’ clear so users can jump backwards and
forwards
Human Cognitive system (Cont’d)
● Memory limitations
○ Short term memory can contain 7±2 ‘chunks’
■ Avoid situations where users have to remember more than this
■ Logically group things so users can chunk them

○ The more meaningful, the more easily remembered (familiarity, imagery

and consistency contribute to meaningfulness)
■ Use effective names and icons (even) animated ones
■ Combine icons with words
■ Icons can be analogies, examples or abstract, but not arbitrary
■ Watch out for cultural differences (e.g. washroom symbols)

○ People can more easily recognize than recall

■ Use menus, icons, quick lookup
Evolution from plain SW- to
usability Eng
○Normal software development (involving the UI)
■Focuses on physical and interaction elements
■Waterfall model dominates (sequential)
■Evaluation by functional spec reviews and testing
○ User interface development
■Focuses on users and tasks
■Star model dominates (iterative)
■Evaluation by continuous user involvement
■Driven by heuristics and guidelines
■Integrates psychology etc.
■Influence on functionality
○ Usability engineering
■Driven by engineering objectives
■Integrates rigorous engineering discipline
■Drives functionality
A Five Level Conceptual Model of
UI 1. Task Level
■ What is to be done by the user

2. Conceptual Level
■ User’s intended mental model of the system

3. Interaction Style Level

■ Command-driven, menu-driven, direct manipulation,
hypermedia
■ Design elements that are repeated throughout the system

4. Interaction Element Level

■ Specific windows, dialogs, commands, menus

5. Physical Element Level

■ Bitmaps, characters, data structures

● At each level: Design must be done, Problems can occur

A conceptual model of user
interface system architecture
● Why layers?
○ Simplifies software development and maintenance

● All layers:
○ Are developed in parallel
○ Influence each other
○ Included in complete system specifications
○ Evaluated together

● Evolution of layers:
○ Functional layer should need to change less often during
iterative tuning of the interface
○ All layers may need to change when business functions change
but hopefully interaction styles should remain similar
Characteristics of Products and
Applications
● Each kind of application puts different demands on the UI designer
○ Application for internal use vs. product for sale
○ Generic utility vs. task-specific tool
○ Walk-up-and-use vs. skilled usage

● Some design challenges:

○ Customizing a generic utility product so that it becomes a task-
specific tool for internal use and vice versa
○ Converting an application requiring skilled usage to make it a
walk-up-and-use application

Definition - A Walk-up-and-use system is a system that

needs to be so self-explanatory that first-time or one-time
users can use the system effectively without any prior
introduction/training.
Examples are automatic teller machines (ATMs), ticket machines,
public informations systems, museum displays, etc
User Interface Malfunctions

● Key idea –
○ “There are no good user interfaces ... just user interfaces that fit”
○ A truly bad user interface never fits
○ But among the ‘good’ ones, some will suit one task/user; some will
suit another

● To maximize fitness –
○ we must minimize the occurrence of ‘malfunctions’ in the context
of the expected use of the system
Definitions of malfunction

● A mismatch between what the user wants, needs or expects and

what the system provides

● Consequences of malfunction
○ “A breakdown in usability”
○ “An obstacle to performing a desired task”

● You should know that:

○ Occasional malfunctions are normal
○ Systematic or frequent malfunctions need to be fixed
Related ideas to ‘malfunction’

● Error
○ Identifiable mistake on the part of the designer

● Defect
○ A deviation from what the user needs

● A malfunction is a usability defect

○ A defect in the smooth functioning of the user/computer
system!
○ Users may not be aware of many malfunctions
■ malfunctions may only be located through careful analysis
■ they may be subtle
Malfunction Analysis
● We need a disciplined approach to analyzing malfunctions
○ Provides feedback into the redesign process

1. Play protocol, searching for malfunctions

2. Answer four distinct questions:
Q1. How is the malfunction manifested?
What do you notice and who noticed it?

Q2. At what stage in the interaction is it occurring?

Goal forming, action decision, action execution, interpretation of
results

Q3. At what level of the user interface is it occurring?

Physical element level to task level

Q4. Why is it occurring?

What is its root cause?
3. List and prioritize possible cures
How is the malfunction
manifested?
a) Malfunctions detected by the system (easiest to detect)
○ Examples:
■ omission of an argument
■ incorrect date format
○ Make systems so that users do not make mistakes!
Solution :
○ Better prompts, consistency, visible examples, more forgiving of
alternatives

b) Malfunctions detected by the user during operation

○ Examples:
■ taking a wrong path in menu hierarchy
■ not finding required help
■ not being able to perform a certain action
■ not being able to tell which state system is in
Solution :
○ Improve functionality, feedback, clarity, simplicity
How is the malfunction
manifested? (Cont’d)
c) Malfunctions undetected (until later)
○ Examples:
■ output produced is wrong due to wrong inputs
■ unnecessary work performed
Solution :
○ Improve feedback indicating consequences of input; simplify

d) Inefficiencies
○ Examples:
■ excessive response time
■ excessive think time
■ unnecessarily long command sequences
■ unnecessary repetitions
■ complex operations that require use of reference
Solution :
○ Simplify, speed system up
What Stage in the Interaction the
Malfunction Occur?
a) When the user decides on a GOAL (i.e. user forms an intent to do
inappropriate thing)
○ Examples:
■ decides to empty a field because user thinks it is unimportant
(when it is important)
■ decides to charge default exchange rate (when should obtain
current exchange rate)
Solution :
○ Lead user through better task; better feedback; better training

b) When the user specifies the ACTION(i.e. action does not match
the goal)
○ Examples:
■ deletes the record instead of emptying a field
■ charge reciprocal of exchange rate
Solution :
○ Improve clarity, feedback, prompts, conceptual model
What Stage in the Interaction the
Malfunction Occur?
c) When the system executes the action - EXECUTION
○ Examples:
■ Defects in functionality
Solution :
○ Fix functionality in normal way

d) When the user interprets the resulting system state - RESULT

○ Example:
■ thinks bank account has been debited when it has not
■ thinks system has ‘hung’ when it has not
■ thinks some data must be entered when it is the default
■ cannot understand resulting error message
Solution :
○ Better feedback, better conceptual model
At Which Level Does the Malfunction Occur?
a) Task level (Task and goals not supported)
○ Example
■ System does not support the task, i.e. what the user wants to do
cannot be done by the system
■ Functionality is not provided
Solution:
○ Add functionality

b) Conceptual level (User has wrong mental model; does

not understand intended conceptual model)
○ Example
■ thinks that money is being deducted from bank account when it
is being charged to a credit card
■ thinks that dragging a file to the desktop means they are no longer on the disk
■ Copy a shortcut link and assumes file is copied.
Solution :
○ make conceptual model clearer
○ improve metaphors
At Which Level Does the Malfunction Occur?

c) Interaction style level (system wide problem)

○ Examples:
■ does not know how to pull down a menu
■ scrolls a page instead of a line
■ goes to next screen instead of scrolling
■ retypes command after an error instead of editing it
Solution :
○ make operation of the interface more intuitive and consistent

d) Interaction element level (specific detail inappropriate)

○ Examples:
■ selects wrong button because label is misinterpreted
■ specifies invalid command syntax
■ specifies wrong code for option
Solution :
○ More attention to details of the interface, simplification
At Which Level Does the Malfunction Occur?
e) Physical element level (Physical execution incorrect)
○ Examples:
■ presses wrong key accidentally
■ clicks on wrong pixel in image
■ out-types machine (actions lost)
■ types ahead when system is computing; keystrokes later
applied to wrong action
Solution :
○ Defenses to protect user from consequences; better hardware
design; fix bugs in code
Why Does the Malfunction Occur?
a) Lack of (on the part of the user):
○ Motivation:
■ Poor job satisfaction

○ Attention:
■ External event - user is pre-occupied with other things.

○ Input information processing:

■ No feedback provided to tell user what is going on
■ or cues provided by the system are not recognized
■ or cues are misinterpreted
Solution: Clearer, more consistent feedback

○ Discrimination:
■ user is unable to tell certain things apart
■ e.g. red/green color discrimination
■ e.g. two icons that are similar
Solution: Improved expression of information
Why Does the Malfunction Occur?
○ Physical coordination:
■ e.g. wrong item selected because of difficulty positioning
cursor with mouse.
Solution: Alternate interaction mechanisms, better
feedback

○ Recall:
■ User did not remember command , syntax etc.
■ Forget isolated terms
Solution: Better mnemonics, online help, quick lookup
mechanisms, command completion

○ Knowledge / lack of learning:

■ User does not have business or software knowledge to make
right choice.
Why Does the Malfunction Occur?
b) Learning difficulties that cause malfunctions:
○ Learning is difficult
■ users get frustrated
■ learning takes time; can be hard to apply

○ Learners make ad-hoc interpretations

■ they may not recognize their problem
■ they may falsely think they have a problem

○ Learners generalize from what they know

■ they assume computers work like manual methods
■ they assume consistency
E.g. baby girl trying to play gameboy, it is also an example of mental
model vs. conceptual model

○ Learners have trouble following directions

■ they often ignore them even if they see them
■ they do not easily understand them
Why Does the Malfunction Occur?
○ Problems and features interact
■ they do not see that one problem can cause another

○ Prerequisites and side-effects confuse learners

○ Help facilities do not always help

■ they do not know what to ask for
■ too much detail is often provided

○ Other causes of malfunctions:

■ Excessive resource demands
■ External events (e.g. noise)
■ Misleading or inadequate training
■ Unrealistic task definitions
■ Intrinsic human variability
Summary
○ Goals of HCI: Improve
■ safety
■ functionality
■ efficiency
■ usability
○ Visibility and feedback
○ Affordance and perceived affordance
○ Goal = state; task = action
○ Human/computer as system running on 2 processors
○ Types, classes and abilities of users
○ Productivity = functionality * usability
○ Usability factors
■ e.g. learnability, fit, acceptability
○ Contributing disciplines
■ e.g. linguistics, Artificial Intelligence
Summary (Cont’d)
○ Human cognitive system - Limitations on:
■ perception
■ attention
■ memory
○ Task analysis vs. functional analysis
○ Star model with evaluation at centre
○ UI levels
■ task
■ conceptual model
■ interaction style
■ interaction element
■ physical element
○ Usability engineering
○ Layered approach
○ Malfunction as a kind of defect (of usability)