The Computer

Human Computer Interaction

-Dix, Finlay, Abowd, Beatle-

(Lecture Notes)

Ngo Thi Duyen

(duyennt@vnu.edu.vn)
Faculty of Information Technology
Vietnam National University, Hanoi
 The computer
 A computer system is made up of various elements

 Each element affects the interaction

 Input devices: text entry & pointing

 Output devices:
devices screen, digital paper

 Virtual reality: special interaction and display devices

 Physical interaction:
interaction sound, haptic, bio-sensing

 Paper: as output (print) and input (scan)

 Memory: RAM & permanent media, capacity and access

 Processing:
Processing speed of processing, networks

22/03/23 The Computer Page 2

 Interacting with computers
 To understand HCI, we need to understand computers

22/03/23 The Computer Page 3

 A typical computer system
 Computer (box itself)
 Screen/monitor on which there are windows
 Keyboard
 Mouse/trackpad
 Variations driven by different hardware configurations
 Desktop, Laptop, PDA
 Interaction (with/without computer) is a process of information
transfer
 The devices reflects the styles of interaction that the system supports
 If we use different devices, then the interface will support different
type of interactions

22/03/23 The Computer Page 4

 How many computers…
 In your houses?
 PC, TV, DVD, cable/satellite TV
 Microwave, cooker, washing machine
 Central heating
 Security system …
 In your pockets
 PDA
 Phone, camera
 Smart card
 Electronic car key
 USB memories…

22/03/23 The Computer Page 5

Interactivity

Batch processing
 In the early days of computing, information was entered into the
computer in a large mass
 User dumps a file of punched cards onto a reader press the start
button  return in a few hours later
 Interactions takes place over hours or days

 Interactions with current desktop computer system take seconds

 HCI grew due to this change in interactive pace

Is faster always better?

22/03/23 The Computer Page 6

Interactivity

Richer interaction
 Computers are coming out of the box

 Information appliances
 the fridge, microwave & washing
machine
 Can access internet or have dedicated
systems to automate shopping, give
you email in your kitchen or call for
maintenance when needed

22/03/23 The Computer Page 7

 2.2 Text entry devices

 Entering is one of the main activities when using the

computer whether writing a book, letter, or memo

 Means of text entry

 Plain keyboard (QWERTY)
 Different keyboard layouts
 Chord keyboard that uses combinations of fingers to enter letters
 Phone key pads
 Handwriting and speed recognition are radical alternatives

22/03/23 The Computer Page 8

2.2 Text entry devices

