Human-Computer Interaction

Human perception, attention, memory

Visual perception

Humans capable of obtaining information from displays varying considerably in size and other features

but not uniformly across the spectrum nor at all speeds

Theories

Constructive theorists: the process of seeing is active; view of the world constructed from info in environment and previously stored knowledge

Ecological theorists: perception involves the process of picking up info from the environment; doesn’t require construction or elaboration

Visual perception

How long did it take to recognize the Dalmation? Only after you knew what you were looking for? After recognizing the Dalmation, what else could you

see? Interpretation of the scene is possible because we

know what Dalmations, trees, etc. look like -- active construction of the image.

Constructivist approach

Perception involves intervention of representations and memories

not like the image a camera would produce -- instead, a model that is transformed, enhanced, distorted, and portions discarded

ability to perceive objects on a screen is a result of prior knowledge and expectations + image on retina

Effect of context on perception

When presented with ambiguous stimuli, our knowledge of the world helps us to make sense of it -- same with ambiguous info on computer screen

Constructive process also involves decomposing images into recognizable entities: figure and background

Gestalt psychologists

Believed that our ability to interpret the meaning of scenes and objects is based on innate human laws of organization

Gestalt laws of perceptual organization Proximity - dots appear as groups rather than a

random cluster of elements Similarity - tendency for elements of same shape or

color to be seen as belonging together Closure - missing parts of the figure are filled in to

complete it, so that it appears as a whole circle Continuity - the stimulus appears to be made of two

lines of dots, traversing each other, rather than a random set of dots

Symmetry - regions bounded by symmetrical borders tend to perceived as coherent figures

Figure and Ground

Figure – similar elements

Ground – contrasting, dissimilar elements

Figure and Ground

White horses Black horses?

Escher art often plays with figure/ground

Camouflage

Figure so similar to ground that it tends to disappear

Similarity

Things that share visual characteristics like shape, size, color, texture, orientation seen as belonging together

Similarity

Larger circles seen as belonging together

Proximity/Contiguity

Things that are closer are seen as belonging together

See vertical vs. horizontal lines

See two groups of two

Continuity

Tend to see figures as continuous

Closure

Tend to see complete figures, even when part of info is missing

Closure

What do you see?

Area

The smaller of two overlapping figures is perceived as figure while larger is perceived as ground

Area

Can reverse effect with shading

Symmetry

Whole figure is perceived rather than individual parts

What do you see?

Ecological approach

Perception is a direct process; information is detected not constructed

humans will actively engage in activities that provide the necessary info to achieve goals

affordances: our understanding of the behavior of a system is what is afforded or permitted by the system– obvious -> easy to interact with– ambiguous -> more mistakes

– examples: door handles, scroll bars

Graphical Representation at the Interface Use realistic graphics in interface

– effective– too expensive– often unnecessary

Methods– graphical modeling– graphical coding

Graphical modeling

Represent 3D objects on 2D surface, requires depth cues– size - larger of two otherwise identical objects appears

closer than smaller one– interposition - blocked object perceived as behind blocking

object– contrast, clarity, brightness - sharper and more distinct

indicates near, duller appear far– shadow - cues re: relative position– texture - as apparent distance increases texture of detailed

surface becomes less grainy

Depth cues, continued

Motion parallax- – move head side to side, objects displaced at

different rates– on screen: move camera so image on screen

moves, following rules of motion parallax

stereoscopic -– two images, one per eye, shown from slightly

different angles (used in VR head-mounted displays)

Solid modeling v. wireframe

Solid modeling: color and shading used to achieve high-fidelity – more info about from, shape, surface– compute-intensive

Wireframe - schematic line drawings– good for showing internal structure– cheaper to compute

Applications of 3D

Design of buildings, cars, aircraft virtual reality molecular modeling

Graphical coding

Symbols, colors, other attributes represent state of system

Examples:– reverse video to represent current status of files

– abstract shapes to represent different objects

– color represents options

– alphanumerics represent data object

– size of icon maps to file size

– wastebin image for deletion capability

Coding Methods

Alphanumerics– unlimited number of codes– versatile; self-evident meaning; location time often

higher than for graphic coding Shapes

– 10-20 codes– effective if code matches object or operation

represented

Coding Methods

Color– 4-11– attractive, efficient; excessive use is confusing– limited value for the color-blind

