Visual design serves a purpose that is greater than decoration. It is an important tool for effective communication. How information is organized on the screen can make the difference between a message that users understand and one that leaves them feeling puzzled or overwhelmed.
Even the best application functionality can suffer and be underused if the visual presentation does not communicate it well. Remember 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. People who have visual impairments may not be able to interpret this presentation. For example, ensure that controls have labels that communicate their relationship to other items, not strictly their physical location.
People choose what to read and how they think about information by its appearance and organization. People read a screen in the same way that they 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. People 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
- Unity and integration
The principle of hierarchy of information means basing the placement of information on its relative importance to other visual elements. This order 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 that you want to emphasize.
The related principles of focus and emphasis guide you in placing priority items. After 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 are two of the most important visual design principles. Without an underlying structure and a balance of visual elements, a lack of order and meaning encompasses all other parts of the visual design. More importantly, a lack of structure and balance makes it more difficult for users to clearly understand the interface.
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 to 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.
Unity and integration reflect how to evaluate a design in relation to its larger environment. People 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 is very important in the visual interface. You can use it to identify elements in the interface where you want to draw the user's attention, such as the current selection. Color also has an associative quality; people often assume a relationship between items of the same color. Color also carries with it emotional or psychological qualities, such as being 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 users 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 customers may work with monitors that support only monochrome.
- Color interpretation 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 has some form of color confusion.