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; doesnt 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 quantitative 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

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: Minards map of Napoleons 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, has to be learned

Design principles: icons

 

Appropriate for context of use Appropriate for task

Iconic representations


A) resemblance
depict the underlying concept through analogous image (rocks falling)

B) exemplar
- a typical example (silverware -> restaurant)

C) symbolic
conveys underlying meaning more abstract than image (cracked wine glass > fragile)

D) arbitrary
bear no relation to underlying concept

Iconic representations


Concrete icons more easily interpreted than abstract ones Thus: object icons easier than action icons

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? Also - is the icon aesthetically pleasing?

Icons: addl 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

Icon screen design issues

     

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

Icons: example 1


packing crate icons

Icons: example2


Desktop icons

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

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

Underlying concept
 

Concrete objects easiest to represent warnings, operations more difficult

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

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

Attention


Focused attention -- ability to attend to one event from a mass of competing stimuli ivided 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

 

Version 1 Version 2

Examples of structured info



DC metro map

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 shouldnt 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, coffee cup on flap handle

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



Example

Cognitive Processes


Automatic
fast; demand minimal attention; dont 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