Windows Interface Components - Windows
Primary Window Components
A typical primary window consists of a frame (or border) that defines its extent and a title bar that identifies what is being viewed in the window. If the viewable content of the window exceeds the current size of the window, scroll bars are used. The window can also include other components such as menu bars, toolbars, and status bars.
Figure 7.1 shows the common components of a primary window.
.gif)
Figure 7.1 A primary window (click to enlarge image)
.gif){kind=link}
Window Frames
Every window has a boundary that defines its shape. A sizable window has a distinct border that provides control points (handles) for resizing the window by using direct manipulation. If the window cannot be resized, the border coincides with the edge of the window.
Title Bars
At the top edge of the window, inside its border, is the title bar (also referred to as the caption or caption bar), which extends across the width of the window. The title bar identifies the contents of the window. It also serves as a control point for moving the window and an access point for commands that apply to the window and its associated view. For example, when a user clicks the title bar by using the secondary mouse button, the shortcut menu for the window appears. Pressing the ALT+SPACEBAR key combination also displays the shortcut menu for the window.
Do not place your own buttons or other controls into the title bar area. Doing so may conflict with the special user controls Windows adds for configurations that support multiple languages.
Title Bar Icons
A primary window includes the 16 x 16 pixels version of the object's icon. The small icon appears in the upper left corner of the title bar and represents the object being viewed in the window. If the window contains a tool or utility (that is, an application that does not create, load, and save its own data files), use the small version of the application's icon in its title bar, as shown in Figure 7.2.
.gif)
Figure 7.2 A tool title bar
.gif)
More Information
For information about how to register icons for your application and data file types, see Chapter 11, "Integrating with the System." For more information about designing icons, see Chapter 14, "Visual Design."
If the application creates, loads, and saves documents or data files and the window represents the view of one of its files, use the small (16 x 16 pixels) icon that represents its document or data file type in the title bar, as shown in Figure 7.3. Even if the user has not yet saved the file, display the data file icon rather than the application icon, and then display the data file icon after the user saves the file.
.gif)
Figure 7.3 A document title bar
When the user clicks the title bar icon with the secondary mouse button, display the shortcut menu for the object. Typically, the menu contains a set of commands similar to the menu for the icon that opened the window, except that Close replaces Open. Also, define Close as the default command, so when the user double-clicks the title bar icon, the window closes. Clicking elsewhere on the title bar using the secondary mouse button displays the shortcut menu for the window.
.gif)
Note
When the user clicks the title bar icon using the primary mouse button, the system also displays the shortcut menu for the window. This behavior is supported only for compatibility with previous versions of Windows. Avoid documenting it as the primary way to access the shortcut menu for the window. Instead, document the use of the secondary mouse button as the correct way to display the shortcut menu for the window.
Title Text
The window title text identifies the name of the object being viewed in the window. It should always correspond to the type of icon that you display in the title bar. It should also match the label of the icon that represents the object in the file system. For example, if the user opens a data file named My Document, then in the resulting window you should display the icon for that document type followed by the name of the data file. You can also include the name of the application in use after the name of the data file, as shown in Figure 7.4.
.gif)
Figure 7.4 Title text order: document name — application name
More Information
For more information about title bar conventions of multiple document interface (MDI) applications, see Chapter 10, "Window Management."
If the window contains a tool that does not create or edit its own data files, such as Windows Calculator, then display the application name with the application icon in the title bar, just as you would for the application icon label. If the tool operates as a utility or viewer for files created by other applications, place the name of the application first, then include a dash and the tool specification text. Use this same convention for tools that require an additional specification to indicate context, such as Windows Explorer, which includes the name of the current container displayed in the browser.
When the user opens an application that displays a new data file, supply a name for the file and place it in the title bar, even if the user has not yet saved the file. Use the type name — for example Document (n), Sheet (n), Chart (n), where n is a number, as in Document (1). Make sure that the proposed name does not conflict with an existing name in the folder. Also use this name as the proposed default file name for the object in the Save As dialog box. If it is impractical or inappropriate to supply a default name, display a placeholder in the title, such as (Untitled).
More Information
For more information about type names, see Chapter 11, "Integrating with the System." For more information about the Save As dialog box, see Chapter 9, "Secondary Windows."
Follow the same convention if your application includes a New command that creates new files. Avoid prompting the user for a name. Instead, you can supply a Save As dialog box that allows the user to confirm or change your proposed name when saving or closing the file or attempting to create a new file.
Display a file name in the title bar exactly as it appears to the user in the file system, using both uppercase and lowercase letters. Avoid displaying the file extension or the path in the title bar. This information is not meaningful for most users and can make it more difficult for them to identify the file. However, because the system provides an option for users to display file name extensions, use the system-supplied functions to format and display a file name appropriately based on the user's preference.
More Information
The GetFileTitle and SHGetFileInfo functions automatically format names correctly. For more information about these functions, see the Microsoft Platform SDK on the MSDN Online Web site at https://msdn.microsoft.com/ui/guide/sdk.asp.
If your application supports multiple windows for viewing the same file, you can use the title text to distinguish between the views — but use a convention that will not be confused as part of the file name. For example, you may want to append :n, where n represents the instance of the window, as in Document:2. Make sure that you do not include this view designation as part of the file name you supply in the Save As dialog box.
If the name of the displayed object in the window changes — for example, when the user edits the name in the object's property sheet — update the title text to reflect that change. Always try to maintain a clear association between an object and its open window.
The title text and title bar icon should always represent the outermost container — the object that was opened — even if the user selects an embedded object or navigates the internal hierarchy of the object being viewed in the window. If you need an additional specification to clarify what the user is viewing, place this specification after the file name and separate it clearly from the file name, such as enclosing it in parentheses — for example, My HardDisk (C:). Because the system supports long file names, avoid additional text whenever possible. Complex or verbose additions to the title text also make it more difficult for the user to easily read the title and identify the window.
When the width of the window does not allow you to display the complete title text, you can abbreviate the title text, being careful to maintain the essential information that allows the user to quickly identify the window.
More Information
For more information about abbreviating names, see Chapter 11, "Integrating with the System."
Avoid drawing directly in the title bar or adding other controls. Such added items can make reading the name in the title bar difficult, particularly because the size of the title bar varies with the size of the window. In addition, the system uses this area for displaying special controls. For example, in some international versions of Windows, the title area provides information or controls associated with the input of certain languages.
Title Bar Buttons
Include command buttons associated with the common commands of the primary window in the title bar. These buttons act as shortcuts to specific window commands. Clicking a title bar button with the primary mouse button invokes the same command as that associated with the command button. Optionally, you can support clicking a title bar command button with the secondary mouse button to display the shortcut menu for the window. All buttons on a primary window's title bar must have equivalent commands on the shortcut menu for that window.
In a typical situation, one or more of the following buttons appear in a primary window (provided that the window supports the respective functions).
| Title Bar Buttons | ||
|---|---|---|
| Button | Command | Operation |
.gif){kind=small} | Close | Closes the window |
.gif){kind=small} | Minimize | Minimizes the window |
.gif){kind=small} | Maximize | Maximizes the window |
.gif){kind=small} | Restore | Restores the window |
When these buttons are displayed, use the following guidelines:
- When a command is not supported by a window, do not display its command button.
- The Close button always appears as the rightmost button. Leave a gap between it and any other buttons.
- The Minimize button always precedes the Maximize button.
- The Restore button always replaces the Maximize button or the Minimize button when that command is carried out.
Note
The system does not support the inclusion of the context-sensitive Help button available for secondary windows. If you want to provide this functionality in your application, include a Help toolbar button. Similarly, avoid including Maximize, Minimize, and Restore buttons in the title bars of secondary windows because the commands do not apply.
Fundamentals of Designing User Interaction
Windows Interface Components
Design Specifications and Guidelines
Appendixes and References