Projects

• Project Phase One reports are due next

The Computer aspect week: March 10.
• Submit a printed hard-copy of your report
of HCI in class on March 10.
• If you or your teammates cannot attend
the lecture, submit your report to Gulsah
Tumuklu at A-401 before class on March
10.
• Check the newsgroup for
announcements: looking for teammates?
etc.

Reading assignment The Computer

a computer system is made up of various elements
• Again no reading assignment this week.
each of these elements affects the interaction
– input devices – text entry and pointing
• Work on your project.
– 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 A ‘typical’ computer system

to understand human–computer interaction • screen, or monitor, on which there are windows
• keyboard
… need to understand computers! • mouse/trackpad
window 1

window 2
• variations
– desktop
what goes in and out – laptop
devices, paper, – PDA
sensors, etc. 12-37pm

the devices dictate the styles of interaction that the system

supports
If we use different devices, then the interface will support a
what can it do? different style of interaction
memory, processing,
networks

1
How many … How many computers …

• computers in your house? in your house? in your pockets?

– hands up, … – PC – PDA
… none, 1, 2 , 3, more!! – TV, VCR, DVD, HiFi, – phone, camera
cable/satellite TV – smart card, card with
– microwave, cooker, magnetic strip?
• computers in your pockets? washing machine – electronic car key
– central heating – USB memory
– security system

can you think of more?

Interactivity? Richer interaction

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 …
sensors
Is faster always better?
and devices
everywhere

Keyboards
• Most common text input device
• Allows rapid entry of text by experienced
users
text entry devices
• Keypress causes a character code to be sent
• Usually connected by cable, but can be
keyboards (QWERTY et al.) wireless
chord keyboards, phone pads
handwriting, speech

2
layout – QWERTY QWERTY (ctd)
• Standardized layout
but …
– non-alphanumeric keys are placed differently
– accented symbols needed for different scripts
– minor differences between UK and USA keyboards 1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
• QWERTY arrangement not optimal for typing A S D F G H J K L
– layout to prevent typewriters jamming!
Z X C V B N M , .
• Alternative designs allow faster typing but large social
SPA CE
base of QWERTY typists produces reluctance to change.

alternative keyboard layouts special keyboards

Alphabetic • designs to reduce fatigue
– keys arranged in alphabetic order
– not faster for trained typists • for one handed use
– not faster for beginners either!
e.g. the Maltron left-handed keyboard

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

Chord keyboards phone pad and T9 entry

only a few keys - four or 5 • use numeric keys with
letters typed as combination of keypresses multiple presses
2 –abc mno6 -
compact size
3 -def 7
pqrs -
– ideal for portable applications 4 -ghi tuv8 -
short learning time 5 -jkl 9
wxyz -
– keypresses reflect letter shape hello = 4433555[pause]555666
- fast once you have trained surprisingly fast!
• T9 predictive entry
– type as if single key for each letter
– use dictionary to ‘guess’ the right word

BUT - social resistance, plus fatigue after extended use

NEW – niche market for some wearables

3
Handwriting recognition Speech recognition
• Text can be input into the computer, using a • Improving rapidly
pen and a digesting tablet
– natural interaction • Most successful when:
– single user – initial training and learns peculiarities
• Technical problems: – limited vocabulary systems
– capturing all useful information - stroke path,
pressure, etc. in a natural manner • Problems with
– segmenting joined up writing into individual letters
– external noise interfering
– interpreting individual letters
– imprecision of pronunciation
– coping with different styles of handwriting
– large vocabularies
• Used in PDAs, and tablet computers … – different speakers
… leave the keyboard on the desk!

Numeric keypads

• for entering numbers quickly:

– calculator, PC keyboard
• for telephones positioning, pointing and drawing
not the same!! 1 2 3 7 8 9
4 5 6 4 5 6 mouse, touchpad
7 8 9 1 2 3 trackballs, joysticks etc.
0 # 0 . =
touch screens, tablets
* eyegaze, cursors
telephone calculator

the Mouse the mouse (ctd)

• Handheld pointing device Mouse located on desktop

– requires physical space
– very common – no arm fatigue
– easy to use

