Designing and Evaluating a WWW Site, U. of Saskatchewan

Practical Suggestions to Bear in Mind When Designing or Evaluating a WWW Site

by Ann DeVito and John Porter

anndevito@shaw.ca
john.porter@usask.ca

This outline represents part of a presentation entitled "Reflections on Developing a WWW Page for a Classics Program" offered by Ann DeVito and John Porter at the March 1996 meeting of the Classical Association of the Canadian West.
It presents a list of points to consider when designing or evaluating a departmental WWW site, with some annotations. You will find that some points appear more than once: this is intentional, since some common design flaws lessen the effectiveness of a WWW page in a variety of ways.
While WWW design has advanced a good deal since 1996, when this paper was presented, most of the points raised here remain relevant. Two considerations merit particular note, however:

Few people are likely to be accessing your site via a text-browser these days. It is still a good idea (for a number of reasons) to keep your pages simple, where possible, but this is not so great a concern as it was in 1996.

Another change since 1996 is the dominance of Internet Explorer and the sometimes curious way in which the latter handles HTML. Despite the emphasis below on the need to ensure that WWW pages present well in a variety of browsers, viewers who are employing some versions of Internet Explorer will find that this page presents various oddities.

Thanks to Kevin Lowey and Earl Fogel for their useful comments and advice: neither is to be held responsible, however, for what appears below.

Content
Organization and Navigation
Performance and Appearance
Proofreading
Maintenance
Advertising
Other useful sites on the WWW

1. Content

Define your audience before you begin to make decisions about content and general structure.
- Determine what sorts of individuals you would like to explore your site: their interests and priorities should determine both what you present and the form and order in which you present it.
- If you are aiming at a student audience, determine just how flashy you would like your site to be. (Do you really want, e.g., links to sites such as the Late Night with David Letterman WWW page? On the other hand, many departmental WWW pages — including this one — aim at a rather high-brow audience that is already interested in or committed to the field: this strategy clearly has its limits.)
- Don't forget the obvious information about your department: telephone number, paper mail address, fax, etc.
Provide an active link to a contact person (or persons) on each page.
- Make it easy for your viewer to contact both the person in charge of maintaining the page and (where appropriate) the individual responsible for its content.
Do not include links to pages the sole content of which is "Under construction" — list the item with the note "(Under construction)", but do not offer it as an active link to an empty page.

Return to Table of Contents

2. Organization and Navigation

Remember that people with a variety of needs and interests will consult your Web pages: offer them the appropriate navigational aids.
- In designing or evaluating your pages, attempt to view them through the eyes of these various viewers: anticipate their needs and interests and provide clear, logical paths for them to access the information they are seeking.
- Above all, avoid the COIK (Clear Only If Known) error: as the designer of your site, you will have no difficulty in navigating it; attempt to view your pages through the eyes of the casual viewer.
Think in terms of hypertext when organizing your material and when providing navigational aids.
- Make certain viewers know where they are and where they can go. Provide clear titles and headings as well as relevant links to other sections of your infostructure at the appropriate places (esp. at the top and bottom of each page).
  - Viewers are not all going to begin with your home page: links from other WWW sites, or from a search of the WWW, might land them right in the middle of your site. You need to allow viewers a way to orient themselves, and to navigate within your site, no matter how they have landed at a particular point in your infostructure.
  - Remember that hypertext is not like a book: viewers cannot flip through your site and get a sense of how large it is, what's in it, or how it's arranged. Nor can your viewers have an intuitive sense of where they might be within your hierarchy as they progress through your site: you must constantly tell them. In the same way, your viewers can have no sense of where they have landed, once they have activated a cross-link, unless you tell them.
- Make certain that you give each of your pages a clear and unambiguous title to appear at the top of the browser's screen.
  - Titles are particularly important now that so many high-powered search engines are available on the WWW. Your title should make clear what the page is about and where it is located (i.e., the name of your institution).
- Provide a menu or table of contents on your home page, and on each relevant subsection of your infostructure, that allows the viewer to get an overview of what material you offer and to see how it is organized.
- Avoid a rigidly top-down hierarchical design by:
  - providing lateral links that allow the viewer to range freely through your hierarchy: think in terms of a web rather than a tree.
  - offering the viewer links to other appropriate sections of your infostructure once he/she reaches the bottom of a particular page.
  - Remember: the viewer is not always going to begin at your home page and work down through your infostructure in a straight line. Don't, e.g., force the viewer to loop back up through your hierarchy and descend via a different branch in order to see related material.
