Visual Controls

Most traditional GUI controls are encapsulations of text. Check boxes, radio buttons, menus, text edits, list views, and comboboxes are primarily text with a thin veneer of graphics added. They don't exploit the full potential of the GUI medium.

When most programs offer options to the user, they describe them in a text-based selection control like a combobox. This is fine for abstract functions or functions concerning text. However, if options can be more clearly and compellingly offered visually, we should discard the combobox and let the user point-and-click on a picture of what he wants instead of a text description alone.

Figure 32-2 is an excellent example of an almost purely visual interface, appropriate to an almost purely visual application, Photoshop. One is hard-pressed to find text in the Layers Palette, except for the names of layers and operations applied to them. But most of the controls are visual, most spectacularly, the thumbnail images of each layer in the stack.

Figure 32-2: The Layers Palette in Photoshop is an exemplary use of visual controls, especially the use of actual thumbnail images of the layers themselves, which update in real time as changes are made to them. The palette is not only able to pack a huge amount of usable functionality into a small space, but the visual nature of the controls is also appropriate for the user base of the application: artists, photographers, and other visual thinkers.

Figure 31-4 in the previous chapter shows a dialog box from Word using visual controls. The controls let the user request complex bordering options by clicking on small visual representations of borders, instead of asking for them by name. In this situation, these controls rescued Microsoft from a difficult dilemma because the number of bordering options is large. Rules can be independently specified for the top, bottom, left, right, and in-betweens of a paragraph, and each border can have its own weight and style. Offering a combobox filled with hundreds of options like "thin left, really thin right, thick top, dashed thin bottom" would have been pathological. Alternatively, a dialog box with an array of individual comboboxes for each of the five possible borders would still result in a morass of confusing interactions for the user. Microsoft's solution is an elegant way of addressing these problems.

We don't have to save visual controls for the tough stuff, though. On the left of the same figure (Figure 31-4) is another visual control that offers a simple choice from one of five options: an outline, a drop-shadow, 3D borders, a custom border, or no border at all. These could easily have been radio buttons, but clicking on the little pictures is much better. The user can click on the image of what he wants instead of having to click on the words that describe what he wants. It is less ambiguous, more easily localizable, faster, and more direct.

Most software publishers use radio buttons instead of visual controls like these because radio buttons come free with the OS and the visual controls don't. If publishers want a visual control, they must pay designers and programmers to create them. This is not an expensive thing to do relative to other custom coding, but compared to a free text-based control, it is still costly. In the long run, though, such expenditure is worth it because of usability problems it solves that would otherwise result in localization costs, customer support calls, and all the hidden costs associated with poor user satisfaction.

Figure 32-3 shows a beautifully crafted visual control in the control panel of Windows 95. Instead of picking a time zone from a text list (although such a list exists on the dialog), you choose your time zone by clicking on a blue and green map of the world. When you select a zone, the map sensuously slides so that your selection is centered in the window. There was no need for Microsoft to do this, just as there is no reason for an exclusive law firm to have marble floors instead of linoleum. But as you run your hand along the teak and cherry wood trim of the lobby furnishings and slide gently into a soft, supple leather wing chair, you know true comfort and luxury. For some reason, this interaction was eliminated in Windows 98 and later versions (the dialog is still there, but the zone doesn't highlight, and you're forced to use the combobox). Its removal is a mystery, and the authors of this book miss it.

Figure 32-3: The time zone dialog box in Windows 95 is an excellent visual control. It shows the selections available to the user attractively and graphically. If you live on the East Coast of the US, for example, all you need to do is click somewhere along the eastern seaboard and the map smoothly scrolls until the Eastern US is centered and highlighted. The animation speeds up and slows down so nicely that the effect is almost sensual. It's like walking into the lobby of someone's office and finding marble, walnut, and leather instead of stucco and plywood. If you want to add a sense of aesthetics to your program, make them tactile aesthetics. Why Microsoft removed this interaction in the next OS release remains a mystery.

Paradoxically, controls are distinct objects on the surface of an application, but the path to improving them is to integrate them more intimately into the visual fabric of the program. The examples discussed in this chapter are undoubtedly hand-coded one-offs. This is an area of significant opportunity for a vendor: creating a generic visual-control development kit that allows average programmers on average budgets to create visual, animated, direct manipulation controls for their products. One place where there has a been lots of innovation in visual controls has been on the Web, within the tight constraints of HTML. New technological developments like Macromedia's Flash MX might, if widely adopted, provide a platform for such visual controls in the future.