The Essential Guide to UI Design

430 Part 2: The User Interface Design Process

direct pointing devices because the control (pen or stylus) is on the same plane as the pointer. Another advantage of a light pen is that it does not require any additional desk space, except for a place for the pen to rest. A light pen or stylus is usually more accurate than the finger. Stylus pens are useful for the very small screens found on personal digital assistants (PDAs) because of their small pointer size.

Disadvantages. A disadvantage is that they are also fatiguing to use over an extended period of time. Light pens require moving a hand from the keyboard to pick up and use.

Voice

■Description:

––Automatic speech recognition by the computer.

■Advantages:

––Simple and direct.

––Useful for people who cannot use a keyboard.

––Useful when the user’s hands are occupied.

■Disadvantages:

––High error rates because of difficulties in

•Recognizing boundaries between spoken words.

•Blurred word boundaries because of normal speech patterns.

––Slower throughput than with typing.

––Difficult to use in noisy environments.

––Impractical to use in quiet environments.

Description. Automatic speech recognition technology has been under development for more than a quarter of a century. Its progress has been hindered by the following disadvantages listed. Recently, however, it has evolved to the point where telephone-answering systems can now handle simple voice input.

Advantages. Speech is a simple and direct communication medium. It is very useful for people who cannot use a keyboard, or whose hands are otherwise occupied.

Disadvantages. Speech recognition errors are fundamentally different from keying errors. Most keying errors result from a user’s inability to always press the correct key. Most speech recognition errors result from the computer speech recognizers’ inability to correctly recognize words. People can dictate to a computer at a fairly fast rate, about 105 words per minute (Karat et al., 1999; Lewis, 1999). After making the required corrections, the input rate becomes about 25 words per minute when transcribing the input. New users had even lower transcribing rates. As summarized in Step 1, typists, even those of the two-finger variety, have much higher keying rates. Error correction also takes much longer with a speech recognition system. The most commonly used correction methods are deleting and repeating the last phrase; deleting and repeating a specific word; deleting and selecting a correct word from a list of alternative words; and retyping the selection.

Step 6: Select the Proper Interaction Devices 431

Several research studies have shown that correcting voice recognition errors using a method other than additional voice recognition speeds up the correction process. Suhm, Myers, and Waibel (1999) found that fast typists made almost three times more corrections per minute than people who made corrections by voice only. Lewis (1999) and Karat et al. (1999) uncovered very similar results.

Speech recognition is also, of course, difficult to utilize in an improper environment. Noise can hinder the process, and it is very impractical, and disturbing, to try and use it in a very quiet location such as a library.

Mouse

■Description:

––A rectangular or dome-shaped, movable, desktop control containing from one to three buttons used to manipulate objects and information on the screen.

––Movement of screen pointer mimics the mouse movement.

■Advantages:

––Direct relationship between hand and pointer movement in terms of direction, distance, and speed.

––Permits a comfortable hand resting position.

––Selection mechanisms are included on mouse.

––Does not obscure vision of the screen.

■Disadvantages:

––Movement is indirect, in a plane different from screen.

––Requires hand to be removed from keyboard.

––Requires additional desk space.

––May require long movement distances.

––Requires a degree of eye-hand coordination.

Description. A mouse is a rectangular or dome-shaped, movable, desktop control typically possessing one, two, or three buttons, but may include more. It is used to manipulate objects and information on the screen. The movement of the screen pointer mimics the mouse movement. It is also common for a mouse to possess a scroll wheel and, in the case of Apple, a miniature trackball that acts as an omnidirectional scroll device. In the mid 1960s, Doug Engelbart, a researcher at the Stanford Research Institute, invented what became the mouse. While using a trackball, he was inspired to turn it upside down and let the ball become the bottom of a control that, attached to a cord, was moved across the desk. It was patented as the “x-y position indicator,” and finally christened the “mouse” by a colleague of Engelbart’s (a colleague whose name is lost in time). In 1997, Engelbart was at long last rewarded for his invention when he received the annual Lemelson-Mit Prize for American Innovation, including a well-deserved and very substantial monetary reward (cnn.com, 1997).

Advantages. There is a direct relationship between hand and pointer movement in terms of direction, distance, and speed. The mouse itself contains some basic controls (buttons) useful for manipulating screen objects. The hand position when

432 Part 2: The User Interface Design Process

using the mouse is generally fairly comfortable, and the mouse does not obscure the screen.

