NSCET E-LEARNING PRESENTATION NOTES/unit 1/CS6008_HCI.pdfCOMPUTER SCIENCE & ENGINEERING IVth YEAR / VIIIthSEMESTER CS6008 –HUMAN COMPUTER INTERACTION VIGNESH L S M.E., AP/CSE Nadar

NSCETE-LEARNING

PRESENTATIONLISTEN … LEARN… LEAD…

Department of CSE Page 1 of 205 NSCETDepartment of CSE NSCET

COMPUTER SCIENCE & ENGINEERING

IVth YEAR / VIIIth SEMESTER

CS6008 – HUMAN COMPUTER INTERACTION

VIGNESH L S M.E.,AP/CSE

Nadar Saraswathi College of Engineering & Technology,Vadapudupatti,Annanji (po), Theni – 625531.


THE HUMANUNIT 01 - UNIT NAME – LECTURE 01


the human

• Information i/o …• visual, auditory, haptic, movement

Information stored in memory• sensory, short-term, long-term

Information processed and applied• reasoning, problem solving, skill, error

Emotion influences human capabilities

Each person is different

•

•

•

•


Vision

Two stages in vision

• physical reception of stimulus

• processing and interpretation of stimulus


The Eye - physical reception

• mechanism for receiving light and transforming it into electricalenergy

light reflects from objects

images are focused upside-down on retina

•

•

•

•

retina contains rods for low light vision and cones for colour vision

ganglion cells (brain!) detect pattern and movement


Interpreting the signal

• Size and depth

• visual angle indicates how much of view object occupies(relates to size and distance from eye)

visual acuity is ability to perceive detail (limited)

familiar objects perceived as constant size(in spite of changes in visual angle when far away)

cues like overlapping help perception of size and depth

•

•

•


Interpreting the signal (cont)

Brightness subjective reaction to levels of light

affected by luminance of object

measured by just noticeable difference

visual acuity increases with luminance as does flicker

Colour made up of hue, intensity, saturation

cones sensitive to colour wavelengths

blue acuity is lowest

8% males and 1% females colour blind


Interpreting the signal (cont)

• The visual system compensates for:• movement

• changes in luminance.

• Context is used to resolve ambiguity

• Optical illusions sometimes occur due to over compensation


Optical Illusions

the Ponzo illusion the Muller Lyer illusion


Reading

Several stages: visual pattern perceived

decoded using internal representation of language

interpreted using knowledge of syntax, semantics, pragmatics

Reading involves saccades and fixations

Perception occurs during fixations

Word shape is important to recognition

Negative contrast improves reading from computer screen


Hearing

Provides information about environment:distances, directions, objects etc.

Physical apparatus: outer ear

middle ear– protects inner and amplifies sound

– transmits sound waves asvibrations to inner ear

chemical transmitters are released and cause impulses in auditory nerve

inner ear –

Sound pitch

loudness

timbre

––

–

sound frequency

amplitude

type or quality


Hearing (cont)

Humans can hear frequencies from 20Hz to 15kHz less accurate distinguishing high frequencies than low.

Auditory system filters sounds can attend to sounds over background noise.

for example, the cocktail party phenomenon.


Touch

Provides important feedback about environment.

May be key sense for someone who is visually impaired.

Stimulus received via receptors in the skin:

thermoreceptors – heat and cold– pain

– pressure(some instant, some continuous)

nociceptorsmechanoreceptors

Some areas more sensitive than others e.g. fingers.

Kinethesis - awareness of body position affects comfort and performance.


Movement

Time taken to respond to stimulus:reaction time + movement time

Movement time dependent on age, fitness etc.

Reaction time - dependent on stimulus type:~ 200ms

~ 150 ms

~ 700ms

visual

auditory

pain

Increasing reaction time decreases accuracy in the unskilledoperator but not in the skilled operator.


Movement (cont)

Fitts' Law describes the time taken to hit a screen target:

Mt = a + b log2(D/S + 1)

a and b are empirically determined constants

Mt is movement time

D is Distance

S is Size of target

where:

targets as large as possibledistances as small as possible


Memory

There are three types of memory function:

Sensory memories

Short-term memory or working memory

Long-term memory

Selection of stimuli governed by level of arousal.


sensory memory

• Buffers for stimuli received through senses• iconic memory: visual stimuli

•

•

echoic memory: aural stimulihaptic memory: tactile stimuli

• Examples• “sparkler” trail

• stereo sound

Continuously overwritten•


Short-term memory (STM)

• Scratch-pad for temporary recall

• rapid access ~ 70ms

• rapid decay ~ 200ms

• limited capacity - 7± 2 chunks


Examples

212348278493202

0121 414 2626

HEC ATR ANU PTH ETR EET


Long-term memory (LTM)

Repository for all our knowledge slow access ~ 1/10 second

slow decay, if any

huge or unlimited capacity

Two types episodic

semantic– serial memory of events

– structured memory of facts,concepts, skills

semantic LTM derived from episodic LTM


Long-term memory (cont.)

