Human-Computer Interaction

90
Human-Computer Interaction Human perception, attention, memory

description

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. - PowerPoint PPT Presentation

Transcript of Human-Computer Interaction

Page 1: Human-Computer Interaction

Human-Computer Interaction

Human perception, attention, memory

Page 2: Human-Computer Interaction

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

Page 3: Human-Computer Interaction

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

Page 4: Human-Computer Interaction
Page 5: Human-Computer Interaction

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.

Page 6: Human-Computer Interaction

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

Page 7: Human-Computer Interaction

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

Page 8: Human-Computer Interaction

Gestalt psychologists

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

Page 9: Human-Computer Interaction

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

Page 10: Human-Computer Interaction

Figure and Ground

Figure – similar elements

Ground – contrasting, dissimilar elements

Page 11: Human-Computer Interaction

Figure and Ground

White horses Black horses?

Escher art often plays with figure/ground

Page 12: Human-Computer Interaction

Camouflage

Figure so similar to ground that it tends to disappear

Page 13: Human-Computer Interaction

Similarity

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

Page 14: Human-Computer Interaction

Similarity

Larger circles seen as belonging together

Page 15: Human-Computer Interaction

Proximity/Contiguity

Things that are closer are seen as belonging together

See vertical vs. horizontal lines

See two groups of two

Page 16: Human-Computer Interaction

Continuity

Tend to see figures as continuous

Page 17: Human-Computer Interaction

Closure

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

Page 18: Human-Computer Interaction

Closure

What do you see?

Page 19: Human-Computer Interaction

Area

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

Page 20: Human-Computer Interaction

Area

Can reverse effect with shading

Page 21: Human-Computer Interaction

Symmetry

Whole figure is perceived rather than individual parts

What do you see?

Page 22: Human-Computer Interaction

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

Page 23: Human-Computer Interaction

Graphical Representation at the Interface Use realistic graphics in interface

– effective– too expensive– often unnecessary

Methods– graphical modeling– graphical coding

Page 24: Human-Computer Interaction

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

Page 25: Human-Computer Interaction

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)

Page 26: Human-Computer Interaction

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

Page 27: Human-Computer Interaction

Applications of 3D

Design of buildings, cars, aircraft virtual reality molecular modeling

Page 28: Human-Computer Interaction

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

Page 29: Human-Computer Interaction

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

Page 30: Human-Computer Interaction

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

Page 31: Human-Computer Interaction

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

Page 32: Human-Computer Interaction

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

Page 33: Human-Computer Interaction

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

Page 34: Human-Computer Interaction

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

Page 35: Human-Computer Interaction

Types of graphs

You know ….

Page 36: Human-Computer Interaction

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

Page 37: Human-Computer Interaction

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

Page 38: Human-Computer Interaction

Guidelines for using color

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

Page 39: Human-Computer Interaction

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)

Page 40: Human-Computer Interaction

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

Page 41: Human-Computer Interaction

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

Page 42: Human-Computer Interaction

Good visual representations:

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

Page 43: Human-Computer Interaction
Page 44: Human-Computer Interaction
Page 45: Human-Computer Interaction
Page 46: Human-Computer Interaction
Page 47: Human-Computer Interaction
Page 48: Human-Computer Interaction

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

Page 49: Human-Computer Interaction

Icons: Pros

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

Page 50: Human-Computer Interaction

Icons: Cons

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

Page 51: Human-Computer Interaction

Meaning of icons

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

Page 52: Human-Computer Interaction

Design principles: icons

Appropriate for context of use Appropriate for task

Page 53: Human-Computer Interaction

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

Page 54: Human-Computer Interaction

Iconic representations

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

Page 55: Human-Computer Interaction

Iconic representations

Concrete icons more easily interpreted than abstract ones

Thus: object icons easier than action icons

Page 56: Human-Computer Interaction

Implementing icons

Does the graphic represent the concept?

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

on the same screen?

Page 57: Human-Computer Interaction

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?

Page 58: Human-Computer Interaction

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

Page 59: Human-Computer Interaction

Folder doesn’t stand out

Page 60: Human-Computer Interaction

Icon design

Context Function Representational Form Underlying Concept

Page 61: Human-Computer Interaction

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

Page 62: Human-Computer Interaction

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

Page 63: Human-Computer Interaction

Underlying concept

Concrete objects easiest to represent warnings, operations more difficult

Page 64: Human-Computer Interaction

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,

Page 65: Human-Computer Interaction

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

Page 66: Human-Computer Interaction

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

Page 67: Human-Computer Interaction

Recognition v. recall

Recognition superior to recall reduce recall requirements

– menus, icons

Page 68: Human-Computer Interaction

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

Page 69: Human-Computer Interaction

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.

Page 70: Human-Computer Interaction
Page 71: Human-Computer Interaction

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

Page 72: Human-Computer Interaction

“cocktail party phenomenon”

Ability to focus on one activity, while tuning out others

can be distracted from one task if attention called to another

Page 73: Human-Computer Interaction

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

Page 74: Human-Computer Interaction

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

Page 75: Human-Computer Interaction

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)

Page 76: Human-Computer Interaction

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

Page 77: Human-Computer Interaction

Typically…

Screen 1: 3.2 seconds Screen 2: 5.5 seconds

Why? Both have same density…

Page 78: Human-Computer Interaction

Techniques for guiding attention

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

auditory warnings… windowing

Page 79: Human-Computer Interaction

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

Page 80: Human-Computer Interaction

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

Page 81: Human-Computer Interaction

Cognitive Aids

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

Page 82: Human-Computer Interaction

Exercise - Stroop Effect

ZYP

QKELF

SUWRG

XCIDB

WOPR

ZYP

QKELF

XCIDB

SUWRG

WOPR

SUWRG

Page 83: Human-Computer Interaction

Stroop Effect ….

RED

BLACK

YELLOW

GREEN

BLUE

RED

GREEN

BLUE

BLACK

RED

YELLOW

Page 84: Human-Computer Interaction

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

Page 85: Human-Computer Interaction

Effect on UI design decisions

Interactions that have become automatic are difficult to unlearn

Consistency across versions, tools can help avoid this problem

Page 86: Human-Computer Interaction

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

Page 87: Human-Computer Interaction

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

Page 88: Human-Computer Interaction

Unix commands

Cat grep lint mv pr lpr

Page 89: Human-Computer Interaction

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

Page 90: Human-Computer Interaction

Guidelines

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

design meaningful icons