CS422 - Human Computer Interaction
description
Transcript of CS422 - Human Computer Interaction
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