Fundamentals of Designing User Interaction - General Interaction Techniques

Transfer Operations

Transfer operations are operations that involve (or can be derived from) moving, copying, and linking objects from one location to another. For example, printing an object is a kind of transfer operation because it can be defined as copying an object to a printer.

Three components make up a transfer operation: the object to be transferred, the destination of the transfer, and the operation to be performed. You can define these components either explicitly or implicitly, depending on which interaction technique you use.

The operation defined by a transfer is determined by the destination. Because a transfer may have several possible interpretations, you can define a default operation and other appropriate operations based on information provided by the source of the transfer and the compatibility and capabilities of the destination. For example, attempting to transfer an object to a container can result in one of the following alternatives:

• Rejecting the object
• Accepting the object
• Accepting a subset or transformed form of the object (for example, extracting its content or properties but discarding its present container, or converting the object into a new type)

Most transfers are based on one of the following three fundamental operations.

There are two different methods for supporting the basic transfer interface: the command method and the direct manipulation method.

Command Method

The command method for transferring objects uses the Cut, Copy, and Paste commands. Place these commands on the Edit drop-down menu and on the shortcut menu for a selected object, and support the standard shortcut keys for these operations. You can also include toolbar buttons to support these commands.

More information

For more information about the standard shortcut keys, see Appendix B, "Keyboard Interface Summary."

To transfer an object, the user must do the following:

1. Make a selection.

2. Choose either Cut or Copy.

   The Cut command removes the selection and transfers it (or a reference to it) to the Clipboard. The Copy command duplicates the selection (or a reference to it) and transfers it to the Clipboard.

3. Navigate to the destination (and set the insertion location, if appropriate).

4. Choose a Paste command.

   The Paste command completes the transfer operation.

For example, when the user chooses Cut and Paste, remove the selection from the source and relocate it to the destination. When the user chooses Copy and Paste, insert an independent duplicate of the selection and leave the original unaffected. When the user chooses Copy and Paste Link or Paste Shortcut, insert an object at the destination that is linked to the source.

Choose a form of the Paste command that indicates how the object will be transferred into the destination. Use the Paste command by itself to indicate that the object will be transferred as native content. You can also use alternative forms of the Paste command for other possible transfers, using the following general form.

Paste [type name] [as type name | to object name]

For example, Paste Cells as Word Table, where [type name] is Cells and Word Table is the converted type name.

More information

For more information about object names, including their type name, see Chapter 11, "Integrating with the System."

The following table summarizes common forms of the Paste command.

More information

For more information about these Paste command forms and the Paste Special dialog box, see Chapter 12, "Working with OLE Embedded and Linked Objects."

Use the destination's context to determine what form(s) of the paste operation to include based on what options it can offer to the user, which in turn may depend on the available forms of the object that its source location object provides. It can also be dependent on the nature or purpose of the destination. For example, a printer defines the context of transfers to it.

Typically, you will need only Paste and Paste Special commands. The Paste command can be modified dynamically to reflect the destination's default or preferred form by inserting the transferred object — for example, as native data or as an embedded object. The Paste Special command can be used to handle any special forms of transfer. However, if the destination's context makes it reasonable to provide fast access to another specialized form of transfer, such as Paste Link, you can also include that command.

Use the destination's context also to determine the appropriate side effects of the paste operation. You may also need to consider the type of object being inserted by the paste operation and the relationship of that type to the destination. The following are some common scenarios:

• When the user pastes into a destination that supports a specific insertion location, replace the selection in the destination with the transferred data. For example, in text or list contexts, where the selection represents a specific insertion location, replace the destination's active selection. In text contexts where there is an insertion location but there is no existing selection, place the insertion point after the inserted object.
• For destinations with non-ordered or Z-ordered contexts where there is no explicit insertion point, add the pasted object and make it the active selection. Also use the destination's context to determine where to place the pasted object. Consider any appropriate user contextual information. For example, if the user chooses the Paste command from a shortcut menu, you can use the pointer's location when the mouse button is clicked to place the incoming object. If the user supplies no contextual clues, place the object at the location that best fits the context of the destination — for example, at the next grid position.
• If the new object is automatically connected ** (linked) to the active selection (for example, table data and a graph), you may insert the new object in addition to the selection and make the inserted object the new selection.