Disadvantages. Disadvantages are that they are also indirect devices, the control and its result being located in different planes. They require developing a skill to use and, when paired with keyboard tasks, they require movement away from the keyboard and a shift in motor activity from keystrokes to finger/hand movement. The mouse also requires extensive additional desk space and long positioning movements. The mouse comes in a variety of configurations, performs some basic functions, and is operated in several ways.

Configurations. A mouse may possess one, two, or three buttons. Most, but not all, windowing systems permit operation using all configurations. Buttons are used to perform three functions to be described. When three mouse buttons are not available, the pointer location or keyboard qualifiers must be used to determine the function to be performed. A multibutton mouse permits a more efficient operation, but a person must remember which button to use to perform each function. A multibutton mouse may usually be configured for leftor right-hand use.

Functions. The functions performed by a mouse are Select, Menu, and Adjust. The Select function is used to manipulate controls, to select alternatives and data, and to select objects that will be affected by actions that follow. Select is a mouse’s most important function and is the function assigned to a one-button mouse. For a multibutton mouse, it is usually assigned to the leftmost button (assuming a right-handed operation).

The Menu function is typically used to request and display a pop-up menu on a screen. A menu appears when the button is depressed within a particular defined area of the screen. This area may be, for example, the entire screen, within a window, or on a window border. This button eliminates the need for a control icon, which must be pointed at and selected. The user, however, must remember that a menu is available. The Adjust function extends or reduces the number of items selected. It is the least used of the three functions and is usually assigned last and given the least prominent location on a mouse.

Operations. Several operations can be performed with a mouse. The first, point, is the movement and positioning of the mouse pointer over the desired screen object. It prepares for a selection or control operation. To press is to hold the button down without releasing it. It identifies the object to be selected.

To click is to press and immediately release a button without moving the mouse. This operation typically selects an item or insertion point, operates a control, or activates an inactive window or control. To double-click is to perform two clicks within a predefined time limit without moving the mouse. It is used as a shortcut for common operations such as activating an icon or opening a file.

To drag is to press and hold the button down, and then move the pointer in the appropriate direction. It identifies a range of objects or moves or resizes items. To double-drag is to perform two clicks and hold the button down, and then move the pointer in the appropriate direction. It identifies a selection by a larger unit, such as a group of words.

434 Part 2: The User Interface Design Process

typist’s keying movements so that the potential for key jams was minimized. From a strictly human-engineering perspective, its layout inadequacies included a dominance of the left hand in making keystrokes, frequent successive keystrokes with the same hand, frequent movement between keyboard key rows, and frequently used letter pairs being placed far from each other. In 1936, August Dvorak created a revised and well-human-engineered keyboard that overcame many of these deficiencies. The advantages of the Dvorak layout, as it came to be called, included a right-hand dominance in keying, much less frequent row changes, and more systematic alternation between the right and left hand. With this new layout, finger travel distances were reduced by at least one order of magnitude. Acceptance of this new keyboard was, and continues, to be slow. Most people have seemed unwilling to invest the time and effort to change.

In the 1980s IBM performed a series of studies comparing the QWERTY keyboard with various sequential key layouts such as ABCDEF or JIHGFE (starting from the upper-left or QWERTY location). IBM wanted to determine if a sequential layout was better for users who professed to be non-touch-typists. Their findings were surprising. Non-touch-typist performance results were as good, or better, using the QWERTY layout as using the various systematic layouts. IBM’s conclusion: Why change? So they didn’t. IBM researchers could only speculate about why the new systematic layouts fared so poorly. Perhaps, they said, while non-touch-typists profess no knowledge of the QWERTY layout, through experience they have learned the layout, at least well enough to permit effective twofinger typing to be accomplished. Another possibility, they said, was that perhaps some characteristic of the QWERTY layout makes it easy to scan and find needed keys. Speculation number one seems to be the most reasonable explanation, but it may never be known for sure.

Advantages. The standard keyboard is familiar, accurate, and does not consume additional desk space. It is useful and efficient for entering or inserting text or alphanumeric data. For tasks requiring heavy text or data entry, shifting the hands between a keyboard and an alternative control, such as a mouse, can be time-consuming and inefficient, especially for a touch typist. The keyboard is flexible enough to accept keyed shortcuts, either keyboard accelerators or mnemonic equivalents. Some systems also permit navigation across a screen through use of keyboard keys such as the space bar, arrows, Tab, and Enter. Inefficiencies in using other graphical device-based controls can occur, making it advantageous to use a keyboard. A mouse with a limited number of buttons will require use of the keyboard to accomplish some functions, possibly causing frequent shifting between devices. When operations are being performed on very large screens, the user may also find keyboard window management preferable to the long mouse movements frequently required. Therefore, to compensate for these possible inefficiencies, many windowing systems provide alternative keyboard operations for mouse tasks.

