1 screen design lecture 13 date: 23 rd march. 2 overview of lecture design elements in hci font...

1

Screen Design

Lecture 13Date: 23rd March

2

Overview of Lecture

•Design elements in HCI

•Font & colour

•Design of graphic elements

•Arrangement of text and images

•Principles of screen design

•Contrast

•Alignment

•Repetition

•Proximity

3

Design Elements in HCI

•Design elements in HCI

•Font & colour

•Design of graphic elements


Design Elements

Techniques to guide attentionTechniques to guide attentionGuidelines for getting user’s attentionGuidelines for getting user’s attention

Dialog BoxesDialog BoxesPrototypingPrototyping

4

Font & Colour

Font & ColoursFont & Colours

•Upper / Mixed FontsUpper / Mixed Fonts

•Uses of ColourUses of Colour

•Problems with ColourProblems with Colour

•Guidelines for ColourGuidelines for Colour

Design Elements

5

Font & Colour

Upper / Mixed FontsUpper / Mixed Fonts

•Use mixed case for•Text•Messages•Action/menu bar actions•Button descriptions•Screen ID

•Use upper case for•Title•Section headings

Design Elements

6

Font & Colour

Upper / Mixed Fonts (cont.)Upper / Mixed Fonts (cont.)

•Either mixed or upper for•subsection headings

•captions

•data

•completion aids

•function key descriptions

•command field caption

Design Elements

7

Font & Colour

Uses of ColourUses of Colour•Colour can be used for a number of purposes

•Formatting aid•can provide better structure and meaning to a screen•especially useful with large amounts of data and spacing is difficult•differentiation of logical groupings•spatially separated but related fields can be tied together through the use of colour•call attention

Design Elements

8

Font & Colour

Uses of Colour (cont.)Uses of Colour (cont.)•Visual code

•category of data•colour coding scheme permits a user to identify a relevant category quickly•data from different sources•must be relevant and known

•Other uses•realistically portray objects in the world•increases screen appeal

Design Elements

9

Font & Colour

Design Elements

YELLOW ON DARK BLUE WORKS WELL

WHITE ON BLACK OR VISE VERSA WORKS WELL

WHITE ON GREEN WORKS WELL

BLACK ON ORANGE WORKS WELL

LIGHT COLOR ON LIGHT COLOR IS POOR

DARK COLOR ON DARK COLOR IS POOR

RED, GREEN, AND OTHER COLORS CLASH

10

Font & Colour

Problems with ColourProblems with Colour•Colour has an extremely high attentionattention getting capacity

•Users might search for relationships and differences that do not exist•Bewilderment etc. Christmas tree effect

•Varying sensitivity of the eye•All colours are not equal•the eye is more sensitive to colours in the middle of the visual spectrum (yellow and green) (see next slide)•some combinations can strain the eye

•blue - front, red - behind retina

Design Elements

11

Font & Colour

Design Elements

Problems with ColourProblems with Colour• Varying sensitivity of the eye

From: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm

•Brightness determined mainly by R+G

•Hard to deal with blue edges & blue shapes

•Blue not suitable for text or small objects

12

Font & Colour

Problems with ColourProblems with Colour•Colour viewing deficiencies

•8% males, .4% females are colour-blind•red - green most common•red - orange confused with green - yellow

•Cross-disciplinary/cultural differences•colours have different meanings across situations/cultures•blue

•Financial managers - corporate qualities or reliability•Health care professionals - death•Nuclear reactor monitors - coolness or water

Design Elements

13

Font & Colour

Problems with ColourProblems with Colour

Design Elements

14

Font & ColourGuidelines for ColourGuidelines for Colour

Design Elements

