Fundamentals of Designing User Interaction - General Interaction Techniques

Common Conventions for Supporting Operations

There are many ways to support operations for an object, including direct manipulation of the object or its control point (handle), menu commands, buttons, dialog boxes, tools, or programming. Support for a particular technique does not necessarily exclude other techniques. For example, the user can size a window by using the Size menu command and by dragging its border.

Design operations or commands to be contextual, or related to, the selected object to which they apply. That is, determine which commands or properties, or other aspects of an object, are made accessible by the characteristics of the object and its context (relationships). Often the context of an object may add to or suppress the traits of the object.

Operations for a Multiple Selection

When determining which operations to display for a multiple selection, use an intersection of the operations that apply to the members of that selection. The selection's context may add to or filter out the available operations or commands displayed to the user.

It is also possible to determine the effect of an operation for a multiple selection based on a particular member of that selection. For example, when the user selects a set of graphical objects and chooses an alignment command, you can make the operation relative to a particular item identified in the selection.

Limit operations on a multiple selection to the scope of the selected objects. For example, deleting a selected word in one window should not delete selections in other windows (unless the windows are displaying the same selected objects).

Default Operations and Shortcut Techniques

An object can have a default operation. A default operation is an operation that is assumed when the user employs a shortcut technique, such as double-clicking or drag-and-drop. For example, double-clicking a folder displays a window with the content of the folder. In text editing situations, double-clicking selects the word. The behavior differs because the default commands in each case differ: for a folder, the default command is Open; for text, it is Select Word.

Similarly, when the user drags and drops an object at a new location by using the primary mouse button, there must be a default operation defined to determine the result of the operation. Dragging and dropping to some locations can be interpreted as moving, copying, linking, or some other operation. In this case, the drop destination determines the default operation.

More Information

For more information about supporting default drag-and-drop operations, see "Transfer Operations" later in this chapter. Also see Chapter 12, "Working with OLE Embedded and Linked Objects."

Shortcut techniques for default operations provide greater efficiency in the interface, an important factor for more experienced users. However, because they typically require more skill or experience and because not all objects may have a default operation defined, avoid using shortcut techniques as the exclusive way to perform basic operations. For example, even though double-clicking opens a folder icon, the Open command appears on a menu.

Viewing Operations

Following are some of the common operations associated with viewing objects. Although these operations may not always be used with all objects, when supported they should follow similar conventions.

Common Viewing Operations
Operation	Action
Open	Opens an object in its primary viewer. For container objects, such as folders and documents, this window displays the content of the object. Whether the view enables the user to modify the contents of the object shown in the window depends on that object's properties.
Close	Closes a window.
Edit	Opens a container object for modification. Where possible, the object should be editable in the existing view. If that view does not support editing the object in place, open the object in another window.
Go	Displays another location, typically in the same window.
Refresh	Updates the view of the information in a window.
Browse	Browses folders, tree structures, or Internet sites.
Find	Locates a specific file, object, computer, Web site, server, term, or phrase.
New Window	Opens another primary window for the object or data being viewed in the current window.
Properties	Displays the properties of an object, typically in a property sheet window.

When the user opens a new window, you should display it at the top of the Z order of its peer windows and activate it. Primary windows are typically peers with each other. Display supplemental or secondary windows belonging to a particular application at the top of their local Z order — that is, the Z order of the windows of that application, not the Z order of other primary windows.

More Information

For more information about opening windows, property sheets, and Help windows, see Chapter 7, "Windows," Chapter 9, "Secondary Windows," and Chapter 13, "User Assistance," respectively.

If the user interacts with another window before the new window opens, the new window does not appear on top; instead, it appears where it would usually be displayed if the user activated another window. For example, if the user opens window A, and then opens window B, window B appears on top of window A.

If the user clicks back in window A before window B is displayed, however, window A remains active and at the top of the Z order; window B appears behind window A.

Whether to allow a user to edit information in an open window's view depends on a number of factors. These factors may include user permissions, the type of view being used, and the content being viewed.

After the user opens a window, re-executing the command that opened the window should activate the existing window instead of opening another instance of the window. For example, if the user chooses the Properties command for a selected object whose property sheet is already open, the existing property sheet is activated instead of a second window being opened.

Note

This guideline applies per user desktop. Two users opening a window for the same object on a network can each see separate windows for the object from their individual desktops.

