Human Computer Interaction

(HCI)
CAT 201 - Integrated Software Development Workshop

Presented by : CHAN HUAH YONG

Prepared by : AZLAN OSMAN

 What is HCI?

๏ Some definitions:
A N
S M
๏ “Human Computer Interaction (HCI) involves the study, planning, and
design of the interaction between people (human) and computers” –
Wikipedia

N O
๏ “Human-computer interaction is a discipline concerned with the design,

LA
evaluation and implementation of interactive computing systems for

ACM SIGCHI A Z
human use and with the study of major phenomena surrounding them” –

2
 What is HCI?
(cont.)

๏ HCI investigates the interaction between:

A N
๏ Human
๏ A user, a group, sequence of users S M
๏ Computer
N O
A
๏ Any computer big or small, process control, embedded, etc.
L
A Z
3
History of HCI
 A Bit of History

๏ World War II
A N
๏ Study of interaction
between humans &
S M
machines in order to
produce more effective
N O
weapons (Bletchley
LA
Park, Enigma, Colossus)

A Z
Enigma Machine – the machine used to encode
secret German messages during World War II, which
were cracked by codebreakers at Bletchley Park
5
 A Bit of History
(cont.)

The Ergonomics Society) A N

๏ The Institute of Ergonomics and Human Factors (IEHF - formerly known as

S M
๏ UK-based professional society for ergonomists, human factors specialist

๏ Officially formed in 1949 N O

and those involved in user-centered design

LA
๏ Currently has a number Special Interest Groups (SIGs) for:

A Z
๏ Driving ergonomics, HCI, healthcare ergonomics, sports ergonomics,
nuclear ergonomics, occupational safety and motorcycle ergonomics

6
 Basic Interaction

๏ Graphical Objects
A N
๏ 1963 - MIT

S M
๏ Graphical Objects manipulated by a pointing device (light pen)

O
๏ Objects could be selected, moved, resized, etc.

N
A
๏ 1966 - Imperial College, London

L
A
๏ 1970 - XEROX PARC Z
๏ Icons, Gesture Recognition, Dynamic Menus, etc.

๏ Object selection and manipulation

๏ WYSIWYG - “What You See Is What You Get”
7
 Basic Interaction
(cont.)

๏ Mouse
A N
๏ 1965 - Stanford Research Lab (SRI)

S M
๏ Created to be a cheap replacement for light pens
๏ 1970
N O
LA
๏ Adopted at Xerox PARC Douglas Engelbart - Inventor of the
first mouse

A Z
๏ First appeared commercially as part of the Xerox Star (1981), Apple
Lisa (1982), & Apple Macintosh (1984)

8
 Basic Interaction
(cont.)
๏ Windows
๏ 1968 - Stanford Research Lab
๏ 1982 - Apple Lisa

A
๏ 1983 - Carnegie Mellon
N
(SRI)
S M
University funded by IBM
๏ 1969-1974 - Xerox PARC
๏ Smalltalk System
N O
๏ Andrew window manager
๏ 1984 - Apple Macintosh

A
Xerox Star

๏ 1974 - MIT ๏ The early versions of the Star

๏ EMACS Text Editor
Z L and Microsoft Windows were

A
๏ 1981 - Xerox PARC
๏ The Cedar Window Manager
tiled, but eventually they
supported overlapping
windows like the Lisa and
Macintosh
๏ Xerox Star
Apple Lisa

9
 Applications

๏ Drawing programs
๏ 1965 - Uses a mouse for graphics A N
๏ Screen editing & formatting of
arbitrary-sized strings with a light pen

๏ 1971 - Uses a tablet

S M
(1967)

๏ Text Editing
N O
๏ 1975 - Able to handle lines and curves
๏ Mouse-based editing (1968)
๏ First WYSIWYG editor-formatter (1974)

LA
๏ First word processor with automatic

A Z
word wrap, search & replace, user-
definable macros, scrolling text, &
commands to move, copy, and delete
characters, words, or blocks of text
(1962)

10
 Applications
(cont.)
๏ Spreadsheets
๏ VisiCalc (1977-8) - initial ๏ HyperCard
A N
spreadsheet for the Apple II
๏ HyperText
S M
๏ From Apple (1988) significantly
helped to bring the idea to a
๏ Documents are linked to related
documents (1945)
N O
wide audience
๏ Tim Berners-Lee used the
VisiCalc

๏ Ted Nelson coined the term

LA hypertext idea to create the World

Wide Web in 1990 at the
"hypertext" (1965)
๏ NLS system

A Z
๏ One of the first on-line journals,
government-funded European
Particle Physics Laboratory (CERN)
๏ Mosaic - the first popular
and it included full linking of hypertext browser for the
articles (1970) World-Wide Web

Mosaic
11
 Applications
(cont.)
๏ Computer Aided Design (CAD) ๏ Video Games
A N
๏ First CAD systems similar to
drawing programs (1963)
S M
๏ First graphical video game
was probably SpaceWar
๏ Pioneering work on
interactive 3D CAD system
N O(1962)
๏ First computer joysticks
(1963)

LA (1962) SpaceWar

๏ First CAD/CAM

A Z
(manufacture) system in
industry was probably
๏ Early computer adventure
game was created (1966)
๏ First popular commercial
General Motor's DAC-1 game was Pong (about 1976)
(about 1963)
Pong

12
 Applications
(cont.)

A N
S M
N O
LA
A Z
SpaceWar Game Source: zirkoni88 Pong Game Source: pulsar2121

Atari 2600 Joystick

13
 Up & Coming Areas

๏ Gesture Recognition
๏ First pen-based input device used light-
๏ Multi-Media

A N
๏ Multiple windows with integrated text
pen gestures (1963)

S M
and graphics (1968)

N
๏ Gesture-based text editor using proof- O
๏ First trainable gesture recognizer (1964) ๏ Interactive Graphical Documents
project was the first hypermedia
system which used raster graphics and
reading symbols (1969)

LA
๏ Gesture recognition has been used in
text (1979-1983)

1970s
A Z
commercial CAD systems since the ๏ Diamond project explored combining
multimedia (text, spreadsheets,
graphics, speech) (1982)
๏ Came to universal notice with the
Apple Newton (1992)

14
 Up & Coming Areas
(cont.)
๏ 3D
๏ First system 3D CAD system (1963)
A N
S M
๏ First interactive 3D system used for molecular modeling (1966)

and early 70’s)