•Use color conservativelyconservatively •LimitLimit the number and amount of colors •Recognize the power power of color to speed or slow tasks •Color coding should supportsupport the task •Color coding should appear with minimalminimal user effort •Color coding should be under user controluser control •Design for monochrome firstmonochrome first •Consider the needs of color-deficient userscolor-deficient users•Color can help in formattingformatting •Be consistentconsistent in color coding •Be alert to common expectationsexpectations about color codes •Be alert to problems with color pairingscolor pairings•Use color changes to indicate status changesstatus changes •Use color in graphic displays for greater information densityinformation density

15

Design of Graphic Elements

Primary Graphic Elements in a GUI

•Windows

•Menus

•Icons

Design Elements

Techniques to guide perceptionTechniques to guide perceptionTechniques to guide attentionTechniques to guide attention

WIMPsWIMPs

Techniques to guide memoryTechniques to guide memoryWIMPsWIMPs

Direct manipulation: menusDirect manipulation: menus

PrototypingPrototyping

WIMPsWIMPsPrototypingPrototyping

Techniques to guide perceptionTechniques to guide perceptionTechniques to guide memoryTechniques to guide memory

AffordanceAffordance

16

Design of Graphic ElementsWindows Windows •Users need to consult multiple sources rapidly

•Must minimally disrupt user's task

•With large displays, eye-head movement and visibility are problems. With small displays, windows too small to be effective

•Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions:

•opening, closing, moving, changing size

•time spent manipulating windows instead of on task

•Can apply direct-manipulation strategy to windows

Design Elements

17


Windows (cont.)Windows (cont.)•Coordinating multiple windows

•Coordinate windowsCoordinate windows - windows appear, change contents, and close as a direct result of user actions in the task domain

•Such sequences of actions can be established by designers, or by users with end-user programming tools

•Important co-ordinations:•Synchronized scrolling•Hierarchical browsing•Opening/closing of dependent windows•Saving/opening of window state

Design Elements

18


MenusMenus •Constraints in menu layout

•screen width and length •display rate •character set •highlighting techniques

Design Elements

19


MenusMenus When designing menus some questions to be asked are:

•How long is the menu to be?•In what order will the items appear?•How is the menu to be structured, e.g. when to use sub-menus, dialog boxes?•What categories will be used to group menu items?•How will division into groups be denoted, e.g. different colors, dividing lines?•How many menus will there be?•What terminology to use? (results of requirements activities will indicate this)•How will any physical constraints be accommodated, e.g. mobile phone?

Design Elements

20


IconsIcons •Good icon design is difficult•Meaning of icons is cultural and context sensitive

•Some tips: •always draw on existing traditions or standards

•concrete objects or things are easier to represent than actions

•From clip art, what do these mean to you?

Design Elements

21


Design Elements

22

Arrangement of Images & Text

•Topics such as the use of words, text, symbols, messages, commands and images all contribute to the overall efficiency of a screen design

•Screen information should be supplied in a directly usable form. No referring to documentation should be required

•The eye should be guided horizontally or vertically through the screen

•Features should aid in screen component identification so that attention may be quickly and accurately focused


23


Information display Information display •Special symbols•Field captions / Data fields•Words•Messages•Sentences

Image displayImage display


24

Information Display

Special SymbolsSpecial Symbols

•Special symbols (e.g. *, <, ^) should be considered to emphasise or call attention to elements on a screen

•Symbols should be separated from words by one space


25

Field captions / Data fieldsField captions / Data fields•Identify fields with captions

•all screen data fields should be identified by captions

•however, if some data fields can be recognised by the data itself, captions may be eliminated to clean up the display (e.g. address, dates etc.)


Category: Technical ReviewTechnical Review

Information Display

26

Field captions / Data fields (cont.)Field captions / Data fields (cont.)•Differentiate field captions from data

•captions and data should be visually distinguishable in some manner•Use methods such as contrasting display features, colons and consistent positional relationships


Sex FemaleRelation Daughter

Sex: FemaleRelation: Daughter

Information Display

27

Information Display

Field captions / Data fields (cont.)Field captions / Data fields (cont.)•Position captions in consistent positions

