Chapter 3

The Computer in
HCI

1
 Interacting with
computers
To understand human–computer interaction,
there is need to understand computers!

2
 Comput
A computerer system is made
various elements:
up of

Each of these elements affects the interaction,

some of them are:
» Input devices – text entry and pointing
» Output devices – screen (small & large),
digital
paper
» Virtual reality – special interaction and
display
devices
» Physical interaction
» Paper – as output (print) and input (scan)
3
» Memory
 A typical computer
• system
Screen, or monitor, on which there are windows
• Keyboard
• Mouse/trackpad

• Variations
– Desktop
– Laptop
– PDA

4
 Interactivit
• y?
Interaction (with or without computer) is a
process of information transfer.
• The devices dictate/order the styles of interaction
that the system supports.
– If we use different devices, then the
interface will support a different style
of interaction
• In the early days, batch processing was common: a
large mass of information was dumped into and
processed by the computer.
• Nowadays, computers respond within milliseconds
and computer systems are integrated in many
different devices.

5
 Interactivit
Earlier batchy?
processing
– Punched card stacks or large data files prepared
– Long wait
– Line printer output
Now most computing is interactive
– Rapid feedback
– The user in control (most of the time)
– Doing rather than thinking

6
 Text entry
devices
Keyboards
• Most common text input device
• Allows rapid entry of text by
experienced users
• Key press causes a character code to
be sent
• Usually connected by cable, but
can be wireless

7
 Layout – QWERTY
1 2 3 4 5 6 7 8 9 0
Q W E R T Y

U I O P A
X C V B N M , .
S SPACED F
G H
• Standardised layout
J K L
but :
Z
– Non-alphanumeric keys are
placed differently
– Accented symbols needed
for different scripts
– Minor differences between
UK and USA keyboards
• QWERTY arrangement not 8
 Alternative keyboard
Alphabetic
layouts
– Keys arranged in alphabetic order
– Not faster for trained typists
– Not faster for beginners either!
Dvorak (The left hand has all of the vowels and some
consonants and the right hand has only consonants.)
– Common letters under dominant fingers
– Biased towards right hand
– Common combinations of letters alternate between
hands
– 10-15% improvement in speed and reduction in
fatigue
– But - large social base of QWERTY typists
Designs to reduce
produce fatigue
market for RSI(repetitive
pressures not to changestrain injury)
•Special keyboards
For one handed use -E.g. the Marlon left handed
Keyboard 9
 Chord keyboards
Only a few keys - four or five
Letters typed as combination of key presses
Compact size
–Ideal for portable
applications Short learning time
– Key presses reflect letter
shape
Fast
– Once you have trained
BUT - social resistance, plus
fatigue after extended use
Phone pad and T9 entry
• Use 2numeric
–abc 6 - mwith
keys no
3 - d e fpresses
multiple 7-pqrs
4-ghi 8-tuv
5-jkl 9-wxy
• T9 predictive entry
z
– Type as if single key for each letter
– Use dictionary to "guess‟ the right
word
10
 Numeric
keypads
• For entering numbers
quickly:
• For
– Calculator, PC keyboard
1 2 3 7 8 9
telephones
4 5 6 4 5 6
• ATM
7 8 9 1 2 3
Not all have the
# 0 . =
same * 0
arrangement Telephon Calculator
e
11
 Handwriting
•
Recognition
Text can be input into the computer, using
a pen and a digitizing tablet
– Natural interaction
• Technical problems:
– Capturing all useful information - stroke
path, pressure, etc. in a natural manner
– Segmenting joined up writing into individual
letters
– Interpreting individual letters
– Coping with different styles of handwriting
• Used in personal digital assistant (PDAs), and
tablet computers 12
 Speech
• recognition
Improving rapidly
• Most successful when:
– Single user – initial training and learns peculiarities
– Limited vocabulary systems
– Good for the case when hands/eyes are occupied or disabled
• Problems
– External noise interfering
– Pronunciation
– Large vocabularies
– Feedback may be limited
– Speech is a single channel mode

13
 Speech Recognition
• Speech recognition can be used in
3 scenarios:
– As an alternative text entry device
replacing the keyboard in the current
software
– With new software especially designed for
speech recognition
– In situations where the use of keyboards is
impractical or impossible

14
 Speech Cont.
