You are on page 1of 66

Advanced HCI

Introduction Human Capabilities:


Cognition and Perception Dr Joan Condell
Supported by Ms Anne Hinds

Module Information

Recommended Reading
See Specific Reading List for various texts and journals UU library My library of books Internet

Module Topics Weeks 1 to 6 Lectures on specific topics:      Weeks 7 and 8 Individual Project Presentation/Demos Human Capabilities HCI Accessibility Tasks and Contexts Participatory Systems Design Usability Evaluation Weeks 9 to 11 Group Presentations Week 12 Revision for exam .

Financial product setup URLoans Loans system Credit Agreement System .Module Assessments Assignment 1: Prototype (30%)      Individual project: Design and implement a simple interactive system Individual presentation Prototype and Report Submission during week 6 Presentations run weeks 7 and 8 Examples from previous years:      Belfast Shipping Ltd Quoting System Commissions Management: Hotel Bookings Investment Banking .The Client On-Boarding Process .

10 and 11 Report Submission during week 12    .Module Assessments Assignment 2: Group Critique Report (20%)  Group work: Critical evaluations and comparison of selected individual projects Group presentation Presentations run weeks 9.

Module Assessments Exam 3 hour Examination  50% .

Advanced HCI Module Aims  Study Significant Issues in HCI    Theory. experimental psychology. reflection Cognitive theories / psychology Computing / interface design Reflect and develop critical analysis Individual presentation skills Group work Based on practical / theoretical knowledge  Collate and analyse materials   Encourage professionalism: verbal / written    Develop interactive system  .

People.Lecture 1 Overview Human Capabilities. Technology      HCI and Cognitive Frameworks Perception Attention / Memory Knowledge / Conceptual Models Learning Seeing isn t done by the eyes but the brain .

What is HCI? Cognitive Computing and its applications in HCI Human Computer Interaction Preece. J. Addison & Wesley .

What is HCI? HUMAN actions CONTEXT MACHINE functions GOALS .

Central Aim and Approach of HCI Aim: To optimise performance of human and computer together as a system Approach: User-Centred Users should not have to adapt to the interface  Interface should be intuitive/natural to learn/use.  Talking to users is not a luxury. it s a necessity .

Computer .g. PRINCIPLES Human .The Parts of User Interface Development Development of the user interface Behavioural Development of the interaction component COGNITION Constructional Development of the interface software e.

required actions ± results must be meaningful. not arbitrary Therefore VISIBLE or TRANSPARENT .Usability ‡ Learnability ‡ Efficiency ‡ Memorability ‡ Errors ‡ Satisfaction Relationship between user¶s goals .

Visibility (Norman. 1992) What does the system do. 1988. NOT how does it do it User Goals Interface Components (controls) User Actions Functions Of the system Results Feedback .