•The best way to relate a caption to its data field is to place the caption either above or to the left of the data•for single data fields, place the caption to the left of the data and separate the two with a colon•for multiple data fields, place the caption above the data

Staff ID234

Staff ID: 234Staff ID: 234

434231

Staff ID234434231


28

Information Display

Field captions / Data fields (cont.)Field captions / Data fields (cont.) •Justify captions/data consistently and properly

•there are a number of potential approaches here, but it is generally agreed that the following are the more desirable

Left-justifying captions, left-justified data fields, colon associated with caption

Building: __________Floor: __________Room: __________

Right-justifying captions, left- justifying data fields, colon associated with caption

Building: __________ Floor: __________ Room: __________


29

Field captions / Data fields (cont.)Field captions / Data fields (cont.) •Use distinct and meaningful captions

•Captions that are similar often repeat the same word or words over and over again, causing confusion•These words should be removed by incorporating them into headings, subheadings or group identifiers


Information Display

30

SECURITY PASSWORDPC: ____________VM: ____________Local Area Network: ____________

PRINTERSPC Port: ____________VM Address: ____________

SECURITY CONTROLPC Password: ____________VM Password: ____________Local Area Network Password: ____________

PRINTERSPC Printer Port: ____________VM Printer Address: ____________

31

WordsWords•Words displayed on screens should be easily comprehended, with minimum ambiguity and confusion

•Some ways to achieve this are as follows•Do not use jargon

•may be words or expressions that are unique to the computer profession e.g. filespec, append, etc.•may be words with different meaning outside of data processing e.g. boot, cut, etc.•may be made-up words to describe special functions e.g. ungroup, dearchive


Information Display

32

Words (cont)Words (cont)•Use standard alphabetic characters

•never use restricted alphabetic sets

•use those that are familiar to screen users•exceptions are common symbols such as %, $, £,

•Use short familiar words•short words are best, but if a longer word is more familiar, use that

•Use complete words•"will not” is better than “won’t” etc.•avoid the use of suffixes and prefixes like “un-” or “-ness”


Information Display

33

Words (cont)Words (cont)•Use positive terms

•it is generally easier to understand positive, affirmative information than the same information expressed in a negative way•avoid prefixes such as ‘ir-’, ‘dis-’, ‘in-’ and ‘un-’

•Use simple action words•substitute noun strings with simple action words•e.g. substitute PROJECT STATUS LISTING with LIST PROJECT STATUS


Information Display

34

Words (cont)Words (cont)•Use the ‘more’ dimension when comparing

•it is generally better to use the ‘more’ dimension when making comparisons•so use ‘longer’ instead of ‘shorter’, ‘brighter’ instead of ‘darker’ etc.

•Do not stack words•Text is•more readable•if the entire •statement is •on one•line


Information Display

35

Words (cont)Words (cont)•Try not hyphenate words

•for better readability, never break a word bet-

ween two lines

•Abbreviations, mnemonics and acronyms should not include punctuation

•again, this permits better readability and avoids confusion between the punctuation and data fields. o.k.?


Information Display

36

MessagesMessages•Messages are communications provided on the screen to the user•A message should possess the proper tone and style and be consistent within itself and other messages•Messages fall into two broad categories

•system

•prompting


Information Display

37

Messages (cont.)Messages (cont.)•System messages

•notification/status/informational•alerts user to state of the system when its not immediately obvious•may confirm that nonobvious processing is taking place or incomplete•intermediate feedback when normal feedback is delayed•no user action normally required with these messages, apart from conformation


Information Display

38

Messages (cont)Messages (cont)•System messages (cont.)

•warnings•call attention to a situation that may be undesirable to the user•the user must decide if the situation is a problem and may be asked whether to proceed•e.g. deletion

•action/critical•call attention to conditions that do require user action before the system can proceed•e.g. error messages


Information Display

39