Closing a window does not necessarily mean quitting the processes associated with the object being viewed. For example, closing a printer's window does not cancel the printing of documents in its queue. Quitting an application closes its windows, but closing a window does not necessarily quit an application. Similarly, you can use other commands in secondary windows that result in closing the window — for example, OK and Cancel. However, the effect of closing the window with a Close command depends on the context of the window. Avoid assuming that the Close command is the equivalent of the Cancel command.

If the user has made changes in a window and then clicks the Close command, and those changes will be lost if not applied, display a message asking whether the user wants to apply or discard the changes or cancel the close operation. If there are no outstanding changes or if pending changes are retained for the next time the window is opened, remove the window.

Shortcuts for Viewing Commands

Following are the recommended shortcut techniques for the common viewing commands.

Recommended Shortcuts for Viewing Commands
Shortcut	Operation
CTRL+O	Opens a primary window for an object. For container objects, such as folders and documents, this window displays the contents of the object.
ALT+F4	Closes a window.
F1	Displays a window that contains contextual Help information.
SHIFT+F1	Starts context-sensitive Help mode.
Double-click (primary mouse button) or enter	Performs the default command.
ALT+double-click or ALT+ENTER	Displays the properties of an object in a window, typically in a property sheet window.

More Information

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

Use double-clicking and the ENTER key to open a view of an object when that view command is the default command for the object. For example, double-clicking a folder opens the folder's primary window. But double-clicking a sound object plays the sound; this is because the Open command is the default command for folders, and the Play command is the default command for sound objects.

Scrolling

When a view, such as a List view, contains more information than can be displayed in it current size, you can provide access to the hidden information by supporting scrolling or panning or both.

Scrolling most often refers to moving up and down in a document. However, more generally, scrolling refers to moving back and forth in any data stream. Scrolling is more general than traversing text, as it can apply to any data stream. For example:

• Slide shows — Next Slide/Previous Slide
• Forms — Next Record/Previous Record
• Calendars — Next Day/Previous Day (or Week, Month, Year)

Keep in mind that data always moves relative to the frame in which it appears:

• Scrolling up means to move toward the beginning of the data, which moves the data in the view downward.
• Scrolling down means to move toward the end of the data, which moves the data in the view upward.
• Scrolling left means to move toward the left side of the data, which moves the data in the view to the right.
• Scrolling right means to move toward the right side of the data, which moves the data in the view to the left.

With the mouse, you provide scrolling through a scroll bar or other control that includes components that support clicking or dragging actions to move the view. Scrolling typically does not change the selection state (unless the SHIFT or CTRL key is also pressed) or move the input focus.

More information

For related information about scroll bars and scrolling a window, see Chapter 7, "Windows." For more information about scroll controls, see Chapter 8, "Menus, Controls, and Toolbars."

If you support scrolling, include support for mice that have a wheel button, using the following functionality:

• When the user rotates the wheel forward (toward the monitor), scroll up.
• When the user rotates the wheel backward (toward the user), scroll down.
• For documents that scroll only horizontally, when the user rotates the wheel forward, scroll to the left. This is equivalent to clicking the left scroll arrow on a horizontal scroll bar. The current selection should not be affected.
• For documents that scroll only horizontally, when the user rotates the wheel backward, scroll to the right. This is equivalent to clicking the right scroll arrow on a horizontal scroll bar. The current selection should not be affected.

In applications that support long documents, consider scrolling three lines of text by default for each scroll operation (moving the wheel one notch). Controls used for very short documents or lists might scroll one line at a time. In all cases, scrolling should never be more than the number of lines showing in the window.

With the keyboard, you can support scrolling by using the arrow keys and optional navigation keys such as HOME, END, PAGE UP, and PAGE DOWN. Typically, these keys also move the input focus and change the selection state (unless the SHIFT or CTRL key is also pressed).

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.

Panning

Panning is similar to scrolling, except that it is a continuous operation. When the user is panning, the data scrolls continuously until the desired location is reached and the user terminates the operation. The user controls the speed and direction. The object that is selected does not change.

Panning begins when the user presses the mouse button down to establish the origin point; ** the data is moved relevant to that point as the user drags the mouse. You can support panning with the mouse by providing a special panning tool or command that changes the standard use of the mouse to enable the view to move with the pointer.

More information

For more information about programming the Microsoft IntelliMouse, see the IntelliMouse SDK on the MSDN Online Web site.

