Simplifying Appearance

When it comes to the elements that create your user interface's appearance, you can definitely have too much of a good thing. You should use restraint in designing your program's appearance. Try to limit the use of color, multiple fonts, and three-dimensional effects. Avoid unnecessarily distracting graphics and icons, and use animation sparingly. Note that most of these ideas are routinely violated by poorly designed Web sites. The designers of these sites must think that users find such effects attractive and that the effects will make them want to come back. But they are mistaken—such sites usually repulse viewers.

Unnecessary Three-Dimensional Effects

Take a look at the new 2-D-style toolbar (sometimes called a coolbar) used in Windows Explorer and Internet Explorer. By default, the toolbar is completely monochrome, which eliminates distraction and gives the program a cleaner and simpler appearance. As you move the mouse over a toolbar button, the button is highlighted with a 3-D border and its icon becomes colored. This technique creates the same visual impact as full-time 3-D borders and colored icons but without the distraction. Consider the alternative. While toolbars are clearly a good feature, a toolbar with permanently colored icons can be a distracting element in the program using it, attracting your attention while you struggle to keep your eyes on the document you're working on.

A common trap programmers fall into is using too many 3-D effects in their interfaces. After all, if some 3-D effects are cool, a lot of 3-D should be really cool, right? Not exactly. Look at the following dialog box.

Definitely not cool. Once 3-D controls caught on, it seemed as if absolutely everything that could be 3-D was made 3-D, whether it looked good or not. Even 3-D borders were given 3-D borders just to drive the point home. Using a lot of 3-D static frame controls is usually a bad sign. The modern trend is toward a much simpler style.

A Muted Palette

When used properly, color can add a great amount of style to your program. When misused, color can make your program look ugly and amateurish. A good use of color employs a limited number of muted, coordinated colors. To understand what this really means, look at the custom color settings in the Color dialog box.

To understand these settings, it helps to understand hue, saturation, and luminosity (or HSL). Hue is the base color, such as red, yellow, green, cyan, blue, or magenta, as shown in the x-axis at the top of the color matrix. Saturation is the intensity of the color, ranging from brilliant (a pure color) to dull (a color mixed with a lot of gray), as shown in the y-axis of the color matrix. Luminosity is the lightness of the color, ranging from white to pastel to normal to dark and then to black.

A limited number of colors really means a limited number of hues. You can use a fair number of shades, though, which are obtained by changing the saturation and luminosity of the hue. A color is muted when it is not highly saturated or when it has a low luminosity. When you are limited to the standard 16 system colors, you can mute the color by dithering it with a shade of gray.

The toolbar icons used in Visual C++ show a good use of a muted palette. Note that the predominant colors are various shades of gray: white, light gray, dark gray, and black. Both yellow and blue are often used as accent colors, but whenever yellow is used in more than a few pixels it is dithered. Blue does not require dithering because it is not a harsh color; that is, the eye is physically less sensitive to blue. Lastly, green, red, purple, and brown are used sparingly when needed, and the majority of the icons use only one or two hues.

Note that RGB values—a method of mixing red, green, and blue light to get the appearance of a particular color—while useful in programming, do not correspond to how the eye perceives color. Although it's easy to understand what changing the saturation of a color does, changing a specific RGB value is much harder to understand because its perceived effect on the color depends upon the other RGB values. For example, adding more red to a shade of red makes the color more brilliant, but adding more red to a shade of cyan makes it less brilliant. Consequently, if you are doing any color manipulation, most likely you will need to convert colors from RGB to HSL, perform the change, and then convert from HSL back to RGB.

Fonts

Using too many fonts can add unnecessary complexity to a program. You should try to use black—actually, use the system color COLOR_BTNTEXT or COLOR_WINDOWTEXT, both of which are usually black—sans serif fonts, such as MS Sans Serif and Arial, with a limited number of sizes. Both the Arial and MS Sans Serif fonts are attractive and very compact—in fact, they look almost the same—but Arial has the advantage of being a TrueType font, making it more appropriate when the user can select any font size. Tahoma, Verdana, Trebuchet MS, and Century Gothic are also good choices for a slightly different look. The default Windows font is 8-point MS Sans Serif.

Bitmaps and Icons

Graphics in user interfaces are most effective when they are simple abstractions of real objects. For example, a cartoonlike icon of a person is more effective than a realistic photo. See the Reply, Reply To All, and Forward buttons used in Microsoft Outlook, for example. The guidelines on color that I presented earlier apply to bitmaps and icons as well.