advhci introd week1a
TRANSCRIPT
![Page 1: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/1.jpg)
Introduction –
Human Capabilities:
Cognition and Perception
Dr Joan CondellSupported by Ms Anne Hinds
Advanced HCI – COM719M1
![Page 2: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/2.jpg)
Module Information
http://www.infm.ulst.ac.uk/~joan
![Page 3: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/3.jpg)
See Specific Reading List forvarious texts and journals
•UU library•‘My library’ of books•Internet
Recommended Reading
![Page 4: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/4.jpg)
Module Topics
Weeks 1 to 6 Lectures on specific topics:
Human Capabilities
HCI Accessibility
Tasks and Contexts
Participatory Systems Design
Usability Evaluation
Weeks 7 and 8 Individual Project Presentation/Demos
Weeks 9 to 11Group Presentations
Week 12Revision for exam
![Page 5: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/5.jpg)
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 - Financial
product setup ‘URLoans’ – Loans system Credit Agreement System
Module Assessments Assignment 1: Prototype (30%)
![Page 6: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/6.jpg)
Group work: Critical evaluations and comparison of selected individual projects
Group presentation
Presentations run weeks 9, 10 and 11
Report Submission during week 12
Module Assessments Assignment 2: Group Critique Report (20%)
![Page 7: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/7.jpg)
Module Assessments Exam
3 hour Examination 50%
![Page 8: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/8.jpg)
Advanced HCI Module Aims
Study Significant Issues in HCI Theory, experimental psychology, reflection Cognitive theories / psychology Computing / interface design
Collate and analyse materials Reflect and develop critical analysis
Encourage professionalism: verbal / written Individual presentation skills Group work
Develop interactive system Based on practical / theoretical knowledge
![Page 9: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/9.jpg)
Lecture 1 Overview
Human Capabilities; People; Technology
HCI and Cognitive Frameworks Perception Attention / Memory Knowledge / Conceptual Models Learning
‘Seeing isn’t done by the eyes but the brain’
![Page 10: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/10.jpg)
Cognitive Computing and
its applications in HCI
Human Computer InteractionPreece, J. Addison & Wesley
What is HCI?
![Page 11: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/11.jpg)
What is HCI?HUMAN MACHINE
GOALS
functions
actions
CONTEXT
![Page 12: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/12.jpg)
Central Aim and Approach of HCI
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”
Aim: To optimise performance of human and computer together as a system
![Page 13: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/13.jpg)
The Parts of User Interface Development
Development of the user interface
Development of the interaction component
COGNITION
Development of the interface software
e.g. PRINCIPLES
ConstructionalBehavioural
Human - Computer
![Page 14: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/14.jpg)
Usability
• Learnability• Efficiency• Memorability• Errors• Satisfaction
Relationship between user’s goals - required actions –results must be meaningful, not arbitrary
Therefore VISIBLE or TRANSPARENT
![Page 15: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/15.jpg)
Visibility (Norman, 1988, 1992)
UserGoals
UserActions
ResultsInterfaceComponents(controls)
FunctionsOf thesystem
Feedback
What does the system do, NOT how does it do it
![Page 16: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/16.jpg)
Affordance (Norman, 1988, 1992)
Normans defines affordance as
“….. 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 – what a person thinks an object can do
Door Piece of paper Water tap Button
![Page 17: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/17.jpg)
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 rejectionNearly half of entire software development effort relates to the user interface.
(Myers and Rosson, 1992)
![Page 18: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/18.jpg)
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
![Page 19: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/19.jpg)
Model Human Processor
Perception (Visual) Knowledge Attention Language etc
Model Human Processor
![Page 20: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/20.jpg)
The Model Human Processor
Brain viewed as three interacting subsystems
(each with memory store and processor)
Perceptual system (storage of signals from senses e.g. images, sounds; brief time memory = sensory register)
Cognitive system (‘think’, analyse, 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, 1983)
![Page 21: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/21.jpg)
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
![Page 22: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/22.jpg)
‘Perceptual organisation’
Understanding of how we put together the basic features
(edges, colours, motion, depth etc.)
to see a coherent organised world of things/surfaces.
![Page 23: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/23.jpg)
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.e. user-centred
Active process
![Page 24: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/24.jpg)
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
![Page 25: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/25.jpg)
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
Human system cannot perceive Bullet being shot / Plant growing / Infrared light
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
![Page 26: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/26.jpg)
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.
![Page 27: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/27.jpg)
Vision application: Pedestrian finding
many pedestrians look like lollipops (hands at sides, torso wider than legs) most of the time
classify image regions, searching over scales
But what are features?
MAKE computer perceive pedestrians as lollipops?
![Page 28: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/28.jpg)
Vision application: Pedestrian finding Result: Pedestrians found, search over scales
Figure from, “A general framework for object detection,” by C. Papageorgiou, M. Oren and T. Poggio, Proc. Int. Conf. Computer Vision, 1998, copyright 1998, IEEE
![Page 29: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/29.jpg)
Figure from, “A general framework for object detection,” by C. Papageorgiou, M. Oren and T. Poggio, Proc. Int. Conf. Computer Vision, 1998, copyright 1998, IEEE
![Page 30: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/30.jpg)
Perception = ‘The way we see’:Constructivist vs. 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, enhancing, distorting and discarding info / retinal images.
• Effect = constant view of world• (Gregory, 1970; Marr, 1982; Easterby, 1970)
![Page 31: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/31.jpg)
• 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, similarity, closure, continuation etc)
• Background-ground discrimination grouping can be seen in terms of allocating some elements
to a figure, some to ground (Muller-Lyer etc)
Constructivist – Context and Gestalt Psychology
![Page 32: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/32.jpg)
Construction! What does this scene contain?
Extract shapes/objects (early); recognise (late)Process visually (early); recognise patterns (late)
Visual Perception – EARLY and LATE phasesPicture: http://whalen.psych.udel.edu/cognition/perception.html
![Page 33: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/33.jpg)
Example of visual perception – ‘ink blobs’ or ‘dog in park’???
Picture: http://whalen.psych.udel.edu/cognition/perception.html
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
![Page 34: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/34.jpg)
‘The way we see’:Constructivist vs. Ecologist (2)
• Process of picking up / exploring / detecting info from environment…..
• …not requiring processes of construction or elaboration (Gibson, 1979)
• Concerned with how we deal with continuous events over time; What we need to know to carry out our activities and how this might be known.
• Central concept = Affordance (Gibson, 1979; Gaver, 1991; Norman, 1988)
![Page 35: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/35.jpg)
The Eye as an Optical Instrument
Aspects of Human Vision
a - Sharp vision
b - Unsharp vision
c - Only movement seen
Visual FieldEye contains different
kinds of receptors: Rods and Cones in Retina
Most of colour sensitive cones found in FOVEA CENTRALIS (2mm dia.)
FC in centre of retinaReceives light from objects Puts objects in focus
![Page 36: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/36.jpg)
three layers: fibrous tunic,
vascular tunic, retina.
divided into 2 chambers
contains iris, pupil, and lens
muscles control motions.
Human Eye: Structure
Picture: http://guide.discoveronline.org/discover/guide01/1sec1a.htmPicture: http://www.medicinenet.com/black_eye/page4.htm
The structure of eyes is highly related to their function
![Page 37: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/37.jpg)
Human Eye: Iris, Lens, 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
![Page 38: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/38.jpg)
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
![Page 39: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/39.jpg)
Human Eye: Muscle
Picture from Perception PPT by McGraw-Hill
Involuntary movements prevent our eyes from standing still
This is important for vision, because stable retinal images disappear Muscles in eye
![Page 40: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/40.jpg)
Where should eyes be placed ? Frontal eyes: Depth perception. Lateral eyes: See more of world at
once
Picture from Perception PPT by McGraw-Hill
![Page 41: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/41.jpg)
Sensitivity to Colour Combinations (3 Cones sensitivity to colour/light of equal intensity)
Violet Blue Green Yellow Orange Red
Sensitivity
Most sensitive
Least sensitive
Sensitive
Sensitivity
![Page 42: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/42.jpg)
Human Perception of Colour
Eye most sensitive to green/yellow; least sensitive to blueComplex perceptual system
Cone response e.g.17:44:39 is blue, 61:39:0 is yellow, 50:45:5 is white
Colour impairment: defective colour vision 8% males, 0.4% females Red/green blindness is most common
HCI designer must take this into account Use other symbolic forms of coding - Shape, size, texture,
symbols E.g. Traffic lights use position/brightness as well as colour!
![Page 43: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/43.jpg)
‘Chromatic Aberration’ Phenomenon
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
Avoid extreme colour pairs red (most bent) and blue (least bent) green and magenta
Desaturate (i.e. add white) to reduce effect Use pastel or darker shades for large areas
RGB
![Page 44: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/44.jpg)
Colour Pairs – avoid extremes
Extreme Colour Pairs
Saturated Colour Pairs
ADD WHITE
![Page 45: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/45.jpg)
Causes of colour and their appearance
Sensation of color is caused by brain. Some ways to get this sensation include pressure on eyelids,
dreaming, hallucinations, etc. Main way to get it is response of visual system to presence/absence of light at various wavelengths.
Color appearance is strongly affected by (at least): other nearby colors, adaptation to previous views “state of mind”
Several demonstrations follow.
![Page 46: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/46.jpg)
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
![Page 47: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/47.jpg)
STROOP EFFECT(Colour naming is affected by more than just physics)
Read ALOUD and FAST1) colour names of XXXs2) colour names of RHS (word/colour same)3) colours of RHS4) words of centre (word/colour differ)5) colours of centre
![Page 48: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/48.jpg)
Colour Appearance and Surrounding Colours (1)
Which is most appealing?
Why?
Are grey figures same colour?
![Page 49: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/49.jpg)
Colour Appearance and Surrounding Colours (2)
Grey figures ARE same
Contrasting backgrounds affect perception of colours
Need more than pure physics
![Page 50: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/50.jpg)
Adaptation phenomena:Changing operating point of receptors
Response of color system depends on spatial contrast what it has seen before i.e. adaptation
Common example: walk inside from a bright day everything looks dark for a bit then takes its conventional brightness.
![Page 51: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/51.jpg)
![Page 52: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/52.jpg)
![Page 53: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/53.jpg)
Guidelines for Use of Colour in Applications:Visual Density & Balance
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
People perceive patterns/structures in displaysSO present info accordingly to increase readability/ease of search
![Page 54: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/54.jpg)
Text Density
On paper, density of 70-80% common 70% of page covered in text Readable but on computer screen would be difficult
On screen, 15-20% recommended
On its own not sufficient measure of readability Way text is structured also very important (e.g.
search info) E.g. phone directory in tabular form to make easier
to search
![Page 55: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/55.jpg)
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
![Page 56: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/56.jpg)
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
![Page 57: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/57.jpg)
Visual and Other Coding
Differing Intensity (brightness, lightness) Shape e.g. box frame (recognise/pickout) Colour and/or shadingshading Underlining (not recommended in printed text –
can slow reading) Character size and font Movement e.g. ‘micons’ Sound and/or synthesized speech
![Page 58: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/58.jpg)
Example of Screen Design – Visualisation / Aid to Accessibility
(Source: http://www.cs.umd.edu/projects/hcil/chi96/paper/cps1txt.htm)
![Page 59: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/59.jpg)
(Source: http://www.cs.umd.edu/projects/)
Improved Design – What features aid readability /
understanding?
![Page 60: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/60.jpg)
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, adaptation to previous views “state of mind”
![Page 61: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/61.jpg)
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. search for ‘targets’ - characters,
words etc Memory better Provides (useful) redundant coding 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.g. Inappropriate colours/’colour pollution’
![Page 62: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/62.jpg)
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.e. same type = same colour
Used to Categorise e.g. Actual and projected figures More or less recent data Caption or data field User or computer provided data Status - correct or error, normal or urgent
![Page 63: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/63.jpg)
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.g. warnings (bright to
emphasise) Common coding scheme
Green - normal or OK Orange - caution Red – problem/danger/hot
No universal/multicultural interpretations of colour in chemical plant, red colour might just mean hot in West black = mourning, in China white = mourning
![Page 64: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/64.jpg)
Emphasise Bright colours emphasise, 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. 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 yellow on blue pale at edges red on green or yellow on blue shadows
Red
YellowRed
Guidelines for Use of Colour - Screens Containing Mainly Text (2)
![Page 65: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/65.jpg)
‘Optimal Colour Combinations’ chart Which colours can be used effectively against which background colours
![Page 66: AdvHCI Introd week1a](https://reader033.vdocuments.site/reader033/viewer/2022061105/543f4613b1af9f560a8b4663/html5/thumbnails/66.jpg)
Lecture 1: Review
HCI and Cognitive Frameworks Perception Attention / Memory Knowledge / Conceptual Models Learning
NOW: Lab for practical work