Relative movement only is detectable.

• Two characteristics Movement of mouse moves screen cursor
– planar movement Screen cursor oriented in (x, y) plane,
mouse movement in (x, z) plane …
– buttons
(usually from 1 to 3 buttons on top, used for … an indirect manipulation device.
making a selection, indicating an option, or to – device itself doesn’t obscure screen, is accurate and fast.
initiate drawing etc.) – hand-eye coordination problems for novice users

4
How does it work? Even by foot …
Two methods for detecting motion • some experiments with the footmouse
• Mechanical – controlling mouse movement with feet …
– Ball on underside of mouse turns as mouse is moved – not very common :-)
– Rotates orthogonal potentiometers
– Can be used on almost any flat surface
• but foot controls are common elsewhere:
• Optical – car pedals
– light emitting diode on underside of mouse
– sewing machine speed control
– may use special grid-like pad or just on desk
– less susceptible to dust and dirt – organ and piano pedals
– detects fluctuating alterations in reflected light intensity
to calculate relative motion in (x, z) plane

Touchpad Trackball and thumbwheels

• small touch sensitive tablets Trackball
• ‘stroke’ to move mouse pointer – ball is rotated inside static housing
• like an upsdie down mouse!
• used mainly in laptop computers
– relative motion moves cursor
– indirect device, fairly accurate
• good ‘acceleration’ settings important
– separate buttons for picking
– fast stroke
– very fast for gaming
• lots of pixels per inch moved
• initial movement to the target – used in some portable and notebook computers.
– slow stroke
Thumbwheels …
• less pixels per inch
• for accurate positioning – for accurate CAD – two dials for X-Y cursor position
– for fast scrolling – single dial on mouse

Joystick and keyboard nipple Touch-sensitive screen

Joystick • Detect the presence of finger or stylus on the screen.
– works by interrupting matrix of light beams, capacitance
– indirect changes or ultrasonic reflections
pressure of stick = velocity of movement – direct pointing device
– buttons for selection • Advantages:
on top or on front like a trigger – fast, and requires no specialized pointer
– often used for computer games – good for menu selection
aircraft controls and 3D navigation – suitable for use in hostile environment: clean and safe from
damage.

• Disadvantages:
Keyboard nipple – finger can mark screen
– for laptop computers – imprecise (finger is a fairly blunt instrument!)
• difficult to select small regions or perform accurate drawing
– miniature joystick in the middle of the keyboard
– lifting arm can be tiring

5
Stylus and light pen Digitizing tablet
Stylus • Mouse like-device with cross hairs
– 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 • used on special surface
- rather like stylus
Light Pen
– now rarely used
– uses light from screen to detect location • very accurate
- used for digitizing maps
BOTH …
– very direct and obvious to use
– but can obscure screen

Eyegaze Cursor keys

• control interface by eye gaze direction • Four keys (up, down, left, right) on keyboard.
• Very, very cheap, but slow.
– e.g. look at a menu item to select it
• Useful for not much more than basic motion for text-
• uses laser beam reflected off retina editing tasks.
– … a very low power laser! • No standardized layout, but inverted “T”, most common

• potential for hands-free control

• high accuracy requires headset
• cheaper and lower accuracy devices
available
like a small webcam positioned
under the screen

Discrete positioning controls

• in phones, TV controls etc.

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

bitmap screens (CRT & LCD)

large & situated displays
digital paper

6
bitmap displays resolution and color depth

• screen is vast number of coloured dots • 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
• Color depth:
– how many different colors for each pixel?
– black/white or greys only
– 256 from a pallete
– 8 bits each for red/green/blue = millions of colors

anti-aliasing Cathode ray tube

Jaggies • Stream of electrons emitted from electron gun, focused
– diagonal lines that have discontinuities in due to horizontal and directed by magnetic fields, hit phosphor-coated
raster scan process. screen which glows
Anti-aliasing • used in TVs and computer monitors
– softens edges by using shades of line colour
– also used for text
electron beam

electron gun

focussing and
deflection

phosphor-
coated screen

Health hints … Liquid crystal displays