N O
๏ The flowering of 3D raster graphics funded by the government (late 60’s
Head-mounted display on a pilot helmet

to making 3D real-time
LA
๏ The military-industrial flight simulation work of the 60's - 70's led the way

๏ Virtual Reality

A Z
๏ Original work on VR funded by US Air Force (1965-1968)
๏ Study of force feedback, early research on head-mounted displays and
on the DataGlove (1971)
DataGlove
15
Up & Coming Areas
(cont.)

A N
S M
N O
LA
A Z
16
Up & Coming Areas
(cont.)

A N
S M
N O
LA
A Z
17
 Up & Coming Areas
(cont.)

๏ Computer Supported Cooperative Work

A N
S M
๏ Remote participation of multiple people at various sites (1968)
๏ Electronic mail, still the most widespread multi-user software, was

(1973)
N O
enabled by the ARPAnet (1969) and by the Ethernet from Xerox PARC

LA
๏ An early computer conferencing system (1975)

A Z
๏ Natural language and speech
๏ Speech synthesis
๏ Speech recognition
18
Up & Coming Areas
(cont.)

A N
S M
N O
LA
A Z
19
The Needs For HCI Study
Why Study Human Use of Computer Systems?

๏ Business perspective:
A N
S M
๏ Allowing humans to become more productive & effective
๏ Human costs now far outweigh hardware and software costs
๏ Personal perspective:
N O
A
๏ People view computers as appliances, and want it to perform as one
L
A Z
21
Why Study Human Use of Computer Systems?
(cont.)

๏ Marketplace perspective:
A N
๏ Everyday people are using computers
๏ Expecting “easy to use system” S M
N O
๏ Not tolerant of poorly designed systems

A
๏ Little vendor control of training
L
A Z
๏ If product is hard to use, people will seek other products
๏ e.g. Mac vs. IBM (Microsoft Windows)

22
Why Study Human Use of Computer Systems?
(cont.)

๏ System perspective:
A N
๏ Humans are complex
๏ Computer are also complex S M
N O
๏ Interface between the two will also be complex

LA
A Z
23
Why Study Human Use of Computer Systems?
(cont.)

๏ Human factors perspective:

A N
๏ Humans have necessary limitations
๏ Errors are costly in terms of: S M
๏ Loss of time
N O
๏ Loss of money
LA
๏ Loss of morale A Z
๏ Loss of lives in critical systems

๏ Design can cope with such limitations!

24
Why Study Human Use of Computer Systems?
(cont.)
๏ Social perspective:
๏ Computers contribute to critical parts of
A N
๏ Assist humans with their everyday
tasks (office automation)
our society, and cannot be ignored

S M
๏ Control complex machines (aircraft,
space shuttles, super tankers)
๏ Educate our children
๏ Take medical histories & provide
expert advice
N O ๏ Help control consumer equipment
(cars, washing machines)

LA
๏ Keep track of our credit worthiness ๏ Entertainment (games, intellectual

๏ Book travel A Z
๏ Control air & ground traffic flow
stimulation).…
๏ In all these perspectives, economics and
human best interests are aligned
๏ Control chemical/oil/nuclear plants/
space missions

25
Usability
 Goals of HCI

usability of systems that include computers” A N

๏ “To develop or improve the safety, utility, effectiveness, efficiency, and

๏ Safety - design of safety-critical systems

S M
O
๏ Utility - the functionality of a system
N
A
๏ Usability - making systems easy to learn and easy to use
L
A Z
27
 Why Is HCI Important?

N
๏ In order to achieve efficient, effective and safe products/systems:
A
may cause reduced productivity
S M
๏ Productivity – introducing technology that does not support the work

N O
๏ Safety – crashed air planes and nuclear power plant disasters have led
to an understanding why HCI is important!

LA
A Z
Computers should be designed for the needs and
capabilities of the people for whom they are intended!

28
 Why Is HCI Important?
(cont.)

๏ More reasons:
A N
๏ The interface is not a “later problem”

S M
๏ Products and systems cannot be developed and designed using the
O
developers/designers themselves as the norm
N
A
๏ Users might not have a great interest in technology
L
Z
๏ Users rarely read manuals and instructions

A
29
 Usability

๏ Usability - the key concept in HCI

A N
๏ Effectiveness - effective to use S M
๏ Can be broken down into the following goals:

๏ Efficiency - efficient to use

N O
๏ Safety - safe to use
LA
A Z
๏ Utility - have good utility
๏ Learnability - easy to learn
๏ Memorability - easy to remember how to use

30
 Creating Usable Systems
(cont.)

Human Factors
A N
Computer Factors
๏ Usually small in size
๏ Different users
S M
๏ Different devices
๏ Smart phones, touch screen kiosk, etc.

about their interactions

N O
๏ Different conceptions or mental models ๏ Different capabilities and limitations
๏ Computing power, IO devices, etc.

knowledge and skills

LA
๏ Different ways of learning, keeping ๏ Different OS
๏ Rapidly changing user interface

A Z
๏ Cultural and national differences
๏ User preferences change as they
gradually master new interface
technology
๏ Offering new interaction possibilities
๏ Visual, tacticle, gesture-based
๏ Cultural and national differences
๏ User preferences change as they
gradually master new interface
31
 Creating Usable Systems
(cont.)

๏ What about the interaction?

A N
๏ Communication between user and computer
๏ Direct interaction S M
๏ Dialogue with feedback
N O
A
๏ Control throughout performance of the task
L
๏ Indirect interaction
A
๏ Batch processing
Z
๏ Intelligent sensors controlling the environment

32
 Creating Usable Systems
(cont.)

๏ Objective to be achieved:
A N
๏ Usability (Useful, Usable, Used)
๏ Safe S M
๏ Effective
N O
๏ Efficient
LA
๏ Enjoyable system
A Z
33
 Creating Usable Systems
(cont.)

๏ What needs to be considered? ๏ Control

A N
๏ User compatibility
๏ Product compatibility S M
๏ WYSIWYG
๏ Flexibility
๏ Task compatibility
N O ๏ Responsiveness
๏ Work flow compatibility
LA ๏ Invisible technology
๏ Consistency
๏ Familiarity A Z ๏ Robustness
๏ Protection
๏ Simplicity ๏ Ease of learning and use

34
 Creating Usable Systems
(cont.)

๏ User experience: ๏ Helpful

A N
๏ Interaction design is also
concerned with creating
S M
๏ Motivating
๏ Aesthetically pleasing
systems that are:
๏ Satisfying N O ๏ Supportive of creativity

๏ Enjoyable
LA ๏ Rewarding

๏ Fun
A Z ๏ Emotionally fulfilling

๏ Entertaining

35
 Creating Usable Systems
(cont.)

๏ What needs to be done?

A N
S M
๏ HCI focuses on user needs by assessing interface design &
implementation according to usability criteria
O
๏ Makes use of new, novel techniques & technologies
N
LA
๏ Applies usability design principles to achieve more productive & usable
systems and more satisfied users

A Z
36
 Creating Usable Systems
(cont.)
๏ European Council Directive 90/270/EEC
๏ Requires employers to ensure the A N
๏ Provides feedback on performance
๏ Displays information in a format &
following when designing, selecting,
S M
at a pace that is adapted to the
commissioning or modifying
software:

N O user
๏ It must conform to the principles
๏ Suitable for the task
๏ Easy to use
LA of software ergonomics
๏ Designers & employers can no

A Z
๏ Where appropriate, adaptable to
user’s knowledge & experiences
longer afford to ignore the user!!

Designers & employers can no longer

afford to ignore the user! 37
 Universal Usability

๏ Interface should handle diversity

of users: A N
๏ Question, how would you design
an interface to a database
๏ Backgrounds
S M
differently for:

๏ Abilities
N O A. right-handed female, Indian,
software engineer,
๏ Motivation
LA technology savvy, wants
๏ Personalities
๏ Cultures A Z rapid interaction
B. left-handed male, French,
artist

38
 Physical Variations
๏ Ability
๏ Disabled
‘variety’
A N
๏ Large variance reminds us there is great

๏ Elderly, handicapped, vision,

S M
๏ Name some devices that this would
affect

๏ Speed

N O
ambidexterity, ability to see in stereo
๏ Note most keyboards are the same
๏ Screen brightness varies considerably
๏ Color deficiency

LA
๏ Workspace (science of ergonomics) ๏ Chair height, back height, display

๏ Size & Design

A
๏ Field of anthropometry
Z angle
๏ Multi-modal interfaces
๏ Audio
๏ Measures of what is 5-95% for weight,
height, etc. (static and dynamic) ๏ Touch screens

39
 Personality

๏ Gender A N
๏ Think about your application, and see if user personality is important!

๏ Which games do women like?

S M
๏ Pac-man, Donkey Kong, Tetris

N O
๏ Why? (Hypotheses: less violent, quieter soundtracks, fully visible

A
playing fields, softer colors, personality, closure/completeness)
L
A Z
๏ Can we measure this?
๏ What current games are for women?
๏ Style, pace, top-down/bottom-up, visual/audio learners, dense
vs. sparse data

40
 Cultural & International Diversity

๏ No simple taxonomy of
user personality types
๏ Names, titles,
salutations A N
๏ Language
S M
๏ SSN, ID, passport
๏ Date / Time conventions O
๏ Sorting

N
๏ Weights and Measures
๏ Left-to-right
LA ๏ Icons, buttons, colors
๏ Etiquette
๏ Directions (!)
A Z ๏ Evaluation:
๏ Telephone #s and ๏ Local experts/
addresses usability studies

41
 Users with Disabilities

๏ Types of disabilities: ๏ Mobility

A N
๏ Vision
๏ Blind (bill-reader) S M
๏ Learning
๏ Dyslexia
๏ Low-vision
N O๏ Attention deficient, hemisphere
๏ Color-blind
LA specific, etc.

๏ Hearing
๏ Deaf A Z
๏ Limited hearing

42
 Users with Disabilities
(cont.)

๏ Keyboard and mouse

alternatives
๏ Text to Speech (TTS)
A N Magic Wand
Keyboard - a

M
๏ Check email on the
miniature computer
keyboard, with a

S
built-in mouse

๏ Color coding road, in bright

๏ Font-size
N O
sunshine, riding a bike
๏ Speech Recognition
๏ Contrast
LA ๏ Head-mounted optical
Z
A TTS software

๏ Text descriptors for web

images
A
๏ Screen magnification
mice

A person using a head-

mounted optical mice

43
 Elderly

๏ Reduced capabilities
include:
๏ Other needs
๏ Technology experience A N
๏ Motor skills is varied

S M
๏ Perception
๏ Vision, hearing, touch, O
๏ How many
grandmothers use

N
email?
mobility
๏ Speed
LA
๏ Uninformed on how

๏ Memory
A Z technology could help
them
๏ Touch screens, larger
fonts, louder sounds

44
 Children

๏ Technology savvy?
๏ Age changes much:
๏ Goals
๏ Educational A N
๏ Physical dexterity
S M
acceleration

๏ Double-clicking, click
and drag, and small
N O
๏ Socialization with peers
๏ Psychological –
targets
LA improved self-image,
๏ Attention span
๏ Intelligence
A Z self-confidence
๏ Creativity – art, music,
etc. exploration
๏ Varied backgrounds
(socio-economic)

45
 Children
(cont.)

๏ Teenagers are a special

group
๏ They:
A N
๏ Next generation
S
reset state) M
๏ Like exploring (easy to

๏ Beta test new

interfaces, trends
N O
๏ Don’t mind making
mistakes
๏ Cell phones, text
LA ๏ Like familiar characters

A Z
messages, simulations,
fantasy games, virtual
and repetition
๏ Don’t like patronizing
worlds comments,
๏ Requires Safety inappropriate humor
46
Natural User Interface (NUI)
 What is NUI?

๏ Natural user interface (NUI)

A N
S M
๏ A system for human-computer interaction that the user operates
through intuitive actions related to natural, everyday human behavior
๏ Examples of NUI:
N O
๏ Touch screen
LA
A Z
๏ Gesture recognition
๏ Speech recognition
๏ Brain-machine interaction

48
Natural User Interface (NUI)

A N
S M
N O
LA
A Z
49
HCI - The Future
 The Future

A N
S M
N O
LA
A Z
Future of Human-Computer-Interaction Source: Michael Raschke
51
 Research on HCI

A N
S M
N O
LA
A Z
Future Interface Group Source: Engadget 52
 A N
S M
N O
LA
A Z
53