Computer in HCI

Chapter 3
 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

2
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

3
 A ‘typical’ computer system
• screen, or monitor, on which there are windows
• keyboard
window 1
• mouse/trackpad
window 2
• variations
– desktop
– laptop
– PDA
12-37pm

▪ the devices dictate the styles of interaction that the system supports.
▪ If we use different devices, then the interface will support a different style of
interaction.

4
How many computers …

in your house? in your pockets?

– PC – PDA
– TV, VCR, DVD, Wi-Fi, – phone, camera
cable/satellite TV – smart card, card with
– microwave, cooker, magnetic strip?
washing machine – electronic car key
– central heating – USB memory
– security system

can you think of more? 5

 Interactivity?
Long ago in a galaxy far away … batch 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 …

Is faster always better?

6
Input Devices

text entry devices

keyboards (QWERTY et al.)

chord keyboards, phone pads
handwriting, speech, numeric
keypads
 Keyboards
• Most common text input device
• Allows rapid entry of text by experienced users
• Key press closes connection, causing a character code to be
sent
• Usually connected by cable, but can be wireless

8
 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 unwillingness to change.

9
QWERTY (ctd)

10
 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 tiredness
– But - large social base of QWERTY typists produce market pressures not to
change

11
 special keyboards

• designs to reduce fatigue for RSI(repetitive strain

injury)
• for one handed use
e.g. the Maltron left-handed keyboard

12
 Chord keyboards
• only a few keys - four or 5
• 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

• NEW – profitable market for some wearables

13
Chord keyboards
• Chord keyboards can also be
used where only one-handed
operation is possible, in
cramped and confined
conditions.

14
phone pad and T9 entry
• use numeric keys with multiple presses
2 –abc 6mno-
3 -def 7 -
pqrs
4 -ghi 8tuv-
5 -jkl 9 -
wxyz
hello = 4433555[pause]555666
surprisingly fast!
• T9 predictive entry
– type as if single key for each letter then use dictionary to
‘guess’ the right word
– hello = 43556 …
– creates ambiguity which is solved by additional menus
– e.g. 26 -> menu ‘am’ or ‘an’

What is the solution to reduce multiple key press problem in

Phone pads(phone keypad)?
15
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!
16
 Speech recognition
• Improving rapidly
• Most successful when:
– single user – initial training and learns peculiarities
– limited vocabulary systems
• Problems with
– external noise interfering
– imprecision of pronunciation
– large vocabularies
– different speakers
• Helps user who are visual disabled.

17
Numeric keypads
• for entering numbers quickly:
– calculator, PC keyboard
• widely used for telephones
• has two different layouts

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 # 0 . =
*
telephone calculator
18
Input Devices (ctd)

positioning, pointing and drawing

mouse, touchpad
trackballs, joysticks
touch screens, tablets
eyegaze, cursors
 the Mouse

• Handheld pointing device

– very common
– 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.)

20
 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,
mouse movement in (x, z) plane …
… an indirect manipulation device.
– device itself doesn’t obscure screen, is accurate and fast.
– hand-eye coordination problems for novice users

21
 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

22
 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

23
 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

24
Touchpad

25
 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

26
Trackball and thumbwheels

27
 Joystick and keyboard nipple
Joystick
– indirect
pressure of stick = velocity of movement
– buttons for selection
on top or on front like a trigger
– often used for computer games
aircraft controls and 3D navigation

Keyboard nipple
– for laptop computers
– miniature joystick in the middle of the keyboard

28
Joystick and keyboard nipple

29
 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

30
 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

31
Stylus and light pen

32
 Digitizing tablet
• Mouse like-device with cross hairs

• used on special surface

- rather like stylus

• very accurate
- used for digitizing maps

33
Digitizing tablet

34
 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
• potential for hands-free control
• high accuracy requires headset
• cheaper and lower accuracy devices available
sit under the screen like a small webcam

35
Eyegaze

36
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