Semantic memory structure provides access to information

represents relationships between bits of information

supports inference

Model: semantic network inheritance – child nodes inherit properties of parent nodes

relationships between bits of information explicit

supports inference through inheritance


LTM - semantic network


Models of LTM - Frames

•

•

•

Information organized in data structures

Slots in structure instantiated

Type–subtype relationships

with values for instance of data


COLLIE

Fixed

breed of: DOG

type: sheepdog

Default

size: 65 cm

Variable

colour

DOG

Fixed

legs: 4

Default

diet: carniverous

sound: bark

Variable

size:

colour

Models of LTM - Scripts

Model of stereotypical information required to interpret situation

Script has elements that can be instantiated with values for context

Result: dog betterpays

vet richer

examination tableProps:waiting in room

instrumentspaying

Script for a visit to the vet

Entry conditions: dog ill Roles: vet examines

vet open diagnoses

owner has money treatsowner brings dog in

owner poorer takes dog out

Scenes: arriving at reception

medicine examination

Tracks: dog needs medicine

dog needs operation

Department of CSE Department of CSE Page 25 of 205 NSCET NSCET

Models of LTM - Production rules

Representation of procedural knowledge.

Condition/action rulesif condition is matched

then use rule to determine action.


IF dog is wagging tail

THEN pat dog

IF dog is growling

THEN run away

LTM - Storage of information

rehearsal information moves from STM to LTM

total time hypothesis amount retained proportional to rehearsal time

distribution of practice effect optimized by spreading learning over time

structure, meaning and familiarity information easier to remember


LTM - Forgetting

decay information is lost gradually but very slowly

interference new information replaces old: retroactive interference

old may interfere with new: proactive inhibition

so may not forget at all memory is selective …

… affected by emotion – can subconsciously `choose' to forget


LTM - retrieval

recall• information reproduced from memory can be assisted by cues, e.g.

categories, imagery

recognition•

•

information gives knowledge that it has been seen beforeless complex than recall - information is cue


Thinking

Reasoning

deduction, induction, abduction

Problem solving


Deductive Reasoning

Deduction:derive logically necessary conclusion from given premises.

e.g. If it is Friday then she will go to workIt is Friday

Therefore she will go to work.

Logical conclusion not necessarily true:e.g. If it is raining then the ground is dry

It is raining

Therefore the ground is dry


Deduction (cont.)

• When truth and logical validity clash …e.g. Some people are babies

Some babies cry

Inference - Some people cry

Correct?

• People bring world knowledge to bear


Inductive Reasoning

Induction: generalize from cases seen to cases unseen

e.g. all elephants we have seen have trunkstherefore all elephants have trunks.

Unreliable: can only prove false not true

… but useful!

Humans not good at usinge.g. Wason's cards.

negative evidence


Wason's cards

Is this true?

How many cards do you need to turn over to find out?

…. and which cards?


If a card has a vowel on one side it has an even number on the other

K4E7

Abductive reasoning

• reasoning from event to causee.g. Sam drives fast when drunk.

If I see Sam driving fast, assume drunk.

• Unreliable:• can lead to false explanations


Problem solving

solution to unfamiliar task usingProcess of findingknowledge.

Several theories.

Gestalt

problem solving both productive and reproductive

productive draws on insight and restructuring of problemattractive but not enough evidence to explain `insight' etc.

move away from behaviourism and led towards information processingtheories


Problem solving (cont.)

Problem space theory problem space comprises problem states

problem solving involves generating states using legal operators

heuristics may be employed to select operators e.g. means-ends analysis

operates within human information processing system e.g. STM limits etc.

largely applied to problem solving in well-defined areas e.g. puzzles rather than knowledge intensive areas


Problem solving (cont.)

Analogy analogical mapping:

novel problems in new domain?

use knowledge of similar problem from similar domain

analogical mapping difficult if domains are semantically different

Skill acquisition skilled activity characterized by chunking

lot of information is chunked to optimize STM

conceptual rather than superficial grouping of problems

information is structured more effectively


Errors and mental models

Types of error

slips

right intention, but failed to do it rightcauses: poor physical skill,inattention etc.

change to aspect of skilled behaviour can cause slip

mistakes

wrong intentioncause: incorrect understanding

humans create mental models to explain behaviour.

if wrong (different from actual system) errors can occur


Emotion

• Various theories of how emotion works• James-Lange: emotion is our interpretation of a physiological

response to a stimuli

Cannon: emotion is a psychological response to a stimuli Schacter-Singer: emotion is the result of our evaluation of our physiologicalresponses, in the light of the whole situation we are in

••

• Emotion clearly involves both cognitive and physicalresponses to stimuli


Emotion (cont.)

• The biological response to physical stimuli is called affect

• Affect influences how we respond to situations• positive → creative problem solving• negative → narrow thinking

“Negative affect can make it harder to do even easy tasks; positive affect canmake it easier to do difficult tasks”

(Donald Norman)


Emotion (cont.)

• Implications for interface design•

•

•

