Screen guidelines

1
Screen guidelines

• For data entry

2
Screen Layout for Data Entry

• Identify screen (name and purpose).
• Keep number of screens to a minimum.
• Ensure that all prompts are meaningful and
  unambiguous.
• Provide adequate (not voluminous) help on screens
  and on individual fields.
• If screen data entry could possibly be rejected
  on the value of a key field, accept that field as
  soon as possible and check for validity.

3

• On key field rejection, allow both retry and
  exit.
• Allow a quit and save exit.
• Confirm data before committing.
• On certain fields (e.g. Date) provide default
  values.
• In an on-line situation, where some information
  is already present, display relevant information.
• Generate screen or running totals automatically.

4
Form Filling Dialogues

• Generally used for transaction entry.
• Should read left to right, top to bottom.
• As with manual form filling, the user should be
  able to skip fields, go back and change field
  contents or abandon the entry completely.
• The form contents should not commit the user
  until they are confirmed.
• Where the field can have only one of a limited
  list of possible values, a pop-up menu may be
  provided.

5
Form Filling Dialogues

• If the input comes from a source document, all
  validation should be deferred until the end of
  the entry. If it is from a user or customer,
  validation should be immediate.
• Error correction routines should give the
  completed form to the user and allow changes to
  the incorrect fields.
• Prompts should be clearly differentiated from the
  answer fields.

6
Form Filling Dialogues

• Answer fields should be size protected, to
  prevent users overwriting text.
• Input items should have the same relative order
  and format as source data.
• If multiple screens are required, there should be
  a logical grouping of data within each screen.
• Mark all fields for optionality or requirement.
• Appropriate where a standard sequence of inputs
  can be predicted.

7
Screen Formatting

• Display only relevant information to the user.
• Display all relevant information to the user.
• Information should be grouped logically.
• Upper and lower case lettering should be used.
• Caption fields (identifying the meaning of
  individual input and output data fields) should
  clearly indicate the content of the field and be
  well differentiated from it.

8
Screen Formatting Guidelines

• Leave approximately half the screen blank leave a
  blank line after every 5th row of a tabular
  format
• Leave 4 or 5 spaces between the columns in a
  columnar format

9
Screen Template

• Top 2 or 3 lines should be reserved for title and
  status information
• Optional Upper and lower message areas may be
  provided for user
• Information on help or instructions
• The screen body contains the main information
  which the screen is seeking to impart.
• At the bottom of the screen, 1 or 2 lines show
  standard facilities (e.g. ESC to exit).

10
Sample screen for Joes Yard
11
User Interface Design

• Menus
• Graphic front ends
• Dialog
• Audio
• Drag-and-drop
• Intuitive
• Human
• Usability

• Point-and-click
• Icon
• List
• System Event
• Window
• String
• Web browser

12
Technologies

• For client-side computing
• HTML forms.
• JavaScript.
• Proprietary plug-ins (e.g. Flash, etc)
• ActiveX controls (Microsoft specific)
• Java Applets
• Bespoke plug-ins
• Can be written in C, Eiffel, Fortran, Cobol,
  etc.
• Need a compiler, that will translate your code
  into a Windows DLL or Unix Shared Library.