CS422 - Human Computer Interaction

Instructor: Mehwish AzizSpring: Fall 2010Lecture 7-9

CHAPTER – 2COMPUTER

Discrete Positioning Controls• phones, TV controls etc.

cursor pads or mini-joysticksdiscrete left-right, up-downmainly for menu selection

Display Devices• Bitmap Displays:

screen is vast number of coloured dots

Resolution and Color 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 ratioRatio between width and height4:3 for most screens, 16:9 for wide-screen TV

• Colour depthhow many different colours for each pixelblack/white or greys only8 bits each for red/green/blue = millions of colours256 from a palette

Anti-Aliasing• Jaggies

diagonal lines that have discontinuities due to horizontal faster scan process

• Solution to jaggies is Anti-aliasingsoftens edges by using shades of line colourused for text

Cathode Ray Tubes

• Cheap display device • Fast response time for rapid animation coupled with

high colour capability• Fairly bulky in comparison to flatter displays• Stream of electrons emitted from electron gun, • focused and directed by magnetic fields,• used in TVs and computer monitors• View has a high rate of flicker• Way of reducing flicker from screen

Higher scan ratesInterlacing – tracing first all odd then even lines

Liquid Crystal Display• Liquid Crystal Display:

Smaller, lighterFound on portables and notebooks … and increasingly on desktop

and even for home TVUsed in dedicated displays: digital watches, mobile phonesRequires refreshing at usual rates but slow response to the crystals

Flicker isn’t usually noticeableHow 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 colourN.B. light reflected not emitted => less eye strain

Special Displays• Random Scan (Directed-beam refresh, vector

display)draw the lines to be displayed directlyno jaggieslines need to be constantly redrawnrarely used except in special instruments

• Direct view storage tube (DVST)Similar to random scan but persistent => no flickerCan be incrementally updated but not selectively erasedUsed in analogue storage oscilloscopes

Large Displays• Large Displays - used for meetings, lectures, etc.• Technology used is:

plasma – usually wide screen video walls – lots of small screens together projector – RGB lights or LCD projectorhand/body obscures screenmay be solved by 2 projectors + clever software back-projectedfrosted glass + projector behind

Situated Display• displays in ‘public’ places

large or smallvery public or for small group

• display only - for information relevant to location• interactive - use stylus, touch sensitive screen• in all cases … the location matters

meaning of information or interaction is related to the location

Hermes – A Situated Display

small displaysbeside

office doors

handwrittennotes left

using stylusoffice ownerreads notes

using web interface

Digital Paper• what?

thin flexible sheetsupdated electronicallybut retain display

• how?small spheres turned orchannels with coloured liquid

and contrasting spheresrapidly developing area

appearance

crosssection

Virtual Reality and 3D Interaction

• Positioning in 3D Space:cockpit and virtual controls

steering wheels, knobs and dials … just like real!3D mouse

six-degrees of movement: x, y, z + roll, pitch, yaw data glove

fibre optics used to detect finger positionVR helmets

detect head motion and possibly eye gazewhole body tracking

accelerometers strapped to limbs or reflective dots and video processing

Virtual Reality and 3D Interaction

pitch

yaw

roll

Pitch, Yaw & Roll

Virtual Reality and 3D Interaction

• 3D Displaysdesktop VR

ordinary screen, mouse or keyboard controlperspective and motion give 3D effect

seeing in 3Duse stereoscopic visionVR helmetsscreen plus shuttered specs, etc.

• VR Headsets – 3D Effectssmall TV screen slightly different angles

Virtual Reality and 3D Interaction• VR Motion Sickness:

time delaymove head … lag … display movesconflict: head movement vs. eyes

depth perceptionheadset gives different stereo distancebut all focused in same planeconflict: eye angle vs. focus

conflicting cues => sicknesshelps motivate improvements in technology

Virtual Reality and 3D Interaction• Simulators and VR Caves

scenes projected on wallsrealistic environmenthydraulic rams!real controlsother people

Physical Controls & Sensors• Dedicated Displays:

analogue representations:dials, gauges, lights, etc.

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

head-up displays found in aircraft cockpitsshow most important controls

… depending on context• Sounds