stress will increase the difficulty of problem solvingrelaxed users will be more forgiving of shortcomings in design

aesthetically pleasing and rewarding interfaces will increase positive affect


Individual differences

long term– sex, physical and intellectual abilities

short term– effect of stress or fatigue

changing– age

Ask yourself:will design decision exclude section of user population?


Psychology and the Design of InteractiveSystem

Some direct applications

e.g. blue acuity is poor blue should not be used for important detail

However, correct application generally requires understanding of context in psychology, and an understanding of particular experimental conditions

A lot of knowledge has been distilled in

guidelines (chap 7)cognitive models (chap 12)

experimental and analytic evaluation techniques (chap 9)


COMPUTERTHEUNIT 01 - UNIT NAME – LECTURE 01


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 (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


Interacting with computers

to understand human–computer interaction… need to understand computers!

what goes indevices, paper,

and out

sensors, etc.

what can it do?memory, processing,

networks


A ‘typical’ computer system

? •

•

•

screen, or monitor, on which there are windows

keyboard

mouse/trackpad

• variations•

•

•

desktop

laptop

PDA12-37pm

the devices dictate the styles of interaction that the system supports

If we use different devices, then the interface will support a different style ofinteraction


wi ndow 1

wi ndow 2

How many …

• computers in your house?• hands up, …

… none, 1, 2 , 3, more!!

• computers in your pockets?

are you thinking …… PC, laptop, PDA ??


How many computers …

in your house? in your pockets?

•

•

•

•

•

PC

TV, VCR, DVD, HiFi, cable/satellite TV microwave, cooker, washingmachine

central heating

security system

PDAphone, camera

smart card, card with magnetic strip? electronic car keyUSB memory

•

•

••

•

try your pockets and bagscan you think of more?


Interactivity?

Long ago in a galaxy far away … batch processing•

•

•

punched card stacks or large data files preparedlong wait ….

line printer output

… and if it is not right …

Now most computing is interactive•

•

•

rapid feedbackthe user in control (most of the time)

doing rather than thinking …

Is faster always better?


Richer interaction

sensorsand devices

everywhere


text entry devices

keyboards (QWERTY et al.)

chord keyboards, phone pads

handwriting, speech


Keyboards

•

•

Most common text input device

Allows rapid entry of text by experienced users

• Keypress closes connection, causing a charactersent

code to be

• Usually connected by cable, but can be wireless


layout – QWERTY

• 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 QWERTYtypists produces reluctance to change.

•


QWERTY (ctd)

4 8 92 3 5 61 7 0

Q

A

W

S

Z

E

D

R

F

T

G

Y

H

U

J

I

K

O

L

P

X C V B N M , .

SPACE


alternative keyboard layouts

Alphabetic•

•

•

keys arranged in alphabetic ordernot faster for trained typists

not faster for beginners either!

Dvorak•

•

•

•

•

common letters under dominant fingersbiased 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


special keyboards

•

•

designs to reduce fatigue for RSI

for one handed usee.g. the Maltron left-handed keyboard


Chord keyboards

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

BUT - social resistance, plus fatigue after extended use

NEW – niche market for some wearables


phone pad and T9 entry

• use numeric keys withmultiple presses

2 – a b c

3 - d e f

4 - g h i

5 - j k l

6 - m n o

7 - p q r s

8 - t u v

9 - w x y z

hello = 4433555[pause]555666

surprisingly fast!

• T9 predictive entry•

•

•

•

type as if single key for each letteruse dictionary to ‘guess’ the right word

hello = 43556 …

but 26 -> menu ‘am’ or ‘an’


Handwriting recognition

• Text can be input into the computer, digesting tablet

• natural interaction

using a pen and a

• Technical problems:• capturing all useful information - stroke path, pressure, etc. in a

natural mannersegmenting joined up writing into individual lettersinterpreting individual letterscoping with different styles of handwriting

•••

• Used in PDAs, and tablet computers… leave the keyboard on the desk!

…


Speech recognition

• Improving rapidly

• Most successful when:• single user – initial training and learns peculiarities

• limited vocabulary systems

• Problems with•

•

•

•

external noise interfering

imprecision of pronunciation

large vocabulariesdifferent speakers


Numeric keypads

• for entering numbers quickly:• calculator, PC keyboard

• for telephones

not the same!!

ATM like phone

telephone calculator


7 8 9

4 5 6

1 2 3

0 . =

1 2 3

4 5 6

7 8 9

* 0 #

positioning, pointing and drawing

mouse, touchpadtrackballs, joysticks etc.touch screens, tablets

eyegaze, cursors


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


the mouse (ctd)

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 doesn’t obscure screen, is accurate and fast.

• hand-eye coordination problems for novice users


How does it work?

Two methods for detecting motion

• Mechanical•

•

•

Ball on underside of mouse turns as mouse is movedRotates 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 desk

less susceptible to dust and dirt

detects fluctuating alterations in reflected light intensity to calculate relative motion in (x, z) plane


Even by foot …

• some experiments with the footmouse• controlling mouse movement with feet …

• not very common :-)

