human computer interaction design and graphics design in computer human interaction by sylvia ward
TRANSCRIPT
![Page 1: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/1.jpg)
Human Computer Interaction
Design and graphics design in computer human interaction
by Sylvia Ward
![Page 2: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/2.jpg)
Good design
• Major factor for commercial success
• Mastery of a number of design principles
![Page 3: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/3.jpg)
Design principles
• Short term memory - 7 + 2 ‘chunks’ of information
• Aesthetics
• Use of the fundamental building blocks
• language
• ‘rules’ of human-computer interface design
![Page 4: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/4.jpg)
Responses to poor design
• Confusion• Frustration• Panic• Boredom• Abandonment of
system • Incomplete use of
system
• Indirect use of system• Task modification• Compensatory action• Reprogramming
![Page 5: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/5.jpg)
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
![Page 6: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/6.jpg)
Four fundamental building blocks
• Graphics elements
• Colour
• Text
• Layout
![Page 7: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/7.jpg)
Use of colour
Contents
• Benefits and problems
• The colour wheel
• Colour hints
• Colour combinations
![Page 8: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/8.jpg)
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
![Page 9: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/9.jpg)
The colour wheel
![Page 10: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/10.jpg)
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
![Page 11: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/11.jpg)
Colour combinations
• Absolute discrimination
• Comparative discrimination
• To emphasise separation
• To convey similarity
• To indicate action is needed
• General use without conveying meaning
![Page 12: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/12.jpg)
Colour combinations
• Absolute discrimination
• Comparative discrimination
• To emphasise separation
• To convey similarity
• To indicate action is needed
• General use without conveying meaning
![Page 13: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/13.jpg)
Colour combinations
• Colour combinations
• Absolute discrimination
• Comparative discrimination
• To emphasise separation
• To convey similarity
• To indicate action is needed
• General use without conveying meaning
![Page 14: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/14.jpg)
Screen layout
![Page 15: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/15.jpg)
Functional areas
![Page 16: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/16.jpg)
Visual discrimination
• Space
• Dividers
![Page 17: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/17.jpg)
Other factors
![Page 18: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/18.jpg)
Text
Contents• Point size• Styles• Text length• Uppercase or
lowercase text• Paragraph justification
• Textual discrimination• Text colour
![Page 19: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/19.jpg)
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
![Page 20: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/20.jpg)
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
![Page 21: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/21.jpg)
UPPERCASE or lowercase text
• SHOUT!
• whisper
![Page 22: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/22.jpg)
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.
![Page 23: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/23.jpg)
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.
![Page 24: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/24.jpg)
Textual discrimination
• Bullets• Numbers• Indentation• Borders• Whitespace
• Headings• Spacing• Columns
![Page 25: Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward](https://reader036.vdocuments.site/reader036/viewer/2022062517/56649e895503460f94b8e782/html5/thumbnails/25.jpg)
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