Windows Interface Components - Secondary Windows
You can display the properties of an object in the interface in a number of ways. For example, some folder views display certain file system properties of an object. The image and name of an icon on the desktop also reflect specific properties of that object. You can also use other interface conventions, such as toolbars, status bars, or even scroll bars, to reflect certain properties. Secondary windows provide another technique for displaying properties. There are two basic designs for this purpose: property sheets and property inspectors.
The most common presentation of an object's properties is a secondary window called a property sheet. A property sheet is a modeless secondary window that displays the user-accessible properties of an object — that is, properties that the user can view but not necessarily edit. Display a property sheet when the user clicks the Properties command for an object or when the input focus is on the object and the user presses ALT+ENTER.
The title bar text of the property sheet identifies the displayed object. Use book title capitalization. If the object has a name, use its name and the word "Properties." If the combination of the name plus "Properties" exceeds the width of the title bar, the system truncates the name and adds an ellipsis. If the object has no name, use the object's type name.
If the property sheet represents several objects, then also use the objects' type name. Where the type name cannot be applied — for example, because the selection includes heterogeneous types — substitute the word "Selection" for the type name.
Because there can be numerous properties for an object and its context, you may need to categorize and group properties as sets within the property window. There are two techniques for supporting navigation to groups of properties in a property sheet. The first is a tabbed property page. Each set of properties is presented within the window as a page with a tab labeled with the name of the set. Use tabbed property pages for grouping peer-related property sets, as shown in Figure 9.3.
Figure 9.3 A property sheet with tabbed pages
When displaying the property sheet of an object, you can also provide access to the properties of the object's immediate context or hierarchically related properties in the property sheet. For example, if the user selects text, you may want to provide access to the properties of the paragraph of that text in the same property sheet. Similarly, if the user selects a cell in a spreadsheet, you may want to provide access to its related row and column properties in the same property sheet. Although you can support this with additional tabbed pages, better access may be facilitated using another control — such as a drop-down list — to switch between groups of tabbed pages, as shown in Figure 9.4. This technique can also be used instead of multiple rows of tabs. Multiple rows of tabs can create usability problems for users, so don't use this convention.
Figure 9.4 A drop-down list for access to hierarchical property sets
Where possible, make the values for properties found in property sheets transferable. For example, you may want to support Copy and Paste or dragging for text in text boxes or items in a list box.
More Information
For more information about transfer operations, see Chapter 6, "General Interaction Techniques."
Property sheets typically allow the user to change the values for a property and then apply those transactions. Include the following common command buttons for handling the application of property changes.
| Common Command Buttons | ||
|---|---|---|
| Command | Action | |
| OK | Applies all pending changes and closes the property sheet window. | |
| Apply | Applies all pending changes but leaves the property sheet window open. | |
| Cancel | Discards any pending changes and closes the property sheet window. Does not cancel or undo changes that have already been applied. | |
Note
You can optionally support a Reset command to cancel pending changes without closing the window.
You can also include other command buttons in property sheets. However, the location of command buttons within the property sheet window is very important. If you place a button on a property page, it implies that the action associated with the button applies only to that page. For command buttons placed outside the page but still inside the window, apply the command to the entire window.
For the common property sheet transaction buttons — OK, Cancel, and Apply — it is best to place the buttons outside the pages because users consider the pages to be just a simple grouping or navigation technique. This means that if the user makes a change on one page, the change is not applied when the user switches pages. However, if the user makes a change on the new page and then clicks the OK or Apply command buttons, changes on both pages are applied — or, in the case of Cancel, discarded.
Avoid including a Help command button. If your property sheet needs a Help button, this may indicate that you need to simplify the interface. Consider redesigning the layout, the text, or the flow of commands. However, do include support for context-sensitive Help for each control in a property sheet.
More Information
For more information about designing Help for your application, see Chapter 13, "User Assistance."
If your design requires groups of properties to be applied on a page-by-page basis, then place OK, Cancel, and Apply command buttons on the property pages, always in the same location on each page. When the user switches pages, any property value changes for that page are applied, or you can prompt the user by displaying a message box that asks whether to apply or discard the changes.
You can include a sample in a property sheet window to illustrate a property value change that affects the object when the user applies the property sheet. Where possible, include the aspect of the object that will be affected in the sample. For example, if the user selects text and displays the property sheet for the text, include part of the text selection in the property sheet's sample. If displaying the actual object — or a portion of it — in the sample is not practical, use an illustration that represents the object's type.
If the user closes a property sheet window, follow the same convention as for closing the content view of an object, such as a document. Avoid interpreting the Close button as Cancel. If there are pending changes that have not been committed, consider prompting the user to apply or discard the changes by displaying a message box, as shown in Figure 9.5. If there are no unsaved changes, just close the window.
Figure 9.5 Prompting for pending property changes
If the user clicks the Yes button, the properties are applied and the message box window and the property sheet window are closed. If the user clicks the No button, the pending changes are discarded and the message box and property sheet windows are closed. To allow the user to cancel closing the property sheet window, include a Cancel button in the message box.
You can also display the properties of an object by using a dynamic viewer or browser that reflects the properties of the current selection. Such a property window is called a property inspector. A property inspector is different from a property sheet. Even when a property sheet window is modeless, the window is typically modal with respect to the object for which it displays properties. If the user selects another object, the property sheet continues to display the properties of the original object. A property inspector always reflects the current selection.
You typically use a palette window (described later in this chapter) or toolbar to create a property inspector, as shown in Figure 9.6. An even better alternative is to use a palette window that the user can also configure as a docked toolbar.
Figure 9.6 A property inspector
You may also want to include a control in a property inspector that enables the user to display the properties of another object in the primary window. For example, as the first control in the property inspector, you can include a drop-down list box that displays the name of the object being viewed. To view another object's properties within the inspector, the user selects that object in the drop-down list box.
For the title text of the window, use the same conventions that you use for a property sheet.
Apply property transactions that the user makes in a property inspector dynamically. That is, change the property value in the selected object as soon as the user makes the change in the control reflecting that property value.
Property inspectors and property sheets are not exclusive interfaces; you can include both. Each has its advantages. You can choose to display only the most common or frequently accessed properties in a property inspector and the complete set in the property sheet. You also can include multiple property inspectors, each optimized for managing certain types of objects.
As an option, you also can provide an interface for the user to change the behavior between a property sheet and a property inspector form of interaction. For example, you can provide a control on a property inspector that "locks" its view to be modal to the current object rather than tracking the selection.
When a user selects multiple objects and requests the properties for the selection, reflect the properties of all the objects in a single property sheet or property inspector rather than opening multiple windows. Where the property values differ, display the controls associated with those values using the mixed value appearance — sometimes referred to as the indeterminate state. However, when the user individually selects objects and requests their properties, you can display separate property sheet windows for each object.
More Information
For more information about displaying controls using the mixed value appearance, see Chapter 14, "Visual Design."
If your design still requires access to individual properties when the user displays the property sheet of a multiple selection, consider including a control such as a list box or drop-down list in the property window for switching between the properties of the objects in the set.
When a multiple selection includes different types of objects, include the intersection of the properties between the objects in the resulting property sheet. If the container of those selected objects treats the objects as if they were of a single type, the property sheet includes properties for that type only. For example, if the user selects text and an embedded object, such as a circle, and in that context an embedded object is treated as an element within the text stream, present only the text properties in the resulting property sheet.
When displaying properties, do not equate a multiple selection with a grouped set of objects. A group is a stronger relationship than a simple selection, because the aggregate resulting from the grouping can itself be considered an object, potentially with its own properties and operations. Therefore, if the user requests the properties of a grouped set of items, display the properties of the group or composite object. The properties of its individual members may or may not be included, depending on what is most appropriate.
Fundamentals of Designing User Interaction
Design Specifications and Guidelines