Fundamentals of Designing User Interaction - General Interaction Techniques

Selection

Selection is the primary means by which the user identifies objects in the interface. Consequently, the basic model for selection is one of the most important aspects of the interface.

Selection typically involves an action that the user takes to identify an object. This is known as an explicit selection. Once the object is selected, the user can specify an action for the object.

In some situations, the identification of an object can be derived by inference or implied by context. An implicit selection works most effectively where the association of object and action is simple and visible. For example, when the user drags a scroll box, the user selects and moves the scroll box at the same time. Implicit selection may result from the relationships of a particular object. For example, selecting a character in a text document may implicitly select the paragraph of which the character is a part.

A selection can consist of a single object or multiple objects. Multiple selections can be contiguous or disjoint. A contiguous selection set is made up of objects that are logically adjacent to each other, also known as a range selection. A disjoint selection set is made up of objects that are spatially or logically separated.

Multiple selections can also be classified as homogeneous, where all objects in the selection reflect the same type or same property settings, or heterogeneous, where they differ. Even a homogeneous selection might include certain aspects that are heterogeneous. For example, a text selection that includes bold and italic text can be considered homogeneous with respect to the basic object type (characters), but heterogeneous with respect to the values of its font properties. The homogeneity or heterogeneity of a selection can affect what operations or properties you expose for the objects in the selection.

Selection Feedback

Always provide visual feedback for explicit selections when the user makes the selection, so that the user can see the effect of the selection operation. Display the appropriate selection appearance for each object included in the selection set. The form of selection appearance depends on the object and its context.

More information

For more information about how to visually render the selection appearance of an object, see Chapter 14, "Visual Design." For more information about how the context of an object can affect its selection appearance, see Chapter 12, "Working with OLE Embedded and Linked Objects."

You may not need to provide immediate selection feedback for implicit selection; you can often indicate the effects of implicit selection in other ways. For example, when the user drags a scroll box, the scroll box moves with the pointer. Similarly, if the effect of selecting a word in a paragraph implicitly selects the paragraph, you would not use selection appearance on the entire paragraph, but rather reflect the implicit selection by including the paragraph's properties when the user chooses the Properties command.

Scope of Selection

The scope of a selection is the area, extent, or region within which any other selections are considered to be part of the same selection set. For example, you can select two document icons in the same folder window. However, the selection of these icons is independent of the selection of the window's scroll bar, a menu, the window itself, or selections made in other windows. So, the selection scope of the icons is the area viewed through that window. Selections in different scopes are independent of each other. For example, selections in one window are typically independent of selections in other windows. Their windows define the scope of each selection independently. The scope of a selection is important because you use it to define the available operations for the selected items and how the operations are applied.

Hierarchical Selection

Range selections typically include objects at the same level. However, you can also support a user to elevate a range selection to the next higher level if that level extends beyond the immediate containment of the object (but is within the same window). When the user adjusts the range back within the containment of the start of the range, return the selection to the original level. For example, extending a selection from within a cell in a table to the next cell, as shown in Figure 6.1, should elevate the selection from the character level to the cell level. Adjusting the selection back within the cell should reset the selection to the character level.

Figure 6.1 Hierarchical selection

Mouse Selection

Selection with the mouse relies on the basic actions of clicking and dragging. In general, clicking selects a single item or location. Dragging selects a single range consisting of all objects logically included from the button-down to the button-up point. If you also support dragging for object movement, use keyboard-modified mouse selection or region selection to support multiple selection.

Basic Selection

Support user selection using either mouse button. When the user presses the mouse button, establish the starting point, or anchor point, of a selection. If, while pressing the mouse button, the user drags the mouse, extend the selection to the object nearest the hot spot of the pointer. If, while continuing to hold the mouse button down, the user drags the mouse within the selection, reduce the selection to the object nearest to the pointer. Tracking the selection with the pointer while the user continues to hold the mouse button down allows the user to adjust a range selection dynamically. Use appropriate selection feedback to indicate the objects included in the selection.

More information

For more information about the appearance of selection feedback, see Chapter 14, "Visual Design."

The release of the primary mouse button ends the selection operation and establishes the active end of the selection. If the user presses the secondary mouse button to make a selection, display the shortcut menu for the selection when the user releases the mouse button.

More information

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

The most common form of selection optimizes for the selection of a single object or a single range of objects. In such a case, creating a new selection within the scope of an existing selection (for example, within the same area of the window) cancels the selection of the previously selected objects. This allows simple selections to be created quickly and easily.

