CONTENTS Title Page Copyright Page Preface 1 Designing Dialog Boxes 1.1 Determining the Type and Placement of a Dialog Box 1.1.1 Types of Dialog Boxes 1.1.2 Placing Dialog Boxes 1.1.2.1 Placing a Single Dialog Box 1.1.2.2 Nesting Multiple Dialog Boxes 1.2 Using Window Decorations 1.2.1 Titles in Dialog Boxes 1.2.2 Resizing Dialog Boxes 1.3 Creating Push Buttons 1.4 Using Standard Message Dialog Boxes 1.4.1 Question Dialog Box 1.4.2 Error Dialog Box 1.4.3 Information Dialog Box 1.4.4 Warning Dialog Box 1.4.5 Working Dialog Boxes 1.5 Creating a Logical and Appealing Layout of Controls 1.5.1 Group Related Choices Graphically 1.5.2 Use Uniform Spacing Within the Dialog Box 1.5.3 Promote Scanning from Left to Right, Top to Bottom 1.5.3.1 Use the Top Left Corner 1.5.3.2 Present Related Controls in a Clearly Visible Series 1.5.3.3 Clarify Structure 1.5.3.4 Provide Appropriate Defaults 1.5.3.5 Use Option Buttons to Conserve Space 1.5.3.6 Provide a Variety of Selection Controls 1.5.4 Creating Tab Groups 1.5.4.1 Navigating Between Tab Groups 1.5.4.2 Navigating Within Tab Groups 2 Designing Menus and Menu Items 2.1 Naming Menus and Menu Items 2.2 Organizing Menus and Menu Items 2.3 Using Ellipses in Menu Items 2.4 Disabling Menu Items 2.5 Designing Pop-up Menus 2.5.1 Characteristics to Give to Pop-up Menus 2.5.2 Determining the Actions of Pop-up Menus 2.5.3 Choosing Between a Pop-up Menu or a Control Panel 2.5.4 Designing Pop-up Menus with Submenus 2.6 Items in the File Menu 2.7 Items in the Edit Menu 2.8 Items in the Options Menu 2.9 Items in the Help Menu 3 Customizing the Interface 3.1 General Guidelines for Providing Customization Features 3.2 Designing Options Menu Items and Dialog Boxes 3.2.1 Adding Command Menu Items 3.2.2 Adding Dialog Boxes 3.3 Guidelines for Customizing Windows, Color, and Text 3.3.1 Window Positions and Sizes 3.3.2 Colors 3.3.3 Size and Rendition of Text 4 Using Color 4.1 Why Use Color? 4.2 General Guidelines and Specific Recommendations 4.2.1 Before You Select Colors 4.2.2 After You Select the Colors 4.3 Using Digital's Color Mixing Widget 5 Designing Help 5.1 Methods of Accessing Help 5.1.1 Help Pull-Down Menu 5.1.2 Help Command 5.1.3 Help Push Button 5.1.4 Help Key 5.2 Guidelines for Designing and Writing Online Help 5.2.1 Planning Help Topics 5.2.1.1 Organizing Help Topics 5.2.1.2 Writing Help Topics 5.2.2 Remember Translation 5.3 Digital Tools for Creating Online Help 5.3.1 Using Digital's Help Widget 5.3.1.1 Title Bar 5.3.1.2 Menu Bar 5.3.1.3 Help Topic 5.3.1.4 Additional Topics 5.3.1.5 Push Buttons 5.3.2 Using the DECwindows Motif Help System 6 Using Digital-Specific Widgets 6.1 Using Digital's Print Widget 6.2 Using the Structured Visual Navigation Widget 6.2.1 Determining the Components of an Entry 6.2.2 Designing the Appearance of Your Hierarchy 6.2.2.1 Showing Icon States 6.2.2.2 Aligning Entries 6.2.2.3 Using Fonts Within a Hierarchy 6.2.2.4 Choosing Selection Modes 6.2.2.5 Choosing Selection Line Length 6.2.3 Providing Items in the View Menu 6.3 Using Digital's Layered Product Widgets: GObE and NetEd 6.3.1 GObE 6.3.2 NetEd 7 Working with LinkWorks 7.1 What Is LinkWorks? 7.2 Deciding What to Support as Linkable Objects 7.3 Adding the Link Menu 7.3.1 The Standard Link Menu 7.3.2 Customizing the Link Menu 7.4 Using Highlighting Techniques 7.4.1 Guidelines for Highlighting 7.4.2 Techniques for Highlighting 7.5 Using Windowing Properly A Keyboard and Mouse Bindings for DECwindows Motif A.1 Keyboard Bindings A.2 Mouse Bindings A.3 Standard Accelerators B Guidelines for Capitalizing and Punctuating Screen Objects B.1 General Guidelines B.2 Menus B.3 Dialog Boxes B.3.1 Screen Objects in Dialog Boxes B.3.2 Push Buttons B.4 Title Bars C Common Motif Terms Translated into European Languages C.1 Danish and Dutch Terms C.2 Finnish and French Terms C.3 German and Italian Terms C.4 Norwegian and Portuguese Terms C.5 Spanish and Swedish Terms D Sources of Further Information D.1 Books D.2 Periodicals FIGURES 1-1 Modeless Dialog Boxes Allow Users to Work in Other Windows 1-2 Caution Pointer with a Modal Dialog Box 1-3 Place Dialog Boxes Appropriately 1-4 Using an Options... Button to Indicate a Secondary Dialog Box 1-5 A Dialog Box with Too Many Steps 1-6 Nesting Used to Redesign a Dialog Box with Too Many Steps 1-7 Nesting Dialog Boxes 1-8 Window Decorations on Primary and Secondary Windows 1-9 Appropriate and Inappropriate Titles in Dialog Boxes 1-10 Use Resize Borders with Text Entry Fields or List Boxes 1-11 Move Push Buttons Closer Together 1-12 Do Not Truncate Push Buttons 1-13 Do Not Truncate Labels in Push Buttons 1-14 Do Not Overlap Push Buttons 1-15 Increase Size and Layout of Dialog Box Proportionally 1-16 Equally Spaced Push Buttons at the Bottom of a Dialog Box 1-17 Push Buttons at the Side of a Dialog Box 1-18 How to Handle a Push Button That Is Larger Than Others 1-19 Examples of Question Dialog Boxes 1-20 Error Dialog Box 1-21 Information Dialog Box 1-22 Warning Dialog Box 1-23 Working Dialog Box 1-24 Group Related Choices Using Space or Bevels 1-25 Use Uniform Spacing 1-26 Appropriate and Inappropriate Spacing Between Labels and Fields 1-27 Left-Justified and Horizontal Arrangement 1-28 Align Labels with the Baseline of Text 1-29 Appropriate and Inappropriate Labeling of Radio Buttons 1-30 Provide Appropriate Defaults 1-31 Use Option Buttons to Conserve Space 1-32 Provide a Variety of Selection Controls 1-33 Use the Tab Key to Move Between Tab Groups 1-34 Use the Tab Key to Move Between Tab Groups-continued 1-35 Use the Arrow Keys to Move Within Tab Groups 2-1 Order of Menus in the Menu Bar 2-2 A Menu Map 2-3 A Menu with a Disabled Menu Item 2-4 Pop-up Menu 2-5 Pop-up Menu with a Submenu 2-6 A File Menu 2-7 A ``Save File'' Question Message Box 2-8 ``Open in New Window'' Check Box in a File Selection Dialog Box 2-9 A Save As... Dialog Box That Allows Users to Save in Different File Formats 2-10 A Revert Dialog Box 2-11 An Edit Menu 2-12 A Help Menu and Its Menu Items 3-1 An Example Options Menu 3-2 Range of Customization 3-3 A Feedback Area Labeled "Sample Text" 3-4 Using One Menu to Customize Text 3-5 Using Several Menus to Customize Text 3-6 Using a Dialog Box to Customize Text 4-1 Color Picker Model 4-2 HLS Color Model 4-3 RGB Color Model 4-4 Browser Color Model 4-5 Greyscale Mixer 5-1 Create a Hierarchical Tree 5-2 Create Task-Oriented Topics 5-3 Write an Overview for the Application 5-4 Additional Topics in a Help Window 5-5 Put Task-Oriented Information First 5-6 Number Steps 5-7 Use Short Sentences and Paragraphs 5-8 Help Window 5-9 Comparison of Help Widget and DECwindows Motif Help System Windows 6-1 The Print Widget's Primary Dialog Box 6-2 The Print Widget's Secondary Dialog Box on VMS Systems 6-3 Erasing Tab Groups Users Do Not Need 6-4 Using the Outline Format to Show SVN Hierarchy 6-5 SVN Tree Format 6-6 SVN Column Format 6-7 An SVN Index Window 6-8 Components in an SVN Entry 6-9 Expanded and Collapsed SVN Icon States 6-10 SVN Selection with a Full Selection Line 6-11 SVN Selection with a Limited Selection Line 6-12 SVN with a Variable-Length Selection Line 6-13 SVN Menu Items in the View Menu 7-1 The Link Menu 7-2 The LinkWorks Menu Items 7-3 Two Link icons B-1 Putting Information in Title Bars TABLES 5-1 Comparison of Help Widget and DECwindows Motif Help System Features A-1 Differences Between LK201 and LK401 Keyboards A-2 Modifiers for DECwindows Motif Keyboard Bindings A-3 General Bindings A-4 Bindings for General Navigation A-5 Bindings for Menu Navigation A-6 Bindings for Text Navigation A-7 Bindings for Window Navigation A-8 Bindings for Activation and Editing A-9 Mouse Bindings for DECwindows Motif (Three-Button Mouse) A-10 Motif Accelerators for the Window Menu A-11 Suggested Accelerators for the File Menu A-12 Motif Accelerators for the Edit Menu A-13 Motif Accelerators for the LinkWorks Menu