• do not sit too close to the screen • Smaller, lighter, and … no radiation problems.

• do not use very small fonts • Found on PDAs, portables and notebooks,
• do not look at the screen for long periods … and increasingly on desktop and even for home TV
without a break
• also used in dedicted displays:
• do not place the screen directly in front of a digital watches, mobile phones, HiFi controls
bright window
• How it works …
• work in well-lit surroundings
– Top plate transparent and polarised, bottom plate reflecting.
– Light passes through top plate and crystal, and reflects back to
eye.
 Take extra care if pregnant. – Voltage applied to crystal changes polarization and hence color
but also posture, ergonomics, stress – light reflected not emitted => less eye strain

7
special displays large displays
Random Scan (Directed-beam refresh, vector display) • used for meetings, lectures, etc.
– draw the lines to be displayed directly
– no jaggies • technology
– lines need to be constantly redrawn plasma – usually wide screen
– rarely used except in special instruments
video walls – lots of small screens together
Direct view storage tube (DVST) projected – RGB lights or LCD projector
– Similar to random scan but persistent => no flicker – hand/body obscures screen
– Can be incrementally updated but not selectively erased – may be solved by 2 projectors + clever software
– Used in analogue storage oscilloscopes back-projected
– frosted glass + projector behind

situated displays Hermes: a situated display

http://www.comp.lancs.ac.uk/~fittond/hermes/about.html
• displays in ‘public’ places • small displays beside office doors
– large or small • handwritten notes left using stylus
– very public or for small group
• office
small owner reads notes using web interface
displays
• display only
beside
– for information relevant to location
office doors
• or interactive
– use stylus, touch sensitive screem
• in all cases … the location matters
– meaning of information or interaction is related to
the location handwritten
office owner
notes left reads notes
using stylus
using web interface

Digital paper
appearance
• what?
– thin flexible sheets
– updated electronically
– but retain display cross
section
virtual reality and 3D interaction
• how?
– small spheres turned
– or channels with coloured liquid positioning in 3D space
and contrasting spheres
– rapidly developing area moving and grasping
seeing 3D (helmets and caves)

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

3D displays VR headsets

• desktop VR • small TV screen for each eye

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

also see extra slides on 3D vision

VR motion sickness simulators and VR caves

• time delay • scenes projected on walls

– move head … lag … display moves • realistic environment
– conflict: head movement vs. eyes
• hydraulic rams!
• depth perception
– headset gives different stereo distance • real controls
– but all focused in same plane • other people
– conflict: eye angle vs. focus
• conflicting cues => sickness
– helps motivate improvements in
technology

9
 dedicated displays

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

physical controls, sensors etc. • digital displays:

– small LCD screens, LED lights, etc.

special displays and gauges • head-up displays

sound, touch, feel, smell – found in aircraft cockpits
– show most important controls
physical controls … depending on context
environmental and bio-sensing

Sounds Touch, feel, smell

• beeps, bongs, clonks, whistles and • touch and feeling important

whirrs – in games … vibration, force feedback
– in simulation … feel of surgical instruments
• used for error indications – called haptic devices

• confirmation of actions e.g. keyclick • texture, smell, taste

– current technology very limited

BMW iDrive physical controls

http://www.bmwworld.com/technology/idrive.htm
• for controlling menus • specialist controls needed …
• feel small ‘bumps’ for each item – industrial controls, consumer products,
• makes it easier to select options by feel etc.
• uses haptic technology from Immersion Corp.
easy-clean
smooth buttons

multi-function
control
large buttons
clear dials

tiny buttons

10
Environment and bio-sensing

• sensors all around us

– car courtesy light – small switch on door
– ultrasound detectors – security, paper: printing and scanning
washbasins
– RFID security tags in shops
– temperature, weight, location print technology
• … and even our own bodies … fonts, page description, WYSIWYG
– iris scanners, body temperature, heart scanning, OCR
rate, galvanic skin response, blink rate

Printing Types of dot-based printers

• image made from small dots • dot-matrix printers