beeps, bongs, clonks, whistles etc.used for error indicationsconfirmation of actions e.g. key click

Physical Controls & Sensors• Touch and feeling important

In games … vibration, force feedbackIn simulation … feel of surgical instrumentsKnown as haptic devices

• Texture, smell, tastecurrent technology very limited

• BMW iDrive:Controlling menusFeel small ‘bumps’ for each itemMakes it easier to select options by feel Uses haptic technology from Immersion Corp.

Physical Controls & Sensors• Physical Controls:

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

large buttonsclear dials

tiny buttons

multi-functioncontrol

easy-cleansmooth buttons

Physical Controls & Sensors• Environment & Bio-Sensing:• sensors all around us

car courtesy light – small switch on doorultrasound detectors – security, washbasinsRFID security tags in shopstemperature, weight, location

• … and even our own bodies …iris scanners, body temperature, heart rate, galvanic skin

response, blink rate

Paper: Printing & Scanning• Printing:

image made from small dotsallows any character set or graphic to be printed

critical features:resolution

size and spacing of the dotsmeasured in dots per inch (dpi)

speedusually measured in pages per minute

cost!!

Paper: Printing & Scanning• Types of dot-based Printers:• dot-matrix printers

use inked ribbon (like a typewriter)line of pins that can strike the ribbon, dotting the papertypical resolution 80-120 dpi

• ink-jet and bubble-jet printerstiny blobs of ink sent from print head to papertypically 300 dpi or better

• laser printerlike 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

Paper: Printing & Scanning• Printing in the Workplace:• shop tills

dot matrixsame print head used for several paper rollsmay also print cheques

• thermal printersspecial heat-sensitive paperpaper heated by pins makes a dotpoor quality, but simple & low maintenanceused in some fax machines

Paper: Printing & Scanning• Fonts:• Font – the particular style of text• Size of a font measured in points (1 pt about 1/72”)

(vaguely) related to its height• 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-serifsans-serif – square-ended strokes

e.g. Helveticaserif – with splayed ends (such as)

e.g. Times Roman or Palatino

Paper: Printing & Scanning• Readability of Text:

Lowercase - easy to read shape of wordsUPPERCASE - better for individual letters and non-words

e.g. flight numbers: BA793 vs. ba793serif fonts

helps your eye on long lines of printed textbut sans serif often better on screen

• Page Description Language: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 !

Paper: Printing & Scanning• Page Description Language:

Alternatively use a page description languagesends a description of the pageinstructions for curves, lines, text in different styleslike a programming language for printing!

PostScript is the most common• Screen and Page:

WYSIWYG - what you see is what you getaim of word processing, etc. screen: 72 dpi, landscape imageprint: 600+ dpi, portrait

Paper: Printing & Scanning• Screen and Page:

Try to make them similar - but never quite the sameNeed different designs, graphics for screen and print

• Scanners: Take paper and convert it into a bitmapTwo 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 reflectioncolour or greyscale

Paper: Printing & Scanning• Scanners:

Typical resolutions from 600–2400 dpiUsed 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

• Optical Character Recognition (OCR) - converts bitmap back into textpage format - columns, pictures, headers and footers

Paper: Printing & Scanning• Optical Character Recognition (OCR):

Different fonts:create problems for simple “template

matching” algorithmsmore complex systems segment text, decompose it into lines and arcs, decipher characters this way

• Paper-based Interaction:paper usually regarded as output only – but can

be input too like OCR, scanning, etc.

Paper: Printing & Scanning• Paper-based Interaction:

Xerox Paperworkglyphs – small patterns of /\\//\\\used to identify forms etc.used with scanner and fax to control applicationsmore recently used

papers micro printed - like watermarksidentify which sheet and where you arespecial ‘pen’ can read locationsknow where they are writing

Memory• Short Term Memory – RAM Random access memory (RAM)

on silicon chips100 nanosecond access timeusually 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

Memory• Long Term Memory – Disksmagnetic disks

floppy disks store around 1.4 Mbyteshard disks typically 40 Gigabytes to 100s of Gigabytes

access time ~10ms, transfer rate 100kbytes/s

optical disksuse lasers to read and sometimes writemore robust that magnetic mediaCD-ROM

