1 / 17

Forms Design

Forms Design. Class list form DB Brock 1999 Version. Titles are a good thing. Notice the inconsistency between the order of these fields. Organization No Logical Order. Clutter. Optional Field??. Send To is not an option, must be filled in. It should at least be defaulted to something.

fleta
Download Presentation

Forms Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Required Fields Marked with ‘*’ebay registration Note that size of fields is clearly visible.

  9. Browser, Active Info Messages Simple yet effective, information about sites is displayed at the bottom of the browser.

  10. Browser, Info Messages 2 Popup information messages

  11. List & Combo Box Quick way of finding information for fields, User my scroll or type first few letters of selection.

  12. Dialog Boxes Notice, top left to bottom right ordering. Available help. Standard buttons, error reversal, small boundaries.

  13. Dialog Box Notice: Grouping of function, justification of text makes it easy on the eyes. Boundaries help separate logical functions.

  14. 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

  15. 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

  16. 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

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

More Related