1. 1 Human-Computer Interaction Screen Layout and Colour

2. 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 Designing for ‘Print’ is not the same as designing for ‘Screen’

4. 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. 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. 6 Visualisation: Aid to Accessibility

7. 7

8. 8

9. 9 Aspects of Human Vision a - Sharp vision b - Unsharp vision c - Only movement seen Visual Field Distribution of Rods and Cones in the Human Retina

10. 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. 17:44:39 is blue, 61:39:0 is yellow, 50:45:5 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. 11 Sensitivity to Light of Equal Intensity for the 3 Types of Cone Violet Blue Green Yellow Orange Red Sensitivity

12. 12 Chromatic Aberration 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 B G R RGBRGB

13. 13 Background Colour and Apparent Brightness and Size Colours look darker and smaller against white Colours look brighter and larger against black

14. 14 Colour Appearance and Surrounding Colours

15. 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. 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. 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. 18 Guidelines for Use of Colour on Screens Containing Mainly Textual Information Don’t 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 user’s 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. 19 Guidelines for Use of Colour (Cont’d) 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

20. 20

21. 21 Lecture Review Visual density and balance Text legibility Visual coding Visualisation Colour Human vision Use and value of colour Guidelines