- same technology as home audio, ~ 600 Gigabytes

DVD - for AV applications, or very large files

Memory• Blurring BoundariesPDAs

often use RAM for their main memory

Flash-Memoryused in PDAs, cameras etc.silicon based but persistentplug-in USB devices for data transfer

Memory• Speed & Capacitywhat do the numbers mean?

some sizes (all uncompressed) …this book, text only ~ 320,000 words, 2Mbthe Bible ~ 4.5 Mbytesscanned page ~ 128 Mbytes

o(11x8 inches, 1200 dpi, 8bit greyscale)digital photo ~ 10 Mbytes

o(2–4 mega pixels, 24 bit colour) video ~ 10 Mbytes per second

o(512x512, 12 bit colour, 25 frames per sec)

Memory• Virtual MemoryProblem:

running lots of programs + each program largenot enough RAM

Solution - Virtual memory :store some programs temporarily on diskmakes RAM appear bigger

But … swappingprogram on disk needs to run againcopied from disk to RAMs l o w s t h i n g s d o w n

Memory• Compression reduce amount of storage required lossless

recover exact text or image – e.g. GIF, ZIPlook for commonalities:

otext: AAAAAAAAAABBBBBCCCCCCCC 10A5B8Covideo: compare successive frames and store change

lossyrecover something like original – e.g. JPEG, MP3exploit perception

oJPEG: lose rapid changes and some colouroMP3: reduce accuracy of drowned out notes

Memory• Storage Formats – textASCII - 7-bit binary code for to each letter and characterUTF-8 - 8-bit encoding of 16 bit character setRTF (rich text format)

text plus formatting and layout informationSGML (standardized generalised mark-up language)

documents regarded as structured objects XML (extended mark-up language)

simpler version of SGML for web applications

Memory• Storage Formats – Media Images:

omany storage formats :(PostScript, GIFF, JPEG, TIFF, PICT, etc.)

o plus different compression techniques(to reduce their storage requirements)

Audio/Video:o again lots of formats :

(QuickTime, MPEG, WAV, etc.)o compression even more importanto also ‘streaming’ formats for network delivery

Memory• Methods of Access large information store

o long time to search => use indexowhat you index -> what you can access

simple index needs exact match forgiving systems:

o Xerox “do what I mean” (DWIM)o SOUNDEX – McCloud ~ MacCleod

access without structure …o free text indexing (all the words in a document)o needs lots of space!!o e.g. UNIX – “grep” command

Processing & Networks• 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 doo cursor overshooting - system has buffered key presseso icon wars - user clicks on icon, nothing happens, clicks on

another, then system responds and windows fly everywhere

o Reasons????

Also problems if system is too fast - e.g. help screens may scroll through text much too rapidly to be read

Processing & Network• Moore’s Law computers get faster and faster! 1965 …

o Gordon Moore, co-founder of Intel, noticed a patterno processor speed doubles every 18 monthso PC … 1987: 1.5 Mhz, 2010: 1.5 GHz and above

similar pattern for memoryo but doubles every 12 months!!o hard disk … 1991: 20Mbyte : 2002: 30 Gigabyte

baby born todayo record all sound and visiono by 70 all life’s memories stored in a grain of dust!

Processing & Network• Myth of Infinitely Fast Machine implicit assumption … no delays

an infinitely fast machine

what is good design for real machines?

good example … the telephone :o type keys too fasto hear tones as numbers sent down the lineo actually an accident of implementationo emulate in designs

Processing & Network• Limitations on Interactive Performance Computation bound

o Computation takes ages, causing frustration for the user

Storage channel boundo Bottleneck in transference of data from disk to memory

Graphics boundo Common bottleneck: updating displays requires a lot of effort -

sometimes helped by adding a graphics co-processor optimised to take on the burden

Network capacityo Many computers networked - shared resources and files, access to

printers etc. - but interactive performance can be reduced by slow network speed

Processing & Network• Networked Computing

Networks allow access to …o large memory and processingo other people (groupware, email)o shared resources – esp. the web

Issueso network delays – slow feedbacko conflicts - many people update datao unpredictability

Processing & Network• Internet

history …o 1969: DARPANET US DoD, 4 siteso 1971: 23; 1984: 1000; 1989: 10000

