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

5Optional Field??

1) Send To is not an option, must be filled in. It should at least be defaulted to something.

2) 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

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

17Dialog 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