When using this technique, reset the selection when the user presses the mouse button and the pointer (hot spot) is outside, not on, any existing selection. If the pointer is over a selected item, however, don't cancel the selection. Instead, determine the appropriate result according to whether the user pressed the primary or secondary mouse button.

If the user presses the primary mouse button and the pointer does not move from the button-down point, the effect of releasing the mouse button is determined by the context of the selection. You can support whichever of the following best fits the nature of the user's task:

• The result may have no effect on the existing selection. This is the most common and safest effect.
• The object under the pointer may receive a special designation or distinction — for example, it can become the next anchor point, or the release of the mouse button can create a subselection.
• The selection can be reset to be only the object under the pointer.

If the user presses the secondary mouse button, the selection is not affected, but the shortcut menu for the selection is displayed.

Although selection is typically done by positioning the pointer over an object, it may be inferred based on the logical proximity of an object to a pointer. For example, when selecting text, the user can place the pointer on the blank area beyond the end of the line; the resulting selection is inferred as being the end of the line.

Selection Adjustment

Selections are adjusted (elements added to or removed from the selection) using keyboard modifiers with the mouse. The CTRL key is the disjoint, or toggle, modifier. If the user presses the CTRL key while making a new selection, preserve any existing selection within that scope and reset the anchor point to the new mouse button-down point. Toggle the selection state of the object under the pointer — that is, if it is not selected, select it; if it is already selected, cancel it. Disjoint selection techniques may not apply to all situations where you support selection.

If a selection modified by the CTRL key is made by dragging, the selection state is applied for all objects included by the drag operation (from the anchor point to the current pointer location). This means that if the first item included during the drag operation is not selected, select all objects included in the range. If the first item included was already selected, cancel it and all the objects included in the range regardless of their original state.

For example, the user can make an initial selection by dragging.

The user can then press the CTRL key and drag to create a disjoint selection, resetting the anchor point.

The user must press the CTRL key before using the mouse button for a disjoint (toggle) selection. After a disjoint selection is initiated, it continues until the user releases the mouse button (even if the user releases the CTRL key before releasing the mouse button).

The SHIFT key adjusts (or extends) a single selection or range selection. When the user presses the mouse button while holding down the SHIFT key, reset the active end of a selection from the anchor point to the location of the pointer. Continue tracking the pointer, resetting the active end as the user drags, similar to a simple range drag selection. When the user releases the mouse button, the selection operation ends. You should then set the active end to the object nearest to the mouse button release point. Do not reset the anchor point. It should remain at its current location.

Only the selection made from the current anchor point is adjusted. Any other disjoint selections are not affected unless the extent of the selection overlaps an existing disjoint selection.

The effect on the selection state of a particular object is based on the first item included in the selection range. If the first item is already selected, select (do not toggle the selection state of) all objects included in the range; otherwise, cancel (do not toggle the selection state of) the selection of the objects included.

The user must press and hold down the SHIFT key before pressing the mouse button for the action to be interpreted as adjusting the selection. When the user begins adjusting a selection by pressing the SHIFT key, continue to track the pointer and adjust the selection (even if the user releases the modifier key) until the user releases the mouse button.

Pressing the SHIFT modifier key always adjusts the selection from the current anchor point. This means the user can always adjust the selection range of a single selection or a CTRL key_modified disjoint selection. For example, the user can make a range selection by dragging.

The same result can be accomplished by making an initial selection.

The user can adjust the selection with the SHIFT key and dragging.

The following sequence illustrates how the user can use the SHIFT key and dragging to adjust a disjoint selection. The user makes the initial selection by dragging.

The user presses the CTRL key and drags to create a disjoint selection.

The user can then extend the disjoint selection using the SHIFT key and dragging. This adjusts the selection from the anchor point to the button-down point and tracks the pointer to the button-up point.

Figure 6.2 shows how these same techniques can be applied within a spreadsheet.

Figure 6.2 Selection within a spreadsheet

Figure 6.3 shows how these same techniques can be applied to object selection.

Figure 6.3 Selection of objects

The following summarizes the mouse selection operations.

Mouse Selection Operations
Operation	Mouse action
Select object (range of objects)	Click (drag)
Make disjoint selection of noncontiguous objects (range of objects)	CTRL+click (drag)
Adjust current selection to object (or range of objects)	SHIFT+click (drag)

More Information

For more information about the mouse interface, including selection behavior, see Appendix A, "Mouse Interface Summary."

Region Selection

In Z-ordered, or layered, contexts, in which objects may overlap, user selection can begin on the background (sometimes referred to as white space). To determine the range of the selection in such cases, a bounding outline (sometimes referred to as a marquee) is drawn. The outline is typically a rectangle, but other shapes (including free-form outline) are possible.

