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

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

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

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

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

Four fundamental building blocks Graphics elements Colour Text Layout

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

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

The colour wheel

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

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

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

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

Screen layout

Functional areas

Visual discrimination Space Dividers

Other factors

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

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

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

UPPERCASE or lowercase text SHOUT! whisper

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.

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.

Textual discrimination Bullets Numbers Indentation Borders Whitespace Headings Spacing Columns

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