Windows Interface Components - Windows

Basic Window Operations

The basic operations for a window include activating and deactivating, opening and closing, moving, sizing, scrolling, and splitting. The following sections describe these operations.

Activating and Deactivating Windows

While the system supports the display of multiple windows, the user generally works within a single window at a time. This window is called the active window. The active window is typically at the top of the window Z order. Its title bar, displayed in the active window title color, makes it visually distinct. All other windows are inactive with respect to the user's input; that is, while other windows may be involved in ongoing processes, only the active window receives the user's input. The title bar of an inactive window displays the system inactive window color. Your application can query the system for the current values for the active title bar color and the inactive title bar color, but this should be necessary only if your application draws its own window frames.

More Information

For more information about using the GetSysColor function to access the COLOR_ACTIVECAPTION and COLOR_INACTIVECAPTION constants, see the Microsoft Platform SDK on the MSDN Online Web site at https://msdn.microsoft.com/ui/guide/sdk.asp.

The user activates a primary window by switching to it; this inactivates any other primary windows. To activate a window with the mouse, the user clicks any part of the window, including its interior. If the window is minimized, the user clicks the button representing the window in the taskbar. To switch between primary windows using the keyboard, the user can press ALT+TAB. To switch between primary windows in reverse order, the user can press SHIFT+ALT+TAB. The system also supports ALT+ESC for switching between windows. The reactivation of a window should not affect any pre-existing selection within it; the selection and focus are restored to the previously active state.

When the user reactivates a primary window, the window and all its secondary windows come to the top of the window order and maintain their relative positions. If the user activates a secondary window, its primary window comes to the top of the window order along with the primary window's other secondary windows.

When a window becomes inactive, hide the selection feedback (for example, display of highlighting or handles) of any selection within it to prevent confusion over which window is receiving keyboard input. A direct manipulation transfer, such as a drag-and-drop operation, is an exception. Here, you can display transfer feedback if the pointer is over the window during the drag operation, but do not activate the window unless the user releases the mouse button in that window.

Opening and Closing Windows

When the user opens a primary window, include an entry for it on the taskbar. If the window has been opened and closed previously, restore the window to its size and position when it was last closed. If possible and appropriate, reinstate the other related view information, such as selection state, scroll position, and type of view. When opening a primary window for the first time, open it to a reasonable default size and position as best defined by the object or application. For details about storing state information in the system registry, see Chapter 11, "Integrating with the System."

Note

An entry on the taskbar should be included only for primary windows, not for secondary windows.

Because display resolution and orientation vary, your software should not assume a fixed display size, but rather adapt to the shape and size defined by the system. If you use standard system interfaces, the system automatically places your windows relative to the current display configuration.

When a window is reopened or restored, always verify that the screen location is valid in the current resolution. If the window's title bar would not be visible based on the current display, move the window until the title bar is visible.

More Information

The SetWindowPlacement function is an example of a system interface that automatically places windows correctly relative to the current display. For more information about this function, see the Microsoft Platform SDK on the MSDN Online Web site at https://msdn.microsoft.com/ui/guide/sdk.asp.

Opening the primary window activates that window and places it at the top of the window order. If the user tries to open a primary window that is already open on the same desktop, activate the existing window using the following recommendations. If the existing window is minimized, restore it when you activate it.

Recommended Actions for Repeating an Open Operation
File type	Action
Document or data file	Activate the existing window of the object and display it at the top of the window Z order.
Application file	Display a message box indicating that an open window of that application already exists and offer the user the option to switch to the open window or to open another window. Either choice activates the selected window and brings it to the top of the window Z order.

The user closes a window by clicking the Close button in the title bar or by clicking the Close command on the window's shortcut menu. Although the system supports double-clicking the title bar icon as a shortcut for closing the window to remain compatible with previous versions of Windows, avoid documenting it as the primary way to close a window. Instead, document the Close button.

If your application does not automatically save changes, when the user clicks the Close command, display a message asking whether to save any changes, discard any changes, or cancel the close operation before closing the window. If there are no pending transactions, just close the window. Follow this same convention for any other command that results in closing the primary window (for example, Exit or Shut Down).

More Information

For more information about supporting the Close command, see Chapter 6, "General Interaction Techniques."

