The World Wide Web (WWW) has opened up a whole new realm of communication opportunities. Never before have we had such an inexpensive, efficient means for accessing and delivering information that contains text, graphics, audio, and video throughout the world.
Because it is still in its infancy, few design guidelines exist for the World Wide Web. The language for the Web (HTML) was developed about five years ago, and graphical browsers, such as Mosaic and Netscape, have been around for only a couple years. A compounding factor is the rate at which the Web, and the tools used to access it, have changed. New developments, such as Java, HTML frames, and OpenScript are continuing to make it more interactive and more complex. In their rush to use these new technologies, many design aspects of online hypertext are being overlooked by web developers.
The following guidelines are based on personal experience, WWW design documents, and reference books. The guidelines should be interpreted broadly, based on specific content, the intended audience, and the format of the data.
Determine your content first. Your WWW documents will be most effective if you analyze the content and the audience before you begin. The design of your pages may be quite different based on your intent. For example, some pages are simply links to other sites; some are front-ends to databases of information; and others provide interactive instruction.
Carefully title your pages. Create descriptive titles and subtitles for each page that indicate its position within a larger document hierarchy; browsers automatically use the title text of a page as the bookmark link to that page. Also, people may not enter the documents from your Main Menu.
Include a date on all pages The Internet is a valuable source for current information; however, it also stores many out-dated documents. Always include a date on your documents to let the users know when they were created and when they were last updated. Numeric dates, such as 6/3/95 will be interpreted differently in different countries; it is best to include the complete date, such as June 3, 1995. Another option is to use a few NEW icons to highlight the latest additions to your pages.
Include copyright notices. All copyright notices and release statements should appear in the footers of the pages. This will simplify the process for others who may want to cite the materials or seek permission for their use.
Include the URL on each document. Many people will print a document to read later. If they decide at a later date that they would like to return to the document, and the URL address is not on the printout, they may have a difficult time in locating the document.
Provide a method for feedback. It is quite easy to include a feedback method for users -- either by a MAILTO tag or a form that elicits typed input. Always include some mechanism for the user to know who is in charge of the page and how to reach them.
Employ an editor. The fastest way to lose your credibility (and audience) is to have spelling (typing) errors in your documents. If you are creating your documents in a word processor, it is wise to write the content and spell-check before adding the HTML tags. If you use an HTML editing program, try to find one that includes a spell-check option. In addition, find someone to check for grammatical errors. Far too many documents on the World Wide Web contain poor punctuation and grammar.
Design for all different browsers. Just because you are using the latest version of Netscape, doesn't mean that everyone else will be using the same interface. Numerous browsers are available, and it is an easy task to test your pages on several different ones before releasing the pages. In particular, it is important to consider the text-based browsers (such as Lynx) and to include alternate text for all graphics.
Always validate your pages. Free sites on the Internet will check your HTML for mismatched tags, typos, etc. It is worthwhile to use these sites and check your HTML code for major errors before uploading it to the server.
Always pilot test your pages. Before releasing your WWW pages to the rest of the world, conduct a pilot test; watch as a sample of the target audience navigates through the pages, and make revisions if they are necessary.
Make sure the graphics are relevant and necessary to convey the message. With delivery of multimedia on CD-ROM or other mass storage devices, the amount of size of graphics is not generally an issue. However, on the Internet, each picture must be transferred separately from the remote computer. The transfer time can vary based on the type of connection (a modem vs. a direct connection) and the amount of traffic on the lines. Pictures, such as a graphic of your cat or dog, may cause frustration for a user who has to wait 2 or 3 minutes for it to transfer and display. Before incorporating a graphic, assess its pertinence to the overall message.
Limit the size of graphic files. Graphic files should be kept as small as possible, with no one graphic being larger than 50K. This limit may mean that you use a banner rather than a full-screen graphic, or that you create the black and white graphics instead of using 256 colors.
Avoid using large graphic menus. Most users grow impatient when waiting for large graphic files to display. Transmission rates for large graphics is a particular problem for users with slower modems. If the wait is over 20 seconds, it is likely that the user may lose patience, terminate the transmission, and select a different site (Lynch, 1995; Schneiderman, 1992). Home pages with large graphics will always load more slowly than text-based pages or pages that incorporate smaller graphics and typographic styling for visual impact (Lynch, 1995).
Use small graphic banners on pages. Small banners at the top of each page help to identify the site and add graphic appeal, without adversely impacting the transfer time. The banner may also provide a link to the Main Menu of the section, creating a quick, easy means of branching to the table of contents.
Limit the number of graphics on each page. If a large number of graphics are on the same page, the transfer time will be increased, perhaps causing the user to "Stop" the transmission and look elsewhere.
Limit the width of graphics to less than 472 pixels. Most browsers default to about 500 horizontal pixels on Macintosh and Windows computers. To ensure that the user will be able to see the entire graphic, limit them to 472 pixels in width.
Use thumbnails for large graphics. Thumbnail pictures display on the page very quickly, providing just enough information to let the user decide if it is worthwhile to display the whole image.
Use interlaced (progressive) graphics wherever possible. If graphics are interlaced, they appear progressively on the screen -- first a very-low resolution graphic appears, and it gradually becomes more clear. Interlaced graphics provide almost immediate feedback for the user about the nature of the graphics, and they allow much faster access to the text and links on the page.
Include width and height information in the HTML code for the graphics. Graphics will load much faster with some browsers if the width and height are specified ( <IMG SRC="Sample.GIF" WIDTH="400" HEIGHT="150" >).
Use JPEG compression for photographs and other continuous tone images. Graphics on the World Wide Web are generally stored in either JPEG or GIF format. If your images are photographs or full-color images, it is best to save them as JPEG images.
Use GIF compression for line drawings. The GIF format is best when there are fewer colors or large areas of a single color, such as in line drawings or computer screens.
Do not use
If possible, use logical rather than physical styles. It is generally advisable to use "strong" or "em" instead of "b" or "i". Some browsers do not recognize bold or italics, but will recognize strong or emphasized text.
Make sure there is high contrast between text and backgrounds. Some of the graphical and colored backgrounds make it extremely difficult to read the text. Use dark text on a light background or light text on a dark background.
Try to limit the length of text lines. Long lines of text can be hard to read. Try a few techniques to decrease the length of some of the lines. For example, you can place text along side a graphic, or you can use the BLOCKQUOTE tag.
Limit the use of blinking text. Use the blinking and other distracting features in moderation. If blinking is required, blink a character, rather than a whole string of text.
Use descriptive words for links. Try to use words other than click here as links in your documents. In other words, instead of using "Click here to see a movie" use "Quicktime movie of two dogs playing." Also, do not use single characters for links -- they may be hard to click on with the mouse.
Check your links regularly. The WWW is very dynamic. If you are including links to other sites, check them regularly to avoid sending your users to error messages.
Include fixed links to provide a structure to your WWW pages. The BACK and FORWARD buttons on the top of the screen in browsers like Netscape many link to another site in another country, based completely on the user's previous path. If you provide a PREVIOUS PAGE, NEXT PAGE, and MAIN MENU on your pages, you will benefit the users by giving them the interface tools to navigate through the information at your site, in the sequence that you intended. These links can be text or icons; if you use icons, make sure that the icons are easily understood by all cultures.
Include a link to a local home page on every WWW document. Connect every page at your site to a Main Menu or submenu -- otherwise they will become dead-ends, with no choices for the user other than to select a new URL or back out to the previous path.
Provide information for links that involve large file transfers. If the link involves a file transfer, provide information about how large the file is and the format that it is stored in.
Design for the default page size. One frustrating element of designing for the World Wide Web is that you do not have control over the delivery environment. The user can resize the window, which may alter the amount of text on each line. In general, it is best to design for the default screen size and anticipate that some users may resize the screen and make it smaller or larger.
Pages should not be longer than 2-3 screens. Long WWW pages cause users to lose their orientation. It is best to divide the content into chunks of 2-3 screens of material, with links to additional documents. Many designers also recommend that the first (home) page should be only one screen length, which does not require any scrolling by the user.
Provide separate files for printing long documents. The disadvantage of short pages is that if users want a printout, they must print several documents and "piece" them together. To address this issue, it is wise to provide a link to a separate file (with the entire text) that can be printed or saved as one document.
Use only where appropriate. Because of the transfer time required for digital audio and video files, they should only be included where appropriate and relevant.
Store multimedia elements in standard formats. In order to make the multimedia elements accessible to all platforms (Macintosh, Windows, and UNIX), store them in standard formats for the World Wide Web. In most cases, this means the .AU format for audio and the .MOV format for video.
Minimize the size of audio files. Whenever possible, compact audio files by using a lower sampling rate, recording in mono instead of stereo, and using 8 bits of resolution instead of 16.
Keep video files as small as possible. Video files can be minimized by reducing the frames per second, reducing the frame size, and limiting the number of colors.
Include information about file size in links. Provide all audio and video links with information about the file size and format. In some cases, you may include options for different levels of quality and size of files (such as a movie in 1/4 screen size or 1/2 screen size), and let the users determine how long they are willing to wait for the movie to transfer.
The World Wide Web offers an effective method for disseminating information and education. If WWW documents are properly designed, they will be appealing and offer an easy-to-navigate interface. This article offers a few important guidelines for incorporating text, graphics, and multimedia components.