• but foot controls are common elsewhere:•

•

•

car pedalssewing machine speed control

organ and piano pedals


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

•


Trackball and thumbwheels

Trackball• ball is rotated inside static housing

• like an upsdie down mouse!

relative motion moves cursor indirect device, fairly accurate separate buttons for picking

very fast for gamingused in some portable and notebook computers.

•

•

•

•

•

Thumbwheels …• for accurate CAD – two dials for X-Y cursor position

• for fast scrolling – single dial on mouse


Joystick and keyboard nipple

Joystick• indirect

pressure of stick = velocity of movementbuttons 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


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•


Stylus and light pen

Stylus•

•

•

small pen-like pointer to draw directly on screenmay 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


Digitizing tablet

• Mouse like-device with cross hairs

• used on special surface- rather like stylus

• very accurate- used for digitizing maps


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 devicessit under the screen like a small

availablewebcam


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


Discrete positioning controls

• in phones, TV controls etc.•

•

•

cursor pads or mini-joysticksdiscrete left-right, up-down

mainly for menu selection


display devices

bitmap screens (CRT & LCD)

large & situated displays digital paper


bitmap displays

• screen is vast number of coloured dots


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


anti-aliasing

Jaggies• diagonal lines that have discontinuities in due to horizontal raster scan

process.

Anti-aliasing••

softens edges by using shades of line colouralso used for text


n

Cathode ray tube

• Stream of electrons emitted from electron gun, focused and directed bymagnetic fields, hit phosphor-coated screen which glows

used in TVs and computer monitors•

electronbeam

electrongun

focussing and

deflection

phosphor-

coated screeDepartment of CSE Page 82 of 205 NSCETDepartment of CSE NSCET

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

•


Health hints …

•

•

•

•

•

do

do

do

do

not

not

not

not

sit too close to the screen

use very small fonts

look at the screen for long periods without a break

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


special displays

Random Scan (Directed-beam refresh, vector display)•

•

•

•

draw the lines to be displayed directlyno jaggies

lines need to be constantly redrawn

rarely used except in special instruments

Direct view storage tube (DVST)•

•

•

Similar to random scan but persistent => no flicker

Can be incrementally updated but not selectively erased

Used in analogue storage oscilloscopes


large displays

•

•

used for meetings, lectures, etc.

technology

– usually wide screenplasma

video walls – lots of small screens together

– RGB lights or LCD projectorprojected– hand/body obscures screen

– may be solved by 2 projectors + clever software

back-projected– frosted glass + projector behind


situated displays

• displays in ‘public’ places• large or small

• very public or for small group

display only••

or•

for information relevant to location

interactiveuse 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 notes left using stylus

• office owner reads notes using web interface

Hermes a situated display

small displaysbeside

office doors

handwrittennotes left

using stylus

office ownerreads notes using

web interface


Digital paper

appearance

• what?•

•

•

thin flexible sheetsupdated electronically

but retain display crosssection

• how?•

•

small spheres turnedor channels with coloured liquidand contrasting spheresrapidly developing area•


virtual reality and 3D interaction

positioning in 3D spacemoving and grasping

seeing 3D (helmets and caves)


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

•

•

•

•


pitch, yaw and roll

yaw

rollpitch


3D vision

3D displays

• desktop VR• ordinary screen, mouse or keyboard control

• perspective and motion give 3D effect

seeing in 3D••

•

•

use stereoscopic visionVR helmets

screen plus shuttered specs, etc.


also see extra slides on

VR headsets

•

•

•

small TV screen for each eye

slightly different angles

3D effect


VR motion sickness

• time delay• move head … lag … display moves

• conflict: head movement vs. eyes

depth perception••

•

•

headset gives different stereo distancebut all focused in same plane

conflict: eye angle vs. focus

• conflicting cues => sickness• helps motivate improvements in technology


simulators and VR caves

•

•

•

•

•

scenes projected on walls

realistic environment

hydraulic rams!

real controls

other people


physical controls, sensors etc.

special displays and gauges

sound, touch, feel, smell

physical controlsenvironmental and bio-sensing


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 and whirrs

• used for error indications

• confirmation of actions e.g. keyclick

also see chapter 10


Touch, feel, smell

• touch and feeling important•

•

•

in games … vibration, force feedbackin simulation … feel of surgical instruments

called haptic devices

• texture, smell, taste• current technology very limited


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.


physical controls

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

easy-cleansmooth buttons

multi-functioncontrol

large buttonsclear dials

tiny buttons


Environment and bio-sensing

• sensors all around us•

•

•

•

car courtesy light – small switch on doorultrasound 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


paper: printing and scanning

print technology

fonts, page description, WYSIWYG

scanning, OCR


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

•

•


Types of dot-based printers

• dot-matrix printers•

•

•