Line angle– 8-11– good in special cases (e.g., wind direction)

Line length– 3-4– good, but can clutter display if many codes shown

Coding Methods

Line width– 2-3– good

Line style– 5-9– good

Object size– 3-5– fair; can take up considerable space– location time longer than for shape and color

Coding Methods

Brightness– 2-4– fatigue can result w/ poor screen contrast

Blink– 2-4– good for getting attention; should be suppressible

afterward; annoying if overused; limit to small fields

Coding Methods

Reverse video– no data– effective for making data stand out; can emphasize

flicker Underlining

– no data– useful, but can reduce text legibility

Combinations of codes– unlimited– can reinforce coding; complex combos confusing

Graphical coding for quant. data

Advantage is that graphs make it easier to perceive– relationships between multidimensional

data– trends in data that is constantly changing– defects in patterns of real-time data

Types of graphs

You know ….

Color coding

Good for structuring info and creating pleasing look

excessive use can lead to “color pollution”

experiments performed to determine effectiveness of using color coding in cognitive tasks, emphasis on identifying target stimuli from crowded displays, categorizing, memorizing

Results

Segmentation– color good for dividing display into regions; areas that

“belong together” should have the same color Amount of color

– too many colors increases search times; use conservatively Task demands

– color most powerful for search tasks, less useful for categorization and memorization tasks

Experience of user– in search tasks color benefits inexperienced more

Guidelines for using color

to distinguish layers to make items of interest stand out use dark or dim backgrounds

Color and text

White text w/out intervening space is difficult to read; color can help if used to separate boundaries of words

red and blue words appear to lie in different planes -- can be used to attract attention, or may cause problems (color stereoscopy)

Color v. monochrome

Alphanumeric coding superior to color coding for identification tasks (Christ, ‘75)

No difference in response time or accuracy for ID of objects based on b&w line drawing v. full color photos

Color

8% of male population is color-blind redundant coding suggested -- both color and

some other feature – e.g., traffic lights -- both color and order

Good visual representations:

Classic example: Minard’s map of Napoleon’s march on Moscow

Icons

Small pictorial images used to represent system objects, applications, utilities, commands

Assumption: icons can reduce complexity of the system, making it easier to learn and use

Problem: distinguishing among a large number of icons– Solution -- icon to show type; color shape, or size

to distinguish among elements of same type

Icons: Pros

Recognition v. recall = low memory load International symbols Compact Support direct manipulation

Icons: Cons

Arbitrary icons not intuitive Designing good icons is an art Limited number can be recalled Context dependent

Meaning of icons

Mapping from computer icon to function it represents is often arbitrary, must be learned

Design principles: icons

Appropriate for context of use Appropriate for task

Mapping form to concept

Resemblance icons– depict the underlying concept through analogous

image (rocks falling) Exemplar icons

– a typical example (silverware -> restaurant) Symbolic icons

– conveys underlying meaning more abstract than image (cracked wine glass -> fragile)

Arbitrary icons– bear no relation to underlying concept

Iconic representations

A) resemblance B) exemplary C) symbolic D) arbitrary

Iconic representations

Concrete icons more easily interpreted than abstract ones

Thus: object icons easier than action icons

Implementing icons

Does the graphic represent the concept?

Is the icon aesthetically pleasing? Is the icon distinguishable from others

on the same screen?

Evaluating icons

Graphic legibility – what objects does the icon show, graphic resolution?

Interpretation accuracy – does the icon suggest the right concept?

Interpretation strength – does the icon suggest the right concept first?

Contrast set distinction – does each icon stand out from the family?

Contrast set inclusion – do the icons in a family group together?

Icons: add’l considerations

Icons may be used to represent multiple states of an object– Mailbox empty/full– Agent waiting/busy

Need to test icons in each state, against whole family

Folder doesn’t stand out

Icon design

Context Function Representational Form Underlying Concept

Function

Text better than graphics for retrieving verbal information

Icons better when:– recognition plays a major part in task

• select type of restaurant, method of payment

– tasks require manipulative operations• drawing, painting

Representational Forms

Concrete objects abstract symbols(lines, circles, dots, arrows) combination

most meaningful icons use a combined form of representation, provided users are familiar with conventions depicted by abstract symbols

Underlying concept

Concrete objects easiest to represent warnings, operations more difficult

