Chapter 2 -- Designing an Effective WebSite

Knowing Where You Are in a Web Site

Many people, including myself, have begun to use a new software package and have gotten lost or had the machine lock up. Immediately, we lose our sense of comfort with the application. At the extreme, we may give it the three-finger salute or look for the button on the back of the Macintosh. On the Net we simply dodge the site and go somewhere else. Allowing the user to keep his or her sense of direction and control is important. A site listing on the splash page is a start, but there must be continuity to the pages. This could include a navigation bar that is on all pages or a constant link back to the splash page. Another method is to provide access to a visual map of all the pages at the site, which allows the user to immediately go anywhere with a click of the mouse.

Knowing How to Leave

As you're designing your page don't forget that information provided on the Web is nonlinear. Users not only want to get into your information, but they also want to be able to get back out. It is important to provide a means for them to go back to the previous page. Netscape has a backward button, but effective design will provide a means within the page itself to go backward through the information.

Designing Consistency in Your Web Site

Each Web page you create is a virtual interface, a means of interacting with the computer and ultimately with the information at the site. Consistency across these pages not only makes users feel more comfortable with your site, but also gives them a sense of location and helps them find what they are looking for more easily. To help create consistency across your pages:

1. Design a graphical element that represents your Web site. This can be a logo, text element, or product.
2. Establish section unity by designing graphic elements of the same color. Make your logo green in the financial section, red in the hot products section, and blue in the personnel section. If you do this, a change of color will connote movement to another section or topic.
3. Establish subordination by scaling the graphic. The larger the graphic, the more important the topic (the closer to the splash or home page). The smaller the graphic, the deeper into the Web structure (the further away from the home page).

In addition to making the user more comfortable, graphical elements that are consistent from page to page increase the loading speed of your other pages. When most browsers load an image, they cache the information-in other words, the browser writes it to your hard drive. This means it only downloads the graphic the first time it is used. All subsequent pages that use the element pull it from the cache on the hard drive rather than loading it from the Net. Consistently reusing your graphics is a smart practice both from a design and systems standpoint.

Page continuity is a concept that can be explained using some of today's suites of applications as an example. What is one of the main selling features behind Microsoft's Office products? Note that the interfaces of each product are strikingly similar. The idea that familiarity with one interface allows users to more easily use another product in the series is the key. This type of continuity is what you want to strive for in your Web pages. Continuity is developed by consistent elements, graphical or not, that remain constant from page to page. Techniques for establishing this continuity are covered in detail in Chapter 9 "Providing Visual Cues to Web Navigation Through Page Design."

Structured Versus Unstructured Design

Daily planners are a wonderful thing. They help people organize their lives by helping them construct what they will be doing each hour of the day. These wonderful memory aids not only help them accomplish large tasks, but they also help people remember the things they commonly forget, such as anniversaries, birthdays, and important events.

Structuring a page or site without a diagram is much like living without a daily planner. You can accomplish the same tasks without it (that is, design a page or site), but why would you? Why take the chance of forgetting something or leaving a structure to chance? Diagramming is a simple task. Much like a daily planner, diagrams help you organize the items that compose the site or page design. It also reminds you of what you need to do concerning site design.

An additional advantage of the site diagram is that of file management; a task we must all do. Looking at a site diagram, it is easy to see visual groupings of files. This is most noticeable if you're setting up an organization's site. It is advantageous, from a management perspective, to create a directory structure on the server to hold the visual groups of pages. A common, but inadvisable practice, is to put all the pages in a single folder on the server, which makes site maintenance a memory task more than a management task. Try to use the site diagram as a map for not only the pages themselves, but also as a way the digital files can be arranged on the http server.

A Web Site Is Not a Book

Web design is much more than traditional books on the Web. The power that HTML gives us is much more than simple page turning. Many of the analogies we use to describe the Web are based in traditional publishing. It's what we're used to, and it's something we can all relate to. However, Web sites can be and should be much more.