When the primary window is closed, you should typically close any of its dependent secondary windows as well. The design of your application determines whether closing the primary window also ends the application processes. For example, closing the window of a text document typically halts any application code or processes remaining for inputting or formatting text. However, closing the window of a printer has no effect on the jobs in the printer's queue. In both cases, closing the window removes its entry from the taskbar.

Moving Windows

The user can move a window either by dragging its title bar with the mouse or by clicking the Move command on the window's shortcut menu. On most configurations, an outline representation moves with the pointer during the operation, and the window is displayed again in the new location after the move is completed. (The system also provides a display property setting that redraws the window dynamically as it is moved.) After clicking the Move command, the user can use the keyboard to move the window by using the arrow keys, then by pressing enter to end the operation and establish the window's new location. Never allow the user to reposition a window so that it is inaccessible.

A window need not be active before the user can move it. The action of moving the window implicitly activates it.

Moving a window may clip or reveal information shown in the window. In addition, activation can affect the view state of the window — for example, the current selection can be displayed. However, when the user moves a window, avoid making any changes to the content being viewed in that window.

Resizing Windows

Make your primary windows resizable unless the information displayed in the window is fixed or cannot be scaled to provide the user with more information, such as in the Windows Calculator program. The system provides several conventions that support user resizing of a window.

Sizing Borders

The user resizes a primary window by dragging the sizing border at the edge of a window with the mouse or by clicking the Size command on the window's menu. An outline representation of the window moves with the pointer. (On some configurations, the system may include a display option to dynamically redraw the window as it is sized.) After clicking the Size command, the user can use the keyboard to resize the window by using the arrow keys, then pressing the enter key.

A window does not need to be active before the user can resize it. The action of sizing the window implicitly makes it active, and it remains active after the sizing operation.

When the user reduces the size of a window, you must determine how to display the information viewed in that window. Use the context and type of information to help you choose your approach. Typically, the best approach is to redisplay the information using the new size. You may want to consider using different methods, such as wrapping or scaling the information, unless readability or maintaining the structural relationship of the information is important. In that case, you may want to fix or clip the information.

Although the size of a primary window can vary based on the user's preference, you can define a window's maximum size. When defining this size, consider the reasonable usage within the window and the size and orientation of the screen. Avoid setting a maximum size smaller than the screen's working area unless there is no benefit to the user in increasing the size of the window.

Maximizing Windows

Although the user can manually resize a window to its maximum size, the Maximize command optimizes this operation. Include this command on a window's shortcut menu and as the Maximize command button in the title bar of the window.

Maximizing a window increases the size of the window to its largest, optimum size. The system default setting for the maximum size is as large as the display, excluding the space used by the taskbar (or other application-defined desktop toolbars). However, you can define the size to be less than or, in some cases, more than the default dimensions.

When the user maximizes a window, replace the Maximize button with a Restore button. Then, disable the Maximize command and enable the Restore command on the shortcut menu for the window.

Minimizing Windows

Minimizing a window reduces it to its smallest size. To support this command, include it on the shortcut menu for the window and as the Minimize command button in the title bar of the window.

For primary windows, minimizing removes the window from the screen but leaves its entry on the taskbar. To minimize a window, the user clicks the Minimize command from the window's shortcut menu or the Minimize command button on the title bar.

When the user minimizes a window, disable the Minimize command on the shortcut menu and enable the Restore command.

Restoring Windows

Support the Restore command to restore a window to its previous size and position after the user has maximized or minimized the window. For maximized windows, enable this command on the window's shortcut menu, and replace the Maximize button with the Restore button in the title bar of the window.

For minimized windows, enable the Restore command on the shortcut menu of the window. The user restores a minimized primary window to its former size and position by clicking the button on the taskbar that represents the window, selecting the Restore command on the shortcut menu of the window's taskbar button, or by pressing ALT+TAB (or SHIFT+ALT+TAB).

Size Grip

When you define a sizable window, you can include a size grip. A size grip is a special handle for sizing a window. It is not exclusive to the sizing border. To size the window, the user drags the grip and the window resizes, following the same conventions as the sizing border.

