SCREEN LAYOUT AND DESIGN (INTERAKSI MANUSIA DAN KOMPUTER)

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 :
2. Text

• 1. Messages
• 2. Instructional prompts
• 3. Instructions.

Instructional prompts

Instructions.[Galitz,1985]:

• 1. Use short sentences and simple and familiar words.
• 2. Keep paragraph short, and separate them by at least one 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:

• 6. Space between lines should be equal to or slightly greater than character height (approximately double-spaced).
• 7. 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