Keyboard
 Standardized layouts
 Known by the first 6 letter of the top row of the alphanumerical keys, QWERTY

 QWERTY keyboard
 non-alphanumerical keys vary between keyboards ( e.g., above the 3 on the UK
keyboard is the £ sign, while on the US keyboard there’s a $ sign
 Not optimal for typing, is the layout to prevent typewriter’s jamming

 Alternative designs allow faster typing

but large social base of QWERTY
typists produces reluctance to change

22/03/23 The Computer Page 9

2.2 Text entry devices

Alternative keyboard layouts

 Alphabetic, used in some pocket electronic personal organizer
 Keys arranged in alphabetic order  simple layout
 Not faster for trained typists & beginners either

 DVORAK
 assign common letters under
dominant fingers
 Biased towards right hand
 Common combinations of letters alternate between hands
 10-15% improvements in speed and reduction in fatigue
 But, large social base of QWERTY typist produce market
pressures not to change

22/03/23 The Computer Page 10

2.2 Text entry devices

Special keyboards
 Designs to reduce fatigue for RSI (repetitive strain injury)
 For one handed use
 E.g., the Maltron left-handed keyboard

22/03/23 The Computer Page 11

2.2 Text entry devices

Chord keyboard
 Different from normal alphanumeric ones, have
only a few keys, 4 or 5

 Letters are produced by pressing one or more of

the keys at once

 Advantages
 Compact size: ideal for applications
 Learning time for the keyboard is fairly short once
you have trained

22/03/23 The Computer Page 12

2.2 Text entry devices

Phone pad & T9 entry

 Keypad only has digits 0-9
 Has at least 2 modes for buttons
 One where the keys mean the digits
 and the other means the letters

 T9, a solution to the problem

 Use a dictionary to guess the right word by
simply typing the relevant letters ONCE
 Hello = 43556
 There’re ambiguities: 26  ‘am’ or ‘an’
 Phone gives a series of options to choose from

22/03/23 The Computer Page 13

2.2 Text entry devices

Handwriting recognition
 Handwriting is a common & familiar activity  attractive as a method of text
entry
 Computer converts this form of input into text

 Technical problems
 Current technology is inaccurate, makes lots of mistakes
 Individual differences in handwriting makes recognition process become more
difficult
 The most significant information is not in the letter shape but in the stroke
information (the way the letter drawn)
 Further complications arise because letters within words are shaped and often
drawn very differently depending on the actual word

 Pen-based systems that use handwriting recognizer is marketed in the

mobile computing market (e.g., small pocket organizers such as PDA)

22/03/23 The Computer Page 14

2.2 Text entry devices

Speech recognition
 Promising area of text entry, but still used in very limited situations

 Successful recognition rate of 97% has been reported

 This performance is only for a restricted vocabulary of words

 Problems
 System has to be trained and tuned to each new speaker
 Each person speaks differently
 Strong accent, a cold or emotion, and even background noise can
cause error

22/03/23 The Computer Page 15

 2.3 Positioning, pointing & drawing

 Ability to point at something on the screen  manipulate

it or perform some function

 Pointing devices
 Allow the user to point, position and select items, either directly
or by manipulating a pointer on the screen

 Mouse, touchpad, trackball, joysticks

 Touch screens, tablets
 Eyegaze, cursors

22/03/23 The Computer Page 16

2.3 Positioning, pointing & drawing

Mouse

 Major component of the majority of desktop

computer systems y
 A little box with a tail connecting it to the machine
x
 Usually has 1 to 3 buttons on top used for making a z
selection

 Mouse operates in a planar fashion x

 Movement of mouse moves screen cursor
 Screen cursor oriented in (x,y) plane  vertical alignment
 Mouse movement in (x,z) plane  horizontal alignment
 An indirect input device
 Doesn’t obscure the screen
 Users suffer little arm fatigue (located on the desktop)

22/03/23 The Computer Page 17

2.3 Positioning, pointing & drawing

Mouse: 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 underside of mouse
 May use special grid-like pad or just desk
 Detect fluctuating alternations in reflected light intensity to calculate relative
motion in (x,z) plane
 Foot mouse
 Controlled by feet  not very common
 By foot controls are common elsewhere
 Car pedals, sewing machine speed control, piano pedals

22/03/23 The Computer Page 18

2.3 Positioning, pointing & drawing

Touchpad
 Sensitive-touch tablets
 Operated by stroking a finger over their surface
 Used mainly in laptop computers
 Problems
 Several strokes to move the cursor across the screen are required because
touchpads are smalls
 Solved by using acceleration settings in the software linking the trackpad
movement to the screen movement
 Fingers move slowly  the pad movement map to small distances on the screen
 Quickly  the same distance on the touchpad moves the cursor a long distance

22/03/23 The Computer Page 19

2.3 Positioning, pointing & drawing

Trackball and thumbwheels

 Trackball
 Ball is rotated inside static housing, like an
upside down mouse
 Relative motion moves cursor
 Indirect devices, fairly accurate
 Fast for gamining
 Used in some portable and notebook computer

 Thumbwheels
 For fast scrolling
 For accurate CAD(Computer-aided design )

22/03/23 The Computer Page 20

2.3 Positioning, pointing & drawing

Keyboard nipple & Joystick

 Joystick: Indirect input device

 The movement of stick cause a corresponding movement
of the screen cursor
 Buttons on top or on front like a trigger
 Often used for computer game, aircraft control and 3D
navigation

 Keyboard nippline
 For laptop computers
 Miniature joystick in the middle of keyboard

22/03/23 The Computer Page 21

2.3 Positioning, pointing & drawing

Touch-sensitive screen

 Another method for users to point & select objects on the screen
 Detect the presence of finger or stylus on the screen
 Works by interrupting matrix of light beams, capacitance changes(sự thay đổi
điện dung), or ultrasonic reflections(Phản xạ siêu âm)
 Advantages
 Fast, and requires no specialized pointer
 Good for menu selection
 Disadvantages
 Finger can mark screen
 Imprecise because it’s difficult for fingers to select small regions or perform
accurate drawing
 Lifting arm can be tiring

22/03/23 The Computer Page 22

2.3 Positioning, pointing & drawing

Stylus and light pen

 Stylus
 Small pen-like pointer to draw directly on screen
 Used in PDA and some laptop computers

 Light pen
 Now rarely used
 Use light from screen to detect location

 Both
 Direct input device
 Can obscure screen

22/03/23 The Computer Page 23

2.3 Positioning, pointing & drawing

Digitizing tablet

 Used for free-hand drawing and

may be used as a mouse

substitute

 Used in special applications such

as digitizing information for maps

22/03/23 The Computer Page 24

2.3 Positioning, pointing & drawing

Eyegaze
 Eyegaze systems allows us to control the
computer by simply looking at it
 some systems require wearing special glasses or
a small head-mounted box
 Or built into the screen
 A low-power laser is shone into the eye, and is
reflected off retina
 By tracking the reflected beam
 The eyegaze system determines the direction in
which the eye is looking
 Fine for selection, not for drawing

22/03/23 The Computer Page 25

2.3 Positioning, pointing & drawing

Cursor keys & discrete positioning controls

 Cursor keys
 Four keys (up, down, left, right)
 Useful for not much more than basic motion for
text-editing tasks
 No standardized layout for the keys
 The most common now is the inverted “T”
 TV remote controls
 Has dedicated ‘+/-’ buttons
 Mobile phone
 has a single central joystick-like device

22/03/23 The Computer Page 26

 2.4 Display devices

 Interactive computer systems would be unthinkable

without some sort of display screen

 Devices
 Bitmap screens (CRT & LCD)

 Large & situated displays

 Digital paper

22/03/23 The Computer Page 27

2.4 Display devices

Bitmap displays

 Computer displays are based on some sort of bitmap

 Is made up of a vast numbers of colored dots or pixels
 Color
 Each bit per pixel can store on/off information  only black and while
 More bits per pixel give rise to more color: 8 bits/pixel give 28=256
possible colors at any one time
 Resolution of the screen, 2 numbers to consider
 Total number of pixels (width x height)
 SVGA 1024 x 768, PDA perhaps 240 x 40
 Density of pixels (pixels or dots per inch - dpi)
 Typically varies between 72 and 96 dpi

22/03/23 The Computer Page 28

2.4 Display devices

Bitmap displays (cont’d)

 Horizontal and vertical lines can be drawn perfectly

 Lines at any other angle and curves have “jaggies” caused by

approximating with pixels

 Solved by using high-resolution screens

 Or by a technique called anti-aliasing

 Blurring the discontinuity

22/03/23 The Computer Page 29

2.4 Display devices

Cathode ray tube (CRT)

 Stream of electrons emitted from electron

gun, which is focused and directed by
magnetic fields
 The beam hits phosphor-coated screen and
glows
 Used in TVs and computer monitors

 CRT is fairly bulky

 Radiation emission & electrostatic fields may
harm our health

22/03/23 The Computer Page 30

2.4 Display devices

Liquid crystal display (LCD)

 Smaller, lighter… and no radiation problems

 Found on PDAs, portables, notebooks, Digital watches, mobile phones

 Increasingly on desktop and even for home TV

 How it works?

 A thin layer of liquid crystal is sandwiched between 2 glass plates

 External light passes through the top plate and is polarized  it oscillates in one

direction

 Then passes through the crystal, and reflects back to eye

 Voltage (điện áp) applied to crystal changes, polarization and hence color

22/03/23 The Computer Page 31

2.4 Display devices

Large displays

 Displays are no longer just things you have on your desktop or laptop
 E.g., attend lectures where the slides are projected from a computer onto a large
screen

 Several types of large screen displays

 Use gas plasma technology to create large flat bitmap display
 Very large screen areas are required: smaller screens (LCD, CRT) can be
placed together in a video wall

 Presenter’s shadow can fall across the screen

 Solved by using back-projection: produce right or left reversed image

22/03/23 The Computer Page 32

2.4 Display devices

Situated display

 Displays in public places to offer information

 Might be large or small
 Public for small groups who can view or interact
 In all cases, the location matters
 Meaning of information of interaction related to the location

Hermes: Situated door display

22/03/23 The Computer Page 33
2.4 Display devices

Digital paper

 A new form of display still in its infancy

 Thin flexible materials that can be written electronically
 keep their contents even when removed from any electrical supply

 Technology
 The whole surface covered with tiny spheres, black on side, white the other
 Electronics embedded into the material allow each tiny sphere to be rotated to
make it black or white

22/03/23 The Computer Page 34

 Summary

 Describe a range of input devices, which perform 2 functions: text entry &

pointing

 Screen as a direct output device

22/03/23 The Computer Page 35