Visual Indication of Selection

Selected objects must be clearly, boldly indicated as such to the user. The selected state must be easy to spot on a crowded screen, unambiguous, and must not obscure normally visible details of the object.

DESIGN TIP 

Make selection visually bold and unambiguous.

You must ensure that, in particular, users can easily tell which items are selected and which are not. It's not good enough just to be able to see that the items are different. Keep in mind that a significant portion of the population is colorblind, so color alone is insufficient to distinguish between selections.

Inversion

Selection is often accomplished by inversion—by inverting the pixels of the selected object. On a monochrome screen, this means turning all the white pixels black and all the black pixels white, but how many of you are still using black-and-white monitors? When the original Macintosh was released in 1984, it was a monochrome computer in spirit as well as in hardware. Because of this, Apple felt justified in using the inversion technique for indicating selections. Inversion was accomplished by the expedient of exclusive-ORing (or XORing) the pixels of the selected object with all 1 bits (or all 0 bits, depending on the processor). The XOR happens to be one of the fastest operations a CPU can execute, and, with the limited computing power available in 1984, this was an easily justifiable choice. XORs are naturally fast and, by a curious quirk of Boolean logic, the action of a XOR can be undone by repeating the identical XOR. Fast! Microsoft continued the XOR technique in the first releases of Windows even though it was never a monochrome system in thought or in deed.

The hidden gotcha is that the result of the XOR operation is only defined when its operands are binary: on or off, one or zero, white pixels or black pixels. XOR is inappropriate for color video. Sure, it works, but the colors are defined differently for different video drivers. What is the inverse of blue? In art class, it's yellow; but in Boolean algebra, who knows? Beyond this, color brings meaning with it; and it's a bad idea to let your users' video hardware be the arbiter of meaning. Finally, some inverted colors may lead to illegibility of the selection, which should be avoided at all costs.

Microsoft's PowerPoint is color-intensive and the slide view is rarely monochrome. When characters within text objects are selected for editing, the background turns black and the actual characters are inverted. The consistent black background can be reassuring, whereas the inverted pixels are okay—sometimes. However, when the text is white (as it commonly is), its background turns black and the characters are inverted from white to black, and this makes for very difficult editing. The program should make sure text is easily legible under all circumstances when selected.

In controls, inverting colors for selection causes more aesthetic and legibility problems. For example, in early releases of Windows, if you used the Control Panel program to configure your screen colors, and you set your menus to yellow instead of gray, they inverted to blue. This was certainly noticeable, but not necessarily desirable due to the legibility issues it introduced.

Microsoft acknowledged this problem in Windows 3.0 by defining two new system color settings: COLOR_HIGHLIGHT and COLOR_HIGHLIGHTTEXT. Of course, these manifest constants merely represent changeable colors rather than some fixed color. Each user can change these variable definitions, which then remain constant for all applications (until the user changes them again). Along with these new colors came a corresponding standard for use: When an object is selected, its color changes to whatever color is represented by COLOR_HIGHLIGHT. Any text or other contrasting pixels within the selected object change to whatever color is represented by COLOR_HIGHLIGHTTEXT. If the selection is contiguous, as in a word processor, the background becomes COLOR_HIGHLIGHT, and the foreground text becomes COLOR_HIGHLIGHTTEXT. This new standard normalizes the visual behavior of selection on a color platform. The Mac OS and most Unix window systems have similar user-configurable settings.

DESIGN TIP 

Use system highlight colors to show selection.

Selecting multicolor objects

In drawing, painting, animation, and presentation programs, where we deal with multicolor objects, it's easy for selections to get visually lost. The most reasonable solution is to add selection indicators to the object, rather than indicating selection by changing any of the selected object's visual properties. Most graphic arts programs take this approach, adding a form of visual scaffolding to the selected object without obscuring the object itself. This is often done with handles (discussed in Chapter 24): little boxes that surround the selected object, providing points of control. Handles can still get lost in the clutter, particularly with complex image-manipulation programs. There is, however, one way to assure that the selection will always be visible, regardless of the colors used: Indicate the selection by movement.

One of the first programs on the Macintosh, MacPaint, had a wonderful idiom where a selected object was outlined with a simple dashed line, except that the dashes all moved in synchrony around the object. The dashes looked like ants in a column; thus this effect earned the colorful sobriquet marching ants (it was also called the marquee, after the flashing lights on old cinema signs that exhibited a similar behavior).

Adobe Photoshop uses this idiom to show selected regions of photographs, and it works extremely well (expert users can toggle it off and on with a keystroke so that they can see their work without visual distraction). The animation is not hard to do, although it takes some care to get it right, and it works regardless of the color mix and intensity of the background.

Now that you understand the basics of selection, you can move on to how selected objects can be further controlled using direct manipulation. The remaining chapters of this section discuss dragging, dropping, and other ways to visually manipulate selected objects.