Fundamentals of Designing User Interaction - General Interaction Techniques
Editing involves changing (adding, removing, replacing) some fundamental aspect about the composition of an object. Not all changes constitute editing of an object, though. For example, changing the view of a document to an outline or magnified view (which has no effect on the content of the document) is not editing. The following sections cover some of the common interface techniques for editing objects.
Editing text requires that you target the input focus at the text to be edited. For mouse input, the input focus always coincides with the pointer click or drag location. For the keyboard, the input focus is determined by using the navigation keys. In all cases, the visual indication that a text field has the input focus is the presence of the text cursor, or insertion point.
Inserting text involves the user placing the insertion point at the appropriate location and then typing. For each character typed, your application should move the insertion point one character to the right (or left, depending on the language).
If the text field supports multiple lines, the text should wordwrap; that is, the text should move to the next line automatically as the textual input exceeds the width of the text-entry area.
Overtype is an optional text-entry mode that operates similarly to the insertion style of text entry, except that you replace existing characters as new text is entered — with one character being replaced for each new character entered.
Use a block cursor that appears at the current character position to support overtype mode, as shown in Figure 6.4. This looks the same as the selection of that character and provides the user with a visual cue about the difference between the text-entry modes.
Figure 6.4 An overtype cursor
Use the INSERT key to toggle between the normal insert text-entry convention and overtype mode.
The DELETE and BACKSPACE keys support deleting text. The DELETE key deletes the character to the right of the text insertion point. The BACKSPACE key removes the character to the left. In either case, move text in the direction of the deletion to fill the gap — this is sometimes referred to as auto-joining. Do not place deleted text on the Clipboard; instead, include at least a single-level undo operation in these contexts.
For a text selection, when the user presses DELETE or BACKSPACE, remove the entire block of selected text. Delete text selections when new text is entered directly or by a transfer command. In this case, replace the selected text with the new input.
Objects may include special control points, called handles. You can use handles to facilitate certain types of operations, such as moving, sizing, scaling, cropping, shaping, or auto-filling. The type of handle you use depends on the type of object. For example, the title bar acts as a move handle for windows. The borders of the window act as sizing handles. For icons, the selected icon acts as its own move handle.
More information
For more information about the design of handles, see Chapter 14, "Visual Design."
A common form of handle is a square box placed at the edge of an object, as shown in Figure 6.5.
Figure 6.5 A graphic object with handles
When the handle's interior is solid, the handle implies that it can perform a certain operation, such as sizing, cropping, or scaling. If the handle is hollow, the handle does not currently support an operation. You can use such an appearance to indicate selection even when an operation is not available.
To be visible and easily targeted with a mouse, handles should never be smaller than the size of a resizable window border. Because handles are typically dragged only with the mouse, provide a separate mechanism for moving or resizing objects using the keyboard. For example, you can provide a property sheet where the user can view and enter values for location and size, and you can also allow the user to "nudge" an object using the arrow keys.
A transaction is a unit of change to an object. The granularity of a transaction may span from the result of a single operation to that of a set of multiple operations. In an ideal model, transactions are applied immediately, and there is support for rolling back, or undoing, transactions. Because there are times when this is not practical, specific interface conventions have been established for committing transactions. If there are pending transactions in a window when it is closed, always prompt the user to ask whether to apply or discard the transactions.
Transactions can be committed at different levels, and a commitment made at one level may not imply a permanent change. For example, the user may change the font properties of a text selection, but these text changes may require saving the document file before the changes are permanent.
Use the following commands for committing transactions at the file level.
| File Level Transactions | ||
|---|---|---|
| Command | Function | |
| Save | Saves all interim edits, or checkpoints, and begins a new editing session. If the document has not been named, this command prompts the user for a name, the same as the Save As command. | |
| Save As | Saves the file (with all interim edits) to a new file name and begins a new editing session. | |
| Close | Prompts the user to save any uncommitted edits. If confirmed, the interim edits are saved and the window is removed. | |
Note
Use the Save command in contexts where committing file transactions apply to transactions for an entire file, such as a document, and are committed at one time. It may not necessarily apply to transactions committed on an individual basis, such as record-oriented processing.
On a more granular level, you can use the following commands for handling common transactions within a file.
| Commands for Common Transactions | ||
|---|---|---|
| Command | Function | |
| Repeat | Duplicates the last/latest user transaction. | |
| Undo | Reverses the last, or specified, transaction. | |
| Redo | Restores the most recent, or specified, "undone" transaction. | |
| OK | Commits any pending transactions and removes the window. | |
| Apply | Commits any pending transactions, but does not remove the window. | |
| Cancel | Discards any pending transactions and removes the window. | |
Following are the recommended commands for handling process transactions.
| Commands for Process Transactions | ||
|---|---|---|
| Command | Function | |
| Pause | Suspends a process. | |
| Resume | Resumes a suspended process. | |
| Stop | Halts a process. | |
Note
Although you can use the Cancel command to halt a process, Cancel implies that the state will be restored to what it was before the process was initiated.
Defining and organizing the properties of an application's components are a key part of evolving toward a more data-centered design. Commands such as Options, Info, Summary Info, and Format often describe features that can be redefined as properties of a particular object (or objects). The Properties command is the common command for accessing the properties of an object; when the user chooses this command, display a secondary window with the properties of the object.
More Information
For more information about property sheets, see Chapter 9, "Secondary Windows."
Defining how to provide access to properties for visible or easily identifiable objects — such as a selection of text, cells, or drawing objects — is straightforward. It may be more difficult to define how to access properties of less tangible objects, such as paragraphs. In some cases, you can include these properties by implication. For example, requesting the properties of a text selection can also provide access to the properties of the paragraph in which the text selection is included. Another way to provide access to an object's properties is to create a representation of the object. For example, the properties of a page could be accessed through a graphic or other representation of the page in a special area (for example, the status bar) of the window.
Yet another technique to consider is to include specific property entries on the menu of a related object. For example, the shortcut menu of a text selection could include a menu entry for a paragraph. Or consider using the cascading submenu of the Properties command for individual menu entries, but only if the properties are not easily made accessible otherwise. Adding entries for individual properties can easily clutter a menu.
More information
For more information about shortcut menus, see Chapter 8, "Menus, Controls, and Toolbars."
The Properties command is not the only way to provide access to the properties of an object. For example, folder views display certain properties of objects stored in the file system. In addition, you can use toolbar controls to display properties of selected objects.
Fundamentals of Designing User Interaction
Design Specifications and Guidelines