• How many interactive products are there in
everyday use? Think for a minute about what
you use in a typical day:
– cell phone, computer, personal organizer, remote control,
soft drink machine, coffee machine, ATM, ticket machine,
library information system, the web, photocopier, watch,
printer, stereo, calculator, video game.. . the list is endless.
• Now think for a minute about how usable they
are. How many are actually easy, effortless, and
enjoyable to use? All of them, several, or just
one or two? This list is probably considerably
shorter. Why is this so?
Can’t figure out how to
Many not frequent use
Man hidden functions
Operation outcom not visible
Can’t remember combinations of digits * #
how do we know whether it worked
how can we remember that this option is ON
Lora Aroyo, Web & Media Group 14
Definition of HCI by ACM
“Human Computer Interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing systems
for human use as well as the major phenomena
surrounding the it.”
Goals of HCI (1)
• The goals of HCI are to produce usable and safe systems, as well as functional
• In order to produce computer systems with good usability, developers must attempt
– Understand the factors that determine how people
– Develop tools and techniques to enable building
– Achieve efficient, effective, and safe interaction
– Put people first 16
Goals of HCI (2)
• Underlying the whole theme of HCI is the belief that people using a computer
system should come first.
• Their needs, capabilities and preferences for conducting various tasks should
direct developers in the way that they design systems.
• People should not have to change the way that they use a system in order to
fit in with it.
• Instead, the system should be designed to match their requirements.
Goals of HCI (3)
To develop or improve the
. . . of systems that include computers
User-Centered Development Methodology
• Traditional software engineering methods arose in 1960s and 1970s
– Systems were not highly interactive
– End-user were computer specialists
Issues concerning end-user and usability
were not at all important
user interface design not considered
– Most end-users are not computer specialists
– Usability vital for success
System –Centred Design
• Traditional System-Centered design:
– Emphasis on the functionality,
– UI is added at the end
– Emphasis on correct software rather than on ease
– User has to adapt himself to the system
• Things are changing: User-Centered design
– User Interface more important
– Emphasis on end-users’ tasks,
– Early end-user participation: in analysis
– Evaluation by end-users
• more work for User Interface designer and User Interface
Factors in HCI (1)
• There are a large number of factors which should be
considered in the analysis and design of a system using HCI
• Many of these factors interact with each other, making the
analysis even more complex.
Factors in HCI (2)
• Organisation Factors
Training, job design, politics, roles, work organisation
• Environmental Factors
Noise, heating, lighting, ventilation
Health and Safety Factors
• The User
Cognitive processes and capabilities
Motivation, enjoyment, satisfaction, personality, experience
Factors in HCI (3)
• Comfort Factors
Seating, equipment, layout.
Input devices, output devices, dialogue structures, use of colour, icons,
commands, navigation, graphics, natural language, user support, multimedia
Easy, complex, novel, task allocation, monitoring, skills
Fields that contribute to HCI (1)
• Computer Science
– Implementation of software
– Faster, cheaper equipment
– Design for human factors
Fields that contribute to HCI (2)
• Graphic design
– Visual communication
• Technical writing
– Textual communication
• Linguistics, artificial intelligence
– Speech recognition, natural language processing
Fields that contribute to HCI (3)
• Cognitive psychology
– Perception, memory, mental models
– How people interact in groups
– Study of people in their work settings
Link to Software Engineering
• Separate but related concerns:
Some overlap in techniques
– Use cases
– Iterative file cycle
• Multi-disciplinary nature of HCI
Lora Aroyo, Web & Media Group 20
The Psychology of Usable Things
“ When simple things need
pictures, labels, or instructions,
the design has failed. ”
WHAT IS DESIGN?
• A simple definition of design is:
– achieving goals within constraints
• Goal: is the purpose of the design intended to be
produced with the users and user needs in mind.
• Constraints: include materials to be used, standards to
adopted, the cost, time needed for development as well
as the health and safety issues attached to the system.
• An affordance is the possibility of an
action on an object or environment.
• Affordances are the range of
possible (physical) actions by a user
on an artefact:
Two types of Affordances
• Perceived Affordances: are the
actions a user perceives to be
• Real Affordances: are the actions
which are actually possible.
HCI LECTURE 2 37
• Perceived affordance is the quality of an
object that suggests how it might be used.
• In screen-based communications, the
concept of perceived affordance is useful
when designing or evaluating a graphical
user interface (GUI).
HCI LECTURE 2 38
Example of Affordance
Jug and Tea Cups
• Real Affordance: Jugs are
used for serving tea, while
tea cups are used for
• Perceived Affordance:
Jugs can be used for
drinking tea and tea cups
for drinking wine
Other examples of Affordances
• For physical objects, there can be both real and
perceived affordances (and the two sets are not
necessarily the same).
• Appearance indicates how to use something:
– A chair affords (suggests) sitting.
– Knobs are for turning.
– Slots are for inserting things.
– A button affords pushing.
When perceived affordances are taken advantage of,
The user knows what to do just by looking.
HCI LECTURE 2 40
• These two doors are examples of
ambiguous affordances in door design.
• The affordances for these door seem
reasonable within themselves.
• Context is everything.
HCI LECTURE 2 41
• Mappings are the relationships between controls and their
effects on a system.
• Types of Mapping
– Arbitrary Mapping (requires the use of label and memory)
– Paired Mapping (Confusion can still occur)
– Full Natural Mapping (No ambiguity, no need for learning
or remembering, and no need for labels)
– How should one arrange the hot plate controls on a
• The difficulty of dealing with a novel situation is
directly related to the number of possibilities.
• Constraints are:
• These constraints limit on the number of
Examples of Constraints
– Physical constraints such as pegs and holes limit possible
– Semantic constraints rely upon our knowledge of the
situation and of the world.
– Cultural constraints rely upon accepted cultural
– Logical constraints exploit logical relationships. For
example a natural mapping between the spatial layout of
components and their controls.
• Where affordances suggest the range of possibilities,
constraints limit the number of alternatives.
Constraints make its construction simple,
even for adults!
–Physical: Front wheel only fits in one
–Semantic: The rider sits on the seat
–Cultural: Red is a rear light, yellow a
–Logical: Two blue lights, two white
pieces, probably go together.
• Conventions are cultural constraints.
• They are initially arbitrary, but evolve and become
accepted over time.
• They can however vary enormously across different
cultures, for example:
– Light switches:
• America down is off
• Britain down is on
The Structure of Human Memory
• Short-Term Memory (STM)
• Short-term memory is the memory of the present, used as
working or temporary memory.
– Information is retained in STM automatically and is
retrieved without effort.
– However, the amount of information in STM is severely
– STM is extremely fragile – the slightest distraction and
its contents are gone.
• For example, STM can hold a seven digit phone number
from the time you look it up until the time you use it, as
long as no distractions occur.
The Structure of Human Memory ctd.
• Long Term Memory (LTM)
• Long-term memory is the memory of
–It takes time to put things into LTM
and time and effort to get things out.
–Capacity is estimated at about 100
Knowledge in the Head and in the World
• Not all of the knowledge required for
precise behaviour has to be in the head.
• It can be distributed:
–partly in the head
–partly in the world
–and partly in the constraints of the
Know the Users
• Identification of users can be classified
according to their:
–Amount of prior training
HCI Lecture 3 Know the User 57
• This describes the standard of the new system
to be developed in comparison to the existing
• Raising the standard or maintaining the
existing standard is also put into consideration
in the interface design of the system.
• The return on investment (i.e. profit margin) of
the new system would be part of the
HCI Lecture 3 Usability Benchmarking 58
• The software is designed based on an
understanding of human goals and associated
• What is a goal?
• A goal is a final purpose or aim, an
• Tasks are particular ways of accomplishing
• There may be multiple ways of achieving a goal.
Goal Oriented Interaction Design 59
Example of goal and tasks
• Goal: Get something to eat.
• Task: Go to the restaurant around the corner.
• Task: Call small chops service.
• Task: Go to the market, buy ingredients, and
cook for self.
• Too often, software designers focus on simplifying a
task, rather than accomplishing a goal.
• Tasks are means to an end, not an end in
Six Attributes of Usability of a System
• (1) Effectiveness: completeness with which users achieve
• (2) Learnability: ease of learning for novice users.
• (3) Efficiency: steady-state performance of expert users.
• (4) Memorability: ease of using system intermittently for
• (5) Errors: error rate for minor and catastrophic errors.
• (6) Satisfaction: how satisfying a system is to use, from user’s
HCI Lecture 4 Usability Engineering Concepts
A model of factors contributing to usability
efficiency of use
ease of use
fit to task
fit to user
HCI Lecture 3 Usability Engineering Concepts
1. Do not rely only just on usability guidelines –
always test with users.
– Usability guidelines have exceptions; you can only be confident that a
UI is good if you test it successfully with users.
2. Ensure that the sequences of actions to achieve a
task are as simple as possible.
– Reduce the amount of reading and manipulation the user has to do.
– Ensure the user does not have to navigate anywhere to do subsequent
steps of a task.
HCI Lecture 3 Usability Engineering Concepts
3. Ensure that the user always knows what he or she can
and should do next
– Ensure that the user can figure out the affordance (what
commands are available and are not available).
– Make the most important commands stand out.
4. Provide good feedback including effective error
– Inform users of the progress of operations and of their location
as they navigate.
– When something goes wrong explain the situation in adequate
detail and help the user to resolve the problem.
HCI Lecture 3
Usability Engineering Concepts
5. Ensure that the user can always get out, go back or undo
– Ensure that all operations can be undone.
– Ensure it is easy to navigate back to where the user came from.
6. Ensure that response time is adequate.
– Users are very sensitive to slow response time
• They compare your system to others.
– Keep response time less than a second for most operations.
– Warn users of longer delays and inform them of progress.
HCI Lecture 3 Usability Engineering Concepts
Computers vs. Humans
• Computers do not work like humans.
• One part of software, the inside, must be
written in harmony with the demands of
• The other side of software, the outside, must
be written in harmony with the demands of
Differences between computers
Incredibly Fast Incredibly Slow
Error Free Error Prone
• In increasing order of complexity:
• Verbal Prototypes: textual description of choices
• Paper Prototypes:
• Low-Fidelity: hand-drawn sketches.
• High-Fidelity: more elaborate printouts.
• Interactive Sketches: interactive composition of
• Working Prototypes: interactive, skeleton
• Simple textual description of choices and
• Write the user guide first, before anything is
implemented. Have it reviewed by someone
HCI Lecture 8 Prototyping 77
• Paper prototypes simulate screen and dialogue
elements on paper.
• First hand-drawn sketches (lo-fi), later perhaps more
elaborate printouts (hi-fi).
• Greeking (drawing squiggly lines) is used to represent
text which would otherwise be a distraction.
• Scan in hand-drawn interface sketches.
• Assemble interactive prototype with clickable
• Retains throwaway, casual look to encourage
criticism and discussion, as shown in Figure 6.
Interaction Design versus
• Interface design suggests an interface
between code on one side and users on the
other side and passing messages between
• Interaction design refers to function,
behaviour, and final presentation of a system
Usability Evaluation – Four Types
• Exploratory - how is it (or will it be) used?
• Predictive - estimating how good it will be.
• Formative - how can it be made better?
• Summative - how good is it?
Usability Evaluation Methods
• The methods of usability evaluation can also be classified
according to who performs them:
• Usability Inspection Methods
– Inspection of interface design by usability specialists
using heuristics and judgement (no test users).
• Usability Testing Methods
– Empirical testing of interface design with real users.
Usability Inspection Methods
• Inspection methods of interface design use heuristic
methods based on analysis and judgement rather than
• Theses methods are:
• 1. Heuristic Evaluation: A small team of evaluators inspects
an interface using a small checklist of
• general principles and produces an aggregate list of
• 2. Guideline Checking: An evaluator checks an interface
against a detailed list of specific guidelines and produces a
list of deviations from the guidelines.
• 3. Cognitive Walkthrough: A small team walks
through a typical task in the mind set of a novice
user and produces a success or failure story at each
step along the correct path. [analyses learnability]
• 4. Guideline Scoring: An evaluator scores an
interface against a detailed list of specific
guidelines and produces a total score representing
the degree to which an interface follows the
• 5. Action Analysis: An evaluator produces an
estimate of the time an expert user will take
to complete a given task, by breaking the task
down into even smaller steps and then
summing up the atomic action times.
Usability Testing Methods
• “ Would you fly in an airplane that has not been
flight tested? Of course not.
• So you should not be using software that has not
been usability tested. ”
Why do Usability Testing?
• More often than not, intuitions are wrong!
• People believe they understand behaviour of others
based on their own experiences.
• This belief only lost through prediction if there is no
measurement (! usability tests).
• Designers of system find it very easy to use.
• Experience changes one’s perception of the world.
• It is almost impossible to “forget” an experience and put
oneself in position of someone not having had the same
Usability Testing Methods
• Empirical testing of interface design with representative users.
• (i) Thinking Aloud: Test users verbalise thoughts while
performing test tasks.
• (ii) Co-Discovery: Two test users explore an interface together.
Insight is gained from their conversation while performing test
• (iii) Formal Experiment: Controlled experiment, face-to-face
with test users, measurements and statistical analysis.
• (iv) Query Techniques: Interviews and Questionnaires
• (v) Usage Studies: Usage data is collected from a small number
of users working on their own tasks in their natural
environment over a longer period.