Icon screen design issues

Allow for different icon states Avoid jaggy lines Be aware of background patterns Stick to platform’s graphical style Design for lowest screen quality Color: subtle, small palette, redundancy,

Combination

Users less likely to forget icon meaning than to forget name of command

redundancy often used– pro: text makes meaning clear; icon easier to

remember– con: more screen space

Animated icons

Effectively portray complex and abstract processes

must focus on key aspects of function bad ones confusing selection a problem mode (animation v selection) a problem

Recognition v. recall

Recognition superior to recall reduce recall requirements

– menus, icons

Your job now …

Break into groups of 3-4

Group A:– Design icons to represent:

• Move a block of text• Copy a block of text• View text in temp storage• Insert a block of text

– Sketch 3 solutions for each – use color if you can– Evaluate your solutions– Revise– Demonstrate

Group B

Design signage for new high-speed train that will travel Europe-Russia-Asia

Signs for:– Baggage– Sleeping cars– Diapering station– Dining

Same procedure as for group A.

Attention and Memory Constraints “Everyone knows what attention is. It is the taking

possession of mind, in clear and vivid form, of one out of what seem several simultaneously possible objects or trains of thought … It requires withdrawal from some things in order to deal effectively with others.”– W. James, 1890

“cocktail party phenomenon”

Ability to focus on one activity, while tuning out others

can be distracted from one task if attention called to another

Objectives

Know importance of designing for attentional and memory constraints

Know what are meaningful and memorable interfaces

Apply techniques to structuring interfaces that are attention-grabbing and require minimal effort to learn and remember

Attention

Focused attention -- ability to attend to one event from a mass of competing stimuli

Divided attention -- attempt to attend to more than one thing at a time

Focusing attention at the interface Structuring information

– structure interface so it is easy to navigate through

– “right amount” of info per screen– grouped and ordered into meaningful parts

(See Gestalt laws of perceptual grouping)

Exercise: structuring information

Phone number of HoJo in Columbia? Name of hotel with double for $46

Phone number of Holiday House? Name of hotel with double for $27

Typically…

Screen 1: 3.2 seconds Screen 2: 5.5 seconds

Why? Both have same density…

Techniques for guiding attention

Spatial and temporal cues color alerting -- flashing, reverse video,

auditory warnings… windowing

Note that:

Info needing immediate attention should be displayed in a prominent place

less urgent info to less prominent place, but in a specific location

info needed intermittently shouldn’t be displayed unless requested

Multitasking and interruptions

People are interrupted while working, and often carry out several tasks at once…

Primary v. secondary task, suspend and resume

Problem: resume from wrong point Common solution: cognitive aid

– lists, post-its, – Pilot who puts coffee cup on flap handle to

remember to reduce electrical load before lowering wing flaps

Cognitive Aids

Goal: design system to provide information systematically about status of an activity - what has been done, what needs to be done

Exercise - Stroop Effect

ZYP

QKELF

SUWRG

XCIDB

WOPR

ZYP

QKELF

XCIDB

SUWRG

WOPR

SUWRG

Stroop Effect ….

RED

BLACK

YELLOW

GREEN

BLUE

RED

GREEN

BLUE

BLACK

RED

YELLOW

Cognitive Processes

Automatic– fast; demand minimal attention; don’t interfere

with other activities– unavailable to consciousness– hard to change once learned

Controlled– limited capacity; require attention and

conscious control– easier to change

Effect on UI design decisions

Interactions that have become automatic are difficult to unlearn

Consistency across versions, tools can help avoid this problem

Memory constraints

Some things easy to learn; others hard Levels of processing theory:

– extent to which new material can be remembered depends on its meaningfulness

– analysis of stimulus ranges from shallow - deep– meaningfulness determines depth of analysis which

affects how well remembered Meaningfulness

– familiarity– imagery

Effect on UI design decisions

Items that need to be remembered should be as meaningful as possible

Problem: familiar names need to make sense in computer domain

Computer science: names often abstract or arbitrary

Unix commands

Cat grep lint mv pr lpr

Paper of interest

Donald A. Norman, The trouble with UNIX: the user interface is horrid. Datamation, 27(12), 139-50, November 1981.

-- extended critique of UNIX commands

Guidelines

consider contextual, cultural, and user characteristics when choosing command names

design meaningful icons