Human Computer Interaction

Chapter 2: Computer - Input

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

what goes in and out

devices, paper, sensors, etc.

what can it do?

memory, processing,
networks
 Human Computer Interaction
Chapter 2: Computer

A Classical Computer System

window 1

screen, or monitor, on which there are windows

window 2
keyboard
mouse/trackpad

variations
desktop 12-37pm
laptop
PDA

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
 Human Computer Interaction
Chapter 2: Computer

How many Computers?

in your house?

PC
TV, VCR, DVD, HiFi, cable/satellite TV
microwave, cooker, washing machine
central heating
security system in your pockets?

can you think of more? PDA

phone, camera
smart card, card with magnetic strip?
electronic car key
USB memory

try your pockets and bags

 Human Computer Interaction
Chapter 2: Computer

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 …

Is faster always better?

 Human Computer Interaction
Chapter 2: Computer

Rich Interaction

Rich Interaction : Everywhere, Everywhen

 
Information appliances are putting internet access or
dedicated systems onto the fridge, microwave and washing
machine: to automate shopping, give you email in your
kitchen or simply call for maintenance when needed. We
carry with us WAP phones and smartcards, have security
systems that monitor us and web cams that show our
homes to the world.
 Human Computer Interaction
Chapter 2: Computer

Tex Entry Devices

keyboards (QWERTY et al.)
chord keyboards, phone pads
handwriting, speech

Most common text input device

Allows rapid entry of text by experienced users
Keyboard
Key press closes connection, causing a character code to be sent
Usually connected by cable, but can be wireless

Standardised layout
but …
non-alphanumeric keys are placed differently
accented symbols needed for different scripts
minor differences between UK and USA
keyboards
 Human Computer Interaction
Chapter 2: Computer

Special Keyboard: Designs to reduce fatigue

for RSI for one handed use
e.g. the Maltron left-handed keyboard

Chord Keyboard:
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
 Human Computer Interaction
Chapter 2: Computer

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
surprisingly fast!

T9 predictive entry
type as if single key for each letter
use dictionary to ‘guess’ the right word
hello = 43556 …
but 26 -> menu ‘am’ or ‘an’
 Human Computer Interaction
Chapter 2: Computer

Handwriting Recognition

Text can be input into the computer, using a

pen and a digesting tablet
natural interaction

Technical problems: Speach Recognition

capturing all useful information -
stroke path, pressure, etc. in a natural Improving rapidly
manner
segmenting joined up writing into Most successful when:
individual letters single user – initial training and learns
interpreting individual letters peculiarities
coping with different styles of
handwriting limited vocabulary systems

Used in PDAs, and tablet computers … Problems with

… leave the keyboard on the desk! external noise interfering
imprecision of pronunciation
large vocabularies
different speakers
 Human Computer Interaction
Chapter 2: Computer

Numeric Keyboard

for entering numbers quickly: 1 2 3 7 8 9

calculator, PC keyboard
for telephones 4 5 6 4 5 6
not the same!! 7 8 9 1 2 3
ATM like phone
0 # 0 . =
*
Telephone Calculator
 Human Computer Interaction
Chapter 2: Computer

positioning, pointing and drawing

mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors

Discrete Positioning Control

in phones, TV controls etc.

cursor pads or mini-joysticks
discrete left-right, up-down
mainly for menu selection
 Human Computer Interaction
Chapter 2: Computer

The Mouse: Relative movement only is detectable.

Movement of mouse moves screen cursor
Handheld pointing device Screen cursor oriented in (x, y) plane,
* Very common mouse movement in (x, z) plane …
* Easy to use
Two characteristics an indirect manipulation device.
* device itself doesn’t un-clear
* Planar movement screen, is accurate and fast.
• Buttons - (usually from 1 to 3 * hand-eye coordination problems
buttons on top, used for making for novice users
a selection, indicating an option,
or to initiate drawing etc.)
Mouse located on desktop
* Requires physical space
* No arm fatigue
 Human Computer Interaction
Chapter 2: Computer

The Mouse: 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 Discrete Positioning Control
desk
* less susceptible to dust and dirt in phones, TV controls etc.
* detects fluctuating alterations in reflected
light intensity to calculate relative motion in cursor pads or mini-joysticks
(x, z) plane discrete left-right, up-down
mainly for menu selection
 Human Computer Interaction
Chapter 2: Computer
Touchpad: Trackball and Thumbwheels
* small touch sensitive tablets Trackball
* ‘stroke’ to move mouse pointer ball is rotated inside static housing
* used mainly in laptop computers like an upsdie down mouse!
relative motion moves cursor
* good ‘acceleration’ settings indirect device, fairly accurate
important separate buttons for picking
very fast for gaming
fast stroke used in some portable and notebook computers.
lots of pixels per inch moved
initial movement to the target Thumbwheels …
slow stroke for accurate CAD – two dials for X-Y cursor position
less pixels per inch for fast scrolling – single dial on mouse
for accurate positioning

Joystick and keyboard nibble

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
 Human Computer Interaction
Chapter 2: Computer

Touch Sensitive Screen

Stylus and light pen
Detect the presence of finger or stylus on the
screen. Stylus
* works by interrupting matrix of light * small pen-like pointer to draw directly
beams, capacitance changes or
ultrasonic reflections on screen
* direct pointing device * may use touch sensitive surface or
magnetic detection
Advantages: * used in PDA, tablets PCs and drawing
* fast, and requires no specialised pointer
* good for menu selection tables
* suitable for use in hostile environment:
clean and safe from damage. Light Pen
now rarely used
Disadvantages:
* finger can mark screen
uses light from screen to detect location
* imprecise (finger is a fairly blunt
instrument!) BOTH …
difficult to select small regions or very direct and obvious to use
perform accurate drawing
but can obscure screen
* lifting arm can be tiring
 Human Computer Interaction