• Some guidelines for speech recognition
interface design
– Consider voice recognition as an
input device when user’s hands are
occupied or user’s eyes are busy
– Avoid voice recognition as an
input device in open environments
(noise & security)
– Provide a familiar vocabulary e.g.,
user is more consistent when
pronouncing familiar words
15
Positioning, Pointing and
Drawing

16
 The
Mouse
• Handheld pointing device
– Very common
– Easy to use
• Hand-eye coordination problems for
beginners
• Two characteristics
– Planar movement
– Buttons
• Usually from 1 to 3 buttons on top, used for
making a
selection, indicating an option, or to initiate
drawing , etc
17
 How does it
work?
Two methods for detecting motion
• Mechanical
– Ball on underside of mouse turns as mouse is
moved
– Can be used on almost any flat surface
• Optical
– Light emitting diode (semi-conductor light
source) on underside of mouse
– May use special grid-like pad or just on desk
– Less vulnerable to dust and dirt
– Detects fluctuating alterations in reflected
light intensity to calculate relative motion
in (x, z) plane 18
 Touchpad
• Small touch sensitive tablets
• ‟ Stroke” to move mouse
pointer
• Used mainly in laptop
computers
Trackball and thumbwheels
Trackball
– An upside-down mouse
– Ball is rotated inside static
housing
– Very fast for gaming
– Used in some portable and
notebook computers 19
 Joystick and keyboard
nipple
Joystick
– Buttons for selection
– Often used for computer games
Aircraft controls and 3D navigation
Keyboard nipple/ trackpads
– For laptop computers
– Small joystick in the middle of the
keyboard
– Controls the rate of movement across the
screen

20
 Touch-sensitive
• screen
Detect the presence of finger or stylus on the
screen
• Direct pointing device
• Advantages:
– Fast, and requires no specialized pointer
– Good for menu selection
– Suitable for use in hostile environment: clean and
safe
from damage.
• Disadvantages:
– Finger can mark screen
– Less accurate (finger is a fairly blunt/unsharpened
instrument!)
– Difficult to select small regions or perform accurate
drawing 21
– Lifting arm can be tiring
Stylus
– Small pen-like pointer to draw directly on screen
– May use touch sensitive surface or magnetic
detection
– Used in PDA, tablet PCs and drawing tables
Light Pen
– Now rarely used
– Uses light from screen to detect location
Eye gaze
– Control interface by eye gaze direction
E.g. look at a menu item to select it
– Uses laser beam reflected off retina
– Potential for hands-free control
– High accuracy requires headset 22
 Cursor keys
• For two dimension navigation
• Four keys (up, down, left, right) on
keyboard.
• No standardised layout, but inverted “T”,
most common

23
 Discrete Positioning
Controls
• In phones, TV controls
etc.
– Cursor pads or mini-
joysticks
– Discrete left-right, up-
down
– Mainly for menu selection

24
Guidelines for pointing device
selection
• Use touchscreen when
– training is low,
– frequency of use is low,
– desk space is small, & the task
requires little or no text input
• Mouse is faster than trackball
• Minimize hand & eye movement between input
devices
25
 Display devices

Bitmap screens (CRT and LCD)

Large and situated displays
Digital paper

26
 Bitmap Displays
• Screen is vast number of
coloured dots

27
 Bitmap Displays
• Resolution
– Number of pixels on screen (width x
height)
• E.g. SVGA 1024 x 768, PDA perhaps
240x400
– Density of pixels (dots per inch - dpi)
• Typically between 72 and 96 dpi
• Aspect ratio
– Ration between width and height
– 4:3 for most screens, 16:9 for wide-
screen TV
28
 Cathode ray tube
• (CRT)
Stream of electrons emitted from electron gun,
focused and directed by magnetic fields, hit
phosphor-coated screen which glows
• Used in TVs and computer monitors
electron
beam

electron gun

focussing
and
deflection

p
h
o 29
s
 Health hazards of CRT !
• X-rays: largely absorbed by screen (but not at rear!)
• Radiation from phosphors: insignificant levels
• Radio frequency emissions, plus ultrasound
• Electrostatic field - leaks out through tube to user. Intensity
dependant on distance and humidity. Can cause rashes.
• Electromagnetic fields: Create induction currents in
conductive materials, including the human body.
• Two types of effects attributed to this: visual system - high
incidence of cataract in VDU operators, and concern over
reproductive disorders (miscarriages and birth defects).
Health hints
• Do not sit too close to the screen
• Do not use very small fonts
• Do not look at the screen for long periods without a break
• Do not place the screen directly in front of a bright window
• Work in well-lit surroundings
30
 Liquid crystal displays-
