Imran Hussain

1
Virtual University Human-Computer Interaction
Lecture 13The Computer

• Imran Hussain
• University of Management and Technology (UMT)

2
In the Last Lecture

• Conceptual Models
• Visibility
• Affordance
• Constraints
• Mapping
• Consistency
• Feedback

3
In Todays Lecture

• Text Entry Devices
• Positioning, Pointing and Drawing
• Display Devices
• 3D Interaction and Virtual Reality
• Physical Controls and Sensors
• Paper Printing and Scanning

4
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 (smalllarge), 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

5
Interacting With Computers

• to understand humancomputer interaction need
  to understand computers!

6
A Typical Computer System

• screen, or monitor, on which there are windows
• keyboard
• mouse/trackpad
• variations
• desktop
• 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

7
Levels of 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
• Is faster always better?

8
Richer interaction
sensors and devices everywhere
9
Text Entry Devices

• Keyboards (QWERTY et al.)
• Chord keyboards
• Phone pads
• Handwriting
• Speech

10
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

11
Keyboards

• Alphanumeric
• QWERTY
• Alphabetic
• DVORAK
• Chord

12
QWERTY Keyboard

• 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.

13
QWERTY Keyboard
14
Alternative Keyboard Layouts

• Alphabetic
• keys arranged in alphabetic order
• not faster for trained typists
• not faster for beginners either!
• Used in some pocket electronic organisers
• 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

15
Special Keyboards

• Designs to reduce fatigue for RSI
• For One Handed Use
• e.g. the Maltron left-handed keyboard

16
Chord Keyboards

• only a few keys - four or 5
• letters typed as combination of key presses
• Can be used
• For one-handed operation
• In cramped conditions
• 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 niche market for some wearable

17
Phone Pad and T9 Entry

• use numeric keys withmultiple presses
• 2 a b c 6 - m n o
• 3 - d e f 7 - p q r s
• 4 - g h i 8 - t u v
• 5 - j k l 9 - w x y z
• hello 4433555pause555666
• surprisingly fast!
• T9 predictive entry
• type as if single key for each letter
• use dictionary to guess the right word
• hello 43556
• but 26 -gt menu am or an

18
Numeric Keypads

• for entering numbers quickly
• calculator, PC keyboard
• for telephones
• not the same!!
• ATM like phone

telephone
calculator
19
Handwriting Recognition

• Text can be input into the computer, using a pen
  and a digesting tablet
• natural interaction
• Small but accurate
• 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!

20
Handwriting Recognition

• Gesture recognition
• Use gestures, rather than commands
• Draw a line through a word to delete

21
Speech Recognition

• Improving rapidly
• Most successful when
• single user initial training and learns
  peculiarities
• limited vocabulary systems
• Used by disabled people, military
• Problems with
• external noise interfering
• imprecision of pronunciation
• Accents and emotions
• large vocabularies
• different speakers
• What would happen if everyone in an office
  started talking to their machine?

22
Positioning, Pointing and Drawing

• Mouse
• Touchpad
• Trackballs
• Joysticks
• Touch screens
• Tablets
• Eyegaze
• Cursors

23
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.)

24
The Mouse

• 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 doesnt obscure screen, is accurate
  and fast.
• hand-eye coordination problems for novice users

25
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

26
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

27
Trackball and Thumbwheels

• Trackball
• ball is rotated inside static housing
• like an upside 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

28
Joystick and Trackpoint

• 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
• Trackpoint
• for laptop computers
• miniature joystick in the middle of the keyboard

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
Digitizing tablet

• Mouse like-device with cross hairs
• used on special surface - rather like stylus
• very accurate - used for digitizing maps

32
Digitizing Tablet

• Mouse like-device with cross hairs
• used on special surface - rather like stylus
• very accurate - used for digitizing maps

33
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

34
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

35
Discrete Positioning Controls

• In phones, TV controls etc.
• cursor pads or mini-joysticks
• discrete left-right, up-down
• mainly for menu selection