use inked ribbon (like a typewriterline 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 fixedwith heat

• typically 600 dpi or better.

•


Printing in the workplace

• shop tills•

•

•

dot matrixsame print head used for several paper rolls

may also print cheques

• thermal printers•

•

•

•

special heat-sensitive paperpaper heated by pins makes a dot

poor quality, but simple & low maintenance

used in some fax machines


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


Fonts (ctd)

Pitch• fixed-pitch – every character has the same width

e.g. Courier

• variable-pitched – some characters widere.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

•


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• but sans serif often better on screen

of printed text


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


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 similarbut never quite the same

so … need different designs, graphicsprint

•

•

• etc, for screen and


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 600–2400 dpi


Scanners (ctd)

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


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


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


memory

short term and long term

speed, capacity, compression

formats, access


Short-term Memory - RAM

• Random access memory (RAM)•

•

•

•

on silicon chips100 nano-second access time

usually volatile (lose information if power turned off)

data transferred at around 100 Mbytes/sec

• Some non-volatile RAM usedinformation

to store basic set-up

• Typical desktop computers:64 to 256 Mbytes RAM


Long-term Memory - disks

• magnetic disks• floppy disks store around 1.4 Mbytes

• hard disks typically 40 Gbytes to 100s of Gbytesaccess time ~10ms, transfer rate 100kbytes/s

• optical disks•

•

•

use lasers to read and sometimes writemore robust that magnetic media

CD-ROM- same technology as home audio, ~ 600 Gbytes

DVD - for AV applications, or very large files•


Blurring boundaries

• PDAs• often use RAM for their main memory

• Flash-Memory•

•

•

used in PDAs, cameras etc.

silicon based but persistent

plug-in USB devices for data transfer


speed and capacity

• what do the numbers mean?

• some sizes (all uncompressed) …•

•

•

this book, text only ~ 320,000 words, 2Mb

the Bible ~ 4.5 Mbytes

scanned page ~ 128 Mbytes• (11x8 inches, 1200 dpi, 8bit greyscale)

digital photo ~ 10 Mbytes• (2–4 mega pixels, 24 bit colour)

video ~ 10 Mbytes per second• (512x512, 12 bit colour, 25 frames per sec)

•

•


virtual memory

• Problem:• running lots of programs + each program large

• not enough RAM

• Solution - Virtual memory :• store some programs temporarily on disk

• makes RAM appear bigger

• But … swopping•

•

•

program on disk needs to run againcopied from disk to RAM

s l o w s t h i n g s d o w n


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, MP3exploit perception

• JPEG: lose rapid changes and some colour

• MP3: reduce accuracy of drowned out notes


Storage formats - text

•

•

•

ASCII - 7-bit binary code for to each letter and character

UTF-8 - 8-bit encoding of 16 bit character set

RTF (rich text format)- text plus formatting and layout information

SGML (standardized generalised markup language)- documents regarded as structured objects

XML (extended markup language)

•

•- simpler version of SGML for web applications


Storage formats - media

• Images:• many storage formats :

(PostScript, GIFF, JPEG, TIFF, PICT, etc.)• plus different compression techniques

(to reduce their storage requirements)

• Audio/Video• again lots of formats :

(QuickTime, MPEG, WAV, etc.)compression even more important

also ‘streaming ’ formats for network delivery•

•


methods of access

• large information store• long time to search => use index

• what you index -> what you can access

exact match•

•

simple index needs

forgiving systems:• Xerox “do what I mean” (DWIM)

• SOUNDEX – McCloud ~ MacCleod

access without structure …• free text indexing (all the words in a document)

• needs lots of space!!

•


processing and networks

finite speed (but also Moore’s law)

limits of interaction

networked computing


Finite processing speed

• Designers tend to assume fast processors, and make interfaces more andmore complicated

• But problems occur, because processing cannot keep up with all thetasks it needs to do

• cursor overshooting because system has buffered keypresses

• icon wars - user clicks on icon, nothing happens, clicks on another, then system responds and windows fly everywhere

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


res-law/

Moore’s law

•

•

computers get faster and faster!

1965 …•

•

•

Gordon Moore, co-founder of Intel, noticed a patternprocessor speed doubles every 18 months

PC … 1987: 1.5 Mhz, 2002: 1.5 GHz

• similar pattern for memory• but doubles every 12 months!!

• hard disk … 1991: 20Mbyte : 2002: 30 Gbyte

baby born today• record all sound and vision

• by 70 all life’s memories stored in a grain of dust!

•

/e3/online/mooDepartment of CSE Page 130 of 205 NSCETDepartment of CSE NSCET

the myth of the infinitelyfast machine

• implicit assumption … no delaysan infinitely fast machine

what is good design for real machines?

good example … the telephone :

•

••

•

•

•

type keys too fast

hear tones as numbers sent down the line

actually an accident of implementation

emulate in deisgn


Limitations on interactive performance

Computation bound• Computation takes ages, causing frustration for the user

Storage channel bound• Bottleneck in transference of data from disk to memory

Graphics bound• Common bottleneck: updating displays requires a lot of effort - sometimes

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

Network capacity• Many computers networked - shared resources and files, access to printers

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


Networked computing

Networks allow access to …•

•

•

large memory and processingother people (groupware, email)

shared resources – esp. the web

Issues•

•

•

network delays – slow feedbackconflicts - many people update data

unpredictability


The internet

• history …• 1969: DARPANET US DoD, 4 sites

• 1971: 23; 1984: 1000; 1989: 10000

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

• lower level, packets (like letters) between machines

IP – Internet Protocol• reliable channel (like phone call) between programs on machines

email, HTTP, all build on top of these

•

•


THE INTERACTIONUNIT 01 - UNIT NAME – LECTURE 01


chapter 3

the interaction


The Interaction

• interaction models– translations between

ergonomics

user and system

•

– physical characteristics of interaction

interaction styles

– the nature of user/system dialog

context

– social, organizational, motivational

•

•


What is interaction?

communication

user system

but is that all … ?

– see “language and action” in chapter 4 …


models of interaction

terms of interaction

Norman model

interaction framework


Some terms of interaction

domain – the area of work under study

e.g. graphic design

what you want to achieve

e.g. create a solid red triangle

how you go about doing itultimately in terms of operations

goal –

task –– or actions

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

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


Donald Norman’s model

• Seven stages––

–

–

–

–

–

user establishes the goalformulates intention

specifies actions at interface

executes action

perceives system state

interprets system state

evaluates system state with respect to goal

• Norman’s model concentratesof the interface

on user’s view


execution/evaluationgoal

loop

execution evaluation

system

user establishes the goal

formulates intention

specifies actions at interface

executes action



evaluates system state with

••

•

•

•

•

• respect to goal



loop


system

• formulates intention

••

•

•

•

specifies actions at interfaceexecutes action



evaluates system state with respect to goal


• user establishes the goal


loop


system

the goal• user establishes

• perceives system state

••

interprets system stateevaluates system state with respect to goal


• formulates intention

• specifies actions at interface

• executes action


loop


system

user establishes the goal

formulates intention••

•

•specifies actionsexecutes action

at interface


• perceives system state

• interprets system state

• evaluates system state with respect to goal

Using Norman’s model

Some systems are harder to use than others

Gulf of Executionuser’s formulation of actions

allowed by the system≠ actions

Gulf of Evaluationuser’s expectation of changed system state

≠ actual presentation of this state


Human error - slips and mistakes

slipunderstand systemcorrect formulation

incorrect action

and goalof action

mistakemay not even have right goal!

Fixing things?

slip – better interface design

mistake – better understanding of system


Abowd and Beale framework

extension of Norman…

Ooutput

their interaction framework has 4 parts

––

–

–

user

input

system

output

Score

Utask

Iinput

each has its own

interaction

unique language

translation between languages

problems in interaction = problems in translation


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 interaction––

–

–

not restricted to electronic computer systems

identifies all major components

allows comparative assessment

an abstraction

involved in interaction

of systems


ergonomics

physical aspects of interfaces

industrial interfaces


Ergonomics

• Study of the physicalinteraction

characteristics of

• Also known as human factors – but thisalso be used to mean much of HCI!

can

• Ergonomics good at defining standards andguidelines for constrainingcertain aspects of systems

the way we design


Ergonomics - examples

• arrangement of controls and displayse.g. controls grouped according to function or

frequency of use, or sequentially

surrounding environmente.g. seating arrangements adaptable to cope with

sizes of user

health issuese.g. physical position, environmental conditions

(temperature, humidity), lighting, noise,

use of coloure.g. use of red for warning, green for okay,

•all

•

•

awareness of colour-blindness etc.


Industrial interfaces

Office interface vs. industrial interface?

Context matters!

office industrial

type of datarate of change

environment

textualslow

clean

numericfast

dirty

… the oil soaked mouse!


mation

Glass interfaces ?

• industrial interface:– traditional … dials and knobs

– now … screens and keypads

glass interface

+ cheaper, more flexible, multiple representations, precise values

– not physically located, loss of context,

•

complex

may need

interfaces

both•multiple representations

of same infor


Vessel B Temp

0 100 200

113

Indirect manipulation

• office– direct manipulation– user interacts

with artificial world

• industrial – indirect

– user interacts with real world through interface

issues ..

– feedback

– delays

manipulation

interface

•immediate

feedback

instruments

Page 155 of 205Department of CSE NSCETDepartment of CSE NSCET

plant

system

interaction styles

dialogue … computer and user

distinct styles of interaction


Common interaction styles

••

•

•

•

•

•

•

command line interfacemenus

natural language

question/answer and query

form-fills and spreadsheets

WIMP

point and click

dialogue

three–dimensional interfaces


Command line interface

• Way of expressing instructions to the computer directly– function keys, single characters, short abbreviations,

whole words, or a combination

••

•

•

suitable for repetitive tasksbetter for expert users than novices

offers direct access to system functionality

command names/abbreviationsmeaningful!

should be

Typical example: the Unix system


Menus

••

Set of options displayed on the screenOptions visible– less recall - easier to use

– rely on recognition so names should be meaningful

Selection by:– numbers, letters, arrow keys, mouse

– combination (e.g. mouse plus accelerators)

Often options hierarchically grouped– sensible grouping is needed

•

•

• Restricted form of full WIMP system


Natural language

•

•

•

Familiar to user

speech recognition

Problems

or typed natural language

–

–

–

vague

ambiguous

hard to do well!

• Solutions– try to understand a

– pick on key words

subset


Query interfaces

• Question/answer interfaces

–

–

–

user led through interaction via series of questions

suitable for novice users but restricted functionality

often used in information systems

• Query languages (e.g. SQL)– used to retrieve information from database

– requires understanding of database structure and

language syntax, hence requires some expertise


Form-fills

•

•

•

•

Primarily for data entry or

Screen like paper form.

data retrieval

Data put in relevant

Requires

place

–

–

good design

obvious correction facilities


Spreadsheets

• first spreadsheet VISICALC, followed byLotus 1-2-3MS Excel most common today

sophisticated variation of form-filling.•

–

–

grid of cells contain a value or a formula

formula can involve values of other cellse.g. sum of all cells in this column

– user can enter and altermaintains consistency

data spreadsheet


WIMP Interface

Windows

Icons

Menus

Pointers

… or windows, icons, mice, and pull-down menus!

• default style for majority of interactivecomputer systems, especially machines

PCs and desktop


Point and click interfaces

• used in ..

–

–

–

multimedia

web browsers

hypertext

• just click something!– icons, text links or location on map

• minimal typing


Three dimensional interfaces

•

•

virtual reality

‘ordinary’ window systems

–

–

–

highlighting

visual affordance

indiscriminate usejust confusing!

flat buttons …

click me!

• 3D workspaces … or sculptured

–

–

–

use for extra virtual space

light and occlusion give depth

distance effects


ry material elements

elements of the wimp interface

windows, icons, menus, pointers

+++

buttons, toolbars,

palettes, dialog boxes

also seesupplementa

on

choosinNgSwCiEmTp

Department of CSE Page 167 of 205Department of CSE NSCET

Windows

• Areas of the screen that behave as were independent

if they

––

–

can

cancanout

contain text or graphicsbe moved or resized

overlap and obscure each other, next to one another (tiled)

or can be laid

• scrollbars– allow the user to move the contents

up and down or from side to side

title bars– describe the name of the window

of the window

•


Icons

•

•

small picture or imagerepresents some object in the interface– often a window or action

windows can be closed down (iconised)– small representation fi many accessible

windows

icons can be many and various– highly stylized

– realistic representations.

•

•


Pointers

• important component– WIMP style relies on pointing and selecting things

uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts

•

• wide variety of graphical images


Menus

•

•

Choice of operations or services offered on the screen

Required option selected with pointer

problem – take a lot of screen space

solution – pop-up: menu appears when needed


File Edit Options Font

Typewriter

ScreenTimes

Kinds of Menus

• Menu drags

Bar at top of screen (normally), menu down

––

–

pull-down menu - mouse hold and drag down menu

drop-down menu - mouse click reveals menu

fall-down menus - mouse just moves over bar!

• Contextual menu appears where you are– pop-up menus - actions for selected object

– pie menus - arranged in a circle

• easier to select item (larger target area)

• quicker (same distance to any option)… but not widely used!


Menus extras

• Cascading menus

–

–

–

hierarchical menu structure

menu selection opens new menu

and so in ad infinitum

• Keyboard accelerators– key combinations - same effect as

– two kinds

menu item

• active when menu open – usually first letter

• active when menu closed – usually

usually different !!!

Ctrl + letter


Menus design issues

•

•

•

•

•

which kind to use

what to include in menus at all

words to use (action or description)

how to group items

choice of keyboard accelerators


Buttons

• individual and isolated regions within ainvokedisplay that can

an actionbe selected to

• Special kinds– radio buttons

–– check

–

set of mutuallyboxes

exclusive choices

set of non-exclusive choices


Toolbars

• long lines of icons …… but what do they do?

• fast access to common actions

• often customizable:

– choose

– choose

which toolbars to see

what options are on it


Palettes and tear-off menus

• Problemmenu not there when you want it

• Solutionpalettes – little windows of actions

– shown/hidden via menu option

e.g. available shapes in drawing package

tear-off and pin-up menus

– menu ‘tears off’ to become palette


Dialogue boxes

• information windows that pop up toinform of an important event or request information.

e.g: when saving a file, a dialogue box isdisplayed to allow the user to specify thefilename and location. Once the file issaved, the box disappears.


interactivity

easy to

what

focus

about

on look

feel?


Speech–driven interfaces

• rapidly improving …… but still inaccurate

how to have robust dialogue?

… interaction of course!•

e.g. airline reservation:reliable “yes” and “no”+ system reflects back its understanding“you want a ticket from New York to Boston?”


Look and … feel

• WIMP systems have the same elements:windows, icons., menus, pointers, buttons, etc.

• but different window systems… behave differently

e.g. MacOS vs Windows menus

appearance + behaviour = look and feel


Initiative

• who has the initiative?old question–answerWIMP interface

––

computeruser

• WIMP exceptions …pre-emptive parts of the interface

• modal dialog boxes

–

–

–

come and won’t go away!

good for errors, essential steps

but use with care


Error and repair

can’t always avoid errors …… but we can put them right

make it easy to detect errors… then the user can repair them


hello, this is the Go Faster booking system

what would you like?

(user) I want to fly from New York to London

you want a ticket from New York to Boston

(user) no

sorry, please confirm one at a time

do you want to fly from New York

(user) yes

… … …

Context

Interaction affectedcontext

by social and organizational

• other people– desire to impress,

motivation

competition, fear of failure

•

– fear, allegiance, ambition, self-satisfaction

inadequate systems•

– cause frustration and lack of motivation


Experience, engagement and fun

designing experience

physical engagement

managing value


Experience?

• home, entertainment, shopping– not enough that people can use a system

– they must want to use it!

• psychology of experience– flow (Csikszentimihalyi)

– balance between anxiety and boredom

• education– zone of proximal development

– things you can just do with help

• wider ...– literary analysis, film studies, drama


Designing experience

• real crackers

–

–

–

cheap and cheerful!

bad joke, plastic toy,

pull and bang

paper hat



• virtual crackers

–

–

–

cheap and cheerful

bad joke, web toy, cut-out

click and bang

mask



• virtual crackers

–

–

–

cheap and cheerful

bad joke, web toy, cut-out

click and bang

mask


message

how crackers workfill in web form

sender recipientreceive emailTo: wxvFrom: ..

closedcracker page

open recipient clicks

cracker opens ...

very slowly

watchesprogress

opencracker page

sender jokelinks

web toymask


The crackers experience

real cracker virtual cracker

Surface elements

design

play

cheap and

plastic toy

paper hat

cheerful

and joke

simple page/graphics

web toy and joke

mask to cut outdressing up

Experienced effects

shared

co-experience

offered to another

pulled together

sent by email message

sender can't see content until opened by recipient

recruited expectation

first page - no contents

slow ... page change

excitement

hiddenness

suspense

surprise

cultural connotations

contents inside

pulling cracker

bang (when it works) WAV file (when it works)


Physical design

• many constraints:

–

–

–

–

–

–

ergonomic – minimum button size

switches are bigphysical – high-voltage

legal and safety – high cooker controls

context and environment –

must look good

easy to clean

aesthetic

economic

–

– … and not cost too much!


Design trade-offs

constraints are contradictory

within categories:

e.g. safety – cooker controls

… need trade-offs

front panel – safer for adult

rear panel – safer for child

between categories

e.g. ergonomics vs. physical – MiniDisc remote

ergonomics – controls need to be bigger

physical – no room!

solution – multifunction controls & reduced functionality


Fluidity

• do external physical aspectslogical effect?– related to affordance (chap 5)

reflect

logical state revealed in physicale.g. on/off buttons

state?

inverse actions inverse effects?e.g. arrow buttons, twist controls


inverse actions

• yes/no buttons– well sort of

• ‘joystick’

• also left side control


spring back controls

••

•

one-shot buttons

joystick

some sliders

good – large selection

bad – hidden state

sets


twist

a minidisk controller

twist for track movementpull and twist for volumeseries of spring-back controls

each cycle through some options–natural inverse back/forward

––

spring backnatural inverse for

NSCETDepartment of CSE Page 197 of 205Department of CSE NSCET

physical layout

controls:

logical relationship

~ spatial grouping


compliant interaction

rotary knobs reveal internal statestate evident inmechanical buttons and can be controlled by both user

and machine


Managing value

people use somethingONLY IF

it has perceived valueAND

value exceeds cost

BUT NOTE

•

•

exceptions

value NOT

(e.g. habit)

necessarily personal gain or money


Weighing up value

value•

•

•

cost•

•

•

helps me get my

fun

good for others

work done

download time

money £, $, €

learning effort


Discounted future

• in–

economics Net Present Value:

discount by (1+rate)years to wait

• in–

–

–

life people heavily discount

future value and future cost

hence resistance to learning

need low barriers

and high perceived present value


… but also says “buy me”!!

example – HCI book search

• value forhelps

peopleyou to

who have the booklook up thingspage number– chapter and

• value for those who don’t …sort of

– full

online mini-encyclopaediaparagraph of context

… but also says “buy me”!!


Value and organisational design

• coercion• tell people what to do!

• value = keep your job

enculturation• explain corporate values

• establish support (e.g share

emergence• design process so that

•

options)

•

individuals value → organisational value


General lesson …

if you want someone to do something …

• make it easy for them!

• understand their values


Documents

NSCET E-LEARNING PRESENTATION NOTES/unit 1/CS6008_HCI.pdfCOMPUTER SCIENCE & ENGINEERING IVth YEAR / VIIIthSEMESTER CS6008 –HUMAN COMPUTER INTERACTION VIGNESH L S M.E., AP/CSE Nadar