Always locate the size grip in the lower right corner of the window. Typically, this means you place the size grip at the right end of a horizontal scroll bar or the bottom of a vertical scroll bar. However, if you include a status bar in the window, display the size grip at the far corner of the status bar instead. Never display the size grip in both locations at the same time.

More Information

For more information about the use of the size grip in a status bar, see Chapter 8, "Menus, Controls, and Toolbars."

Scrolling Windows

When the information viewed in a window exceeds the size of that window, the window should support scrolling. Scrolling enables the user to view portions of the object that are not currently visible in a window. Scrolling typically does not affect the input focus or selection in the window.

Scrolling is commonly supported through the use of a scroll bar. A scroll bar is a rectangular control consisting of scroll arrow buttons, a scroll box, and a scroll bar shaft, as shown in Figure 7.5.

Figure 7.5 A scroll bar and its components

More Information

For more information about scrolling, see Chapter 6, "General Interaction Techniques."

You can include a vertical scroll bar, a horizontal scroll bar, or both. Align a scroll bar with the vertical or horizontal edge of the window orientation it supports. If the content is never scrollable in a particular direction, do not include a scroll bar for that direction.

More Information

Scroll bars are also available as separate window components. For more information about scroll bar controls, see Chapter 8, "Menus, Controls, and Toolbars."

The common practice is to display scroll bars if the view requires scrolling under any circumstances. If the window becomes inactive or is resized so that its contents do not require scrolling, you should continue to display the scroll bars. Removal of the scroll bars when the window is inactive may display more content and provide feedback about the state of the window, but it also has a drawback. A user must then take an extra step and explicitly activate the window to display the scroll bars and use them. Consistently displaying scroll bars provides a more stable environment.

Scroll Arrows

Scroll arrow buttons appear at each end of a scroll bar, pointing in opposite directions away from the center of the scroll bar. The scroll arrows point in the direction that the window moves over the data. When the user clicks a scroll arrow, the data in the window moves, revealing information in the direction of the arrow in appropriate increments. The granularity of the increment depends on the nature of the content and context, but it is typically based on the size of a standard element. For example, for vertical scrolling you can use one line of text or one row for spreadsheets. You can also use an increment based on a fixed unit of measure. Whichever convention you choose, maintain the same scrolling increment throughout a window. The objective is to include an increment that provides smooth but efficient scrolling. When a window cannot be scrolled any further in a particular direction, disable the scroll arrow for that direction.

Note

The default system support for scroll bars does not disable the scroll arrow buttons when the region or area is no longer scrollable in this direction. However, it does provide support for you to disable the scroll arrow button under the appropriate conditions.

When scroll arrow buttons are pressed and held, they exhibit a special auto-repeat behavior. This action causes the window to continue scrolling in the associated direction as long as the pointer remains over the arrow button. If the pointer is moved off the arrow button while the user presses the mouse button, the auto-repeat behavior stops and does not continue unless the pointer is moved back over the arrow button.

Scroll Box

The scroll box, sometimes referred to as the elevator, thumb, or slider, moves along the scroll bar to indicate how far the visible portion is from the top (for vertical scroll bars) or from the left edge (for horizontal scroll bars). For example, if the current view is in the middle of a document, the scroll box in the vertical scroll bar is displayed in the middle of the scroll bar.

The size of the scroll box can vary to reflect the difference between what is visible in the window and the entire contents of the file, as shown in Figure 7.6.

Figure 7.6 The proportional relationship between scroll box and content (click to enlarge image)

For example, if the content of the entire document is visible in a window, the scroll box extends the entire length of the scroll bar, and the scroll arrows are disabled. Make the minimum size of the scroll box no smaller than the width of a window's sizing border.

The user can also scroll a window by dragging the scroll box. Update the view continuously as the user moves the scroll box. If you cannot support scrolling at a reasonable speed, you can scroll the information at the end of the drag operation as an alternative.

If the user starts dragging the scroll box and then moves the pointer outside of the scroll bar, the scroll box returns to its original position. The distance the user can move the pointer off the scroll bar before the scroll box returns to its original position is proportional to the width of the scroll bar. If dragging ends at this point, the scroll action is canceled — that is, no scrolling occurs. However, if the user moves the pointer back within the scroll-sensitive area, the scroll box returns to tracking the pointer movement. This behavior allows the user to scroll without having the pointer remain within the scroll bar and to selectively cancel the initiation of a drag-scroll operation.

