HumanComputer Interaction

1
Human-Computer Interaction

• Screen Layout and Colour

2
Lecture Overview

• Visual density and balance
• Text legibility
• Visual coding
• Visualisation
• Colour
• Human vision
• Use and value of colour
• Guidelines

3
Visual Density Balance

• Measure of amount of White Space in relation to
  amount of text
• Good Example - http//www.netscalibur.co.uk/

4
Text Density

• On paper, density of 70-80 common
• On screen, 15-20 recommended

5
Text Legibility

• Choice of UPPER and /or lower case
• Longer text passages are easier to read when
  presented using standard capitalization rules
  rather than using all capital letters
• READING IN ALL CAPITAL LETTERS CAN TAKE LONGER
  BECAUSE WORDS LOSE THEIR CHARACTERISTIC SHAPE -
  ALL WORDS BECOME RECTANGULAR
• Follow all rules for grammar and punctuation
• Some font styles might look decorative but they
  are not necessarily legible
• If yu mst use abbrev mke sre th usrs r famlr wth
  thm
• Long line lengths can be difficult to read

6
Visual and Other Coding

• Intensity (brightness, lightness)
• Shape e.g. box frame
• Colour and/or shading
• Underlining
• Blinking/animation
• Reverse video
• Character size and font
• Movement e.g. micons
• Sound and/or synthesized speech

7
Visualisation Aid to Accessibility(Source
http//www.cs.umd.edu/projects/hcil/chi96/paper/cp
s1txt.htm)
8
(Source http//www.cs.umd.edu/projects/)
9
(Source http//www.cs.umd.edu/projects/)
10
Aspects of Human Vision
FOVEA CENTRALIS
Visual Field
a - Sharp vision b - Unsharp vision c - Only
movement seen
Distribution of Rods and Cones in the Human Retina
11
Sensitivity to Light of Equal Intensity for the 3
Types of Cone
Sensitivity
Most sensitive
Least sensitive
Violet Blue Green Yellow
Orange Red
12
Human Perception of Colour

• Fovea centralis
• Very detailed colour vision - 1 degree of visual
  field
• Colour sensitivity of 3 types of cone
• A - mainly red, B - mainly green, C - mainly
  blue
• Eye most sensitive to green/yellow
• Eye least sensitive to blue
• Complex perceptual system
• Cone response e.g.
• 174439 is blue, 61390 is yellow, 50455 is
  white
• Defective colour vision
• 8 males, 0.4 females
• Red/green blindness is most common

13
Chromatic Aberration
RGB

• Avoid extreme colour pairs
• E.g. red and blue
• green and magenta
• Desaturating (i.e. adding white) reduces
  chromatic aberration effect
• Prefer pastel or darker shades for large areas

14
Colour Pairs
Extreme Colour Pairs
Saturated Colour Pairs
15
Background Colour and Apparent Brightness and Size

• Colours look darker and smaller against white
• Colours look brighter and larger against black

16
Colour Appearance and Surrounding Colours
17
Colour Attracts the Eye

• Knowledge of HCI
• Some practical analysis and design skills
• Practical implementation of GUIs
• Enable you to assess how HCI may be incorporated
  into software lifecycle
• Personal transferable skill
• Presentation using Powerpoint

18
Use of Colour on Computer Screens

• Falling costs
• Aesthetic appeal
• Can improve human efficiency
• E.g. searching for targets, such as characters,
  words or graphical shapes
• Easier to find and distinguish
• Memory better for colour
• Can provide (useful) redundant coding
• E.g. Standard background colour for main
• Limited advantage over monochrome display
• Can easily be misused

19
Value of Colour in (Mainly) Text Screens

• Search
• Screen segmentation
• Relates separated fields
• 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

20
Guidelines for Use of Colour on Screens
Containing Mainly Textual Information

• Dont use too many colours
• No more than 4 or 5 colours at one time (on an
  uncluttered, highly structured display)
• Use colour coding to support users task
• Identify similar instances
• Exceptional instances e.g. warnings
• Common coding scheme
• Green - normal or OK
• Orange - caution
• Red - problem
• But no universal interpretations of colour
• E.g. in chemical plant, red colour might just
  mean hot

21
Guidelines for Use of Colour (Contd)

• Bright colours emphasise data
• Less bright ones de-emphasise data
• Colour coding scheme must be relevant and known
  to user
• Enables selective attention
• User will notice differences and similarities of
  colour, regardless of whether they have
  task-related meaning.
• Irrelevant colour increases search time
• Colour refuses to be irrelevant
• red on blue vibrate
• yellow on blue pale at junctions
• red on green or yellow on blue shadows

Red
Yellow
Red
22
Guidelines for Use of Colour (Contd)

• Use colour coding in a consistent way
• Give the user control of the colour coding
• Design for monochrome displays
• Add colour later to enhance
• Avoid some colour pairings

23
(No Transcript)
24
Lecture Review

• Visual density and balance
• Text legibility
• Visual coding
• Visualisation
• Colour
• Human vision
• Use and value of colour
• Guidelines