37
 Discrete positioning controls

• in phones, TV controls etc.

– cursor pads or mini-joysticks
– discrete left-right, up-down
– mainly for menu selection

38
Output Devices

display devices

bitmap screens (CRT & LCD)

large & situated displays
digital paper
 bitmap displays
• screen is vast number of coloured dots
• bitmap-base means that the display is made of a fixed
number of dots or pixels in a rectangular grid.

40
 resolution and colour depth
• Resolution … used (inconsistently) for
– number of pixels on screen (width x height)
• e.g. SVGA 1024 x 768, PDA perhaps 240x400
– density of pixels (in pixels 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:
– 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

41
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

42
 Cathode ray tube
• 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

phosphor-
coated screen

43
 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

 Take extra care if pregnant.

but also posture, ergonomics, stress

44
 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 dedicated 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

45
 special displays
Random Scan (Directed-beam refresh, vector display)
– draw the lines to be displayed directly
– no jaggies
– 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

46
 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
– hand/body obscures screen
– may be solved by 2 projectors + clever software
back-projected
– frosted glass + projector behind

47
 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 screem
• in all cases … the location matters
– meaning of information or interaction is related to the location

48
 Hermes a situated display
• small displays beside office doors
• handwritten notes left using stylus
• office owner reads notes using web interface

49
Cont.

50
 Digital paper
appearance

• what?
– thin flexible sheets
– updated electronically cross
section
– but retain display

• how?
– small spheres turned
– or channels with coloured liquid
and contrasting spheres
– rapidly developing area

51
Digital paper

52
Virtual reality

virtual reality and 3D interaction

positioning in 3D space
moving and grasping
seeing 3D (helmets and caves)
 positioning in 3D space
• cockpit and virtual controls
– steering wheels, knobs and dials … just like real!
• the 3D mouse
– six-degrees of movement: x, y, z + roll, pitch, yaw
• data glove
– fibre optics used to detect finger position
• VR helmets
– detect head motion and possibly eye gaze
• whole body tracking
– accelerometers strapped to limbs or reflective dots and video processing

54
pitch, yaw and roll

yaw

roll
pitch

55
 3D displays

• desktop VR
– ordinary screen, mouse or keyboard control
– perspective and motion give 3D effect
• seeing in 3D
– use stereoscopic vision
– VR helmets
– screen plus shuttered specs, etc.

56
 VR headsets

• small TV screen for each eye

• slightly different angles
• 3D effect

57
 VR motion sickness
• time delay
– move head … lag … display moves
– conflict: head movement vs. eyes
• depth perception
– headset gives different stereo distance
– but all focused in same plane
– conflict: eye angle vs. focus
• conflicting cues => sickness
– helps motivate improvements in technology

58
simulators and VR caves
• scenes projected on walls
• realistic environment
• hydraulic rams!
• real controls
• other people

59
Physical controls

physical controls, sensors etc.

special displays and gauges

sound, touch, feel, smell
physical controls
environmental and bio-sensing
 dedicated displays

• analogue representations:
– dials, gauges, lights, etc.

• digital displays:
– small LCD screens, LED lights, etc.

• head-up displays
– found in aircraft cockpits
– show most important controls
… depending on context

61
 Sounds
• beeps, bongs, clonks, whistles and whirrs

• used for error indications

• confirmation of actions e.g. key click

62
 Touch, feel, smell

• touch and feeling important

– in games … vibration, force feedback
– in simulation … feel of surgical instruments
– called haptic devices

• texture, smell, taste

– current technology very limited

63
physical controls

• specialist controls needed …

– industrial controls, consumer products,
etc.
easy-clean
smooth buttons

multi-function
control
large buttons
clear dials

tiny buttons 64
 Environment and bio-sensing
• sensors all around us
– car courtesy light – small switch on door
– ultrasound detectors – security, washbasins
– RFID security tags in shops
– temperature, weight, location

• … and even our own bodies …

– iris scanners, body temperature, heart rate, galvanic skin
response, blink rate

65
Paper
printing and scanning

print technology, fonts

WYSIWYG
scanning, OCR
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
– cost!!
67
 Types of dot-based printers
• dot-matrix printers
– 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.

68
 Fonts
• Font – the particular style of text
Courier font
Helvetica font
Palatino font
Times Roman font
 §´  (special symbol)

• Size of a font measured in points (1 pt about 1/72”)

(vaguely) related to its height
This is ten point Helvetica
This is twelve point
This is fourteen point
This is eighteen point
and this is twenty-four point

69
 Fonts (ctd)
Pitch
– fixed-pitch – every character has the same width
e.g. Courier
– variable-pitched – some characters wider
e.g. Times Roman – compare the ‘i’ and the “m”
Serif or Sans-serif
– sans-serif – square-ended strokes
e.g. Helvetica
– serif – with splayed ends (such as)
e.g. Times Roman or Palatino

70
 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

• serif fonts
– helps your eye on long lines of printed text
– but sans serif often better on screen

71
 Screen Vs page(print)
• WYSIWYG
– what you see is what you get
– aim of word processing, etc.
• but …
– screen: 72 dpi, landscape image
– print: 600+ dpi, portrait
• can try to make them similar
but never quite the same
• so … need different designs, graphics etc, for screen and print

72
 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

• Shines light at paper and note intensity of reflection

– colour or greyscale

• Typical resolutions from 600–2400 dpi

73
 Scanners (ctd)
Used in
– desktop publishing for incorporating photographs and other
images

– document storage and retrieval systems, doing away with

paper storage
+ special scanners for slides and photographic negatives

74
 Optical character recognition
• OCR converts bitmap back into text
• different fonts
– create problems for simple “template matching” algorithms
– more complex systems segment text, decompose it into
lines and arcs, and decipher characters that way
• page format
– columns, pictures, headers and footers

75
memory

short term and long

term(speed & capacity),virtual
memory, storage formats
Short-term Memory - RAM
• Random access memory (RAM)
– on silicon chips
– 100 nano-second access time
– usually volatile (lose information if power turned
off)
– data transferred at around 100 Mbytes/sec

• Some non-volatile RAM used to store basic

set-up information

• Typical desktop computers:

64 to 256 Mbytes RAM
What is the capacity of recent RAM?
77
 Long-term Memory - disks
• magnetic disks
– floppy disks store around 1.4 Mbytes
– hard disks typically 40 GB to 100s of GB
access time ~10ms, transfer rate 100kbytes/s

• optical disks
– use lasers to read and sometimes write
– more robust that magnetic media
– CD-ROM
- same technology as home audio, ~ 700 MB
– DVD - for AV applications, or very large files 4.7 GB

What is the capacity of recent Disk (Magnetic or Optical)?

78
 virtual memory
• Problem:
– running lots of programs + each program large
– not enough RAM

• Solution - Virtual memory :

– store some programs temporarily on disk
– makes RAM appear bigger

• But … swopping
– program on disk needs to run again
– copied from disk to RAM
– slows t h i n g s d o w n !!!
79
 Storage formats - text
• ASCII - 7-bit binary code for to each letter and character
• UTF-8 - 8-bit encoding of 16 bit character set
• 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

80
 Storage formats - media
• Images:
– many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)
– plus different compression techniques
(to reduce their storage requirements)

• Audio/Video
– again lots of formats :
(QuickTime, MPEG, WAV, etc.)
– compression even more important
– also ‘streaming’ formats for network delivery

81
processing and networks

finite speed ,limits of interaction

networked computing
 Finite processing speed
• Designers tend to assume fast 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

83
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

84
 Networked computing
Networks allow access to …
– large memory and processing
– other people (groupware, email)
– shared resources – esp. the web

Issues
– network delays – slow feedback
– conflicts - many people update data
– unpredictability

85