PRINCIPLES AND GUIDELINES
The designer must decide:
• What to put on the screen.
• Where to put things on the screen.
• How to put things on the screen.
1. General Layout
2. Text
3. Numbers
4. Coding techniques
5. Color
1. General Layout
• Include only information essential to decision making.
• Include all information essential to decision making.
• Start in the upper-left corner.
• Design formatting standards and follow them consistently in all
screens within a system.
• Group items logically.
• Provide symmetry and balance through the use of white space.
• Avoid heavy use of all-uppercase letters.
• Distinguish Captions and Fields.
Name : John F.Kennedy
2. Text
· Three kinds of text:
1. Messages
2. Instructional prompts
3. Instructions.
Messages
NO
|
Bad Messages
|
Good Messages
|
1
|
The processing of the text editor
yielded 23 pages of output.
|
Output 23 pages.
|
2
|
Error in Dress Size field.
|
Error : Dress size range is 4 to 16.
|
3
|
Cannot exit before saving file.
|
Save file before exiting.
|
4
|
Bad / Illegal / Invalid File name.
|
Max file name : 8 char.
|
5
|
Syntax Error 210.
|
Unmatched left parenthesis in line 210.
|
6
|
Enter Command.
|
Ready for command.
|
Instructional prompts
No
|
Bad Instructional Prompts
|
Good Instructional Prompts
|
1
|
Position cursor and press return.
|
Position cursor
Press return to accept.
|
2
|
SIZE : ...
|
SIZE : … (4 to 16)
|
3
|
The message is sent by pressing TRANSMIT
|
To send message PRESS TRANSMIT
|
4
|
Don’t return to menu before completing entry.
|
Complete entry before returning to menu
|
5
|
Page forward after entering address.
|
Enter address, then page forward.
|
6
|
Press backtab to go up Tab to go down.
|
To go up, Press BACKTAB.
To go down, Press TAB.
|
7
|
Press U for up
Hit D for down
|
For up, Press U
For down, Press D
|
Instructions.
• [Galitz,1985]:
1. Use short sentences and simple and familiar words.
2. Keep paragraph short, and separate them by at least on blank line.
3. Limit lines to 50-55 char/line, or use two double columns 30-35 char/column.
4. avoid hyphenation (word separating).
5. Avoid right justifying with unequal spacing.
· [Tullis,1988] adds some others:
1. Space between lines should be equal to or slightly greater
2. than character height (approximately double-spaced).
3. Avoid line lengths of less than 26 characters.
3. Numbers
· Right justify
· Decimal-align real numbers.
· Avoid leading zeros when they are unnecessary and nonstandard.
· Break up long numbers into groups of three to four digits. Use
· standard separators when they apply; otherwise use spaces.
4. Coding Techniques
· Use attention-getting techniques appropriately.
· Use blinking when you must get the user’s attention and his or her
§ eyes are likely to be directed elsewhere.
· Use bold text for: title, caption, and warning, maximum three
§ different levels.
· Use reverse video for choices or errors.
· Use different size for relative quantity or importance (max 5 level).
· Use two to four different character types in consistent ways.
· Use underlining to distinguish fill-in field from other items or as a
· pointer.
· Use shape often have particular connotations for certain users.
· Use special characters and icons.
· The proximity of items on a screen implies association and leads
· the eye to consider items as parts of a whole.
· Use sound with considerations below:
- Not often: disturb the environment.
- Be consistent to a particular message.
- Give the option of turning it off
· (users dislike anyone knows their errors).
5. Color
Foreground-background color combinations [Lalomia and Happ, 1987].
Foreground
|
Background
| |||||||
Black
|
Black
|
Blue
|
green
|
Cyan
|
Red
|
magenta
|
brown
|
white
|
Blue
|
x
|
x
|
x
| |||||
Green
|
x
|
x
|
x
| |||||
Cyan
|
x
| |||||||
White
|
x
| |||||||
Bold green
|
x
| |||||||
Bold cyan
|
x
|
x
|
x
|
x
|
x
| |||
Bold magenta
|
x
|
x
| ||||||
yellow
|
x
|
x
|
x
|
x
| ||||
Bold white
|
x
|
x
|
x
| |||||
