4.  What Design Goals Should Influence My Web Pages?


Return to previous  Return to Roadmap  On to Fragile


Section Summary



What is the Web page design process?

Web sites should be organized to provide effective access to the resources that you have on-line. The initial design may be intended, in part, to conceal missing items; once they are no longer missing, they can be highlighted, instead.

Designing a Web site includes three distinct but interacting phases:

  1. The conceptual design (what information will be on what pages, how will the links among the pages be organized, how will navigational and content layers and pages be separated or mixed, etc.).

  2. The choice of the exact text for the terse labels on the shortcut buttons and on any banner graphics.

  3. The visual design of the pages: what fonts will be used for the text, and what will be the shape, size, and placement of the shortcut buttons and other graphic and text elements.

Some otherwise attractive conceptual designs or visual layouts will falter in practice because of the difficulty of one or both of the other phases, especially the difficulty of communicating through terse text exactly what will be found if one follows a particular choice. The current design of the Ohio University Front Door has room for enhancement in this respect (e.g., many people do not immediately recognize "find" as "keyword search").


How can the conceptual design be planned?

Achieving an effective conceptual design for your Web site requires careful planning. I cannot emphasize enough the importance of a good layout and design for keeping interest in your web pages. If you want to create web pages for your department or office, the best thing to do is to talk it over with the people you will be representing.

A solid, well designed web page is the ultimate first impression. Hundreds of thousands of people all around the world will see your page. Your page will not only reflect upon yourself and your department, but also on your institution as a whole.

The long-term effort will be less if you invest some time in planning your web pages in advance, tempting though it may be to just jump right in and start writing.

There are five stages to your planning effort, all of which are paper and pencil tasks:

  1. Storyboard each document: What will appear on the page? How should it be organized? What types of information do you want to make available? How much information do you want to include?

    These can be difficult decisions. Many departments and offices have a plethora of information just aching to be put on the web. Many departments have brochures and advertisements that would lend themselves perfectly to the web. It can be a difficult job sorting through all of the available materials and choosing what should go on the Web, and what should not. Making the decisions as to what should be changed, what can be enhanced, what can be directly copied, etc., can take a long time.

  2. Separate your project into the individual pages. Since people will have to follow links between those pages, and wait for them to load, this separation is a significant design choice.

  3. Decide on the basic link structure: What will be connected to what? From where?

    You don't need to include all the links that will seem appropriate as the project progresses, but you should plan out the links that define the overall organization of the pages, and which, therefore, provide people with the feeling that they know where they are going as they navigate through your pages.

    For example, the fundamental structure of this set of pages is what I refer to as the "wagon wheel": the Roadmap functions as the hub, with the spokes being the links from it to the several pages and from each of them the "CONTENTS" link back to the Roadmap. The "BACK" and "NEXT" (circumferential) links correspond to the rim of the wheel.

  4. Decide how your files will be organized on disk: Will they all be in one subdirectory? Will the image files all be lumped together in their own subdirectory? If multiple directories will be used, what will they be called and which files will go in which directory?

  5. For large projects, identify phases that can be made public prior to overall completion. This is another way Web that publishing differs from hardcopy, where you don't want to pay for printing anything less than a perfect job. It is easy to enhance an existing page incrementally, especially if you have planned for that.


How much attention should I pay to "hit" counts?

Usage statistics can provide some insight into the ways that people use your Web pages, but remember that they are intrinsically misleading, because they are based on Web requests that came to the server:

The only good thing about this list of sins is that some of them are sins of omission and some are sins of comission -- that is, the errors can reasonably be expected to partially offset each other.

If a page is heavily visited, you do not know whether that is

Although usage statistics are intrinsically limited in their accuracy, they are often the only available information, so they should be considered, but with caution.


What are good Web page design goals?

Designing a Web site calls for the balancing of several mutually contradictory design goals! In particular:

  1. Keep the text and graphics small so that the pages will load quickly and so that as many choices as possible are visible with minimal scrolling, even on small screens.

  2. Keep the graphics visually appealing (e.g., use textured rather than uniform ("smooth") color behind the text on the buttons, even though it doesn't data-compress as well).

  3. Minimize the number of files that have to be visited on the way to the item of interest (i.e., have fewer navigational layers).

  4. Keep each file simple, with only a few choices, both to make it easier to choose and also to minimize scrolling.

  5. Have choices that are targeted to various identifiable sub-audiences (e.g., prospective students, their parents, prospective employees, current students, current employees, etc.).

  6. Provide every sub-audience with direct, simple access to all parts of the organization's Web presence, since there really is no telling what might be of interest to each individual, even though you can probably predict fairly well which will be the most popular items for many of the sub-audiences.

  7. Your audience should find it easy to conceptualize the overall organization and structure of the links among your site's pages, based on the first few pages they enounter. They should not feel confused or disoriented when they confront the navigational links. This does not mean that you can't include some "random" links, as needed, but it does mean that the primary navigational links should form a readily visible organic whole.

  8. Your pages should function effectively for all people who visit your site, regardless of their choice of browser or of their choices in configuring it.

  9. Your pages should be interesting and attractive in appearance, encouraging visitors to come back again another time.

Goals 1 and 2 are always in conflict. For example, the textured image below is 26,667 bytes, but the image with the uniform background is only 10,273 bytes, less than half the size:

textured image  uniform image

Goals 3 and 4 are always in conflict. For example, to navigate among the 40,000-plus Web pages at Ohio University requires a minimum of 5 navigational layers, but that only works if there are a dozen choices at each layer. If the layers were simpler, with only two choices at each point, it would require 16 layers of navigation! For most Web sites, the navigational layers' pages should offer between four and eight choices.

If we follow goal 5 but don't pay attention to goals 6 and 7, we would end up with most of our audience frustrated by having to choose between using a generic home page as a starting point that requires an extra layer of navigation to reach any content pages, on the one hand, or, on the other hand, using a specific home page as a starting point that is often one click closer, but sometimes requires going back up to the generic home page and down an alternate path. One way around this would be to have all the audience-specific pages be like the generic home page, except with the choices in a different sequence, and with perhaps a few choices at or near the top that are "promoted" from the second or third layer of the generic set. For example, have "Admissions and Financial Aid" as one button on the generic home page, and have four of the choices from that sub-page all be on the "Prospective Students" home page. This does run the risk of compromising goals 1, 4, and 7.

Goal 8 is often in conflict with goal 9 and with many Web authors' temptations to display mastery of new technology, such as frames, tables, animated graphics, JavaScript, and Java applets. ("If you have a hammer, all problems look like nails.") "Fragile" is the word I use to describe designs that fail to meet goal 8.

You ignore the mutually contradictory nature of these design goals only at your peril. If you keep these issues consciously in mind, you are much more likely to make appropriate compromises among them.



Return to previous  Return to Roadmap  On to Fragile

Dick Piccard revised this file (http://oak.cats.ohiou.edu/~piccard/oacrao98/goals.htm) on November 3, 1998.

Please send comments or suggestions to piccard@ohio.edu.