|
|
Table of Contents
|
Well organized and structured web pages are easier
for others to use. Listed below are six main principles for effective web page design
which can help add structure to your site.
For additional information concerning these six principles, please read below and check out some of the Web sites listed at the end of this page. |
1. Include essential elements on each page.
Any Web page may be accessed directly from another Web site, therefore each Web page needs
to contain essential information which allows it to act as an independent document. This
essential information is usually placed into one of three main parts of the Web page; the
header , the body, or the footer (Lynch, 1997).
The header is used to bring continuity to the various pages of the Web site, as well as indicate the main topic of the particular Web page. Therefore, the header usually contains a banner graphic which ties the various Web pages of the site together, the title of the document, and navigational aids which link to other pages within the Web site.
The body contains the main textual content of the document, as well as hypertext links to other related Web sites.
The footer is used to verify the origin and authorship of the Web page. Therefore, the footer should contain the author or contact person of the site, as well as the institution with which the author is affiliated (if any), navigational links to other pages within the Web site, the date of last revision, and a statement of copyright. Other useful information might also include the author's e-mail and mailing addresses, as well as the URL of the document.
2. Use appropriate navigational aids.
Good navigational aids are essential to good Web page design. Zimmerman (1997) points out
that one way to increase the navigability of Web pages is to include "return to home
page", "previous page", and "next page" links on each page. Lynch
(1995), and others, suggest that local navigational links be located both at the beginning
and end of the page layout so they are easily accessible to the viewer of the Web page. By
including the navigational links at the end of the page, the user is not forced to return
to the beginning of the Web page after browsing it in order to access another page.
Another method used to increase navigability is to provide a menu or table of contents of
the Web site on each Web page.
3. Keep page lengths short.
It is usually recommended that Web page lengths not exceed two or three screens worth of
information (Lynch, 1995). A major disadvantage of long Web pages is that the user needs
to depend on the vertical scroll bar to navigate within the page, a process which can be
disorienting to the viewer. In order to keep Web pages short, longer topics can be
subdivided into logical chunks of information on separate Web pages. Individual Web pages
should include only relevant, yet complete, information on a single topic.
4. Use appropriate text fonts and styles.
Different web page browsers may display special non-standard text fonts in various ways.
For this reason, Web page designers should use standard text fonts in designing Web pages
(Vaughan, 1996). Lynch (1995) suggests using major HTML heading styles very sparingly and
reducing header sizes in general so that more information can be displayed on the screen
at one time without loosing legibility or causing over crowding to the screen layout.
5. Use color appropriately.
Marcus (1990), McFarland (1995), and others point out that color should be used sparingly
and only to highlight key elements of the page or to indicate specific functions.
Just because you can view a particular color with a particular browser does not
mean that others will be able to view it on their monitor with their browser.
Therefore it is important to use browser-safe colors, which are also know as
web-save colors.
Black is traditionally used on Web pages for the main body of text because of its legibility on a light background. Some colors are traditionally used to convey a particular meaning. Red, for example, is often used to signify danger or warning, and thus should be used sparingly to convey such meaning. Blue is traditionally used to indicate hypertext links to other Web pages, and a shade of purple to indicate links which have already been accessed by the current user. Altering these traditional color schemes will most likely confuse the new viewer to the Web site.
6. Keep graphics small.
Graphics can effectively be used to add interest to a web page, but the amount and size of
graphics should be kept to a minimum (Zimmerman, 1997). Too many graphics, or a single
large graphic, can take a long time to download. Usually, using several smaller graphics,
as opposed to one large one, can create a better impression for visitors to your site.
Yale Web Style Guide
A comprehensive web style manual for the construction of WWW pages. (http://info.med.yale.edu/caim/manual/l)
Placing a Site on the Web
Part of the Web Communications HTML Guide, which contains specific guidelines to be
applied to all pages created by Web Communications. (http://www.webcom.com/~webcom/html/tutor/)
Style Guide for Online
Hypertext
A guide designed to aid the user in the creation of WWW hypertext documents. (http:/www.w3.org/pub/WWW/Provider/Style/All.html)
Sun Guide to Web Style
A comprehensive style guide, created by Sun Microsystems, for helping people create better
web pages. (http://sut1.sut.ac.th/StyleGuide/) (http://sut1.sut.ac.th/StyleGuide/Printing_Version.html)
Beginner's
Guide to HTML
An on-line primer for producting documents in HTML. (http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html)
The HTML Writers Guild
A page of links to other HTML style guides. (http://www.hwg.org/resources/html/style.html)
WELS Web Help
An excellent online guide to help build an effective web site. Contains sections on Web
Site Wonders, Design Desisions, HTML Tag Basics, Buzz Words, and Resources. (http://www.wels.net/sab/webhelp/web-home.html)
These sites include listings, with examples, of common pitfalls to avoid while designing web pages.
Top Ten Mistakes in Web Design
(http://www.useit.com/alertbox/9605.html)
Top Ten Mistakes in Web Design
Revisited
(http://www.useit.com/alertbox/990502.html)
HTML Bad Style Page
(http://jnocook.net/html/badstyle.htm)
Six Basic Principles of Web Page Design