You also use context to determine whether to display an embedded or linked object as content (a view or picture of the object's internal data) or as an icon. For example, you can decide what to display based on which paste operation the user selects. The Paste Shortcut command implies pasting a link as an icon. Similarly, the Paste Special command includes options that allow the user to specify how the transferred object should be displayed. If there is no user-supplied preference, the destination application defines the default. For documents, you typically display the inserted object as an item of content in the destination container. If icons better fit the context of your application, make the default paste operation display the transferred object as an icon.

The execution of a Paste command should not affect the content of the Clipboard. This allows data on the Clipboard to be pasted multiple times, although subsequent paste operations should always result in copies of the original. However, a subsequent Cut or Copy command replaces the last entry on the Clipboard.

You can also optionally support Move To and Copy To commands. In this situation, you must also supply a dialog box that lists the possible destinations and enables the user to select a list entry.

Direct Manipulation Method

The command method is useful when a transfer operation requires the user to navigate between source and destination. However, for many transfers, direct manipulation is a natural and quick method. In a direct manipulation transfer, the user selects and drags an object to the desired location. Because this method requires motor skills that may be difficult for some users to master, avoid using it as the exclusive transfer method. The best interfaces support transfer by the command method for basic operations and transfer by direct manipulation as a shortcut.

You can support direct manipulation transfers to any visible object. The object (for example, a window or icon) need not currently be active. For example, the user can drop an object in an inactive window. The drop action activates the window. If an inactive object cannot accept a direct manipulation transfer, it (or its container) should provide feedback to the user.

The destination's context determines how the transferred object is integrated and displayed in the drop destination. A dropped object can be incorporated either as native data, an object, a partial form of the object — such as its properties — or a transformed object. You determine whether to add to or replace an existing selection based on the context of the operation, using such factors as the formats available for the object, the destination's purpose, and any user-supplied information such as the specific location that the user drops to or commands (or modes) that the user has selected. For example, an application can supply a particular type of tool for copying the properties of objects.

Default Drag-and-Drop Transfers

A user transfers an object in a default drag-and-drop operation with the primary mouse button. The operation is interpreted by what the destination defines as the appropriate default operation. As with the command method, the destination determines this based on information about the object (and the formats available for the object) and the context of the destination itself. Avoid defining a destructive operation as the default. When that is unavoidable, display a message box to confirm the user's intentions.

Using this transfer technique, the user can directly transfer objects between documents defined by your application, as well as to system resources, such as folders and printers. Support drag-and-drop operations by following the same conventions that the system supports: the user presses the primary mouse button while pointing to an object, moves the mouse while holding the button down, and then releases the button at the destination.

The most common default transfer operation is Move, but the destination can reinterpret the operation to be whatever is most appropriate. Therefore, you can define a default drag-and-drop operation to be another general transfer operation such as Copy or Link, a destination-specific command such as Print or Send To, or even a specialized form of transfer such as Copy Properties.

Nondefault Drag-and-Drop Transfers

A user transfers an object in a nondefault drag-and-drop operation with the secondary mouse button. In this case, rather than executing a default operation, the destination displays a shortcut menu when the user releases the mouse button, as shown in Figure 6.6. The shortcut menu contains the appropriate transfer completion commands.

Figure 6.6 A nondefault drag-and-drop operation

The destination always determines which transfer completion commands to include on the resulting shortcut menu, usually factoring in information about the object supplied by the source location.

The form for nondefault drag-and-drop transfer completion verbs follows similar conventions as the Paste command. Use the common transfer completion verbs — Move Here, Copy Here, and Link Here — when the object being transferred is native data of the destination. When it is not, specify the type of transfer being completed. You can also display alternative completion verbs that communicate the context of the destination; for example, a printer displays a Print Here command. For commands that support only a partial aspect or a transformation of an object, use more descriptive indicators — for example, Copy Properties Here or Transpose Here.

Use the following general form for nondefault drag-and-drop transfer commands.

[Command Name] [type name | object name] Here [as type name]

The following summarizes common forms for nondefault transfer completion commands.

More information

For more information about how to display default menu commands, see Chapter 14, "Visual Design."

Define and appropriately display one of the commands in the shortcut menu to be the default drag-and-drop command. This is the command that corresponds to dragging and dropping with the primary mouse button.

Canceling a Drag-and-Drop Transfer

When a user drags and drops an object back onto itself, interpret the action as cancellation of a direct manipulation transfer. Similarly, cancel the transfer if the user presses the ESC key during a drag transfer. In addition, include a Cancel command in the shortcut menu of a nondefault drag-and-drop action. When the user chooses this command, cancel the operation.

Differentiating Transfer and Selection When Dragging

Because dragging performs both selection and transfer operations, provide a convention that allows the user to differentiate between these operations. The convention you use depends on what is most appropriate in the current context of the object, or you can provide specialized handles for selection or transfer. The most common technique uses the location of the pointer at the beginning of the drag operation. If the pointer is within an existing selection, interpret the drag to be a transfer operation. If the drag begins outside of an existing selection, on the background's white space, interpret the drag as a selection operation.

Scrolling When Transferring by Dragging

When the user drags and drops an object from one scrollable area (such as a window, pane, or list box) to another, some tasks may require transferring the object outside the boundary of the area. Other tasks may involve dragging the object to a location not currently in view. In this latter case, it is convenient to scroll the area automatically (also known as automatic scrolling or auto-scroll) when the user drags the object to the edge of that scrollable area. You can accommodate both these behaviors by using the velocity of the dragging action. For example, if the user is dragging the object slowly at the edge of the scrollable area, you scroll the area; if the object is being dragged quickly, do not scroll.

To support this technique during a drag operation, you sample the pointer's position at the beginning of the drag each time the mouse moves, and on an application-set timer (every 100 milliseconds recommended). If you use drag-and-drop support, you do not need to set a timer. Store each value in an array large enough to hold at least three samples, replacing existing samples with later ones. Then calculate the pointer's velocity based on at least the last two locations of the pointer.

Note

Distance as implemented in this algorithm is not true Cartesian distance. This implementation uses an approximation for purposes of efficiency rather than using the square root of the sum of the squares, (sqrt((x1 - x2)^2 + (y1 - y2)^2)), which is more computationally expensive.

To calculate the velocity, sum the distance between the points in each adjacent sample and divide the total by the sum of the time elapsed between samples. Distance is the absolute value of the difference between the x and y locations, or (abs(x1 - x2) + abs(y1 - y2)). To produce the velocity, multiply this by 1024 and divide it by the elapsed time. The 1024 multiplier prevents the loss of accuracy caused by integer division.

You also predefine a hot zone along the edges of the scrollable area and a scroll time-out value. Use twice the width of a vertical scroll bar or the height of a horizontal scroll bar to determine the width of the hot zone.

During the drag operation, scroll the area if the following conditions are met: the user moves the pointer within the hot zone, the current velocity is below a certain threshold velocity, and the scrollable area is able to scroll in the direction associated with the hot zone it is in. The recommended threshold velocity is 20 pixels per second.

These conventions are illustrated in Figure 6.7.

Figure 6.7 Automatic scrolling based on velocity of dragging

The amount you scroll depends on the type of information and reasonable scrolling distance. For example, for text you typically scroll vertically one line at a time. Consider using the same scrolling granularity that is provided for the scroll bar arrows.

To support continuous scrolling, determine what scroll frequency you want to support — for example, four lines per second. After using a velocity check to initiate auto-scrolling, set a timer — for example, 100 milliseconds. When the timer expires, determine how long it has been since the last time you scrolled. If the elapsed time is greater than your scrolling frequency, scroll another unit. If not, reset your timer and check again when the timer finishes.

Transfer Feedback

Because transferring objects is one of the most common user tasks, providing appropriate feedback is an important design factor. Inconsistent or insufficient feedback can result in user confusion.

More information

For more information about designing transfer feedback, see Chapter 14, "Visual Design."

Command Method Transfers

For a command method transfer, remove the selected object visually when the user chooses the Cut command. If there are special circumstances that make removing the object visually impractical, you can instead display the selected object with a special appearance to inform the user that the Cut command was completed but that the object's transfer is pending. For example, the system displays icons in a checkerboard dither to indicate this state. You also need to restore the visual state of the object if the user chooses Cut or Copy for another object before choosing a Paste command, effectively canceling the pending Cut command. The user will expect Cut to remove a selected object, so carefully consider the impact of inconsistency if you choose this alternate feedback.

The Copy command requires no special feedback. A paste operation also requires no further feedback than that already provided by the insertion of the transferred object. However, if you did not remove the display of the object and used an alternate representation when the user chose the Cut command, you must remove it now.

Direct Manipulation Transfers

During a direct manipulation transfer operation, provide the following visual feedback for the object, the pointer, and the destination:

• Display the object with its selected appearance while the view it appears in has the focus. To indicate that the object is in a transfer state, you can optionally display the object with some additional appearance characteristics. For example, for a move operation, you can use the checkerboard dithered appearance used by the system to indicate when an icon is cut. Change this visual state based on the default completion operation supported by the destination the pointer is currently over. Retain the representation of the object at the original location until the user completes the transfer operation. This not only provides a visual cue to the nature of the transfer operation, it provides a convenient visual reference point.

• Display a representation of the object that moves with the pointer. Use a presentation that provides the user with information about how the information will appear in the destination and that does not obscure the context of the insertion location. For example, when transferring an object into a text context, it is important that the insertion point not be obscured during the drag operation. A translucent or outline representation, as shown in Figure 6.8, works well because it allows the underlying insertion location to be seen while also providing information about the size, position, and nature of the object being dragged.

  

  Figure 6.8 Outline and translucent representations for transfer operations

• The object's existing source location provides the transferred object's initial appearance, but any destination can change the appearance. Design the presentation of the object to provide feedback as to how the object will be integrated by that destination. For example, if an object will be embedded as an icon, display the object as an icon. If the object will be incorporated as part of the native content of the destination, then present the object to reflect it. For example, if a table being dragged into a document will be incorporated as a table, the representation could be an outline or translucent form of the table. On the other hand, if the table will be converted to text, display the table as a representation of text, such as a translucent presentation of the first few words in the table.

• Display the pointer appropriate to the context of the destination, usually the pointer used for inserting objects. For example, when the user drags an object into text where the object will be inserted between characters, display the usual text editing pointer (sometimes called the I-beam pointer).

• Display the interpretation of the transfer operation at the lower right corner of the pointer, as shown in Figure 6.9. No additional glyph is required for a move operation. Use a plus sign (+) when the transfer is a copy operation. Use the shortcut arrow graphic for linking.

  

  Figure 6.9 Pointers for move, copy, and link operations

• Use visual feedback to indicate the receptivity of potential destinations. You can use selection highlighting and optionally animate or display a representation of the transfer object in the destination. You can also indicate when a destination cannot accept an object by using the "no drop" pointer when the pointer is over it, as shown in Figure 6.10.

  

  Figure 6.10 A "no drop" pointer

Specialized Transfer Commands

In some contexts, a particular form of a transfer operation may be so common that introducing an additional specialized command is appropriate. For example, if copying existing objects is a frequent operation, you can include a Duplicate command. Following are some common specialized transfer commands.

Note

The Delete and Clear commands are often used synonymously. However, they are best differentiated by applying Delete to an object and Clear to the container of an object.

Shortcut Keys for Transfer Operations

Following are the defined shortcut techniques for transfer operations.

Because of the wide use of these command shortcut keys throughout the interface, do not reassign them to other commands.

More Information

For more information about reserved and recommended shortcut key assignments, see Appendix B, "Keyboard Interface Summary."

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References