. 1992)  Normans defines affordance as .Affordance (Norman. A technical term that refers to the properties of objects what sorts of operations and manipulations can be done to a particular object Perceived affordance do       what a person thinks an object can Door Piece of paper Water tap Button . 1988.

Poor interface may cause:  Increased mistakes in data entry / system operation Inaccessible functionality User frustration: low productivity and/or under utilisation System failure because of user rejection Nearly half of entire software development effort relates to the user interface. (Myers and Rosson. 1992)    .

Cognitive scientists analyse What the mind does Investigate mechanisms/processes from which mental phenomena emerge and nature/structure of human knowledge Mental phenomena such as        Perceiving learning remembering Controlling actions Thinking .Emotion Planning Imagining Creating Understanding language and others Communicating with others Making decisions Solving problems .

Model Human Processor     Perception (Visual) Knowledge Attention Language etc Model Human Processor  .

sounds.g.The Model Human Processor  Brain viewed as three interacting subsystems (each with memory store and processor)    Perceptual system (storage of signals from senses e. recall from LTM. storage in STM/working memory) Motor system (called on when physical response is required transmit signals to muscles) (Card. Moran and Newell. images. analyse. 1983) . brief time memory = sensory register) Cognitive system ( think .

Perception ± Why do things look the way they do? Perception is translation of physical world into pattern of neural activity that can be used by brain to guide behavior. Perception ±McGraw-Hill .

Perceptual organisation Understanding of how we put together the basic features (edges. . motion. colours.) to see a coherent organised world of things/surfaces. depth etc.

Perception in Computing Fundamental for HCI  Perceive info presented at/through interface  Theories of perception influence interface design  Present info in easily understandable/unambiguous manner i. user-centred  Active process .e.

Why Study Perception ?
Practical reasons: 

Identify/correct environmental hazards; Design devices 

to optimize perceptual performance; for people with perceptual impairments.

Perception and pleasure:  

Visual art/music/gourmet cuisine engage sensory system in ways that we find pleasurable Understanding perception allows us to heighten our sensory experiences.

Perception and intellectual curiosity

Visual Perception:
Perceptual world can be different from real world! Human system is capable of perceiving objects 

brightest of sunlight/darkest of night rapidly moving objects/rapidly decaying events Bullet being shot / Plant growing / Infrared light

Human system cannot perceive 

So we can obtain info from displays which vary in quality, size and other characteristics but not with uniform efficiency across whole spectrum and all speeds

Properties of Vision
People draw distinctions between what is seen

Object recognition  This could mean is this a fish or a bicycle?  It could mean is this George Washington?  It could mean is this poisonous or not?  It could mean is this slippery or not?  It could mean will this support my weight?  Great mystery 

How to build programs that draw useful distinctions based on image properties.

torso wider than legs) most of the time classify image regions. searching over scales But what are features? MAKE computer perceive pedestrians as lollipops?    .Vision application: Pedestrian finding  many pedestrians look like lollipops (hands at sides.

Vision application: Pedestrian finding Result: Pedestrians found. IEEE . M. Poggio. ³A general framework for object detection. Proc. 1998. Papageorgiou. search over scales Figure from. Computer Vision. copyright 1998.´ by C. Conf. Oren and T. Int.

1998. Int. Conf. IEEE . Oren and T. ³A general framework for object detection. Proc. Computer Vision. M. Papageorgiou. Poggio. copyright 1998.´ by C.Figure from.

Easterby. enhancing. Ecologist (1) Intervention of representations/memories View world by constructions from info in environment / previously stored knowledge Don·t see replica/copy of world but model created by transforming. distorting and discarding info / retinal images. 1970. 1970) . Effect = constant view of world (Gregory. 1982.Perception = µThe way we see¶: Constructivist vs. Marr.

similarity. some to ground (Muller-Lyer etc) . continuation etc) Background-ground discrimination  grouping can be seen in terms of allocating some elements to a figure. closure.Constructivist ± Context and Gestalt Psychology Decompose or partition images into separate entities so readily recognizable Perception of objects Our ability to interpret meaning of scene and objects is based on innate laws of organisation (Gestalt: proximity.

Construction! What does this scene contain? Extract shapes/objects (early). recognise (late) Process visually (early).edu/cognition/perception.udel.html Visual Perception ± EARLY and LATE phases . recognise patterns (late) Picture: http://whalen.psych.

html .edu/cognition/perception.udel.Example of visual perception ± µink blobs¶ or µdog in park¶???    Did you ¶see· Dalmatian dog? How long did it take you? Can you now see picture as anything else? Interpretation due to prior knowledge of Dalmatian   Without it we wouldn't be able to make sense of picture  Active Construction of Image = process of making sense of black shapes Picture: http://whalen.psych.

Norman. Central concept = Affordance (Gibson. 1979. Gaver. What we need to know to carry out our activities and how this might be known..µThe way we see¶: Constructivist vs. Ecologist (2) Process of picking up / exploring / detecting info from environment«. 1991. 1979) Concerned with how we deal with continuous events over time. ‡ «not requiring processes of construction or elaboration (Gibson. 1988) .

) FC in centre of retina Receives light from objects Puts objects in focus Eye contains different kinds of receptors: Rods and Cones in Retina Visual Field a .The Eye as an Optical Instrument Aspects of Human Vision Most of colour sensitive cones found in FOVEA CENTRALIS (2mm dia.Only movement seen .Sharp vision b .Unsharp vision c .

org/discover/guide01/1sec1a. and lens muscles control motions. pupil.Human Eye: Structure The structure of eyes is highly related to their function  three layers:  fibrous Picture: http://www.    Picture: http://guide. . retina.htm divided into 2 chambers contains iris. vascular tunic.

Human Eye: Iris. Retina Iris: regulates amount of light received by eye and depth of field Lens: accommodates near and far vision Retina : contains photoreceptors that convert light energy into neural signals . Lens.

Human Eye: Macula (in Retina)  Vision is most acute at macula. located at center of retina When we look directly at an object. its image is centered within macula  .

Human Eye: Muscle  Involuntary movements prevent our eyes from standing still This is important for vision. because stable retinal images disappear Muscles in eye  Picture from Perception PPT by McGraw-Hill .

Where should eyes be placed ?   Frontal eyes: Depth perception. Lateral eyes: See more of world at once Picture from Perception PPT by McGraw-Hill .

Sensitivity to Colour Combinations (3 Cones sensitivity to colour/light of equal intensity) S e n s Sensitivity i t i v i t y Most sensitive Sensitive Least sensitive Violet Blue Green Yellow Orange Red .

0.4% females Red/green blindness is most common Use other symbolic forms of coding .Human Perception of Colour Eye most sensitive to green/yellow. Traffic lights use position/brightness as well as colour! Colour impairment: defective colour vision   HCI designer must take this into account   . 61:39:0 is yellow. symbols E. texture.g. size.g.Shape.17:44:39 is blue. least sensitive to blue Complex perceptual system  Cone response e. 50:45:5 is white 8% males.

Chromatic Aberration Phenomenon RGB  Different colours bent by different amounts when light passes through lens of eye   Difficult for eye to focus on all colours in object at same time Can lead to eye strain red (most bent) and blue (least bent) green and magenta Use pastel or darker shades for large areas  Avoid extreme colour pairs    Desaturate (i. add white) to reduce effect  .e.

Colour Pairs avoid extremes Extreme Colour Pairs ADD WHITE Saturated Colour Pairs .

dreaming.  Some ways to get this sensation include pressure on eyelids. Main way to get it is response of visual system to presence/absence of light at various wavelengths.  adaptation to previous views  state of mind Several demonstrations follow. . Color appearance is strongly affected by (at least):  other nearby colors. hallucinations.Causes of colour and their appearance Sensation of color is caused by brain. etc.

Background Colour and Apparent Brightness and Size Colour selection can effect presentation of info   Colours look brighter and larger against black Colours look darker and smaller against white .

STROOP EFFECT (Colour naming is affected by more than just physics) Read ALOUD and FAST 1) colour names of XXXs 2) colour names of RHS 3) colours of RHS 4) words of centre 5) colours of centre (word/colour same) (word/colour differ) .

