1. Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward

2. Good design Major factor for commercial success Mastery of a number of design principles

3. Design principles Short term memory - 7 + 2 ‘chunks’ of information Aesthetics Use of the fundamental building blocks language ‘rules’ of human-computer interface design

4. Responses to poor design Confusion Frustration Panic Boredom Abandonment of system Incomplete use of system Indirect use of system Task modification Compensatory action Reprogramming

5. Some basic rules of thumb Don’t use one pixel horizontal lines for borders Never design objects with handles of one or two pixels in dimension Hotspots should be clear and well defined Icons should be understood Don’t use too many lines Every object should have a purpose

6. Four fundamental building blocks Graphics elements Colour Text Layout

7. Use of colour Contents Benefits and problems The colour wheel Colour hints Colour combinations

8. Benefits and Problems with using colour Benefits –to draw attention –to add realism –invisual discrimination –to make aesthetically pleasing –increase meaningfulness Problems –distracts the user –adds confusion to the overall scene –reduces the effectiveness of the application

9. The colour wheel

10. Colour hints Increase range of colours by Alternating colour at the pixel level Shadows should not be black Dark colours look heavy, Light ones look light Warm colours appear closer Blue is a good colour for large backgrounds Design in monochrome Divide areas with colour Be consistent

11. Colour combinations Absolute discrimination Comparative discrimination To emphasise separation To convey similarity To indicate action is needed General use without conveying meaning

12. Colour combinations Absolute discrimination Comparative discrimination To emphasise separation To convey similarity To indicate action is needed General use without conveying meaning

13. Colour combinations Absolute discrimination Comparative discrimination To emphasise separation To convey similarity To indicate action is needed General use without conveying meaning

14. Screen layout

15. Functional areas

16. Visual discrimination Space Dividers

17. Other factors

18. Text Contents Point size Styles Text length Uppercase or lowercase text Paragraph justification Textual discrimination Text colour

19. Point size This is 12 point This is 14 point This is 18 point This is 20 point This is 24 point This is 28 point This is 32 point This is 36 point This is 44 point

20. Styles This is Ariel This is Bookman This is Courier This is Garamond This is Perpetua This is Rockwell This is Times This is Ariel This is Bookman This is Courier This is Garamond This is Perpetua This is Rockwell This is Times

21. UPPERCASE or lowercase text SHOUT! whisper

22. Paragraph justification This is a paragraph that has been justified to the left. This shows that the lines are jagged on the right. This text is easier to read fast. This is a paragraph that has been justified to the right. This shows that the lines are jagged on the left. Text like this is more difficult to read fast.

23. Justification continued Text can also be centred on a page. But you would not use this when writing a paragraph. Centring the text on your page makes it even slower than justifying to the right, but it is good for headings. Take care, when using justification indiscriminately like this side of the page. Justification can produce large gaps between the words, especially when using short lines, large text and long words.

24. Textual discrimination Bullets Numbers Indentation Borders Whitespace Headings Spacing Columns

25. Text colour Combinations of foreground and background colour –Black with cyan, magenta or white –Blue with white –Green with black, blue or cyan –Cyan with black –White with black –Yellow with black, blue, cyan, or magenta