HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Understanding the target group should also affect a site’s design. For example, a colorful and typographically creative layout will appeal to a younger audience, while a more staid design would be the most effective approach for a financial services site. Thus, general rules of design relevant to the print world can also serve as useful guidelines on the Web.

Site Design: The Site Architecture

Once the objectives of a Web site have been established, it is time to begin design and construction. The first step is to choose the team and to define the responsibilities of its subgroups. The content group can include people from across the company or organization. For example, the artists and programmers can come from existing creative and information technology departments. However, it is important to have a core of staff who are experienced in Web site management and design, so that those new to the Web can be trained in the technical details and can be properly managed. Ideally, the site architect should be a Web expert and a skilled organizer. Large projects will also need a project manager to coordinate the different groups and to serve as a bridge between the content, technical, and marketing/advertising groups.

Storyboarding the Site

The next step is to create or sketch out the site storyboard—a schematic diagram which graphically represents the site’s topical categories and corresponding content. Before the first page is coded, this site blueprint must be developed. Storyboarding allows a variety of site structures to be assessed before one is selected. The storyboard defines the major content areas and should illustrate the navigational paths.

Creating a Navigation Scheme

Graphics do more than just add visual aesthetics to a Web site—they also play an important role in the development of a navigational scheme. A Web site as a whole should have a consistent look, but individual sections should also have customized graphical features, such as different background colors or unique graphical elements. For example, each of the three key areas of Chatelaine uses a different dominant color. Thus, as the user moves through pages in the Destinations Web Links section, the pages have a purple background, the graphics are purple, and in the global navigation graphics, the Destinations piece is highlighted.

Most Web sites support two different navigational mechanisms and two different navigational bars. Global navigation refers to those links that point to the major areas of a Web site, such as the home page and the help and feedback areas. These links provide users with a strong sense of how the site is organized and how they can navigate through it. Often, these navigational elements are combined into a graphical or text-based bar, placed across the top or bottom of the page. In the Chatelaine site, a global navigation toolbar—a collection of labeled puzzle pieces— is placed on every page. This is illustrated in Figure 5.1.

The second navigational tool, local navigation, provides links to the content within a particular section. Each page in a section should contain links to the other pages in that section, so that when the user finishes reading one piece there is a convenient link to related content. Increasing the number of click options can increase the average number of pages viewed by users before they leave the site.

Figure 5.1  Rendering of the bottom of one of the pages at the Chatelaine Web site. Notice that the puzzle pieces are used as global navigation buttons, while the links inside the page are used for local navigation within the current section (“Destinations”).

Screen capture used by permission of Chatelaine and copyright Maclean Hunter Publishing. All rights reserved.

Determining the Content and Owners of the Content

All items destined for the Web site, including pages for help, feedback, and the site index, should be added to a document maintenance list. The Web site architect should then determine who will create the content for the different pages and who will be responsible for maintaining the pages. At this time, it is also useful to look into creating other, default pages. For example, the site managers may wish to create a custom page to return when a visitor requests a nonexistent resource. A “customized” mini site-index page in place of the otherwise cryptic “404 not found” message can serve as a useful way of guiding the visitor towards the site content.

Determining Home Page Content

The content for the home page should reflect the key topic categories of the site and should provide links to those categories and the underlying content. Beyond that rather obvious statement, there are two main schools of thought on how best to organize the links. Many designers follow a model called “chunking,” wherein the content is organized as small logical sections, with each page containing on the order of seven such sections. This approach is based on the work of cognitive psychologists, who have shown that people are best able to remember unrehearsed lists if they contain no more than seven items. Designers following this approach create home pages with a small number of links, carefully chosen to represent the broad categories of information—these links are connected to pages that summarize the contents for each of these categories. The power of creative copywriting comes to play in devising a naming scheme for these sections that is easily understood by the site visitor, that is memorable, and that works well with a graphical theme for each area.

A second school recommends placing as many links as possible on the home page. This approach is based on some early page design work by the developers at CNET (www.cnet.com), an on-line electronic newspaper. In 1995, CNET was experimenting with the number of links on their home page and found that the more links they offered, the greater the chance of users finding something that interested them, thereby increasing traffic.

A good design will often contain a mix of these two approaches, by having a collection of main links to the site’s broad categories (i.e., chunking), plus an additional collection of links to recently added, or notably topical, content.