DECforms Style Guide

*HyperReader

  CONTENTS

  Title Page

  Copyright Page

  Preface

  Part I    Elements of DECforms Style

  1      User Interface Design Principles

  1.1     Benefits of Using a Style Guide

  1.2     Benefits of Using the DECforms Style Guide

  1.3     Why This Style Guide Was Developed

  1.4     Modifying and Extending the DECforms Style Guide

  1.5     Elements of Good User Interface Design
    1.5.1      Keep the User in Mind
    1.5.2      Let the User Be in Control
    1.5.3      Provide Direct Manipulation
    1.5.4      Keep Your Interface Natural
    1.5.5      Provide Consistency
    1.5.6      Communicate Application Actions to the User
    1.5.7      Avoid Common Design Pitfalls

  2      Overview of Screen Design

  2.1     Main Screen

  2.2     Menus

  2.3     Dialog Boxes
    2.3.1      When to Use Dialog Boxes

  2.4     Choosing Controls or Menus for Application Tasks
    2.4.1      Choosing a Single-Choice Control
    2.4.2      Choosing a Multiple-Choice Control
    2.4.3      Guidelines for Using a Pop-Up Menu, a Control Panel, or a Pull-Down Menu

  2.5     Labeling Screen Objects
    2.5.1      General Guidelines
    2.5.2      Menus
    2.5.3      Dialog Boxes
    2.5.4      Screen Objects in Dialog Boxes
    2.5.5      Push Buttons

  2.6     Designing Screen Navigation

  3      Controls

  3.1     Push Buttons
    3.1.1      Appearance
    3.1.2      Label
    3.1.3      Selection

  3.2     Radio Fields
    3.2.1      Appearance
    3.2.2      Label
    3.2.3      Selection

  3.3     Check Fields
    3.3.1      Appearance
    3.3.2      Label
    3.3.3      Selection

  3.4     Text Entry Fields
    3.4.1      Appearance
    3.4.2      Label
    3.4.3      Entering Text
    3.4.4      Linking a Text Entry Field to a Dialog Box

  3.5     List Groups
    3.5.1      Appearance
    3.5.2      Selection
    3.5.3      Navigation Within a List Group

  3.6     Option Fields
    3.6.1      Appearance
    3.6.2      Label
    3.6.3      Selection

  4      Menus

  4.1     Appearance

  4.2     Components
    4.2.1      Menu Items
    4.2.2      Keyboard Accelerators
    4.2.3      Mnemonics
    4.2.4      Separators

  4.3     Choosing a Menu Item

  4.4     Showing Unavailable Menu Items

  4.5     Dismissing Menus

  4.6     Menu Types
    4.6.1      Bar Menus
      4.6.1.1      Standard Bar Menu Items
    4.6.2      Pull-Down Menus
    4.6.3      Pop-Up Menus

  4.7     Designing Menus
    4.7.1      Naming Menu Items
    4.7.2      Grouping Menu Items

  5      Dialog Boxes

  5.1     Purpose

  5.2     Appearance

  5.3     Size and Placement

  5.4     Ending a Dialog

  5.5     Chaining Dialog Boxes

  5.6     Grouping Controls
    5.6.1      Arranging Push Buttons
    5.6.2      Default Push Buttons
    5.6.3      Using Radio Boxes
    5.6.4      Arranging Text Entry Fields

  5.7     Specialized Dialog Boxes
    5.7.1      Work in Progress Dialog Box
    5.7.2      Informational Dialog Box
    5.7.3      Question Dialog Box
    5.7.4      File Selection Dialog Box

  Part II    Implementing DECforms Style

  6      Implementing Controls

  6.1     Push Buttons

  6.2     Radio Fields

  6.3     Check Fields

  6.4     Text Entry Fields

  6.5     List Groups

  6.6     Option Fields

  7      Implementing Menus

  7.1     Bar Menus

  7.2     Pull-Down Menus

  7.3     Pop-Up Menus

  8      Implementing Dialog Boxes

  8.1     Work in Progress Dialog Box

  8.2     Informational Dialog Box

  8.3     File Selection Dialog Box

  A   The Track and Field Registration Form

  B   The Track and Field Registration Application

  Glossary
    accelerator . . . control
    control panel . . . informational dialog box
    label . . . object
    obscure . . . right-justify
    select . . . work in progress dialog box

  FIGURES

  2-1        Sample Main Screen Showing the Different Screen Areas

  2-2        Bar Menu

  2-3        Bar Menu with Pull-Down Menu

  2-4        Sample Dialog Box

  3-1        Recommended Appearance of Push Buttons

  3-2        Default Push Button

  3-3        Alternate Appearance for Push Buttons

  3-4        Set of Radio Fields

  3-5        Highlighted Radio Field Within a Set of Radio Fields

  3-6        Set of Check Fields

  3-7        Text Entry Field

  3-8        Text Entry Field Linked to a Dialog Box

  3-9        List Group

  3-10       Two-Column List Group

  3-11       Option Field

  3-12       Highlighted Option Field

  3-13       Option Field with an Undefined Initial Value

  3-14       Pop-Up Menu Used with an Option Field

  4-1        Sample Menu

  4-2        Sample Menu with All Three Types of Menu Items

  4-3        Sample Menu Showing Accelerator

  4-4        Sample Menu Showing a Highlighted Toggle Item

  4-5        Sample Menu Showing an Unavailable Item

  4-6        Bar Menu with Pull-Down Menus

  4-7        Two-Line Bar Menu

  4-8        Location of Pull-Down Menus

  4-9        Sample of a Submenu Cascaded Downward

  5-1        Sample Dialog Box

  5-2        Push Buttons Arranged Horizontally

  5-3        Push Buttons Arranged Vertically

  5-4        Vertically Stacked Radio Box

  5-5        Horizontally Arranged Radio Box

  5-6        First Method of Stacking Text Entry Fields

  5-7        Second Method of Stacking Text Entry Fields

  5-8        Typical Work in Progress Dialog Box

  5-9        Typical Informational Dialog Box

  5-10       Typical Question Dialog Box

  5-11       Typical File Selection Dialog Box

  TABLES

  2-1        Keys Used to Navigate a DECforms Screen

  3-1        Keys Used to Edit Text

  3-2        Keys Used Within a List Group

  5-1        Additional Keys Used Within a File Selection Dialog Box