As designers, we should think of a web page as the entrance to a cove of treasures, be they products, services, or information. If the entrance is clean, appealing, easy to understand, and compatible with the visitor's interests, then the user will venture deeper into the cove. If on the other hand, visitors perceive the entrance to be confusing, irritating, useless, or inefficient, then the chances increase that they will leave to enter another cove. The effects of first impressions are even more important on the World Wide Web than in the real world. In the real world, there are often reasons why customers may not leave a bad situation. For example, in a sales encounter, sales people who give a bad first impression can recognize their mistake and modify their behavior, prompting a change in the customer's initial unfavorable response. The ability of a web page to detect a visitor's negative reaction and then modify its presentation in response to that reaction is nonexistent today.

If, after they enter the cove, i.e., the web page, visitors find that they are having a pleasant and memorable experience and are finding the treasures they seek, then they willingly will prolong their visit and return often. The look and feel associated with different types of web pages should engender just such a pleasant and memorable experience. A positive experience can happen for many design-related reasons, ranging from good usability to good graphics. No matter what formula we use to produce a pleasant experience, a well-designed page is the goal. What are the ingredients of a well-designed page?

General Page Design Issues

A web site can contain several kinds of pages, and associated with each kind is a set of design constraints. Depending on the purpose of a site, a site's pages may include a home page, content pages, and transaction pages. Many of the general usability design criteria that apply to software screen design work equally well for web page design. Accordingly, I will first review some general, well-accepted design principles, then consider specific design criteria for each type of page.

General principles of good display design include the following areas of concern:

• Consistency
• Coherence
• Information Placement
• Information Coding
• Color
• Text Clarity

Coherence

Both the amount of content, or density, and the placement of content on a page will affect coherence, that is, how easily visitors can manage the information and perform the relevant tasks. More density and less organization raise visitors' perception of clutter and lower performance. Density is a measure of the number of characters per screen area. Research has demonstrated that increasing screen density increases both the time it takes to search for information and the error rate (Thacker, 1987; Treisman, 1982; Dodson and Shields, 1978). Clutter occurs when the page content appears haphazard and lacks structure meaningful to the user. A cluttered page can make it difficult for visitors to find information or to navigate.

There are several techniques that designers can employ to achieve an uncluttered page. First, how users expect a page to be organized depends largely on the context and purpose of the page. If, for example, the page is part of a "report," then the expectation is that the target page may be preceded and followed by other pages. One would therefore look for an indication of how to move forward and backward between pages. If the context of a page is a small-sized document such as a letter that fits on two pages, the user would look first for a scrolling instead of a paging tool.

Moreover, if the target page's purpose is to convey textual content, then the expected structure would include a title and paragraphs, probably organized like familiar print materials. This suggests that the title will be placed at the top middle or top left, and the text will be divided into sections. Furthermore, if the intention is that visitors to the page will scan the text as opposed to reading every word, then part of the expected organization will be the inclusion of keywords and subheads, as well as text lines that are no longer than 35 characters. If the page has different types of content, then an expected meaningful organization would require that each contentÐtype be grouped in a separate sector on the screen. By paying attention to expected organization as it relates to context and purpose, a designer using the same content can transform a "busy" page to one that is meaningful and manageable....

A second technique for reducing clutter is to aggressively design to preserve "white," or unfilled space. Designers should start with the premise that white space is to be preserved at all reasonable costs. The object of the design should be to start with white space and fill as little of it as is possible and still accomplish the page's purpose....

By focusing on the preservation of white space, the designer helps reduce the amount of content with which the user has to cope on a single page. This reduces the user's information load, the degree to which a person's processing capabilities and working memory are taxed by the amount and presentation of content on a page. A page with relatively little content, structured to contain a number of information chunks within working memory range, results in lower information load than a page with large amounts of content and more than seven chunks of information. A design that lowers the visitor's information load allows the user to both manage the page's content and perform the intended task more efficiently. The white space approach has the same final goal as Nielsen's (1994) minimalist design guideline in which the designer minimizes the inclusion of nonrelevant or rarely used content.

A third technique for reducing clutter is the use of progressive disclosure to present the content of a page. This strategy introduces content gradually in the order in which the user needs it. Progressive disclosure is similar to the "training wheels" method introduced by Carroll & Carrithers (1984), relative to learning how to use a new system. They found that learning efficiency improves when the system is introduced in a layered way. For web page design, this approach means presenting only the content required to perform the task at hand, and providing additional content only as it becomes relevant.

Placing content with an eye for closure is a fourth way to reduce clutter and achieve page coherence. In structuring content, we achieve closure of a visual presentation when all the elements are perceived as belonging to the same presentation....

A fifth technique is the proper use of labeling. Labeling the contents of a page aids immensely in giving the impression of coherence. We should always provide labels to designate chunks of information, messages, data fields, and groups of data by a thematic word, phrase, title, or subtitle. We should place labels next to the information chunks, messages, or data group they describe. E.g., if the information is in text form, the title goes on top at center or to the left; if it is a data field, then the descriptive label should be to the left of the field; if the label is for a column, then it should be on top.

In constructing labels and titles, we should choose unambiguous words and shapes. A name or a label should convey no more than one salient meaning. Highlighting, shading, or reverse-imaging the label, will distinguish it from the data group it designates and will make it easier to scan and recognize. The method of highlighting should be consistent and different from methods used to highlight other types of information such as error messages and warnings. Avoid labels that might mislead users by suggesting that they must take some action. Example: Do not make a label look like a three-dimensional button, which might prompt the user to press or point/click it.

A sixth technique for organizing information in order to reduce the effect of clutter is to use various coding techniques to designate content and information chunks. We can organize information by spatial grouping, the use of color, highlighting, blinking rates, object size, shapes, numbers, among others. Here are some guidelines on how some web page coding techniques may be used.

• Use brightness intensity coding to indicate a contrast between adjacently placed items of information. Brightness should not be used with screens of low intensity. Only two levels of brightness should be used for rapid, error-free reaction time.
• Use location encoding to reduce the user's information search time. Icon and symbol encoding can convey a great deal of information in a small space. Use icons and symbols to economize on information transfer. Icons and symbols should look as closely as possible like the object or process they are intended to represent. Furthermore, use icons/symbols that are familiar to the user. The size of symbols or icons may be considered a coding technique. If so, use a maximum of three size levels with no less than 1.5 times in difference between any two consecutive sizes for ease and quickness of differentiation.
• The use of geometric shapes is an effective coding technique for certain types of tasks. Geometric shape coding could have a high mnemonic value, that is, it is an aid to memory. For rapid, error-free reaction time, nine shapes are the recommended maximum.
• Length-of-line can be used as a coding technique, particularly when the absolute comparison of quantities is required. No more than three different lengths are recommended. For example, if we use line length to indicate difference in distance on a map display, we should not use more than three lines. Be aware that lines can clutter the display with many signals. We can use width-of-line as a coding technique in line graphs. Limit to two sizes on a single screen. For example, if we use line width to represent different variables on a graph such as age range, do not use more than two lines. If there are more than two age ranges, use another coding technique, such as symbols or colors. For each successive line length or width, the longer or wider lines should be 1.5 times the shorter or narrower.
• To increase speed and accuracy of pointing to an object, increase the size of the object. Of course, this increase must not occur at the expense of obscuring other objects or decreasing clarity.
• Put an equal amount of space between items of equal status. For example, all buttons in one group should have the same amount of space separating them. All groups of buttons should be separated from each other by a larger amount of space than individual buttons are.