36
Display Devices

• Bitmap screens (CRT LCD)
• Large situated displays
• Digital paper

37
Bitmap Displays

• Screen is vast number of coloured dots

38
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
• 43 for most screens, 169 for wide-screen TV
• Colour depth
• how many different colours for each pixel?
• black/white or greys only
• 256 from a palette
• 8 bits each for red/green/blue millions of
  colours

39
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

40
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

41
Health hazards of CRT !

• X-rays largely absorbed by screen (but not at
  rear!)
• UV- and IR-radiation from phosphors
  insignificant levels
• Radio frequency emissions, plus ultrasound
  (16kHz)
• Electrostatic field - leaks out through tube to
  user. Intensity dependant on distance and
  humidity. Can cause rashes.
• Electromagnetic fields (50Hz-0.5MHz). Create
  induction currents in conductive materials,
  including the human body. Two types of effects
  attributed to this visual system - high
  incidence of cataracts in VDU operators, and
  concern over reproductive disorders (miscarriages
  and birth defects).

42
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

43
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 gt less eye
  strain

44
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 gt no
  flicker
• Can be incrementally updated but not selectively
  erased
• Used in analogue storage oscilloscopes

45
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

46
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

47
Hermes a Situated Display
small displaysbesideoffice doors
handwritten notes leftusing stylus
office ownerreads notesusing web interface
48
Digital Paper

• what?
• thin flexible sheets
• updated electronically
• but retain display
• how?
• small spheres turned
• or channels with coloured liquidand contrasting
  spheres
• rapidly developing area

appearance
cross section
49
Virtual Reality and 3d Interaction

• positioning in 3D spacemoving and grasping
• seeing 3D (helmets and caves)

50
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

51
Pitch, Yaw and Roll
yaw
roll
pitch
52
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.

53
VR Headsets

• small TV screen for each eye
• slightly different angles
• 3D effect

54
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 gt sickness
• helps motivate improvements in technology

55
Simulators and VR Caves

• scenes projected on walls
• realistic environment
• hydraulic rams!
• real controls
• other people

56
Physical Controls, Sensors Etc

• Special displays and gauges
• Sound, touch, feel, smell
• Physical controls
• Environmental and bio-sensing

57
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

58
Sound

• beeps, bongs, clonks, whistles and whirrs
• used for error indications
• confirmation of actions e.g. keyclick

59
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

60
BMW iDrive

• for controlling menus
• feel small bumps for each item
• makes it easier to select options by feel
• uses haptic technology from Immersion Corp.

61
Physical Controls

• specialist controls needed
• industrial controls, consumer products, etc.

easy-clean smooth buttons
multi-functioncontrol
large buttons
clear dials
tiny buttons
62
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

63
Paper Printing and Scanning

• Print Technology
• Fonts, Page Description, WYSIWYG
• Scanning, OCR

64
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!!

65
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

66
Printing in the Workplace

• Shop tills
• dot matrix
• same print head used for several paper rolls
• may also print cheques
• Thermal Printers
• special heat-sensitive paper
• paper heated by pins makes a dot
• poor quality, but simple low maintenance
• used in some fax machines

67
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

68
Fonts

• 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

69
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

70
Page Description Languages

• Pages very complex
• different fonts, bitmaps, lines, digitised
  photos, etc.
• Can convert it all into a bitmap and send to the
  printer but often huge !
• Alternatively Use a page description language
• sends a description of the page can be sent,
• instructions for curves, lines, text in different
  styles, etc.
• like a programming language for printing!
• PostScript is the most common

71
Screen and Page

• 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 6002400 dpi

73
Scanners

• 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
Paper-based Interaction

• paper usually regarded as output only
• can be input too OCR, scanning, etc.
• Xerox PaperWorks
• glyphs small patterns of /\\//\\\
• used to identify forms etc.
• used with scanner and fax to control applications
• more recently
• papers micro printed - like wattermarks
• identify which sheet and where you are
• special pen can read locations
• know where they are writing