More InformationWindows Interface Components - Secondary Windows
A dialog box provides an exchange of information or dialog between the user and the application. Use a dialog box to obtain additional information from the user that is needed to carry out a particular command or task.
Because dialog boxes generally appear after the user clicks a particular menu item (including shortcut menu or cascading menu items) or a command button, define the title text for the dialog box window to be the name of the associated command. Use book title capitalization.
Do not explicitly include an ellipsis in the title text, even if the command menu name includes one. The exception is for title bar text that exceeds the current width of the window. Also, avoid including the command's menu title unless it is necessary to compose a reasonable title for the dialog box. For example, for a Print… command on the File menu, define the dialog box window's title text as Print, not Print... or File Print. However, for an Object… command on an Insert menu, you can title the dialog box Insert Object.
Like property sheets, dialog boxes commonly include OK and Cancel command buttons. If the user clicks OK, apply the values in the dialog box and close the window. If the user clicks Cancel, ignore the changes and close the window, canceling the user's chosen operation. OK and Cancel buttons work best for dialog boxes that allow the user to set the parameters for a particular command. Typically, define OK to be the default command button when the dialog box window opens.
You can include other command buttons in a dialog box in addition to or instead of the OK and Cancel buttons. Label your command buttons to clearly define the button's purpose, but be as concise as possible. Long, wordy labels make it difficult for the user to easily scan and interpret a dialog box's purpose. Follow the design conventions for command buttons.
More Information
For more information about command buttons, see Chapter 8, "Menus, Controls, and Toolbars."
Orient controls in dialog boxes in the direction people read. In countries where roman alphabets are used, this means left-to-right, top-to-bottom. Locate the primary field with which the user interacts as close to the upper left corner as possible. Follow similar guidelines for orienting controls within a group in the dialog box.
More Information
For more information about layout of controls in a dialog box, see Chapter 14, "Visual Design."
Lay out the major command buttons either stacked along the upper right border of the dialog box or lined up across the bottom of the dialog box. Position the most important button — typically the default command — as the first button in the set. If you use the OK and Cancel buttons, group them together. You can use other arrangements if there is a compelling reason, such as a natural mapping relationship. For example, it may make sense to place buttons labeled North, South, East, and West in a compass-like layout. Similarly, a command button that modifies or provides direct support for another control may be grouped or placed next to those controls. However, avoid making that button the default button because the user will expect the default button to be in the conventional location.
The system provides pre-built interfaces for many common operations. Use these interfaces where appropriate. They can save you time while providing a high degree of consistency. If specific functionality is missing, you can extend the common dialog boxes to include additional controls. When you do, append the new functionality in the toolbars or on the right side or bottom of the common dialog box.
Note
The common dialog box interfaces have been revised from the ones provided in previous releases of Microsoft Windows.
If you customize or provide your own interfaces, maintain consistency with the basic functionality supported in these interfaces and the guidelines for their use. For example, if you provide your own property sheet for font properties, model your design to be similar in appearance and design to the common Font dialog box. Consistent visual and operational styles will allow users to transfer their knowledge and skills more easily.
The Open dialog box, as shown in Figure 9.7, allows the user to browse the file system, including direct browsing of the network, and includes controls to open a specified file. Use this dialog box for commands that open files or browse for a file name, such as the File Open menu command or a Browse command button. Always set the title text to correctly reflect the command that displays the dialog box.
Figure 9.7 The Open dialog box (click to enlarge image)
The system-supplied dialog box automatically handles the display of long file names, direct manipulation transfers — such as drag-and-drop operations — and access to an icon's shortcut menus. The dialog box displays file name extensions only for files of registered types when the user selects this viewing option.
To open a file, the user selects a file from the list in the dialog box or types a name in the File name field and then clicks the Open command. The user can also display the shortcut menu for the file and click its Open command. As a shortcut, double-clicking also opens the file. Clicking the Cancel button closes the window without opening the file.
When the user opens a shortcut icon, the dialog box opens the file of the object to which the link refers. In other words, the effect is the same as if the user directly opened the original file. Therefore, the name of the original file — not the name of the file link — should appear in the primary window's title bar.
The files listed in the dialog box reflect the current directory path and the type filter set in the Files of type drop-down list box. The list of files also includes shortcut icons in the current directory; these shortcut icons refer to file types that match the type filter.
The Look in drop-down list box displays the current directory. Displaying the list allows the user to view the hierarchy of the directory path and to navigate up the path tree. Tool buttons adjacent to the drop-down list box provide the user with easy access to common functions. The dialog box also includes a list of shortcuts to the key places that a user can navigate, such as History, Desktop, and My Documents.
Set the default directory based on context. If the user opened the file directly, either from its location from the file system or using the Open dialog box, set the directory path to that location. If the user opened the application directly, then set the path either directly to the My Documents folder or to a subfolder your application created in the My Documents folder. For example, an application may set up a default directory for its user-generated data files.
The user can change the directory path in a variety of ways:
Clicking the Cancel button should not change the path. Always preserve the latest directory path between subsequent openings of the dialog box. If the application supports opening multiple files, set the directory path to the last file opened, not to the currently active child window. However, for multiple instances of an application, maintain the path separately for each instance.
The File name text box supports HTTP addresses (URLs) and FTP path names. It also supports a history list of the most recently entered file names.
The dialog box also includes an optional thumbnail view for a variety of common file types. To support thumbnail views for your own file type, implement a thumbnail extractor. For more information, see the Microsoft Platform SDK on the MSDN Online Web site at http://msdn.microsoft.com/ui/guide/sdk.asp.
Your application determines the default Files of type filter for the Open dialog box. This can be based on the last file opened, the last file type set by the user, or always a specific type, based on what most appropriately fits the context of the application.
The user can change the type filter by selecting a different type in the Files of type drop-down list box or by typing a filter into the File name text box and clicking the Open button. Filters can include file name extensions. For example, if the user types *.txt and then clicks the Open button, the list displays only files that have the .txt extension. Typing an extension into this text box also changes the file type setting for the Files of type drop-down list box. If the application does not support that file type, display the Files of type control with the mixed-case (indeterminate) appearance.
Include the types of files your application supports in the Files of type drop-down list box. For each item in the list, use a type description preferably based on the registered type names for the file types. For example, for text files, the type descriptor should be "Text Documents." You can also include an "All Files" entry to display all files in the current directory, regardless of type.
When the user types a file name into the Open dialog box and then clicks the Open button, the following conventions apply to the file name string:
The Open dialog box handles only matching a name to a file. It is your application's responsibility to ensure that the format of the file is valid, and if not, to appropriately notify the user.
The Save As dialog box, as shown in Figure 9.8, is designed to save a file using a particular name, location, type, and format. Typically, applications that support the creation of multiple user files provide this command. However, if your application maintains only private data files and automatically updates those files, this dialog box might not be appropriate.
Display this dialog box when the user clicks the Save As command or file-oriented commands with a similar function, such as the Export File command. Also display the Save As dialog box when the user clicks the Save command and has not supplied or confirmed a file name. If you use this dialog box for other tasks that require saving files, define the title text of the dialog box to appropriately reflect that command.
Figure 9.8 The Save As dialog box (click to enlarge image)
The appearance and operation of the Save As dialog box are similar to those for the Open dialog box, except that the type field — the Save as type drop-down list box — defines the default type for the saved file; it also filters the list of files displayed in the window.
More Information
For more information about naming files, see Chapter 7, "Windows," and Chapter 11, "Integrating with the System."
To save a file, the user clicks the Save button and saves the file with the name that appears in the File name text box. Although the user can type a name or select a file from the list of files, your application should preset the field to the current name of the file. If the file has not yet been named, propose a name based on the registered type name for the file — for example, Text Document (2). Alternatively, you can use data from the document, such as its first sentence, the subject line, a title property, or other key data.
The Save in drop-down list box indicates the immediate container in the directory path (or folder). The user can change the path by using this control and the list of files box. If the file already exists, save it to its original location. This means that the current path for the Save As dialog box should always be set to the path where the file was last saved. If the file has never been saved, save the file with your application's default path setting (which should typically be in the My Documents folder) or to the location defined by the user, either by typing the path or by using the controls in the dialog box.
If the user clicks the Cancel button in the Save As dialog box, do not save the file or other settings. Restore the path to its original setting.
Include the file types supported by your application in the Save as type drop-down list box. You may need to include a format description as part of a type name description. Although a file's format can be related to its type, a format and a type are not the same thing. For example, a bitmap file can be stored in monochrome, 16-color, 256-color, or 24-color format, but the file's type is the same in all cases. Consider using the following convention for the items you include as type descriptions in the Save as type drop-down list box.
Type name [format description]
When the user supplies a name for the file, the Save As dialog box follows conventions similar to the Open dialog box. If the new file name does not include an extension, the system uses the setting in the Save as type drop-down list or your application's default file type. If the new file name includes an extension, the system checks to see whether the extension matches your application's default extension or a registered extension. If it does, the system saves the file as the type matching that extension. (The extension is hidden unless the system is set to display extensions.) Otherwise, the system interprets the user-supplied extension as part of the file name and appends the extension set in the Save as type field. Note that this means only that the type (extension) is set. The format may not be correct for that type. Your application must write out the correct format.
Note
Preserve the creation date for files that the user opens and saves. If your application saves files by creating a temporary file, deletes the original, and renames the temporary file to the original file name, be sure you copy the creation date from the original file. System file management functionality may depend on preserving the identity of the original file.
If the user types a file name that begins and ends with double quotation marks, the system saves the file without appending any extension. If the string includes a registered extension, the file appears as that type. If the user supplies a file name that contains invalid characters or if the specified path does not exist, the system displays a message box, unless your application handles these conditions.
Here are some examples of how the system saves user-supplied file names. These examples assume .txt as the application's default type or the Save as type setting.
| How the System Saves Files | ||
|---|---|---|
| What the user types | How the system saves the file | Description |
| Sample Document | Sample Document.txt | Type is based on the Save as type setting or the application's default type. |
| Sample Document.txt | Sample Document.txt | Type must match the application's default type or a registered type. |
| Sample Document for Mr. Jones | Sample Document for Mr. Jones.txt | .Jones does not qualify as a registered type or as a type included in the Save as type drop-down list box, so the type is based on the Save as type setting or the application's default type. |
| Sample Document for Mr. Jones.txt | Sample Document for Mr. Jones.txt | Type must match a registered type or a type included in the Save as type drop-down list box. |
| "Sample Document" | Sample Document | Type will be unknown. The file is saved exactly as the string appears between the quotation marks. |
| "Sample Document.txt" | Sample Document.txt | No type is appended. The file is saved exactly as the string appears between the quotation marks. |
| Sample Document. | Sample Document..txt | Type is based on the Save as type drop-down list box or the application's default type. |
| "Sample Document." | Sample Document. | Type will be unknown. |
| "Sample" Document | File is not saved. | System (or application) displays a message box notifying the user that the file name is invalid because quotation marks cannot be used in a file name. |
This Browse for Folder dialog box, shown in Figure 9.9, enables the user to select a folder. Use it when the user needs to select only a destination, such as with a Move To or Copy To command. The dialog box includes support for enabling you to specify the default folder.
Figure 9.9 The Browse for Folder dialog box
Do not use this dialog box as an interface for general browsing, because the control does not provide access to the contents of a folder. To support creating new folders, you can include the New Folder button.
The Find and Replace dialog boxes provide controls that search for a text string specified by the user and optionally replace it with a second text string specified by the user. These dialog boxes are shown in Figure 9.10.
Figure 9.10 The Find and Replace dialog boxes
The Print dialog box, shown in Figure 9.11, allows the user to select what to print, the number of copies to print, and the collation sequence for printing. It also allows the user to choose a printer and contains a command button that provides shortcut access to that printer's properties. This dialog box also includes support for adding new printers and finding other printers on the network.
Figure 9.11 The Print dialog box
The Page Setup dialog box, as shown in Figure 9.12, provides controls for specifying properties about the page elements and layout.
Figure 9.12 Page Setup interface used as a dialog box
In this context, page orientation refers to the orientation of the page and not the printer, which may also have these properties. Generally, the page's properties override those set by the printer, but only for printing that page or document.
The Printer button in the dialog box displays a supplemental dialog box, as shown in Figure 9.13, that provides information about the current default printer. Like the Print dialog box, it displays the current property settings for the default printer and a button for access to the printer's property sheet.
Figure 9.13 The supplemental Printer dialog box
The Font dialog box, shown in Figure 9.14, displays the fonts and point sizes of the available fonts installed in the system. Your application can filter this list to show only the fonts applicable to your application. You can use the Font dialog box to display or set the font properties of a selection of text.
Figure 9.14 The Font dialog box
The Color dialog box, as shown in Figure 9.15, displays the available colors and includes controls that allow the user to define custom colors. You can use this control to provide an interface for users to select colors for an object.
Figure 9.15 The Color dialog box (unexpanded appearance)
The Basic colors control displays a default set of colors. The number of colors displayed is determined by the installed display driver. The Custom colors control allows the user to define more colors by using the various color selection controls provided in the window.
Initially, you can display the dialog box as a smaller window with only the Basic colors and Custom colors controls. Then you can allow the user to expand the dialog box to define additional colors, as shown in Figure 9.16.
Figure 9.16 The Color dialog box (expanded)
Fundamentals of Designing User Interaction
Design Specifications and Guidelines