Dragging the scroll box to the end of the scroll bar implies scrolling to the end of that dimension, but it does not always mean that the area cannot be scrolled further. If your application's document structure extends beyond the data itself, you can interpret dragging the scroll box to the end of its scroll bar as moving to the end of the data rather than to the end of the structure. For example, a typical spreadsheet extent exceeds the data in it — that is, the spreadsheet may have 65,000 rows, with data only in the first 50 rows. This means you can implement the scroll bar so that dragging the scroll box to the bottom of the vertical scroll bar scrolls to the last row containing data rather than to the last row of the spreadsheet. The user can use the scroll arrow buttons to scroll further to the end of the structure.

This situation also illustrates why disabling the scroll arrow buttons can provide important feedback so that the user can distinguish between scrolling to the end of the data and scrolling to the end of the extent or structure. In the example of the spreadsheet, when the user drags the scroll box to the end of the scroll bar, the arrow would still be shown as enabled because the user can still scroll further, but it would be disabled when the user scrolls to the end of the spreadsheet.

Scroll Bar Shaft

The scroll bar shaft not only provides a visual context for the scroll box, it also serves as part of the scrolling interface. Clicking in the scroll bar shaft should scroll the view in the direction of the click a distance equivalent to the visible area. For example, if the user clicks in the shaft below the scroll box in a vertical scroll bar, scroll the view a distance equivalent to the height of the view. Where possible, allow overlap from the previous view, as shown in Figure 7.7. For example, if the user clicks below the scroll box, the bottom line becomes the top line of the scrolled view. The same conventions apply to clicking above the scroll box and to horizontal scrolling. These conventions provide the user with a common reference point.

Figure 7.7 Scrolling with the scroll bar shaft (click to enlarge image)

Pressing and holding the primary mouse button with the pointer in the shaft auto-repeats the scrolling action. If the user moves the pointer outside the scroll-sensitive area while pressing the button, the scrolling action stops. The user can resume scrolling by moving the pointer back into the scroll bar area. (This behavior is similar to the effect of dragging the scroll box.)

Automatic Scrolling

The techniques discussed in previous sections describe explicit methods of scrolling. However, the user can also scroll as a secondary result of another action. This type of scrolling is called automatic scrolling. Support automatic scrolling in the following situations:

• When the user begins or adjusts a selection and drags it past the edge of the scroll bar or window, scroll the area in the direction of the drag.
• When the user drags an object and approaches the edge of a scrollable area, scroll the area following the recommended auto-scroll conventions covered in Chapter 6, "General Interaction Techniques." Base the scrolling increment on the context of the destination and, if appropriate, on the size of the object being dragged.
• When the user enters text with the keyboard at the edge of a window or moves or copies an object into a location at the edge of a window, the view should scroll to allow the user to focus on the inserted information. The amount to scroll depends on the context. For example, for text, vertically scroll a single line at a time. When scrolling horizontally, scroll in units greater than a single character to prevent continuous or uneven scrolling. Similarly, when the user transfers a graphic object near the edge of the view, base scrolling on the size of the object.
• If an operation results in a selection or moves the cursor, scroll the view to display the new selection and input focus. For example, for a Find command that selects a matching object, scroll the object into view; typically, the user wants to focus on that location. In addition, other forms of navigation may cause scrolling. For example, completing an entry field in a form may result in navigating to the next field. In this case, if the field is not visible, the form can scroll to display it.
• When the user clicks a hyperlink linked to a location within the same document, scroll the document so that the new location (the hyperlink anchor) is in view.

Keyboard Scrolling

Use navigation keys to support scrolling with the keyboard. When the user presses a navigation key, the cursor moves to the appropriate location. For example, in addition to moving the cursor, pressing arrow keys at the edge of a scrollable area scrolls in the corresponding direction. Similarly, the PAGE UP and PAGE DOWN keys are comparable to clicking in the scroll bar shaft, but they also move the cursor.

More Information

For more information about using the keyboard for scrolling, see the Microsoft Accessibility Web site at https://microsoft.com/enable/products/keyboard.htm.

