Interface Design Workshop Shad Valley Waterloo, 2003 (Day 2 of 4)

1. Interface Design Workshop Shad Valley Waterloo, 2003 (Day 2 of 4) Presenter: Danny Ho Advanced Interface Design LabUniversity of Waterloo

2. Today’s Topics • Cognitive Ergonomics • Salience • Alarms • Memory & Attention • Display Representations • Information Representation (decomposition) • Forms of Reference (propositional, iconic, analogical) • Analog vs. digital

3. Cognitive Ergonomics SOME BASIC DEFINITIONS Psychology = the study of human behaviour Cognitive Psychology = the study of cognitive processes Engineering Psychology = Investigates (i.e. through research), the limits and capabilities of (human) information processing in the context of work and systems design

4. Cognitive Ergonomics (cont’d) Cognitive Ergonomics - "Neck-up" Ergonomics = The application of principles developed through engineering psychology research to the design and evaluation of cognitive tasks and systems development Physical Ergonomics -- "Neck-down" Ergonomics = The application of principles developed through kinesiology research to the design and evaluation of physical tasks Human Performance = For the purposes of this course refers to the performance on cognitive-based tasks (In reality almost all tasks have cognitive and physical components) Psychomotor Behaviour = The study of muscular activity resulting from mental processes

5. Brain vs. Mind WHERE DOES INFORMATION PROCESSING OCCUR? Mind = The capacity for thought, where thought is the integrative activity of the brain (mind is the electrical-chemical activity of the brain which produces conscious or higher level thought). Brain = The part of the central nervous system enclosed in the cranium of man and other vertebrates, consisting of a soft, convoluted mass of gray and white matter and serving to control and co-ordinate the mental and physical actions of the body.

6. Salience • The degree to which a visual form stands out in relation to the other visible visual forms • Salience is relational • Each new form added changes the salience of all others

7. Salience example 1

8. Salience example 2

9. Salience • Effective use of salience is about controlling what people see • Perceptual Segmentation: what people see as a “unit” • Salience: what “stands out” over other things in the display • Foreground, background, alarms

10. Salience • Perception is based on noting a difference • Difference from a background, or from what was there before • Salience is relative - adding another piece of information to the screen changes the salience of all the other pieces of information

11. Salience • Is a function of • movement • size • intensity • hue • saturation

12. General Principles • Movement more salient than things that don’t move • large and dull is not salient (background) • large and bright is extremely salient (critical things) • very bright colours (yellow) don’t have to be large to be noticeable

13. Approach • Categorise objects as background or foreground • Prioritise • Foreground should be reserved for changing and dynamic information • Start with low salient colours (like grey) and build up, layering

14. Design Errors with Salience • Background layers that dominate foreground • Fancy bright 3D graphics of things that never change • Over use of colour to separate categories • Under use of grey, overuse of colour, hues • A static item is only informative once

15. Perceptual Segmentation • Can allow large amounts of data to be processed easily • People use relationships and organisation to process information into meaningful chunks • Designer must group and organise the information

16. Reducing by Adding • Organising often requires adding information to a screen x x x x x x x x x x x x x x x x x x x x x x x x vs.

17. Emergent Features

18. Old fashioned HCI • Argues that you should keep things simple • use only 7 colours, etc. • Current approach is for more complex but coherent views

19. Alarms • People tend to concentrate on 1 task at a time • Alarms are for alerting • Too many alarms and people will ignore (think car alarms!) • annoying and operators will turn off • Balance between alerting and annoying

20. Design Approaches • Visual alarming • colour - yellow • salience - brightness, size • flashing - movement • Auditory alarms • tones • buzzers

21. Alarms should... • Be meaningful • indicate the degree of the problem by varying its alerting characteristics • allow the operator to figure out the problem • if multiple alarms, only critical alarms should be presented (prioritisation)

22. Examples of Alarms/Salience • Stove Display • Different foods cook for different times, design a display that best shows food preparation, heating, and well-doneness • Coffee Maker • Best coffee is brewed at 85 degrees, +/- 10 degrees, and for maximum 8 min. Design a display that provides suitable feedback to the user. • Breadmaker • Bread will crisp at 500 deg, be underbaked at 300 deg, and best duration for baking is 50 min. Design a display that warns of overbaked bread. • Croissant Oven • Croissants are picky. At 350 deg for 5 min/100 grams of cookie mix, design a display that helps set the best cookie baking time