Forms Design

1
Forms Design
2
Class list form DB Brock1999 Version
Titles are a good thing
Notice the inconsistency between the order of
these fields
3
OrganizationNo Logical Order
4
Clutter
5
Optional Field??

• Send To is not an option, must be filled in. It
  should at least be defaulted to something.
• Send To allows submit to Submit the report,
  even though there is no destination. Still
  wondering where my report goes to.

6
Inconsistent AbbreviationsAll taken from DB
Brock screens 1999
7
2006 Version of the Brock Screens
8
Class list form DB Brock1999 Version
9
Required Fields Marked with ebay registration
Note that size of fields is clearly visible.
10
Browser, Active Info Messages
Simple yet effective, information about sites is
displayed at the bottom of the browser.
11
Browser, Info Messages 2
Popup information messages
12
List Combo Box
Quick way of finding information for fields, User
my scroll or type first few letters of selection.
13
Dialog Boxes
Notice, top left to bottom right ordering.
Available help. Standard buttons, error reversal,
small boundaries.
14
Dialog Box
Notice Grouping of function, justification of
text makes it easy on the eyes. Boundaries help
separate logical functions.
15
Guidelines for Form Design

• Meaningful titles
• Comprehensible Instructions
• Logical grouping and sequencing of fields
• Visually appealing layout of the form
• Familiar field labels
• Consistent terminology and abbreviations
• Visible space and boundaries for data-entry fields

16
Guidelines for Form Design

• Convenient cursor movement
• Error correction for individuals characters and
  entire fields
• Error messages for unacceptable values
• Optional fields marked clearly
• Explanatory messages for fields
• Completion signal

17
Dialog Box GuidelinesInternal Layout

• Meaningful title, consistent visual properties
• Top-left to bottom-right sequencing
• Clustering and emphasis
• Colour
• Font and style
• Consistent layouts (margins, grid, whitespace,
  lines, boxes)
• Consistent terminology, font, capitalization,
  justification
• Standard Buttons (OK, Cancel, Abort)
• Error prevention by direct manipulation
• Undo
• Help facility if needed

18
Dialog Box GuidelinesExternal Relationship

• Smooth appearance and disappearance
• Distinguishable but small boundary
• Size small enough to reduce overlap problems
• Display close to appropriate items
• No overlap of required items
• Easy to make disappear
• Clear how to complete/cancel