Messages (cont)Messages (cont)•Prompting messages

•these are instructional messages that tell the user how to work with or complete the screen displayed•may be permanently fixed to a screen or may appear as a result of a help request•prompting messages are of most benefit to the novice or causal system user


Information Display

40

SentencesSentencesA message must minimise ambiguity and confusion, allowing easy, correct and fast interpretation

•It must also have the proper tone, threatening, rude or impolite messages can evoke negative responses

•The way a sentence is structured has a large impact on the users response to a message


Information Display

41

SentencesSentences•Use brief, simple sentences

•a message that has to be explained does not communicate•break long sentences into two or more simple sentences if possible

•Provide immediately usable sentences•searching through reference material to translate a message is unacceptable

•Use affirmative statements•easier to understand than negative statements•e.g. ‘complete entry before continuing’ as opposed to ‘do not return to menu before completing entry’


Information Display

42

SentencesSentences•Use active voice

•easier to understand that passive voice•e.g. ‘send message by pressing SEND’ as opposed to ‘the message is sent by pressing SEND’

•Be non-authoritarian•imply the system is awaiting the user’s direction, not that the system is directing the user•e.g. ‘ready for next command’ as opposed to ‘enter next command’


Information Display

43

SentencesSentences•Be non-threatening

•negative tones or threats are not friendly•errors are often the result of a failure to understand, mistakes or trial-and-error behaviour•blaming the user always have a negative effect and will hinder their learning by trial-and-error•avoid words like ‘illegal’, ‘bad’ and ‘fatal’•also avoid the word ‘error’ as it implies a user error•e.g. ‘months must be entered by name’ as opposed to ‘error-numbers are illegal’


Information Display

44

SentencesSentences•Be non-anthropomorphic

•having the computer act like a person should be avoided•an attribution of intelligence will imply a much higher level of computer knowledge than exists•eliminates distinction between computer and user

•Be non-patronising•patronising messages can be embarrassing•user may be offended, so avoid them


Information Display

45

SentencesSentences•Order words chronologically

•if a sentence describes a temporal sequence of events, the order of words should correspond to this sequence•e.g. ‘complete address and page forward’ as opposed to ‘page forward after completing address’

•Avoid humour and punishment•humour is a changeable thing•punishment causes rebellion and resentment


Information Display

46

AVOIDAVOID USEUSE

Abort End, Cancel, Stop

Access Get, Display

Available Ready

Boot Start

Execute Start, Complete

Hit Press

Invalid Not Valid

Key Type, Enter

Kill End, Cancel

Output List, Report, Display

Return Key Enter, Transmit

Terminate End, Exit

47

Image Display

•Image browsing•Work with large images•Overview in one window (context), detail in another (focus)•Field of view box in the overview•Panning in the detail view, changes the field of view box•Matched aspect ratios between field of view box and the detail view


48

• Zoom factors: 5-30• Larger suggests

an intermediate view is needed

• Semantic zooming• Side by side

placement, versus fisheye view

49


•The design of image browsers should be governed by the users’ tasks, which can be classified as follows:

•Image generation

•Open-ended exploration

•Diagnostics

•Navigation

•Monitoring


50

Summary of Lecture

Design elements in HCIDesign elements in HCI

•Font & colour

•Design of graphic elements•Windows

•Menus

•Icons


Summary

51

Terms of Reference

• Norman, D. (1990) The Design of Everyday Things

• Preece, J. et al. (2002) Interaction Design

• Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface

• Benyon, D. et al (2005) Designing Interactive Systems

• Helander, M. et al (1997) Handbook of Human-Computer Interaction

• Alan Dix et al (1993) Human Computer Interaction

References

1 screen design lecture 13 date: 23 rd march. 2 overview of lecture design elements in hci font...

Documents

font colour problems

use of colour

colour guidelines

colour attentioncolour

attention design elements

hci design elements

water design elements

retina design elements