common language (protocols):o TCP – Transmission Control protocol

lower level, packets (like letters) between machineso IP – Internet Protocol

reliable channel (like phone call) between programs on machines

o email, HTTP, all build on top of these

CHAPTER 3

INTERACTION

Interaction• interaction models

translations between user and system

• ergonomicsphysical characteristics of interaction

• interaction stylesthe nature of user/system dialog

• contextsocial, organizational, motivational

Interaction• What is Interaction? communication

user system

but is that all … ?– see “language and action” in chapter 4 …

Interaction• Models of Interaction:• Common terms of Interaction:

Domain - the area of work under studye.g. graphic design

Goal - what you want to achievee.g. create a solid red triangle

Task - how you go about doing itultimately in terms of operations or actions

e.g. … select fill tool, click over triangle

Note …traditional interaction …use of terms differs a lot especially task/goal !!!

Interaction• Donald Norman’s ModelSeven stages

user establishes the goalformulates intentionspecifies actions at interfaceexecutes actionperceives system stateinterprets system stateevaluates system state with respect to goal

Norman’s model concentrates on user’s view of the interface

Interaction• Execution/Evaluation Cycle

• user establishes the goal• formulates intention• specifies actions at interface• executes action• perceives system state• interprets system state• evaluates system state with respect to goal

system

evaluationexecution

goal

Interaction

• user establishes the goal• formulates intention• specifies actions at interface• executes action• perceives system state• interprets system state• evaluates system state with respect to goal

system

evaluationexecution

goal

Interaction

• user establishes the goal• formulates intention• specifies actions at interface• executes action• perceives system state• interprets system state• evaluates system state with respect to goal

system

evaluationexecution

goal

Interaction

• user establishes the goal• formulates intention• specifies actions at interface• executes action• perceives system state• interprets system state• evaluates system state with respect to goal

system

evaluationexecution

goal

Interaction• Using Norman’s ModelSome systems are harder to use than others

Gulf of Execution user’s formulation of actions

≠ actions allowed by the system

Gulf of Evaluation user’s expectation of changed

system state ≠ actual presentation of

this state

Interaction• Human Error – Slips and Mistakeslip

understand system and goalcorrect formulation of actionincorrect action

mistakemay not even have right goal!

Fixing things?o slip – better interface designo mistake – better understanding of system

Interaction• Abowd & Beale Frameworkextension of Norman… their interaction framework has 4 parts

userinputsystemoutput

each has its own unique language

interaction translation between languages

problems in interaction = problems in translation

Score

Utask

Ooutput

Iinput

Interaction• Using Abowd & Beale’s Model:user intentions

translated into actions at the interface translated into alterations of system state reflected in the output display interpreted by the user

general framework for understanding interactionnot restricted to electronic computer systemsidentifies all major components involved in

interactionallows comparative assessment of systemsabstraction

Ergonomics• Study of the physical characteristics of interaction

• Also known as human factors but this can also be used to mean much of HCI!

• Ergonomics good at defining standards & guidelines for constraining way we design certain aspects of systems

Ergonomics• Examples: arrangement of controls and displays

e.g. controls grouped according to function or frequency of use, or sequentially

surrounding environment e.g. seating arrangements adaptable to cope with all

sizes of user health issues

e.g. physical position, environmental conditions (temperature, humidity), lighting, noise,

use of colour e.g. use of red for warning, green for okay,

awareness of colour-blindness etc.

Ergonomics• Industrial InterfacesOffice interface vs. industrial interface?

Context matters!

office industrial type of datatextual numeric rate of change slow fast environment clean dirty

… the oil soaked mouse!

Ergonomics• Industrial interface:

traditional … dials and knobstoday … screens and keypads

• Glass interface cheaper, more flexible,

multiple representations, precise values

not physically located, loss of context, complex interfaces

• may need both

Vessel B Temp

0 100 200

113

multiple representationsof same information

Ergonomics• Indirect Manipulation• office– direct manipulation

user interactswith artificial world

• industrial – indirect manipulationuser interacts

with real worldthrough interface

• issues ..feedbackdelays

system

interface plant

immediate

feedback

instruments