The origin is important in panning, because you should use the distance the pointer moves from to determine the panning speed. You can provide a reference bitmap, called the origin mark, which is continuously displayed at the origin. Remove it when the user completes the operation.

The following table lists the common images to support an origin mark.

Panning Origin Marks
Shape	Use
	Two-dimensional panning
	Vertical-only one-dimensional panning
	Horizontal-only one-dimensional panning

If you support panning, include support for mice that have a wheel button. When the user presses the wheel button to establish the origin point and then drags the wheel button, move the view as follows. When the user drags up, move toward the data above the origin point; when the user drags left, move toward the data to the left of the origin point.

During the panning operation, change the pointer to provide feedback. The pointer you use varies based on the direction the user is panning.

The following table lists the common pointer shapes to support panning feedback.

Panning Pointers
Shape	Screen location	Use
	Over the origin mark	Two-dimensional panning
	Over the origin mark	Vertical-only one-dimensional panning
	Over the origin mark	Horizontal-only one-dimensional panning
	Over the drag location	Pan up
	Over the drag location	Pan down
	Over the drag location	Pan left
	Over the drag location	Pan right
	Over the drag location	Pan up-left
	Over the drag location	Pan up-right
	Over the drag location	Pan down-left
	Over the drag location	Pan down-right

When you implement support for panning, make sure you consider the relationship between the speed of panning and the distance the mouse moves from the origin. This relationship has a significant impact on how easy panning is to use.

There are three panning zones or phases that you should consider as a part of your design:

• Neutral zone – This is an area four pixels wide around the origin where no panning occurs.
• Delayed panning zone – In this area, the panning speed is slow and typically scrolls by the smallest logical unit of your data.
• Accelerated panning zone – In this area, you accelerate the speed exponentially, increasing the size of the scrolled area to its maximum as the user moves the mouse further from the origin point. Generally, the maximum scroll unit is equivalent to the amount of data that can be viewed at one time within the frame of the data. If you support faster panning, keep in mind that the user may not be able to follow the data being scrolled.

More information

For more information about how to implement an acceleration scheme, see the Microsoft Platform SDK on the MSDN Online Web site at https://msdn.microsoft.com/ui/guide/sdk.asp.

Automatic Scrolling

If you are supporting a mouse that has a wheel button, you may also want to support an automatic scrolling mode where the document scrolls by itself. This form of scrolling is ideal for reading long documents and for skimming data. As with panning, the user controls the mouse to control the direction and speed (although you should use a flatter acceleration curve to provide finer control speeds for reading).

Start automatic scrolling when the user clicks the wheel button. Cancel the scrolling operation when the user clicks the wheel button again or clicks any other mouse button. Also cancel the operation if the user presses any key. You should ignore any function assigned to that key and return the application to the state it was in before automatic scrolling was started. You can use the same origin mark images and pointers as defined for panning unless you provide your own automatic scrolling controls.

Zooming

Zooming refers to changing the magnification level of a document or set of data. You can provide support for zooming by using a special control or command.

You can also support zooming with mice that include a wheel button. In this situation, use the CTRL key and rotation of the wheel button to enable the user to zoom the view. Rotating the wheel forward, toward the monitor, increases the zoom percentage (zooms in). Rotating the wheel backward, toward the user, decreases the zoom percentage (zooms out). Note that settings in the Mouse properties in Control Panel may enable the user to reverse the direction.

Define the zooming increment based on the range and logical granularity of your levels of zoom support. Typical changes are 10 to 20 percent for each notch on the wheel. If the typical working level is 100 percent, set this as the upper or lower bound of the range so that users can easily return to this level without having to keep track of the number of notches traversed. Of course, some applications, such as mapping software, may not have an inherent typical magnification level. In this situation, you may want to make sure it is easy for users to move between the maximum and minimum levels. Target your range to be no more than seven levels.

Zooming can also be used to move between other representations of data, such as changing outline levels, navigating hierarchies, or performing other operations to show a greater or lesser amount of detail. To support this form of data zooming with a wheel-button mouse, use the SHIFT key with the rotation of the wheel button. When the user rotates the wheel forward (toward the monitor), show more detail — for example, expand an outline or hierarchy. When the user rotates the wheel backward (toward the user), show less detail — for example, collapse an outline or hierarchy. Set the zoom relative to the item being pointed to, not to the current selection. This enables the user to easily traverse a hierarchy without having to select at each level.

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References