HUMAN COMPUTER INTERACTION
LECTURE 3
chapter 2
the computer
1A-2
The Computer
a computer system is made up of various elements each of these
elements affects the interaction
input devices – text entry and pointing
output devices – screen (small & large), digital paper
virtual reality – special interaction and display devices
physical interaction – e.g. sound, haptic, bio-sensing
paper – as output (print) and input (scan)
memory – RAM & permanent media, capacity & access
processing – speed of processing, networks
Interacting with computers
to understand human–computer interaction
… need to understand computers!
what goes in and out
devices, paper,
sensors, etc.
what can it do?
memory, processing,
networks
A ‘typical’ computer system
?
screen, or monitor, on which there are windows
keyboard
mouse/trackpad
variations
desktop
laptop
PDA (Personal digital assistant)
The types of interaction that the system supports are determined by the
devices.
The interface will offer a different type of interaction if we utilize different
devices.
How many …
computers in your house?
hands
up, …
… none, 1, 2 , 3, more!!
computers in your pockets?
are you thinking …
… PC, laptop, PDA ??
How many computers …
ininyour
yourhouse?
pockets?
PCPDA (Personal
Digital Assistant also known handheld PC)
TV,phone,
VCR, camera
DVD, HiFi, cable/satellite TV
microwave,
electroniccooker,
car keywashing machine
central
USB heating
memory
security system
try your pockets and bags
can you think of more?
Interactivity?
Long ago in a galaxy far away … batch processing
punched card stacks or large data files prepared
long wait ….
line printer output
… and if it is not right …
Now most computing is interactive
rapid feedback
the user in control (most of the time)
doing rather than thinking …
Richer interaction
sensors
and devices
everywhere
text entry devices
keyboards (QWERTY et al.)
chord keyboards, phone pads
handwriting, speech
Keyboards
Most common text input device
Allows rapid entry of text by experienced users
Keypress closes connection, causing a character code to
be sent
Usually connected by cable, but can be wireless
layout – QWERTY
Standardised layout
but …
non-alphanumeric keys are placed differently
accented symbols needed for different scripts
minor differences between UK and USA keyboards
QWERTY arrangement not optimal for typing
– layout to prevent typewriters jamming!
Alternative designs allow faster typing but large social base of
QWERTY typists produces reluctance to change.
alternative keyboard layouts
Alphabetic
keys arranged in alphabetic order
not faster for trained typists
not faster for beginners either!
Dvorak
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 produce market pressures
not to change
special keyboards
that allows the user to enter characters
designs to reduce fatigue for RSI
for one handed use
e.g. the Maltron left-handed keyboard
repetitive strain injury (RSI)
Chord keyboards
only a few keys - four or 5
letters typed as combination of keypresses
compact size
– ideal for portable applications
short learning time
– keypresses reflect letter shape
fast
– once you have trained
BUT - fatigue after extended use
NEW – niche market
phone pad and T9 entry
use numeric keys with
multiple presses
2–abc 6-mno
3-def 7-pqrs
4-ghi 8-tuv
5-jkl 9-wxyz
hello = 4433555[pause]555666
T9 predictive entry
type as if single key for each letter
use dictionary to ‘guess’ the right word
hello = 43556 …
Handwriting recognition
Text can be input into the computer, using a pen and a
digesting 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 PDAs, and tablet computers …
… leave the keyboard on the desk!
Speech recognition
Improving rapidly
Voice assistants such as Google Home, Siri, Cortana
Most successful when:
single user – initial training
limited vocabulary systems
Problems with
external noise interfering
inaccuracy of pronunciation
large vocabularies
Numeric keypads
for entering numbers quickly:
calculator, PC keyboard
for telephones
1 2 3 7 8 9
4 5 6 4 5 6
not the same!!
7 8 9 1 2 3
.
ATM like phone *
0 # 0 =
telephone 1st calculator
positioning, pointing and
drawing
mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors
the Mouse
Handheld pointing device
verycommon
easy to use
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.)
the mouse (ctd)
Mouse located on desktop
requires physical space
no arm fatigue
Relative movement only is detectable.
Movement of mouse moves screen cursor
Screen cursor oriented in (x, y) plane
How does it work?
Two methods for detecting motion
Mechanical
Ball on underside of mouse turns as mouse is
moved
Rotates orthogonal potentiometers
Can be used on almost any flat surface
Optical
light emitting diode on underside of mouse
may use special grid-like pad or just on desk
less susceptible to dust and dirt
detects fluctuating alterations in reflected light
intensity to calculate relative motion in (x, z)
plane
Even by foot …
some experiments with the
footmouse
controlling mouse movement with
feet …
not very common :-)
but foot controls are common
elsewhere:
car pedals
sewing machine speed control
organ and piano pedals
Touchpad
small touch sensitive tablets
‘stroke’ to move mouse pointer
used mainly in laptop computers
good ‘acceleration’ settings important
fast stroke
lots of pixels per inch moved
initial movement to the target
slow stroke
less pixels per inch
for accurate positioning
Trackball and thumbwheels
Trackball
ball is rotated inside static housing
like an upsdie down mouse!
relative motion moves cursor
indirect device, fairly accurate
separate buttons for picking
very fast for gaming
used in some portable and notebook
computers.
Thumbwheels …
for accurate CAD – two dials for X-Y cursor
position
for fast scrolling – single dial on mouse
Joystick and keyboard nipple
Joystick
When gaming becomes more intense, a
joystick should be used instead of a mouse
indirect
pressure of stick = velocity of
movement
buttons for selection
on top or on front like a trigger
often used for computer games
aeroplane controls and 3D
navigation
Keyboard nipple
for laptop computers
miniature joystick in the middle of the
Touch-sensitive screen
Detect the presence of finger or stylus on the
screen.
works by interrupting matrix of light beams,
capacitance changes or ultrasonic reflections
direct pointing device
Advantages:
fast, and requires no specialised pointer
good for menu selection
suitable for use in hostile environment: clean and
safe from damage.
Disadvantages:
finger can mark screen
imprecise (finger is a fairly blunt instrument!)
difficult to select small regions or perform accurate
drawing
lifting arm can be tiring
Stylus and light pen
Stylus
small pen-like pointer to draw directly on screen
may use touch sensitive surface or magnetic
detection
used in PDA, tablets PCs and drawing tables
Light Pen
now rarely used
uses light from screen to detect location
BOTH …
very direct and obvious to use
but can obscure screen
Digitizing tablet
Mouse like-device with cross
hairs
used on special surface
- rather like stylus
very accurate
- used for digitizing maps
Eyegaze
control interface by eye gaze
direction
e.g. look at a menu item to select it
uses laser beam reflected off retina
… a very low power laser!
mainly used for evaluation (ch x)
potential for hands-free control
high accuracy requires headset
cheaper and lower accuracy devices
available
sit under the screen like a
small webcam
Cursor keys
Four keys (up, down, left, right) on keyboard.
Very, very cheap, but slow.
Useful for not much more than basic motion for text-editing tasks.
No standardised layout, but inverted “T”, most common
Discrete positioning controls
in phones, TV controls etc.
cursor pads or mini-joysticks
discrete left-right, up-down
mainly for menu selection
display devices
bitmap screens (CRT & LCD)
large & situated displays
digital paper
bitmap displays
screen is vast number of coloured dots
The display is made up of rows and columns of tiny blocks, or pixels
resolution and colour depth
Resolution … used (inconsistently) for
The image resolution is the size of a bitmapped graphic in pixels
It is calculated by multiplying the width (in pixels) by the height (in
pixels) of an image.
number of pixels on screen (width x height)
e.g. SVGA 1024 x 768, PDA perhaps 240x400
density of pixels (Pixels Per Inch - PPI or 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
Colour depth:
The number of bits used per pixel is called the colour depth.
how many different colours for each pixel?
black/white or greys only
256 from a pallete
8 bits each for red/green/blue = millions of colours
anti-aliasing
Jaggies
diagonal lines that have discontinuities in due to horizontal raster
scan process.
Anti-aliasing
softens edges by using shades of line colour
also used for text
Health hazards of CRT !
The CRT in a computer display is similar to the "picture tube" in
a television receiver
CRTs emit a small amount of X-ray band radiation which can result
in a health hazard
CRTs operate at very high voltage which can overheat system
They are heavy to pick up and carry around
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 environments
Liquid crystal displays
Smaller, lighter, and … no radiation problems.
Found on PDAs, portables and notebooks,
… and increasingly on desktop and even for
home TV
also used in dedicted displays:
digital watches, mobile phones, HiFi controls
How it works …
Top plate transparent and polarised, bottom plate
reflecting.
Light passes through top plate and crystal, and reflects
back to eye.
Voltage applied to crystal changes polarisation and
hence colour
N.B. light reflected not emitted => less eye strain
special displays
Random Scan (Directed-beam refresh, vector
display)
draw the lines to be displayed directly
lines need to be constantly redrawn
rarely used except in special instruments
Direct view storage tube (DVST)
Similar to random scan but persistent => no flicker
Can be incrementally updated but not selectively
erased
Used in analogue storage oscilloscopes
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
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
in all cases … the location
matters
meaning of information or
interaction is related to the location
Hermes a situated display
small displays beside office doors
handwritten notes left using stylus
office owner reads notes using web interface
small displays
beside
office doors
handwritten
office owner
notes left
reads notes
using stylus
using web interface
Digital Paper
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 to store
handwriting and upload it to a computer.
45