Human computer interaction
Download
1 / 82

Human-Computer Interaction - PowerPoint PPT Presentation


  • 122 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Human-Computer Interaction' - donald


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Human computer interaction

Human-Computer Interaction

Human perception, attention, memory


Visual perception
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
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 perception1
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
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
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
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
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 and Ground

  • Figure – similar elements

  • Ground – contrasting, dissimilar elements


Figure and ground1
Figure and Ground

  • White horses

  • Black horses?

  • Escher art often plays with figure/ground


Camouflage
Camouflage

  • Figure so similar to ground that it tends to disappear


Similarity
Similarity

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


Similarity1
Similarity

  • Larger circles seen as belonging together


Proximity contiguity
Proximity/Contiguity

  • Things that are closer are seen as belonging together

  • See vertical vs. horizontal lines

  • See two groups of two


Continuity
Continuity

  • Tend to see figures as continuous


Closure
Closure

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


Closure1
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
Symmetry

  • Whole figure is perceived rather than individual parts

  • What do you see?


Ecological approach
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
Graphical Representation at the Interface

  • Use realistic graphics in interface

    • effective

    • too expensive

    • often unnecessary

  • Methods

    • graphical modeling

    • graphical coding


Graphical modeling
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
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 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
Applications of 3D

  • Design of buildings, cars, aircraft

  • virtual reality

  • molecular modeling


Graphical coding
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
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 methods1
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 methods2
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 methods3
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 methods4
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
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
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
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
Guidelines for using color

  • to distinguish layers

  • to make items of interest stand out

  • use dark or dim backgrounds


Color and text
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
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
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
Good visual representations:

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


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

  • Recognition v. recall = low memory load

  • International symbols

  • Compact

  • Support direct manipulation


Icons cons
Icons: Cons

  • Arbitrary icons not intuitive

  • Designing good icons is an art

  • Limited number can be recalled

  • Context dependent


Meaning of icons
Meaning of icons

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


Design principles icons
Design principles: icons

  • Appropriate for context of use

  • Appropriate for task


Iconic representations
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 representations1
Iconic representations

  • Concrete icons more easily interpreted than abstract ones

  • Thus: object icons easier than action icons


Evaluating 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 add l considerations
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


Icon screen design issues
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,


Icons example 1
Icons: example 1

  • packing crate icons


Icons example2
Icons: example2

  • Desktop icons


Representational forms
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
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
Underlying concept

  • Concrete objects easiest to represent

  • warnings, operations more difficult


Combination
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
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
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
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
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
“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
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
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)




Techniques for guiding attention
Techniques for guiding attention

  • Spatial and temporal cues

  • color

  • alerting -- flashing, reverse video, auditory warnings…

  • windowing


Note that
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
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
Cognitive Aids

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



Cognitive processes
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
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
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 decisions1
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
Unix commands

  • Cat

  • grep

  • lint

  • mv

  • pr

  • lpr


Paper of interest
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


ad