Abstract: This document provides an introduction to various aspects of document design, particularly document design for course webs.
The creation of a successful web site involves balancing a number of d issues at a number of levels. You need to concern yourself not only with the appearance of pages, but also the overall structure of the web, and the ways in which your readers find information.
Many hypertext theorists and human factors researchers suggest that you emphasize structure over appearance. In any case, you should make sure that you consider organization, and not just appearance.
Begin by breaking your site into an appropriate directory hierarchy. You will probably want to create separate directories for different categories of information. Use this hierarchy to help you determine where to create pages, and which pages should look similar.
The purpose of this hierarchy is to help you organize your pages. Note that this organization does not have to be made explicit in the links in your pages ... you may instead provide a virtual hierarchy or organization on top of it. However, most readers will guess the hierarchy from URL structures, so you should develop one that readers will want.
Next, consider the ways in which your readers may want to visit information. For a typical class, students may want to visit pages based on type of information (assignment, notes, quiz) or based upon topic. You may want to sketch these relationships on paper, using one page with different colors for different hierarchies, or one page per hierarchy.
If your platform permits file aliasing, you may want to consider providing making this multiple hierarchies explicit in your directory structure.
Once you've developed an organization, you should generate pages that will help your readers navigate these various hierarchies. I would suggest an overall "site map" for each hierarchy (showing the hierarchy) as well as simple "index pages" for each category.
As you develop this hierarchy, you should consider the appropriate sizes for pages. Most hypertext researchers encourage you to create small pages so that they can be used in a number of different paths and hierarchies. Small pages also make it more likely that search engines will give useful results. Finally, small pages are quicker to download, which may be a significant issue for readers with low-speed connections (for example, students dialing in on a modem).
There are also some motivating factors to create larger pages. Many readers like to print their pages, and it is more convenient to print one large page than many small pages. Some readers find it inconvenient to have to repeatedly click on links in order to continue a discussion. Finally, large pages can put less of a burden on the server, as they only require one fetch, rather than multiple fetches.
If you have the time or the tools, I recommend creating two versions of each "document": one in which the document is segmented into smaller pages of at most a few screenfuls and one in which the document is presented as a single page. By doing this, you support a variety of uses. Tools like ASML can help with this process.
In HTML, text on the page is traditionally presented in the order in
which you place information on the page. For example, even if there were
<abstract> and <footnote> tags,
browsers wouldn't automatically place them at the beginning and end
(respectively) of your document.
Hence, the way in which you present materials affects the appearance of the page. It also affects the usability of the page. Research with the web shows that many readers only look at the first screenful of any page. Research on design of textbooks suggests that students learn better when a short outline is given at the beginning of a section.
I recommend that you begin each page with some contextual information to help ground the reader. You then continue with an appropriate-sized "reader's guide" to the page (often, just a sentence describing the content of the page). Then include the rest of the body of the page.
At the end of the page, you may want to include your name, email address, copyright, and institution. Putting a date at the end of the page helps readers determine when the page changes (so that, for example, a student might compare the date on a printed or local copy to that of the master copy). Putting links at the end helps with navigation.
You should use the first part of your page to ground your reader and to introduce the rest of the page. For example, when developing a page for exercises, I try to summarize the form, purpose, prerequisites, and structure of the exercise, as in the following sample page.
Summary: An exercise in which you develop your first page
Skills developed: Basic familiarity with HTML
Prerequisites: An understanding of the structure of pages on the web.
References: Your first page. A quick guide to html.
Overview:
- Build the head and body
- Add a title
- Add a level-one header
- ...
Readers of hypertext documents frequently report getting "lost in hyperspace". They reach a page, and then can't figure out where they are, or where to go next. You can help alleviate this problem by providing appropriate contexts and navigation utilities on your pages.
I suggest that you begin each page with a site name (and hierarchy, if you have built multiple hierarchies on the same site) so that readers will know the general category of page they are viewing.
You may want to follow that with a high-level table of contents for the hierarchy (perhaps with the current page highlighted) so that readers can see some related topics. Many readers are aided by next and prev buttons that bring them to the next or previous topic in a thread of ideas. You may, of course, use the same page in multiple threads. In this case, you might indicate the current thread and name the other threads.
Many readers find it convenient to have these links at the beginning and end of the document. Links at the beginning permit a quick check as to positioning and also allow readers to quickly jump to a new page if the current one is deemed unnecessary. Links at the end permit readers to visit a new page after they have finished reading the current page.
In general, you should focus on organization, both structural and conceptual, rather than appearance. However, there are times that is may be important to change the layout of a page to better emphasize particular issues.
If you are going to use visual design, make sure to develop a standard set of object/design relationships. For example, you might decide that all pieces of sample HTML code are boxed. You should also make sure that you have a very good reason for the visual design.
As a courtesy to your readers, make sure that any highly-visual site load comfortably in a number of viewers.
This page written by Samuel A. Rebelsky.
This page generated on 50 by SamR's Site Suite.