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 and Balance
4
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 SHAPES.
  ALL WORDS BECOME RECTANGULAR.
• Follow all rules for grammar and punctuation
• Long line lengths can be difficult to read
• Abbreviations must be familiar to users

5
Visual and Other Coding

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

6
Visualisation Aid to Accessibility
7
(No Transcript)
8
(No Transcript)
9
Aspects of Human Vision
Visual Field
a - Sharp vision b - Unsharp vision c - Only
movement seen
Distribution of Rods and Cones in the Human Retina
10
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
• Online Ishihara Tests http//www.kcl.ac.uk/teares/
  gktvc/vc/lt/colourblindness/cblind.htm

11
Sensitivity to Light of Equal Intensity for the 3
Types of Cone
Sensitivity
Violet Blue Green Yellow
Orange Red
12
Chromatic Aberration
B G R
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

13
Background Colour and Apparent Brightness and Size

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

14
Colour Appearance and Surrounding Colours
15
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

16
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
• Can easily be misused
• Limited advantage over monochrome display
• Can provide (useful) redundant coding
• E.g. Standard background colour for main menu

17
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

18
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
• Bright colours emphasise data
• Less bright ones de-emphasise data
  

19
Guidelines for Use of Colour (Contd)

• 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
• 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
• red on blue vibrate
• yellow on blue pale at junctions
• red on green or yellow on blue shadows

Red
Yellow
Red
20
(No Transcript)
21
Lecture Review

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