Disadvantages. Disadvantages of a keyboard include its requiring discrete finger actions to operate instead of the more fine positioning movements. As a result, no direct relationship exists in terms of speed and distance between finger or hand movement on the keys and cursor movement on the screen. Depending on the

Step 6: Select the Proper Interaction Devices 435

layout of the keyboard cursor control keys, direct-relationship direction problems may also exist, because fingers may not move in the same direction as the cursor. Keyboards will also be slower for non-touch-typists and slower than other controls in pointing tasks. Unfortunately, many keyboards are over-elaborated in design, possessing many keys that are rarely, if ever, used by most people.

Keyboard Guidelines

■Provide keyboard accelerators.

—Assign single keys for frequently performed, small-scale tasks.

—Use standard platform accelerators.

—Assign Shift+key combinations for actions that extend or are complementary to the actions of the key or key combination used without the Shift+key.

—Assign Ctrl+key combinations for

•Infrequent actions.

•Tasks that represent larger-scale versions of the task assigned to the unmodified key.

■Provide keyboard equivalents.

—Use standard platform equivalents.

—Use the first letter of the item description.

—If first letter conflicts exist, use

•Another distinctive consonant in the item description.

•A vowel in the item description.

■Provide window navigation through use of keyboard keys.

Keyboard accelerators. Accelerators provide a way to access menu elements without displaying a menu. They are useful for frequent tasks performed by experienced users. Keys assigned for accelerators should foster efficient performance and be meaningful and conceptually consistent to aid learning. Use standard accelerators as shown in Table 4.2 in Step 4. Microsoft suggests that frequently performed, small-scale tasks should be assigned single keys as the keyboard alternative. Actions that extend or are complementary to the actions of a key (or key combination) should be assigned a Shift key in conjunction with the original action. Microsoft, for example, uses a single key, F6, as the key to move clockwise to the next pane of an active window. To move counterclockwise to the next pane, use Shift+F6. Infrequent actions, or tasks that represent larger-scale versions of the task assigned to the unmodified key, should be assigned Ctrl+key combinations. The left arrow key in Microsoft Windows, for example, moves the cursor one character; Ctrl+left arrow moves it one word.

Keyboard equivalents. Keyboard mnemonics enable the selection of a menu choice through the keyboard instead of by pointing. This enables a person’s hands to remain on the keyboard during extensive keying tasks. Keyboard mnemonics should be chosen in a meaningful way to aid memorability and foster predictability of those things that may be forgotten. Mnemonics need only be unique within a menu. A simple rule is always to use the first letter of a menu item description. If the first letter of one item conflicts with that of another, choose

Step 6: Select the Proper Interaction Devices 437

evaluating different devices yields the following summarization concerning tasks involving pointing and dragging:

■■The fastest tools for pointing at stationary targets on screens are the devices that permit direct pointing: the touch screen and light pen. This is most likely because of their high level of eye-hand coordination and because they use an action familiar to people.

■■In terms of positioning speed and accuracy for stationary targets, the indirect pointing devices — the mouse, trackball, and graphic tablet — do not differ greatly from one another. The joystick is the slowest, although it is as accurate as the others. Of most importance in selecting one of these devices will be its fit to the user’s task and working environment.

■■A separate confirmation action that must follow pointer positioning increases pointing accuracy but reduces speed. The mouse offers a very effective design configuration for tasks requiring this confirmation.

■■For tracking small, slowly moving targets, the mouse, trackball, and graphic tablet are preferred to the touch screen and light pen because the latter may obscure the user’s view of the target.

Another common manipulation task is dragging an object across the screen. Pointing and dragging using a mouse, graphic tablet, and trackball for this task was studied by MacKenzie et al., (1991). They report the following:

■■The graphic tablet yielded best performance during pointing.

■■The mouse yielded best performance during dragging.

■■The trackball was a poor performer for both pointing and dragging, and it had a very high error rate in dragging.

Guidelines for Selecting the Proper Input Device

■Consider the characteristics of the task.

—Provide keyboards for tasks involving

•Heavy text entry and manipulation.

•Movement through structured arrays consisting of a few discrete objects.

—Provide an alternative pointing device for graphical or drawing tasks. The following are some suggested best uses:

•Mouse — pointing, selecting, drawing, and dragging.

•Joystick — selecting and tracking.

•Trackball — pointing, selecting, and tracking.

•Touch screen — pointing and selecting.

