Elements Shared by Pages on the Website
A Common Look and Feel
Help users become familiar with your site, with less effort on their part, by developing a consistent page style that repeats common elements throughout the site. This guide, for example, presents the same information and graphics at the top and bottom of each page and consistently uses a navigation bar along the lefthand side to show users where they are in the content matter.In addition to creating a sense of familiaring, reusing the same image on every page improves speed, since the image can be cached by the browser. For example, the simple graphic at the top of this page did not need to be downloaded when the page was displayed, since it had already been downloaded for the previous page(s).
In general, common elements should be concentrated at the top and bottom of each page or along the lefthand side. This reserves the most visible portion - the central area - for "new" content. That in turn allows users to visually "ignore" the shared elements when searching and reading, and focus their attention on the main content area.
How to Implement Common Elements
There are three primary ways to develop your webpages so that they support common elements:
- The simplest way is through
Server-Side Includes, or SSI. By using a special HTML tag,
#include, you can direct the server to insert additional HTML text as though the lines had been stored directly in your file. Thus, you can write separate files containing the common elements (such as a header strip with a menubar) and be certain that exactly the same information is included on each page. SSI are available with most current webservers, including Apache version 1.3 or later. - A more complicated but more flexible mechanism is
PHP,
a general scripting capability that lets you specify how your web
server should tailor pages before sending them to the user's browser.
PHP has a much steeper learning curve than SSI, and is probably
overkill if all you want to do is support common elements.
- It is also possible to simply cut-and-paste identical code at the top and bottom of each HTML file to provide standard headers and footers. The disadvantage to this approach is that if you want to make a change, you will have to modify the files for every webpage. With either SSI or PHP, you only have to make the change once, and it automatically affects every webpage.
What Users Expect in Common Elements
According to usability studies, users have come to expect certain elements to be readily available on each page. They also expect to find some of these in particular locations. See Navigation Aids for details about link, navigation bar, and menu placement.Users expect to be able to get to the home page by clicking on the site's icon (generally in the upper lefthand corner of the screen) on any page. This can take the place of a "Home" link, or can be a second way of accessing the site homepage. Note that on the home page itself, there's no point in having either the icon or "Home" actually be a live link; why waste the user's time reloading the same page he/she is already viewing?
A "Contact Us" mechanism should be prominently displayed, but there is no need to distinguish contacting you about Web problems from contacting you about anything else. If you particularly want to direct different types of communications to different groups, have "Contact Us" (alternatively, it could be named "Contact Name-of-organization") take the user to a lower-level page, where the types of communications and relevant email addresses are listed in some organized way.
Information intended primarily for sponsoring agencies should be gathered under "About Us" (or "About Name-of-organization") rather than being given more general exposure on the home page or other top-level pages. While sponsors are important users, they represent a very small proportion of total usage. Moreover, sponsors are more likely to spend time looking around the site, so requiring more clicks won't inconvenience them.
A search mechanism is not really needed unless your site includes a hundred pages or more. If you decide to include them, search capabilities should only cover your own site. Users know that to search the entire Web, they will do much better by going to Google, Lycos, or whatever their favorite (and most familiar) site is. Be sure that search is not shown until it works robustly; a poorly implemented search will cost you more users than it gains.
Similarly, include a help feature only if it provides substantive information. Users will be annoyed if they click "Help" and then just find logos or links to other materials.