When the user presses the mouse button and moves the pointer (a form of selection by dragging), display the bounding outline, as follows.

You set the selection state of objects included in the outline by using the selection guidelines described in the previous sections, including operations that use the SHIFT and CTRL modifier keys.

You can use the context of your application and the user's task to determine whether an object must be totally enclosed or only intersected by the bounding region to be affected by the selection operation. Always provide good selection feedback during the operation to communicate to the user which method you support. When the user releases the mouse button, remove the bounding region, but retain the selection feedback.

Auto-Selection

Windows also supports a form of automatic selection known as Web-style or hover selection. When the user positions the pointer over an object and pauses briefly for a system-defined time-out, the object is selected, enabling the user to click once to carry out an action on the object.

You can use hover selection to simplify selecting and activating items or to emulate Web-style interfaces. If you use this form of selection, always provide feedback to cue the user about the difference in functionality, such as the visual feedback recommended for displaying links. Also provide audio feedback by playing the system selection sound. When using hover selection to support the selection of non_text-based objects, such as icons, check to see whether the current system setting supports conventional selection or hover selection. Hover selection is automatically supported for the system-supplied List View controls when the user sets this option in Control Panel.

More information

For more information about the mouse interface, including selection behavior, see Appendix A, "Mouse Interface Summary."

Keyboard Selection

When keyboard selection is used, selected objects are defined by the input focus. The input focus can be an insertion point, a dotted outline box, or some other visual indication of where the user is directing keyboard input.

More Information

For more information about input focus, see Chapter 14, "Visual Design."

In some contexts, selection may be implicit with navigation. When the user presses a navigation key, move the input focus to the location (as defined by the key) and automatically select the object at that location.

In other contexts, it may be more appropriate to move the input focus and require the user to make an explicit selection with the Select key. The recommended keyboard Select key is the spacebar, unless this assignment directly conflicts with the specific context — in which case, you can use CTRL+SPACEBAR. (If this conflicts with your software, define another key that best fits the context.) In some contexts, pressing the Select key may also cancel the selection of objects; in other words, it will toggle the selection state of an object.

Contiguous Selection

In text contexts, the user moves the insertion point to the desired location by using the navigation keys. Set the anchor point at this location. When the user presses the SHIFT key with any navigation key (or navigation key combination, such as CTRL+END), set that location as the active end of the selection, and select all characters between the anchor point and the active end. (Do not move the anchor point.) If the user presses a subsequent navigation key, cancel the selection and move the insertion point to the appropriate location defined by the key. If the user presses the LEFT ARROW or RIGHT ARROW keys, move the insertion point to the end of the former selection range. If UP ARROW or DOWN ARROW are used, move the insertion point to the previous or following line at the same relative location.

You can use this technique in other contexts, such as lists, where objects are logically contiguous. However, in such situations, the selection state of the objects logically included from the anchor point to the active end depend on the selection state of the object at, or first traversed from, the anchor point. For example, if the object at the anchor point is selected, then select all the objects in the range regardless of their current state. If the object at the anchor point is not selected, cancel the selection of all the items in the range.

Disjoint Selection

You use the Select key for supporting disjoint selections. The user uses navigation keys or navigation keys modified by the SHIFT key to establish the initial selection. The user can then use navigation keys to move to a new location and subsequently use the Select key to create an additional selection.

In some situations, you may prefer to optimize for selection of a single object or single range. In such cases, when the user presses a navigation key, reset the selection to the location defined by the navigation key. Creating a disjoint selection requires supporting the Add mode key (SHIFT+F8). In this mode, when the user presses navigation keys, you move the insertion point without affecting the existing selections or the anchor point. When the user presses the Select key, toggle the selection state at the new location and reset the anchor point to that object. At any point, the user can use the SHIFT+navigation key combination to adjust the selection from the current anchor point.

When the user presses the Add mode key a second time, toggle out of the mode, preserving the selections the user created in Add mode. But now, if the user makes any new selections within that selection scope, return to the single selection optimization — canceling any existing selections — and reset the selection to be only the new selection.

Selection Shortcuts

Double-clicking with the primary mouse button is a shortcut for the default operation of an object. In text contexts, it is commonly assigned as a shortcut to select a word. When supporting this shortcut, select the word and the space following the word, but not the punctuation marks.

Note

Double-clicking as a shortcut for selection applies only to text. In other contexts, double-clicking may perform other operations.

You can define additional selection shortcuts or techniques for specialized contexts. For example, selecting a column label may select the entire column. Because shortcuts cannot be generalized across the user interface, however, do not use them as the only way to perform a selection.

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References