- Avoid dead ends:
  - Make certain that links to other appropriate sections of your site are available on all of your pages.
  - In particular: avoid including links to isolated images (pages that consist solely of a JPEG or GIF that are not integrated into an HTML document). When isolated images are presented in this way, viewers who have been led to them by some route other than your Web pages have no way of connecting to the rest of your infostructure.
- Make certain the descriptors for your links are intelligible and unambiguous.
  - Avoid the "For more on Classics, click here" syndrome: such links give the viewer no idea of where he/she is heading (and, besides, users of Lynx don't have anything to click!). Furthermore, "Click here" tags are meaningless when users are scanning your page quickly looking for links of interest — it is far better to have the content of the link highlighted. Try something like the following: "For more on the benefits of a degree in Classics, see the What you can do with a degree in Classics page." It's better to be awkward than obscure.
- Make all pertinent citations active.
  - These include all citations of e-mail addresses and other sites on the WWW.
- For an example of a poorly designed page (with a poorly designed link to match!), click here. (How many flaws can you see in this page?)
As much as possible, avoid lengthy documents by breaking them up into smaller files.
- Provide escapes in the mid-sections of any long documents (particularly important for users of text browsers, who must navigate through a document sequentially, one screen at a time).

Return to Table of Contents

3. Performance and Appearance

Check your site in lynx (vel sim.) to make certain it is accessible to users who don't have access to a graphical browser.
- Avoid the "[LINK]" and "[INLINE]" phenomenon by inserting an "alt=" option in the <img> tag.
- Offer an alternate "text-only" version of your pages (useful both to users of lynx and to those with graphical browsers who don't wish to spend time waiting for images to load).
- Check links: lynx is much "dumber" than Netscape — your links may work fine in Netscape yet be inoperable to viewers using lynx (or browsers other than Netscape).
- Check the layout: again, what works fine in Netscape might lead to a confused jumble in lynx.
Avoid unnecessary use of fancy backgrounds, buttons, or images that involve large numbers of bytes: it will take an annoyingly long time for these to download, leading viewers to give up and move on.
- Beware of automated "counters", which can be particularly troublesome in this regard.
- If you have numerous "thumbnail" images, offer the option of avoiding them.
- Be careful with backgrounds.
  - Colors will vary from machine to machine.
  - Some backgrounds actually obscure the text, particularly on lower resolution machines: use a Macintosh to check your pages by varying the "numbers of colors" setting on the monitors control panel.
  - You might want to choose text colors that complement the background. People can configure their browsers to use their own favorite colored text in some cases, so you should not assume the text will be black, or white. Consider using the options to explicitly set the text, link, etc. colors whenever you have a background to ensure the text will be readable on everyone's screen.
  - In general, avoid backgrounds that are larger than 30-35K.
Avoid images, charts, or decoration that require too wide a window (i.e., larger than 640 pixels).
Make your page attractive, but avoid too many distracting backgrounds, icons, etc. (the USA Today phenomenon): the blitz of colors and images can be confusing, tire the eyes, obscure any text that is there, and make it harder to assimilate what your page has to offer.
Do not use flashing icons or buttons, bouncing balls, etc. — these are attractive at first glance but soon become both annoying and distracting.

Return to Table of Contents

4. Proofreading

Proofread your pages, check all links, and use an HTML syntax checker.
- In particular: nothing will drive viewers away more quickly than links that promise exciting material but lead nowhere.

Return to Table of Contents

5. Maintenance

Provide a "most recently up-dated" notice on each page (can be automated).
Update your pages regularly.
- Check all URLs once a month or so (programs are available that will do this for you).
- Make sure that anything labeled "New" is.
Expect to spend a good deal of time on your page, both developing and maintaining/updating it.
Expect frustrations, both as a user of the Internet and as a webmaster: links will change or work only intermittently; departments of computing services might or might not be helpful; the work you put into the site might win you kudos from colleagues, administrators, and the Internet community ... but don't hold your breath!

Return to Table of Contents