Graphic Design for User Interfaces

The Graphical User Interface (GUI) is becoming the norm for how users interact with today's computers. The GUI is responsible for displaying information to and accepting information from the user. GUIs must be designed so that the information displayed is easily recognized and understood by the user and the entry of information is performed with a minimum of effort and difficulty.

Graphic design is concerned with how the GUI presents information to the user. There are three major components to the graphic design of a GUI which must be considered when it is designed. The three componenets are typography, layout, and color. These three components form the visual language which describes how the GUI communicates with the user. The user will recognize information and perform tasks better when a good visual language is constructed. When the three components are inappropriately specified, however, a poor visual language is created and user tasks will suffer.

The first major graphical design component, typography, deals with the design of letterforms or text and their groupings within the interface. The goal of good typographical design is to enhance the readability of text in the interface without sacrificing any symbolism which is conveyed by the text (i.e. use of boldface or italics to draw attention to specific text). Several guidelines have been formulated for good typographic design. Some of the more prominent of these guidelines can be summarized as follows:

Use a maximum of three different typefaces with a maximum of three different sizes for each typeface. The use of a large number of typefaces and sizes can lead to "visual chaos" thereby making the interface more difficult to comprehend.
Avoid the use of all capital letters. Tests have shown that users are able to read mixed case much better than all capitals.
Limit lines of text to between 40 and 60 characters. Limiting the number of characters on a line enhances the readability of the text by limiting the amount of head movement needed by the user to read the text.
Use appropriate formatting. Text should be set flush left, numbers should be set flush right, and the use of centered text in lists and short justified lines of text should be avoided.

These guidelines are just that, guidelines. The ability to conform to these guidelines may be affected by development factors, such as platform and development tool kits, and by usability factors such as human abilities and conceptual models. In cases when it is not possible to conform to typographical guidelines, it may be necessary to modify one of the other graphical design components to compensate.

The second major component to consider for graphic design is screen layout. Screen layout refers to the spatial relationships between text and other objects within the interface. These relationships are used to add symmetry and balance to the interface and to organize the objects of the interface. Techniques for screen layout include the use of horizontal and vertical grid lines, the logical grouping of objects, and the alignment of related objects. These techniques allow the user to better understand the relationships between objects in the interface and facilitate the creation of a mental model of the interface.

The final major component of the graphic design visual language is color. Color can be used to achieve some of the same goals, like drawing attention to text and grouping objects, as typography and screen layout. The correct use of color, however, has many added benefits such as increased appeal of the interface and enhanced learnability of the interface. Like typography, guidelines have been developed for the use of color in an interface. These guidelines are as follows:

Use color to group related items. Items of similar colors should be related in some manner.
Use colors consistently. Use the same color to refer to the same meaning throughout the interface.
Use a maximum of three to seven colors. Using too many colors causes a "visual chaos" similar to that caused by too many typefaces and will have less appeal to the user.
Make foreground colors contrast with background colors. Having a foreground color similar in brightness or hue to the background color makes distinguishing between the foreground and background more difficult.
Use color to draw the user's attention. The user's attention will be drawn to colors which are different from the common colors used in the interface.
Avoid the use of blues for text and small objects. The human eye does not perceive small shapes colored blue very well.
Use a high contrast in colors to express difference. The human mind tends to perceive objects with a high contrast in color as opposites.

Just as with typography, the correct use of color can be compromised by development and usability factors. When correct use of color is impaired, the overriding guideline should be to use it for a purpose, not just to use it.

The visual language created by color, screen layout, and typography describe the graphical part of the Graphical User Interface. When used correctly, these three components build an interface which is readily usable and appealing to the user. When used incorrectly, the result is an interface which is at best difficult to use and maybe impossible to use. The GUI designer must appropriately use the visual language to create interfaces which are both easy to use and appealing to the user.