– use inked ribbon (like a typewriter
– allows any character set or graphic to be – line of pins that can strike the ribbon, dotting the paper.
printed, – typical resolution 80-120 dpi
• critical features: • ink-jet and bubble-jet printers
– tiny blobs of ink sent from print head to paper
– resolution
– typically 300 dpi or better .
• size and spacing of the dots
• laser printer
• measured in dots per inch (dpi) – like photocopier: dots of electrostatic charge deposited on
– speed drum, which picks up toner (black powder form of ink)
rolled onto paper which is then fixed with heat
• usually measured in pages per minute
– typically 600 dpi or better.
– cost!!

Fonts Fonts (ctd)

• Font – the particular style of text Pitch
Courierfont – fixed-pitch – every character has the same width
Helvetica font e.g. Courier
Palatino font
Times Roman font – variable-pitched – some characters wider
§´v{€ƒ …€a (special symbol) e.g. Times Roman – compare the ‘i’ and the “m”

• Size of a font measured in points (1 pt about 1/72”) Serif or Sans-serif

(vaguely) related to its height – sans-serif – square-ended strokes
This is ten point Helvetica
This is twelve point e.g. Helvetica
This is fourteen point
This is eighteen point – serif – with splayed ends (such as)
and this is twenty-four point e.g. Times Roman or Palatino

11
Readability of text Page Description Languages

• lowercase • Pages very complex

– different fonts, bitmaps, lines, digitized photos, etc.
– easy to read shape of words
• Can convert it all into a bitmap and send to the printer
• UPPERCASE … but often huge !
– better for individual letters and non-words
e.g. flight numbers: BA793 vs. ba793 • Alternatively Use a page description language
– sends a description of the page can be sent,
– instructions for curves, lines, text in different styles, etc.
• serif fonts
– like a programming language for printing!
– helps your eye on long lines of printed text
• PostScript is the most common
– but sans serif often better on screen

Screen and page Scanners

• WYSIWYG • Take paper and convert it into a bitmap
– what you see is what you get • Two sorts of scanner
– aim of word processing, etc. – flat-bed: paper placed on a glass plate, whole page
• but … converted into bitmap
– screen: 72 dpi, landscape image – hand-held: scanner passed over paper, digitising strip
typically 3-4” wide
– print: 600+ dpi, portrait
• can try to make them similar • Shines light at paper and note intensity of reflection
but never quite the same – colour or greyscale

• so … need different designs, graphics etc, for • Typical resolutions from 600–2400 dpi
screen and print

Scanners (ctd) Optical character recognition

Used in • OCR converts bitmap back into text

– desktop publishing for incorporating • different fonts
photographs and other images – create problems for simple “template
matching” algorithms
– document storage and retrieval systems,
doing away with paper storage – more complex systems segment text,
decompose it into lines and arcs, and
+ special scanners for slides and decipher characters that way
photographic negatives
• page format
– columns, pictures, headers and footers

12
Paper-based interaction
• paper usually regarded as output only
• can be input too – OCR, scanning, etc.
• Xerox PaperWorks
– glyphs – small patterns of /\\//\\\
memory
• used to identify forms etc.
• used with scanner and fax to control applications

• more recently short term and long term

– papers micro printed - like wattermarks speed, capacity, compression
• identify which sheet and where you are
– special ‘pen’ can read locations formats, access
• know where they are writing

Short-term Memory - RAM Long-term Memory - disks

• Random access memory (RAM) • magnetic disks
– on silicon chips – floppy disks store around 1.4 Mbytes
– 100 nano-second access time – hard disks typically 40 Gbytes to 100s of Gbytes
– usually volatile (lose information if power turned access time ~10ms, transfer rate 100kbytes/s
off)
– data transferred at around 100 Mbytes/sec • optical disks
– use lasers to read and sometimes write
• Some non-volatile RAM used to store basic – more robust that magnetic media
set-up information – CD-ROM
- same technology as home audio, ~ 600 Gbytes
– DVD - for AV applications, or very large files
• Typical desktop computers:
256 to 1024 Mbytes RAM

Blurring boundaries speed and capacity

• PDAs • what do the numbers mean?

– often use RAM for their main memory
• some sizes (all uncompressed) …
– HCI book, text only ~ 320,000 words, 2Mb
• Flash-Memory – scanned page ~ 128 Mbytes
• (11x8 inches, 1200 dpi, 8bit greyscale)
– used in PDAs, cameras etc.
– digital photo ~ 10 Mbytes
– silicon based but persistent • (2–4 mega pixels, 24 bit colour)
– plug-in USB devices for data transfer – video ~ 10 Mbytes per second
• (512x512, 12 bit colour, 25 frames per sec)

13
virtual memory Compression
• Problem: • reduce amount of storage required
– running lots of programs + each program large • lossless
– not enough RAM – recover exact text or image – e.g. GIF, ZIP
– look for commonalities:
• Solution - Virtual memory : • text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C
– store some programs temporarily on disk • video: compare successive frames and store change
– makes RAM appear bigger • lossy
– recover something like original – e.g. JPEG, MP3
• But … swapping – exploit perception
– program on disk needs to run again • JPEG: lose rapid changes and some colour
– copied from disk to RAM • MP3: reduce accuracy of drowned out notes
– slows t h i n g s d o w n

Storage formats - text Storage formats - media

• ASCII - 7-bit binary code for to each letter and • Images:
character – many storage formats :
• UTF-8 - 8-bit encoding of 16 bit character set (PostScript, GIFF, JPEG, TIFF, PICT, etc.)
• RTF (rich text format) – plus different compression techniques
- text plus formatting and layout information (to reduce their storage requirements)
• SGML (standardized generalized markup language)
• Audio/Video
- documents regarded as structured objects
– again lots of formats :
• XML (extended markup language) (QuickTime, MPEG, WAV, etc.)
- simpler version of SGML for web applications – compression even more important
– also ‘streaming’ formats for network delivery

methods of access
• large information store
– long time to search => use index
– what you index -> what you can access
• simple index needs exact match processing and networks

• access without structure …

– free text indexing (all the words in a document) finite speed (but also Moore’s law)
– needs lots of space!! limits of interaction
networked computing

14
Finite processing speed Moore’s law
• Designers tend to assume fast processors, and make
interfaces more and more complicated • computers get faster and faster!
• But problems occur, because processing cannot keep up
• 1965 …
with all the tasks it needs to do – Gordon Moore, co-founder of Intel, noticed a
– cursor overshooting because system has buffered pattern
keypresses – processor speed doubles every 18 months
– icon wars - user clicks on icon, nothing happens, clicks on – PC … 1987: 1.5 Mhz, 2002: 1.5 GHz
another, then system responds and windows fly
everywhere • similar pattern for memory
– but doubles every 12 months!!
• Also problems if system is too fast - e.g. help screens – hard disk … 1991: 20Mbyte : 2002: 30 Gbyte
may scroll through text much too rapidly to be read • baby born today
– record all sound and vision
– by 70 all life’s memories stored in a very small
storage media

the myth of the infinitely Limitations on interactive

fast machine performance
Computation bound
• implicit assumption … no delays – Computation takes ages, causing frustration for the user
an infinitely fast machine Storage channel bound
• what is good design for real machines? – Bottleneck in transference of data from disk to memory
Graphics bound
• good example … the telephone : – Common bottleneck: updating displays requires a lot of
– type keys too fast effort - sometimes helped by adding a graphics co-
– hear tones as numbers sent down the line processor optimized to take on the burden
– actually an accident of implementation Network capacity
– emulate in design – Many computers networked - shared resources and files,
access to printers etc. - but interactive performance can
be reduced by slow network speed

Networked computing The internet

Networks allow access to … • history …
– large memory and processing – 1969: DARPANET US DoD, 4 sites
– other people (groupware, email) – 1971: 23; 1984: 1000; 1989: 10000
– shared resources – esp. the web – Today?
• common language (protocols):
Issues
– TCP – Transmission Control protocol
– network delays – slow feedback
• lower level, packets (like letters) between machines
– conflicts - many people update data
– IP – Internet Protocol
– unpredictability • reliable channel (like phone call) between programs
on machines
– email, HTTP, all build on top of these

15