Chapter 2: Computer

Eyegaze
* control interface by eye gaze direction
Stylus and light pen
e.g. look at a menu item to select it
Stylus
* uses laser beam reflected off retina
* small pen-like pointer to draw directly
… a very low power laser!
on screen
* mainly used for evaluation (ch x)
* may use touch sensitive surface or
* potential for hands-free control
magnetic detection
* high accuracy requires headset
* used in PDA, tablets PCs and drawing
* cheaper and lower accuracy devices
tables
available
sit under the screen like a small
webcam Light Pen
now rarely used
uses light from screen to detect location

BOTH …
very direct and obvious to use
but can obscure screen
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

Bitmap Displays: screen is vast number of coloured dots

 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

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
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

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
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

Health Hits:

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

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
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

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

small displays
beside
office doors

handwritten office owner

notes left reads notes
using stylus using web interface
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

Printings:

* Image may made from small dots. : Allow any character set or graphic
to be printed.

* Features:
Resolution:
* Size and spacing of the Space
* Measured in dots per inch.
Speed:
* Usually measured in page per minute

Costs: ????????????
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

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.
Printing in the Workplace
typical resolution 80-120 dpi
ink-jet and bubble-jet printers
tiny blobs of ink sent from print head to shop tills
paper dot matrix
typically 300 dpi or better . same print head used for several
laser printer
like photocopier: dots of electrostatic paper rolls
charge deposited on drum, which picks up may also print cheques
toner (black powder form of ink) rolled
onto paper which is then fixed with heat thermal printers
typically 600 dpi or better.
special heat-sensitive paper
paper heated by pins makes a dot
poor quality, but simple & low
maintenance
used in some fax machines
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

Fonts

Font – the particular style of text

Courier font
Helvetica font
Palatino font Pitch
Times Roman font fixed-pitch – every character has the
§´µº¿Â Ä¿~  (special symbol)
same width
Size of a font measured in points (1 pt about 1/72”) e.g. Courier
(vaguely) related to its height variable-pitched – some characters
This is ten point Helvetica wider
This is twelve point e.g. Times Roman – compare
This is fourteen point the ‘i’ and the “m”
This is eighteen point
and this is twenty-four point Serif or Sans-serif
sans-serif – square-ended strokes
e.g. Helvetica
serif – with splayed ends (such as)
e.g. Times Roman or Palatino
 Human Computer Interaction
Chapter 2: Computer – Output [Displays]

Screen and Pages

WYSIWYG
what you see is what you get
aim of word processing, etc.
Scanners:
but …
screen: 72 dpi, landscape image Take paper and convert it into a bitmap
print: 600+ dpi, portrait
can try to make them similar Two sorts of scanner
but never quite the same flat-bed: paper placed on a glass plate,
so … need different designs, graphics etc, whole page converted into bitmap
for screen and print 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

 Human Computer Interaction
Chapter 2: Computer – Memory [Storage]

Memory

Random access memory (RAM)

on silicon chips
100 nano-second access time
usually volatile (lose information if Long-Term Memory
power turned off) magnetic disks
data transferred at around 100 floppy disks store around 1.4 Mbytes
Mbytes/sec hard disks typically 40 Gbytes to 100s of
Gbytes
Some non-volatile RAM used to store basic access time ~10ms, transfer rate
set-up information 100kbytes/s

Typical desktop computers: optical disks

64 to 256 Mbytes RAM use lasers to read and sometimes write
more robust that magnetic media
CD-ROM
- same technology as home audio, ~
600 Gbytes
DVD - for AV applications, or very large
files
 Human Computer Interaction
Chapter 2: Computer – Memory [Storage]

Memory
Blurring Boundaries:

PDAs
often use RAM for their main memory
Virtual Memory
Flash-Memory Problem:
used in PDAs, cameras etc. running lots of programs + each
silicon based but persistent program large
plug-in USB devices for data transfer not enough RAM

Solution - Virtual memory :

store some programs temporarily on
disk
makes RAM appear bigger

But … swop
program on disk needs to run again
copied from disk to RAM
slows t h i n g s down
 Human Computer Interaction
Chapter 2: Computer – Memory [Storage]

Memory
Compression

reduce amount of storage required

lossless
recover exact text or image – e.g. GIF, ZIP
look for commonalities:
text: AAAAAAAAAABBBBBCCCCCCCC
10A5B8C
video: compare successive frames and store change
lossy
recover something like original – e.g. JPEG, MP3
exploit perception
JPEG: lose rapid changes and some colour
MP3: reduce accuracy of drowned out notes
 Human Computer Interaction
Chapter 2: Computer – Memory [Storage]

Memory
Storage Formats: Text

* ASCII - 7-bit binary code for to each letter

and character
* UTF-8 - 8-bit encoding of 16 bit character set Storage Formats: Media
RTF (rich text format)
Images:
- text plus formatting and layout
many storage formats :
information (PostScript, GIFF, JPEG, TIFF,
* SGML (standardized generalised markup PICT, etc.)
language) plus different compression techniques
- documents regarded as structured objects (to reduce their storage
XML (extended markup language) requirements)
- simpler version of SGML for web
applications Audio/Video
again lots of formats :
(QuickTime, MPEG, WAV, etc.)
compression even more important
also ‘streaming’ formats for network
delivery
 Human Computer Interaction
Chapter 2: Computer – Memory [Storage]

Memory
Storage Formats: Text

* ASCII - 7-bit binary code for to each letter

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