• LCD
Smaller, lighter, and … no radiation
problems.
• Found on PDAs, portables and notebooks,
and increasingly on
desktop and even for home TV
• Also used in dedicated displays:
Digital watches, mobile phones, etc
• Light reflected not emitted => less eye strain
• Apart from safety and comfortable
reasons,
LCD can be more flexible and has
more
functions 31
 Large displays
• Used for meetings, lectures, etc.
• Technology
Plasma – usually wide screen
video walls – lots of small screens
together Projected– RGB lights or
LCD projector Back-projected
– frosted glass + projector
behind
Situated displays
• Displays in ‘public’ places
– Large or small
– Very public or for small group
• Display only-for information relevant
to location
• Or interactive-use stylus, touch
sensitive screen
32
• In all cases : the location matters-meaning of information or
 Digital paper and
• 3D
Digital paper, also known as interactive
paper,
is patterned paper used in conjunction with
a digital pen to create handwritten digital
documents. The printed dot pattern
uniquely identifies the position coordinates
on the paper. The digital pen uses this
• pattern
Virtual to store and
reality the handwriting and upload
3D interaction
it to a computer
VR Enables one or more users to move and
react in a computer-simulated environment
by using 3D interaction (interact in 3
dimension like real situations)
33
 3D displays
• Desktop VR
– Ordinary screen, mouse or keyboard control
– Perspective and motion give 3D effect
• Seeing in 3D
– Use stereoscopic vision (combination of
display devices that work together)
– VR helmets (detect head motion and possibly
eye gaze)
– Screen plus shuttered specs, etc.

34
Sensors and Physical
Controls

35
 Sounds
• Sound may be beeps, bongs, clonks,
whistles (Used for error indications or
confirmation of actions e.g. key click)
• Speech output
– Digitized speech - recorded
human speech directly in digital
format
– Synthesized speech - generated
using computers via speech
processing techniques

36
 Sound
• Advantage: Cont…
– Useful when user’s eyes are busy or
user cannot access the screen
• Disadvantages:
– Limited information because speech is
transient
– Lack of privacy & security under open
environment
– Speech is a single channel mode, i.e.,
we cannot
listen multiple messages simultaneously
– Spoken rate (~120-180 words/min.)
is slower than reading (~200-300
words/min.) 37
 Sound
• Some guidelines for use of speech output
– ConsiderCont…
as output device when user’s
eyes are busy
or user cannot access the screen
– Avoid as output device in open environment,
when
privacy & security are important, when
frequency of
use is high, when multiple messages must be
sent
simultaneously, when human memory is
overloaded
• Use output rate of approximately 180 words per
min.
• Structure voice instructional prompts to present
the goal first & the action last
e.g., telephone banking system 38
Touch and feel
• Touch and feeling important
– In games … vibration
– In simulation … feel of surgical
instruments
– Called haptic devices
Texture, smell, taste
– Current technology is very limited in
using such senses

39
 Physical
• controls
Specialist controls needed …
– Industrial controls,consumer
products, etc.

easy-clean
smooth buttons
multi-
large buttons function
clear control
dials

tiny 40
 Paper: printing and
scanning
Paper usually regarded as output only
can be input too
– e.g. OCR and scanning

41
 Printing

• Image made from small dots

– Allows any character set or graphic to be
printed
• Critical features:
– Resolution
• Size and spacing of the dots
• Measured in dots per inch (dpi)
– Speed
• Usually measured in pages per minute

42
 Types of dot-based
• Dot-matrix printersprinters
– Use inked ribbon (like a typewriter)
– Line of pins that can strike the ribbon, dotting the paper.
– Typical resolution 80-120 dpi
• Ink-jet and bubble-jet printers
– Tiny blobs of ink sent from print head to paper
– Typically 300 dpi or better .
• Laser printer
– Like photocopier: dots of electrostatic charge deposited on drum, which
picks up
toner (black powder form of ink) rolled onto paper which is then fixed with
heat
– Typically 600 dpi or better.
• Font – the particular style of text
Courier font
Helvetica font 43
Palatino font
 Readability of text
