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 - 7 + 2 ‘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

• 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