Colour Appearance and Surrounding Colours (1) Which is most appealing? Why? Are grey figures same colour? .

Colour Appearance and Surrounding Colours (2) Grey figures ARE same Contrasting backgrounds affect perception of colours Need more than pure physics .

adaptation Common example:    walk inside from a bright day everything looks dark for a bit then takes its conventional brightness.e.Adaptation phenomena: Changing operating point of receptors Response of color system depends on    spatial contrast what it has seen before i. .



Guidelines for Use of Colour in Applications: Visual Density & Balance People perceive patterns/structures in displays SO present info accordingly to increase readability/ease of search    How `tightly packed text is on screen Measure of amount of White Space in relation to amount of text High density = lots of text and little white space  More difficult to read .

Text Density  On paper.g.g. density of 70-80% common   70% of page covered in text Readable but on computer screen would be difficult  On screen. phone directory in tabular form to make easier to search . search info) E. 15-20% recommended On its own not sufficient measure of readability    Way text is structured also very important (e.

Text Legibility (1)  Use standard rules for UPPER and/or lower case  Longer text passages are easier read using standard capitalization rules rather than using all capital letters READING ALL CAPITAL LETTERS CAN TAKE LONGER AS WORDS LOSE CHARACTERISTIC SHAPE WORDS BECOME RECTANGULAR   Improper grammar/punctuation slows reading speed .

Text Legibility (2)  Some font styles might look decorative but they are not necessarily legible   Stick to common fonts Rule: don t use >3 fonts and font sizes per document  If yu mst use abbrev mke sre th usrs r famlr wth thm Keep text lines short   Long line lengths can be difficult to read .

g. lightness) Shape e. micons Sound and/or synthesized speech can    .g.Visual and Other Coding     Differing Intensity (brightness. box frame (recognise/pickout) Colour and/or shading Underlining (not recommended in printed text slow reading) Character size and font Movement e.

cs.htm) .Example of Screen Design Visualisation / Aid to Accessibility (Source: .cs.Improved Design What features aid readability / understanding? (Source: http://www.

 adaptation to previous views  state of mind .Causes of color and their appearance The sensation of color is caused by the brain. Color appearance is strongly affected by (at least):  other nearby colors.

search for targets .g.characters. words etc Memory better Provides (useful) redundant coding e.Colour Attracts Eye:   Old PCs didn t have power/RAM to use colour. Falling costs Colour on computer screens?      Aesthetically pleasing (prefer to Black/White) Improve human efficiency by adding extra coding dimension Easier to find / distinguish e.g. Standard background colour for screens  Limited advantage over monochrome display only add colour to enhance interface should function without it Can be misused e. Inappropriate colours/ colour pollution  .g.

Value of Colour in (Mainly) Text Screens    Help user search/distinguish between items Used to segment screen into related info Relates separate fields of info  i. same type = same colour Actual and projected figures More or less recent data Caption or data field User or computer provided data Status .e.g.      .correct or error. normal or urgent  Used to Categorise e.

caution Red problem/danger/hot in chemical plant. in China white = mourning  No universal/multicultural interpretations of colour   .g.Guidelines for Use of Colour Screens Containing Mainly Text (1)   Don t use too many colours (<4/5) Use colour coding to support user s task (not hinder)  Identify similar instances  Exceptional instances e. warnings (bright to emphasise)  Common coding scheme    Green .normal or OK Orange . red colour might just mean hot in West black = mourning.

Guidelines for Use of Colour Screens Containing Mainly Text (2) Emphasise  Bright colours emphasise. If no meaning then user wastes time trying to work out meaning Colour refuses to be irrelevant     Choose carefully Irrelevant colour increases search time red on blue vibrate Red yellow on blue pale at edges Yellow red on green or yellow on blue shadows Red . Less bright de-emphasise Relevance and Known   Give user control with meaning Colour coding scheme must be relevant and known to user Enables selective attention Differences and similarities   Be consistent User will notice these regardless of whether they have task-related meaning.

Optimal Colour Combinations chart Which colours can be used effectively against which background colours .

Lecture 1: Review      HCI and Cognitive Frameworks Perception Attention / Memory Knowledge / Conceptual Models Learning NOW: Lab for practical work .