Optionally, you can use the SCROLL LOCK key to facilitate keyboard scrolling. In this case, when the SCROLL LOCK key is toggled on and the user presses a navigation key, scroll the view without affecting the cursor or selection.

Placing Adjacent Controls

It is sometimes convenient to locate controls or status bars adjacent to a scroll bar and to position the end of the scroll bar to accommodate them. Take care when placing adjacent elements; too many can make it difficult for users to scroll, particularly if you reduce the scroll bar too much. If you need a large number of controls, consider using a conventional toolbar instead.

More Information

For more information about toolbars, see Chapter 8, "Menus, Controls, and Toolbars."

Splitting Windows

A window can be split into two or more separate viewing areas, which are called panes. For example, a split window allows the user to examine two parts of a document at the same time. You can also use a split window to display different, yet simultaneous, views of the same information, as shown in Figure 7.8.

Figure 7.8 A split window (click to enlarge image)

While you can use a split window to view the contents of multiple files or containers at the same time, displaying these in separate windows typically allows the user to better identify the files as individual elements. When you need to present views of multiple files as a single task, consider window management techniques such as those described in Chapter 10, "Window Management."

The panes that appear in a split window can be implemented either as part of a window's basic design or as a user-configurable option. To support splitting a window that is not pre-split by design, include a split box. A split box is a special control placed adjacent to the end of a scroll bar that splits or adjusts the split of a window. The split box should be just large enough for the user to successfully target it with the pointer; the default size of a size handle, such as the window's sizing border, is a good guideline. Locate the split box at the top of the up arrow button of the vertical scroll bar, as shown in Figure 7.9, or to the left of the left arrow button of a horizontal scroll bar.

Figure 7.9 Split box location (click to enlarge image)

The user splits a window by dragging the split box to the desired position. When the user positions the hot spot of the pointer over a split box, change the pointer's image to provide feedback and help the user target the split box. While the user drags the split box, move a representation of the split box and split bar with the pointer, as shown in Figure 7.10.

Figure 7.10 Moving the split bar (click to enlarge image)

At the end of the drag, display a visual separator, called the split bar, that extends from one side of the window to the other, defining the edge between the resulting windows. The minimum size for the split bar should be the same as the current setting for the window sizing borders. This allows you to adjust appropriately when a user adjusts size borders. If you display the split box after the split operation, place it adjacent to the split bar.

You can support dragging the split bar (or split box) to the end of the scroll bar to close the split. Optionally, you can also support double-clicking as a shortcut for splitting the window at some default location (for example, in the middle of the window or at the last split location) or for removing the split. This technique works best when the resulting window panes display peer views. It may not be appropriate when the design of the window requires that it always be displayed as split or for some types of specialized views.

To provide a keyboard interface for splitting the window, include a Split command on the window or on the menu for the current view. When the user clicks the Split command, split the window in the middle or in a context-defined location. Support arrow keys for moving the split box up or down; pressing the enter key sets the split at the current location. Pressing the ESC key cancels the split mode. When the window is split, change the Split command to Remove Split.

You can also use other commands to create a split window. For example, you can define specialized views that, when selected by the user, split a window to a fixed or variable set of panes. Similarly, you can enable the user to remove the split of a window by closing a view pane or by selecting another view command.

When the user splits a window, add scroll bars if the resulting panes require scrolling. In addition, you may need to scroll the information in panes so that the split bar does not obscure the content over which it appears. Use a single scroll bar, at the appropriate side of the window, for a set of panes that scroll together. However, if each pane requires independent scrolling, a scroll bar should appear in each one for that purpose. For example, the vertical scroll bars of a set of panes in a horizontally split window are typically controlled separately.

When you use split window panes to provide separate views, independently maintain each pane's view properties, such as view type and selection state. Display only the selection in the active pane. However, if the selection state is shared across the panes, display a selection in all panes and support selection adjustment across panes.

When a window is closed, you should save the window's split state (that is, the number of splits, the place where they appear, the scrolled position in each split, and its selection state) as part of the view state information for that window so that it can be restored the next time the window is opened. However, if the user's task more frequently uses the non-split view, you can restore the window to its non-split view.

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References