MMG3033 Human Computer Interaction

1
Chapter 1 :
Introduction to HCI
Contents :
HCI Chronology
Definition of HCI
Background of HCI
HCI & Other Discipline
The Importance of HCI
The Goals of HCI
HCI Roles in Software Development
Visibilty and Affordances
Good or Bad Design?
Summary
Chapter 1: Introduction to HCI
2
MMG3033 Human Computer Interaction
Explain the terms of human-computer
interaction
Discuss the importance, scope and goals of
HCI
Explain the visibility and affordances of
design.
Discuss a good and bad design.
Learning Objectives
Chapter 1: Introduction to HCI
3
MMG3033 Human Computer Interaction
Chapter 1: Introduction to HCI
4
MMG3033 Human Computer Interaction
Chapter 1: Introduction to HCI
5
MMG3033 Human Computer Interaction
Chapter 1: Introduction to HCI
6
MMG3033 Human Computer Interaction
101 Unuseless Inventions by Kenji
K k i
Chapter 1: Introduction to HCI
7
MMG3033 Human Computer Interaction
Useful Designs?
But not necessarily aesthetic.
Chapter 1: Introduction to HCI
8
MMG3033 Human Computer Interaction
HCI Chronology
1950s
Changes
In
Computer
Usage
1970s
Man-
Machine
Interface
(MMI)
1990s
Human-
Computer
Interaction
(HCI)
Changes in
technology
PC prices
are
decreasing
Changes in
visibility
and
affordance
User-
friendly
GUI
Interface
Human
psychology
CSCW
Ergonomic
Safety and
security
CHI (USA)
Chapter 1: Introduction to HCI
9
MMG3033 Human Computer Interaction
Evolution of HCI interfaces
50s - Interface at the hardware level for engineers - switch
panels
60-70s - interface at the programming level - COBOL,
FORTRAN
70-90s - Interface at the terminal level - command
languages
80s - Interface at the interaction dialogue level - GUIs,
multimedia
90s - Interface at the work setting - networked systems,
groupware
00s - Interface becomes pervasive
RF tags, Bluetooth technology, mobile devices,
consumer electronics, interactive screens, embedded
technology
Chapter 1: Introduction to HCI
10
MMG3033 Human Computer Interaction
Human
- the end-user of a program
- the others in the organization
Computer
- the machine the program runs on
Interaction
- the user tells the computer what they want
- the computer communicates results
What is H.. C.. I..
Chapter 1: Introduction to HCI
11
MMG3033 Human Computer Interaction
Human-computer interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing
systems for human use and with the study of major
phenomena surrounding them.
(ACM SIGCHI, 1992, p.6)
Human-Computer Interaction (HCI) is a study of
the relationships which exist between human
users and the computer systems they use in the
performance of their various tasks.
(Christine Faulkner : 2001)
Definition of HCI
Chapter 1: Introduction to HCI
12
MMG3033 Human Computer Interaction
Human-Computer Interaction (HCI) is about
designing computer systems that support people
so that they can carry out their activities
productively and safely.
(Preece, 2002)
HCI in the context of organizational work is to
understand and shape the way people interact with
computers: the processes they engage in, the
resources they use and the impact they accomplish.
(Teeni,Carey & Zhang, 2007)
Definition of HCI
Chapter 1: Introduction to HCI
13
MMG3033 Human Computer Interaction
Definition of HCI
HCI studies human performance in the use of
computer and information systems. This is a rapidly
expanding research and development area.
Thus, it is importance to design the well understood
interface because human see the system through
the human computer interface.
Chapter 1: Introduction to HCI
14
MMG3033 Human Computer Interaction
Background of HCI
HCI provide better understanding of both human user
and the computer system to make the interaction
between the two; more easier and more satisfying.
This is because:
Computers are highly complex machines
Human users are highly complex organisms
The aim is to create computer applications that will
make users more efficient and more satisfying.
Chapter 1: Introduction to HCI
15
MMG3033 Human Computer Interaction
Background of HCI
Chapter 1: Introduction to HCI
16
MMG3033 Human Computer Interaction
To understand the users is to understand the processes,
capabilities and predilections, that they might bring to the
tasks they perform. This including:
Human knowledge
Memory and cognition
Vision, hearing, touch, haptic and motor skills
To understand computer system is to understand what is
computer, its relationship to other tasks and how it might best
be accomplished using the computer system.
Systems have to be designed for the needs and capabilities
of the intended users, since it is impossible to design systems
to accommodate all
Background of HCI
Chapter 1: Introduction to HCI
17
MMG3033 Human Computer Interaction
HCI & Other Discipline
A.I Psychology
Sociology
Linguistics
Art
Design
Engineering
Computer
Science
Philosophy
Physiology
Anthropology
Ergonomics
Help
facilities
Understanding
the user
Modelling
the user
Groupware
Aesthetic appeal
User interface
layout
Faster
machines
Faster systems
Means of
building better
interfaces
Language for
commands
Physical
capabilities
User body shape
Equipment design
Creating
consistency
Chapter 1: Introduction to HCI
18
MMG3033 Human Computer Interaction
The Importance of HCI
Quality of life : Important applications of computers in
medicine are possible only if they are both useful and easy to
use by doctors, nurses, and aides; similarly, use of
computers in education requires that they be both useful and
easy to use by students and teachers. Computers can assist
disabled individuals; at the same time, special techniques are
needed to allow computers to be used by some who are
disabled.
To develop a good human-computer system with the best
interfaces that should feel nature, comfortable and fit without
the user being aware of it.
Chapter 1: Introduction to HCI
19
MMG3033 Human Computer Interaction
To build computer applications that are jargon free and
easy to use by the user in terms of the task and not the
computer system at all.
To understand the centrality of the users task.
To build the best interface for a system that can give a
desirable edge over any competition in terms of software
costs.
To reduce the trauma of learning and maximize the ease of
transition from the existing system to the new system.
To understand legal legislation and theories behind
usability engineering that can be applied to software and its
fitness for purpose.
The Importance of HCI
Chapter 1: Introduction to HCI
20
MMG3033 Human Computer Interaction
Preece (p.14-15) describes the goals of HCI are to
produce usable and safe systems, as well as
functional systems.
Goals include:
o Safety (eg safety-critical systems)
o Utility (functionality)
o Effectiveness (intuitive)
o Efficiency (task achievement)
o Usability (easy to learn and use)
The Goal of HCI
Chapter 1: Introduction to HCI
21
MMG3033 Human Computer Interaction
HCI is important in the design process since the computer
interface is the first point of contact the user has with the
system and the user will judge the system on the basis of the
interface.
HCI has a role to play in helping to define and ensure fitness
for purpose.
Human error could be avoided or at least minimized.
No matter how good an interface is, if the design of the job is
at fault the user will inevitably make mistakes.
The Role of HCI in Software
Development
Chapter 1: Introduction to HCI
22
MMG3033 Human Computer Interaction
Visibility - what is seen.
Affordance - what operations and
manipulation can be done to a particular
object.
what is visible must have a good mapping to
their effects.
Perceived affordance - what a person thinks
can be done to the object.
Mapping - The set of possible relations
between objects.
Visibility & Affordance
Chapter 1: Introduction to HCI
23
MMG3033 Human Computer Interaction
This is a control panel for an elevator
How does it work?
Push a button for the floor you want?
Nothing happens. Push any other button?
Still nothing. What do you need to do?
It is not visible as to what to do!
From: www.baddesigns.com
Visibility
Chapter 1: Introduction to HCI
24
MMG3033 Human Computer Interaction
you need to insert your room card in the slot by
the buttons to get the elevator to work!
How would you make this action more visible?
make the card reader more obvious
provide an auditory message, that says what to
do (which language?)
provide a big label next to the card reader that
flashes when someone enters
make relevant parts visible
make what has to be done obvious
Visibility
Chapter 1: Introduction to HCI
25
MMG3033 Human Computer Interaction
ccclichhk
Feedback
Sending information back to the user about what has
been done
Includes sound, highlighting, animation and
combinations of these
e.g. when screen button clicked on provides sound or
red highlight feedback:
Chapter 1: Introduction to HCI
26
MMG3033 Human Computer Interaction
Visible Constraints
Limitations of the actions possible perceived from objects
appearance
provides people with a range of usage possibilities
Push or pull?
Which side? Can only push,
side to push clearly visible
Chapter 1: Introduction to HCI
27
MMG3033 Human Computer Interaction
Visible constraints:
Entering a Date
The more constraints, the less opportunity for error
particularly important for managing user input
Controls constructed in Visual Basic
Chapter 1: Introduction to HCI
28
MMG3033 Human Computer Interaction
Affordances: to give a clue
Refers to an attribute of an object that allows people to
know how to use it
e.g. a mouse button invites pushing, a door handle
affords pulling
Norman (1988) used the term to discuss the design of
everyday objects
Since has been much popularised in interaction design
to discuss how to design interface objects
e.g. scrollbars to afford moving up and down, icons to
afford clicking on
Chapter 1: Introduction to HCI
29
MMG3033 Human Computer Interaction
What does affordance have to
offer interaction design?
Interfaces are virtual and do not have affordances
like physical objects
Norman argues it does not make sense to talk about
interfaces in terms of real affordances
Instead interfaces are better conceptualized as
perceived affordances
Learned conventions of arbitrary mappings
between action and effect at the interface
Some mappings are better than others
Chapter 1: Introduction to HCI
30
MMG3033 Human Computer Interaction
Activity
Physical affordances:
How do the following physical objects afford? Are
they obvious?
Chapter 1: Introduction to HCI
31
MMG3033 Human Computer Interaction
Activity
Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
Chapter 1: Introduction to HCI
32
MMG3033 Human Computer Interaction
Perceived Affordance
The perceived properties of the object that suggest how one
could use it
chairs are for sitting
table for placing things on
knobs are for turning
buttons are
for pressing
slots are for inserting
handles are for turning
computer for
switch for toggling
Chapter 1: Introduction to HCI
33
MMG3033 Human Computer Interaction
Perceived Affordances
sliders for
sliding
dials for
turning
music console
for controlling
music
Chapter 1: Introduction to HCI
34
MMG3033 Human Computer Interaction
Perceived Affordance Problems
are these
buttons?
is this equalizer control a
toggle or button?
button for pressing,
but action unknown
Chapter 1: Introduction to HCI
35
MMG3033 Human Computer Interaction
Perceived Affordance Problems
Handles are for lifting,
but these are for scrolling!
Complex things may need explaining but
simple things should not
when simple things need labels & instructions, then design
has failed
Chapter 1: Introduction to HCI
36
MMG3033 Human Computer Interaction
Bad interfaces may cause users to :
need more time for performing their tasks
make more errors
feel dissatisfied
need more time for learning how to use the software
not learn/use the full functionality of the software
(if given a choice:) refrain from using the software
Consequences of Bad UI
Chapter 1: Introduction to HCI
37
MMG3033 Human Computer Interaction
Bad Designs
This picture shows the locks on our
front door. To unlock the dead bolt lock
(above), you turn the key to the right.
To unlock the door knob lock (below),
you turn the key to the left! That's pretty
confusing!
Suggestion : Controls that have the
same function should be operated in
the same way. For example, both locks
should be unlocked by turning the key
in the same direction. This is an
example of what is meant in human
factors by "consistency" in design.
Chapter 1: Introduction to HCI
38
MMG3033 Human Computer Interaction
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?
From: www.baddesigns.com
Chapter 1: Introduction to HCI
39
MMG3033 Human Computer Interaction
How to design them more logically
(i) A provides direct adjacent
mapping between icon
and connector
(ii) B provides color coding
to associate the
connectors with the
labels
From: www.baddesigns.com
Chapter 1: Introduction to HCI
40
MMG3033 Human Computer Interaction
Consistency
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 easier to
learn and use
Chapter 1: Introduction to HCI
41
MMG3033 Human Computer Interaction
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, making them
more prone to errors
Chapter 1: Introduction to HCI
42
MMG3033 Human Computer Interaction
Internal and external consistency
Internal consistency refers to designing operations
to behave the same within an application
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
designers preference
Chapter 1: Introduction to HCI
43
MMG3033 Human Computer Interaction
Keypad numbers layout
A case of external inconsistency
1 2
3
4 5 6
7
8 9
7
8 9
1 2
3
4 5 6
0
0
(a) phones, remote controls (b) calculators, computer keypads
Chapter 1: Introduction to HCI
44
MMG3033 Human Computer Interaction
Bad Designs
Chapter 1: Introduction to HCI
45
MMG3033 Human Computer Interaction

What is wrong with the
Apex remote?
Why is the TiVo remote
so much better
designed?
Good and Bad Designs
TiVo remote
Apex remote
Chapter 1: Introduction to HCI
46
MMG3033 Human Computer Interaction
How does making a call differ when using a:
Cell phone
Public phone box?
Consider the kinds of user, type of activity
and context of use
Activity
Chapter 1: Introduction to HCI
47
MMG3033 Human Computer Interaction
HCI examines the relationships between humans
and the computer systems they use.
HCI is not a static area of study because it is
evolving and concerns people.
HCI is important in the design process since the
computer interface is the first point of contact the
user has with the system and the user will judge the
system on the basis of the interfaces.
HCI has a role to play in helping to define and
ensure fitness for purpose.
Summary