Java Sun >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part III: The Components of the Java Foundation Classes
>
8: Dialog Boxes and Alert Boxes
>
Dialog Box Design
  Previous Next Contents/Index/Search


Dialog Box Design

Figure 109 illustrates dialog box design guidelines for the Java look and feel.

The dialog box in the figure has a title in the window's title bar, a series of user interface elements, and a row of command buttons. The default command button is the OK button, indicated by its heavy border. The underlined letters are mnemonics, which remind users how to activate components by pressing the Alt key and the appropriate character key. The Ruler Units noneditable combo box has initial keyboard focus, indicating that the user's next keystrokes will take effect in that component. For a discussion of the text that should appear in dialog box titles, see Title Text in Secondary Windows.

 Click here to view the corresponding code for Figure 109 (also available on the book's companion CD-ROM).

Figure 109   Sample Dialog Box

 

Sample Dialog Box

  In dialog boxes, include mnemonics for all user interface elements except the default button and the Cancel button.

  When opening a dialog box, provide initial keyboard focus to the component that you expect users to operate first. This focus is especially important for users who must use a keyboard to navigate your application.

  Consider the effect of internationalization on your design. Use a layout manager, which allows for text strings to become bigger or smaller when translated to another language.

For guidelines for the spacing between JFC components, see Layout and Visual Alignment. For more information on internationalization, see Planning for Internationalization and Localization. For details on keyboard support for navigating through dialog boxes, see Table 23. For information on how to capitalize text in dialog boxes, see Text in the Interface.

Tab Traversal Order

Tab traversal order is the order in which the components in a dialog box receive keyboard focus on successive presses of the Tab key. If users press the Tab key when keyboard focus is on the last component in the dialog box, you should return keyboard focus to the first component.

Figure 110 shows the tab traversal order that the designer has set for this preferences dialog box.

 Click here to view the corresponding code for Figure 110 (also available on the book's companion CD-ROM).

Figure 110   Tab Traversal Order in the Sample Dialog Box

 

Tab Traversal Order

  Specify a logical tab traversal order for the user interface elements in a dialog box. The traversal order should match the reading order for your application's specified locale. For example, in English, the traversal order is left to right, top to bottom. By default, the traversal order is the sequence in which you added the components to the dialog box.

  The setNextFocusableComponent method from JComponent can be used to specify the next component to receive keyboard focus. If a component is unavailable, it is skipped in the tab traversal order.

Single-Use and Multiple-Use Dialog Boxes

Dialog boxes can be designed for single or multiple use. This usage determines the combinations of command buttons that should appear in the dialog box.

  • If users are likely to perform one operation with the dialog box and then dismiss it, a single-use dialog box is appropriate. The command buttons (except Help) in a single-use dialog box perform their operations and then close the window. An example of a single-use dialog box is a systems settings dialog box.
  • If users might want to perform several operations with the dialog box before dismissing it, a multiple-operation dialog box is appropriate. The command buttons (except Close) in a multiple-use dialog box perform their operations and leave the window open. An example of a multiple- use dialog box is a sophisticated find-and-replace dialog box that provides command buttons for Find, Find Next, Replace, and Replace All.

Command Buttons in Dialog Boxes

In dialog boxes, you can place command buttons alone or in a command button row at the bottom of the dialog box, as shown in Figure 109. This section provides some general guidelines about the uses and placement of command buttons in dialog boxes.

  Place command buttons that apply to the dialog box as a whole in the command button row at the bottom of the dialog box. This includes all buttons that dismiss the dialog box as one of their actions.

  Align buttons in the command button row along the lower-right edge of the dialog box. (The alignment of the command button row in alert boxes, including those supplied by the JFC, is different from the alignment in dialog boxes.)

  Place command buttons that apply to one or a few components next to their associated components. For instance, place a Browse button at the trailing edge of the text field it fills in.

For general information on command buttons, see Command Buttons. For guidelines on the spacing of command buttons, see Command Button Spacing and Padding. For keyboard operations appropriate to command buttons, see Table 17.

OK and Cancel Buttons

The OK and Cancel buttons work well in single-use dialog boxes (for instance, those in which users specify options or settings). OK instructs the system to apply and save the settings, whereas Cancel instructs the system to ignore any changed settings. In most cases, OK is the default button. OK and Cancel are appropriate in both modal and modeless dialog boxes. The following figure shows a preferences dialog box with OK, Cancel, and Help buttons.

Figure 111   Dialog Box With OK, Cancel, and Help Buttons

 

OK, Cancel, and Help Buttons

  When users click the OK button in a dialog box, save the settings or carry out the commands specified and close the dialog box. Whenever possible, provide the button with a command name that describes the action (such as Print or Find) instead of OK.

  When users click the Cancel button in a dialog box, close the window and restore the settings in the dialog box to the state they were in when the dialog box was opened.

  Do not add a mnemonic to the Cancel button.

  The Cancel button should be activated when users press the Escape key. The Cancel button does not need keyboard focus for this interaction. The Cancel button and its keyboard equivalent (Escape) are not built into the JFC; you must implement them yourself.

Apply and Close Buttons

The Apply and Close buttons work well in multiple-use dialog boxes (those that remain open for repeated use), as shown in the properties dialog box in the following figure. Apply and Close often appear together in modeless dialog boxes.

Figure 112   Dialog Box With Apply and Close Buttons

 

Apply and Close Buttons

  Use the Apply button to carry out the changes users specify in a dialog box without closing the window.

  In a multiple-use dialog box that is used to perform an action, use a specific action name (such as "Find") instead of "Apply." More than one kind of action or apply button might be appropriate--for instance, "Find" and "Replace."

  Use a Reset button to restore the values in a dialog box to the values specified by the last Apply command. If users have not activated Apply, restore the values in effect when the dialog box was opened. Do not close the dialog box when users choose Reset. Place a Reset button between the Apply and Close buttons.

  Include a Close button in a dialog box with an Apply (or other action) button. Close dismisses the dialog box without applying changes.

  Because a Cancel button might make users think they can apply changes temporarily and then rescind them, do not use a Cancel button in a dialog box that includes an Apply button. Use a Close button instead.

  If the user has made changes in a dialog box and clicks Close before clicking the Apply button, display a Warning alert box. The alert box should ask the user whether to apply the changes before closing, discard changes, or cancel the close operation.

Close Buttons

The Close button is commonly used to dismiss simple secondary windows, such as an Info alert box. The Close button is also commonly used to dismiss dialog boxes in which user actions take effect immediately. A Close button is appropriate in both modal and modeless dialog boxes.

The following dialog box enables users to specify properties such as the width and height of a rectangle. Changes take effect immediately. The dialog box includes a Close button that users can click to dismiss the dialog box.

Even though the Close button has a mnemonic (usually C), you can also have the Close button respond to the Escape key.

Figure 113   Dialog Box With a Close Button

 

Close Button

  Never use an OK button in a window that has a Close button.

  When users click the Close button, dismiss the dialog box and do not make additional changes to the system.

Help Buttons

You can include a Help button in any dialog box. A Help button enables users to obtain additional information about the dialog box. For example, when users click Help in the Error alert box in Figure 124, the application opens a window with additional information on the cause of the error.

  When users click the Help button, open an additional window that displays the help information. Avoid removing or obscuring information in the window where users clicked Help.

  Place the Help button at the trailing edge of a group of command buttons. For languages that read from left to right, the Help button should be the rightmost button.

Default Command Buttons

The default command button is the button that the application activates when users press Enter (or Return). The JFC gives the default command button a heavier border than other command buttons. In most cases, you should make the action that users are most likely to perform the default button, as shown with the OK button in the following figure. The default button does not need to have keyboard focus when users press Enter.

Figure 114   Dialog Box With a Default Command Button

 

Default Command Button

When keyboard focus is on a component that accepts the Enter key, such as a multiline text area, the default button is not activated when users press the key. Instead, the insertion point moves to the beginning of a new line. To operate the default button, users must move focus to a component that does not accept Enter or press Ctrl-Enter.

  If a dialog box has a default button, make it the first command button in the group. For example, in languages that read from left to right, the default button is the leftmost button.

  Since the Enter (and Return) key is already supplied by the JFC for keyboard access, do not add a mnemonic for the default command button.

You are not required to have a default command button in every dialog box and alert box. A command that might cause users to lose data should never be the default button, even if it is the action that users are most likely to perform. The alert box in Figure 115 asks users if they want to replace an existing file. The alert box has Replace and Cancel buttons, neither of which is the default command button. Even though the Replace button has focus, it cannot be activated with the Enter key; it must be activated with the spacebar. This approach gives the user time to reconsider a hasty, automatic confirmation.

 Click here to view the corresponding code for Figure 115 (also available on the book's companion CD-ROM).

Figure 115   Alert Box Without a Default Button

 

Alert Box Without Default Button


Java Look and Feel Design Guidelines, second edition.
Copyright 1994-2004 Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner Java 8 banner (182)