Diagramming Your Site

Your next task before creating content is to design a structure for your Web site. Here design professionals have a distinct advantage: they are trained to understand complex design issues and see the structural and spatial relationships between elements. A Web site begins at an entry point, or home page. The home page has been likened to the front door of a house. When you enter a well designed house, its plan unfolds before you. You have no problem finding the kitchen or the bathroom. But in a poorly designed house, you may have to open and close doors and retrace steps before you find what you are looking for. In the same way, when you enter a Web site at the home page, you should grasp its structure immediately. Just as Le Corbusier called a house “a machine for living,” so a Web site is a machine for delivering information. You are designing an effective delivery system that takes visitors where they need to go in the fewest mouse clicks

Mapuccino from IBM is a program that charts Web sites in a variety of ways.

Site Maps

A Web site is a collection of electronic files, including pages, images, and other types of media, organized by a system that links the material together. The links from and between the various elements within the Web site are called local links. Links to resources outside of the Web site are remote links. A diagram of the site is essential to grasp the relationship between pages and to design for maximum efficiency of use

Therefore, an important early step is to draw a site map, which graphically plots the linked relationship of pages within a Web site. Building a Web site without a site map is akin to constructing a building without a plan. Diagramming these relationships forces the Web designer to think about navigation and to begin visualizing the information delivery system, even before any pages have been designed. Because of the nonlinear structure of most Web sites, it is especially important to organize information in a logical way.

The illustration below shows a hierarchical “trunk and branch” organization, the most common structural organization for Web sites. It offers plenty of potential to channel visitors into different directions from a home page. Most people can intuitively grasp this kind of organization, similar as it is to the classic “org chart,” and keep it in mind as they move through the site. It also takes good advantage of hyperlinking.

A sequential organization, as shown below, is not unlike a slide show or PowerPoint presentation. It is appropriate when the order of progression through a site is important, as, for example, with an on-line training course, or when presenting information in chronological order. If you are telling a story with a Web site, then the organization should be sequential, with movement through the site aided by BACK and FORWARD buttons. Any presentation intended to lead a visitor through a logical progression lends itself to a sequential organization. At times, a combination of sequential and nonlinear movement through the site will be needed. For example, you may be presenting a narrative, such as the history of your firm, but still want to allow the visitor to be able to move to related topics or remote sites. Other sites are both nonsequential and nonhierarchical: a construction specification, a catalog of fabric samples, and an on-line planning code are all examples.

When the information consists of items of approximately equal size and importance, a matrix type of organization is appropriate, as shown in the diagram below. This kind of organization, which allows random access to any part of the site, really demonstrates the power of hyperlinks. An entry page to such a site might display a grid of thumbnail graphics linked to each piece of information. No logical progression is being imposed, and visitors can proceed through the site any way they like.

continued...