• Lowercase
– Easy to read shape of words
• UPPERCASE
– Better for individual letters and non-
words
E.g. flight numbers: BA793 vs. ba793

Scanners
• Take paper and convert it into a bitmap
• Two sorts of scanner
– Flat-bed: paper placed on a glass plate,
whole page converted into
bitmap
– Hand-held: scanner passed over paper, digitising strip
typically 3-4” wide
• Typical resolutions from 600–2400 dpi
44
• Used in: desktop publishing for incorporating photographs
 Optical character
recognition(OCR)
• OCR converts bitmap into text
• Different fonts
– More complex systems segment
text, decompose it into lines and
arcs, and decipher characters that
way
• Page format has to be considered
– Columns, pictures, headers and
footers
45
 Memory
Short term and long
term

46
 Short-term Memory -
• Random access memory RAM
(RAM)
– On silicon chips
– 100 nano-second access time
– Usually volatile (lose information if power turned off)
• Some non-volatile RAM used to store basic set-up information
Long-term Memory – disks
• Magnetic disks
– Floppy disks store around 1.4 Mbytes
– Hard disks typically 40 Gbytes to 100s of Gbytes
– Access time ~10ms
• Optical disks
– Use laser to read and write
– More robust than magnetic media
– CD-ROM and DVD
• Flash-Memory
– Silicon based but persistent
– Plug-in USB devices for data transfer
– Used in PDAs, cameras, etc.
47
 Compressio
•
•
n required
Reduce amount of storage
Lossless
– Recover exact text or image – e.g. GIF, ZIP
– Look for commonalities:
• E.g. AAAAAAAAAABBBBBCCCCCCCC10A5B8C
Storage formats – text
• ASCII - 7-bit binary code for each letter and character
• UTF-8 - 8-bit encoding (UTF=Unicode Transformation Format )
• RTF (rich text format)- text plus formatting and layout information
• SGML (standardized generalised markup language)
- documents regarded as structured objects
• XML (extended markup language)-simpler version of SGML for web
applications
Storage formats-media
• Images: many storage formats(PostScript, GIFF, JPEG, TIFF, PICT, etc)
– Plus different compression techniques
• Audio/Video: again lots of formats : (QuickTime, MPEG, WAV, etc.)
– Compression even more important and ‘streaming’ formats for
network delivery method of access-use indexing.
48
Processing and
networks

49
 Processing
• Designers tend to assume fast
speed
processors, and make interfaces more
and more complicated
• But problems occur, because processing
cannot keep up with all the tasks it
needs to do
– Cursor overshooting because system has
buffered key presses
– Icon wars - user clicks on icon, nothing
happens, clicks on another,
then system responds and windows fly
everywhere
• Also problems if system is too fast
- e.g. help screens may scroll through
text much too rapidly to be read
50
 Limitations on interactive
performance
Computation bound
– Computation takes ages, causing frustration for the user
Storage channel bound
– Bottleneck in transference of data from disk to memory
Graphics bound
– Common bottleneck: updating displays requires a lot of
effort - sometimes
helped by adding a graphics co-processor optimised to take
on the burden
Network capacity
– Many computers networked - shared resources and files,
access to printers etc. - but interactive performance can be
reduced by slow network speed
51
 Networked
computing
Networks allow access to …
– Large memory and processing
– Other people (groupware, email)
– Shared resources – especially the web

Issues
– Network delays – slow feedback
– Conflicts - many people update data
– Unpredictability of the future

52
 Example
1
• What is the basic architecture of
a computer system?
• Here, architecture must be
seen from the point of
interaction between human
and computer.

53
• The basic architecture of a computer systems
consists of the computer itself (with associated
memory), input and output devices for user
interaction and various forms of hard copy devices.
• A typical configuration of user input/output devices
would be a screen with a keyboard for typing text
and a mouse for pointing and positioning. Depending
on circumstance, different pointing devices may be
used such as ligh tpen (for more direct interaction)
or a trackball (especially on portable computers).
• The computer itself can be considered as
composed of some processing element and
memory. The memory is itself divided into short
term memory which is lost
• When the machine is turned off and permanent
memory which persists.
54
 Exercise
1. What kind of input and output
Computer devices do you
recommend for tourist information
system?
2. Discuss the impact of increasing
memory on interaction between
human and computer?

55