•Graphic tablet — pointing, selecting, drawing, and dragging.

—Provide touch screens under the following conditions:

•The opportunity for training is minimal.

•Targets are large, discrete, and spread out.

•Frequency of use is low.

•Desk space is at a premium.

•Little or no text input requirement exists.

438Part 2: The User Interface Design Process

■Consider user characteristics and preferences.

— Provide keyboards for touch typists.

■Consider the characteristics of the environment.

■Consider the characteristics of the hardware.

■Consider the characteristics of the device in relation to the application.

■Provide flexibility.

■Minimize eye and hand movements between devices.

Selection of the proper device for an application or system, then, depends on a host of factors.

Task characteristics. Is the device suited for the task? Standard typewriter keyboards are always necessary for tasks requiring text entry and manipulation; keyboards (cursor control keys) are usually faster when moving through structured arrays consisting of a few discrete objects. For graphical and drawing tasks, alternative pointing devices are easier and faster. Use a mouse, joystick, trackball, or graphic tablet for pointing, selecting, drawing, dragging, or tracking. The devices best suited for each kind of task are summarized in the preceding list.

Provide touch screens when the opportunity for training is minimal; targets are large, discrete, and spread out; frequency of use is low; desk space is at a premium; and little or no text input requirement exists. The pointing device should also reflect the degree of accuracy needed to perform the task. Touch screens are generally inaccurate, unless the target is large enough, comprising space availability.

Consider how much time the user will spend on the system. Using a touch screen for a long period of time can be fatiguing. Devices where the forearm can be rested on a table are best for long periods of use.

User characteristics and preferences. Will the user be able to easily and comfortably operate the control? Are the fine motor movements required by some devices capable of being performed? Some children and people with disabilities such as hand tremor may find it difficult to use devices requiring a high degree of accuracy. A study found elderly adults enjoy significant improvements in their interaction accuracy with a touch screen relative to a mouse, whereas younger adults do not do any better with a touch screen (Iwase and Murata, 2002).

Is the user familiar with the standard keyboard? What are the user’s preferences? While preferences do not always correspond to performance, it is important that the user be comfortable with the selected device. Also consider device-learning requirements. Direct pointing devices (light pen, stylus, and touch screen) are intuitive and easy to learn. They are best in situations where people cannot be expected to spend time learning, and for infrequent system users.

Environmental characteristics. Will the device fit easily into the work environment? If desk space is necessary, does it exist and is it large enough? Some devices require very little room (trackball, joystick, and graphic tablet). A mouse requires significantly more space. Public access systems will require a sturdy device such as the touch screen. A pen or stylus can easily be broken or stolen. Touch screens work well when the usage environment is dirty.

Step 6: Select the Proper Interaction Devices 439

Hardware characteristics. Is the device itself of a quality that permits easy performance of all the necessary tasks? Joysticks, for example, are quite variable in their movement capabilities.

The device in relation to the application. Is the device satisfactory for the application?

Flexibility. Often task and user needs will vary within an application. Providing more than one kind of device will give the user choices in how to most efficiently accomplish whatever tasks must be performed. A keyboard paired with another kind of pointing device is almost always necessary.

Minimizing eye and hand movements. When multiple devices are used, eye and hand movements between them must be minimized. Structure the task, if possible, to permit the user to stay in one working area. If shifts must be made, they should be as infrequent as possible. It is estimated that, for a good typist, it costs 3 to 8 keystrokes for each jump between the keyboard and a mouse. The general rule is that more than 80 percent of the tasks should be doable using only one device.

Pointer Guidelines

■The pointer

—Should be visible at all times.

—Should contrast well with its background.

—Should maintain its size across all screen locations and during movement.

—The hotspot should be easy to locate and see.

—Location should not warp (change position).

■The user should always position the pointer.

■The shape of a pointer

—Should clearly indicate its purpose and meaning.

—Should be constructed of already defined shapes.

—Should not be used for any purpose other than its already defined meaning.

—Do not create new shapes for already defined standard functions.

■Use only as many shapes as necessary to inform the user about current location and status. Too many shapes can confuse a person.

■Be conservative in making changes as the pointer moves across the screen.

—Provide a short “time-out” before making noncritical changes on the screen.

■Animation should not

—Distract.

—Restrict one’s ability to interact.

The focus of the user’s attention in most device operations is usually the pointer. Therefore, the pointer image should be used to provide feedback concerning the function being performed, the mode of operation, and the state of the system. For example, the pointer shape image can be changed when it is positioned over a selectable object, signaling to the user that a button action may be performed. When an action is being