Design Specifications and Guidelines - Visual Design

Visual Communication

Visual design serves a purpose greater than decoration; it is an important tool for effective communication. The organization of information on the screen can make the difference between a message users understand and one that leaves users feeling puzzled or overwhelmed.

Even the best application functionality can suffer and be underused if the visual presentation does not communicate it well. If you are not trained in visual or information design, it is a good idea to work with a designer who has education and experience in one of these fields. Include that person as a member of the design team early in the development process. Good designers know how best to take advantage of the screen and use the concepts of shape, color, contrast, focus, and composition effectively. Moreover, graphic designers understand how to design and organize information and can assess the impact of fonts and colors on perception.

Keep in mind that visual design should complement, not replace, the structural design of your application. In particular, avoid relying only on visual design to convey important information about what's on the screen. Users who have visual impairments may not be able to interpret this presentation. For example, make sure that controls have labels that communicate their relationship to other items, not strictly their physical location.

Composition and Organization

We choose what we read and how we think about information by its appearance and organization. We read a screen in the same way we read other forms of information. The eye is always attracted to colored elements before black-and-white elements, to isolated elements before elements in a group, and to graphics before text. We even read text by scanning the shapes of groups of letters. Consider the following principles when you design the organization and composition of visual elements of your interface:

• Hierarchy of information
• Focus and emphasis
• Structure and balance
• Relationship of elements
• Readability and flow
• Unity of integration

Hierarchy of Information

The principle of hierarchy of information addresses the placement of information based on its relative importance to other visual elements. The outcome of this ordering affects all of the other composition and organization principles. It also determines which information a user sees first and what a user is encouraged to do first. To further consider this principle, answer these questions regarding your application:

• Which information is most important to the user?
• What are the user's priorities when your application is started?
• What does the user want or need to do first, second, third, and so on?
• Will the order of information support or hamper the user's progression through the interface?
• What should the user see on the screen first, second, third, and so on?

Whenever possible, the visual display should match the user's priorities, but it can also be shaped by other elements you want to emphasize.

Focus and Emphasis

The related principles of focus and emphasis guide you in the placement of priority items. Once you identify the central idea, you can determine the focus, or focal point, for activity. You determine the emphasis by choosing the prominent element and isolating it from others, or by making it stand out in other ways.

Culture and interface design decisions largely determine where the user looks first for information. People in western cultures, for example, look at the upper left corner of the screen or window for the most important information. It makes sense to put a top-priority item there, giving it emphasis.

Structure and Balance

Structure and balance are two of the most important visual design principles. Without an underlying structure and a balance of visual elements, there is a lack of order and meaning that encompasses all other parts of the visual design. More importantly, a lack of structure and balance makes it more difficult for the user to clearly understand the interface.

Relationship of Elements

The relationship of elements is important in reinforcing the previous principles. The placement of a visual element can communicate a specific relationship to other elements. For example, if a button in a dialog box affects the content of a list box, there should be a spatial relationship between the button and the list box. This helps the user make the connection clearly and quickly just by looking at the placement. Similarly, the spatial layout should communicate information consistent with the interactive relationship of the elements, such as keyboard navigation.

Readability and Flow

This principle calls for ideas to be communicated directly and simply with minimal visual interference. Readability and flow can determine the usability of a dialog box or other interface component. When you design the layout of a window, consider the following questions:

• Could the idea or concept be presented more simply?
• Can the user easily step through the interface?
• Do all the elements have a reason for being there?

Unity and Integration

Unity and integration, the last set of principles, reflect how to evaluate a design in relation to its larger environment. Users find an application easier to use when its interface is visually unified with the Windows interface to present a consistent and predictable work environment. For design unity and integration, consider the following questions:

• How do all of the different parts of the screen work together visually?
• How does the visual design of the application relate to the system's interface or to other applications with which it is used?

Color

Color is very important in the visual interface. You can use it to identify elements in the interface to which you want to draw the user's attention — for example, the current selection. Color also has an associative quality; we often assume there is a relationship between items of the same color. Color also carries with it emotional or psychological qualities — for example, a color can be categorized as cool or warm.

However, when color is used indiscriminately, it can have a negative or distracting effect. Misuse of color can cause an unfavorable user reaction to your application and can hinder productivity by making it difficult for users to focus on a task.

Here are a few more things to consider about using color in your application's interface:

• Although you can use color to reinforce relatedness or grouping, it is not always obvious to the user to associate a color with a particular meaning.
• Color appeal is subjective. Everyone has different tastes in color. What is pleasing to you may be distasteful or unusable to someone else.
• Some percentage of your users may work with monitors that support only monochrome.
• Interpretation of color can vary by culture. Even within a single culture, individual associations with color can differ.
• Some percentage of the population may have color-identification problems. This can affect the accessibility of your software to the widest possible audience. For example, about 9 percent of the adult male population have some form of color confusion.
• Some users rely on software utilities that alter the appearance of the screen or replace the screen altogether. For example, some users with low vision run screen programs, such as the Magnifier accessory included with Windows 98, that alter the colors on the screen. Users who are blind rely on software that reads the contents of the screen out loud.

More Information

For more information about accessibility issues, see Chapter 15, "Special Design Considerations."

The following sections summarize guidelines for using color as a secondary form of information, using a limited set of colors, and providing the option to change colors.

Color as a Secondary Form of Information

Use color as an additional, reiterative, or enhanced form of information. Avoid relying on color as the only means of expressing a particular value or function. You can also convey information by text labels and by the shape, pattern, and location of items in the interface. It is also a good practice to design visuals in black and white or monochrome first, then add color. This helps you focus on key aspects of the visual information and use color only to enhance that information.

Use of a Limited Set of Colors

Although the human eye can distinguish millions of different colors, the use of too many colors results in visual clutter and makes it difficult for the user to discern the purpose of the color information. The colors you use should fit their purpose. Muted, subtle, complementary colors are often better than bright, highly saturated ones unless you are looking for a carnival-like appearance where bright colors capture the user's attention.

One color affects another. Adjacent or background colors affect the perceived brightness or shade of a particular color. A neutral color (for example, light gray) is often the best background color. Opposite colors, such as red and green, can make it difficult for the eye to focus. Dark colors tend to recede in the visual space, whereas light colors come forward.

Options to Change Colors

Because the choice of color is highly subjective and a matter of personal preference, allow the user to change colors where possible. For interface elements, Windows provides standard system interfaces and color schemes. If you base your software on these system properties, you can avoid including additional controls, and your application's visual elements are more likely to coordinate effectively when the user changes system colors. This is particularly important if you are designing your own controls or screen elements to match the style reflected in the system.

More Information

Your application should also support High Contrast Mode. For more information, see Chapter 15, "Special Design Considerations."

When providing your own application interface for changing colors, consider the complexity of the task and the skill of the user. It may be more helpful if you provide palettes, or limited sets of colors, that work well together rather than providing the entire spectrum. You can always supplement the palette with an interface that allows the user to add or change a color in the palette.

Fonts

Fonts have many functions in addition to providing letterforms for reading. Like other visual elements, fonts are used to organize information or to create a particular mood. When you vary the size and weight of a font, the user sees text as more or less important and perceives the order in which it should be read.

At conventional resolutions of computer displays, fonts are generally less legible online than on a printed page. Avoid italic and serif fonts, as these are often hard to read, especially at low resolutions. Figure 14.1 shows various font choices.

Figure 14.1 Effective and ineffective font choices

Limit the number of fonts and styles you use in your software's interface. As with too many colors, using too many fonts usually results in visual clutter.

Use bold fonts sparingly. While bold text attracts attention, overusing it can distract the user and make it difficult to focus on what is important. Too much bold text also lessens its impact. Limit its use to titles, headings, and key items that should have the user's attention.

Similarly, limit your use of italic text. Used in isolation, italics may attract attention, but in general it can decrease the emphasis on the information and make the text less readable.

Wherever possible, use the standard system font for common interface elements for visual consistency between your interface and the system's interface. This standard system font also makes your interface more easily scalable. Since the user can customize many interface elements, check the system settings for the default system font and set the fonts in your interface accordingly. For more information about system font settings, see "Layout" later in this chapter.

For elements other than common interface elements, such as your application's window content, make the fonts adjustable so that users can change them to suit their preferences. You can do this by using commands that display a font selection dialog box, such as the one the system provides, or by including commands that automatically scale the presentation.

Dimensionality

Many elements in the Windows interface use perspective, highlighting, and shading to provide a three-dimensional appearance. This emphasizes function and provides real-world feedback to the user's actions. For example, the command buttons' appearance provides the user with natural visual cues that help communicate their functionality and differentiate them from other types of information.

Windows bases its three-dimensional effects on a common theoretical light source, the conceptual direction that light would be coming from to produce the lighting and shadow effects used in the interface. The light source in Windows comes from the upper left.

Be careful not to overdo the use of dimensionality when designing your own visual elements. Avoid unnecessary nesting of visual elements and the use of three-dimensional effects for an element that is not interactive. Introduce only enough detail to provide useful visual cues, and use designs that blend well with the system interface.

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References