One of the differences between a poor Web site and one that is easy to use is that good site have:

1. Features that make the site clear and easy to use;
2. Certain types of pages containing the useful features;
3. Pages with uniform appearance and standard information;
4. Overall organizational structures appropriate for its type of site.

We'll take a look at these aspects of good Web sites in this module.

Although there is a tremendous variety among Web sites, there are features shared by the effective ones. These are features that make the site easy to use, so that people using them can find what they need quickly and do what they want to do easily. These features include:

1. Welcome and orientation;
2. Information about the organization or individual who owns the site;
3. Contact information.

In this section, we'll discuss what makes up these features, and why they should be on every Web site.

Another unfortunate features of some Web sites is that it's hard to tell who's responsible for it, who or what the owner is. When Web sites make it hard to tell who's responsible, it's hard to trust them, whether for information or for sales.

You may have curiosities or urgent questions about a Web site or the information on it. Or you may want to go to a physical location associated with the organization that owns the site. Even if you don't, knowing that the organization isn't shy about letting you get in touch with them will help you build your trust in that organization.

Web pages are all very different, of course, but there are certain types of pages that we might plan to have as we design Web sites. These include:

• A home page
• A site map
• Information pages
• ...and a number of other types of pages

"Home page" is such a familiar word in our language now, we hardly need to think about it...or do we? What is the role of a "home page"?

Here are some of the basics of what a home page should do:

• Welcome visitors to the site
• Give a quick overview of what people might find on the site
• Convey a sense of the organization behind the Web site: its purpose, character, and what it has to offer
• Possibly to impress visitors with how sophisticated, capable, talented, artistic, creative, ... (you fill in the blank) the organization is
• Provide rapid access to the important parts of the site

A site map is a detailed listing of the pages in a Web site. This is helpful to people who can't find what they're looking for in the regular navigation of a Web site. The site map may be in either graphic form, or in text - usually as an outline.

The information pages are simply the rank-and-file pages that contain the information of the site. The majority of pages on a Web site are usually the information pages.

Information in these pages may take many forms, depending on the type of information. It may be graphic as well as textual, and could include multimedia (audio and/or video) or applets that provide interactivity.

Depending on the type of Web site, there are other kinds of pages that may be used. For example:

• Input pages: Some pages on a Web site are primarily intended for users to enter information which will be used by the Web server to provide some sort of service to the user.
  • Of course, many Web pages have both information and space for input.
  • In HTML, input spaces are created using "forms". There are HTML tags for many kinds of input, such as plain text, radio buttons, check-boxes, drop-down lists, and passwords.
  • The get information from a visitor's computer back to the server, the CGI (Common Gateway Interface) protocol is used. CGI can email user input back, or send it back as part of the URL requested by the browser. You may have see CGI information in URL string following a "?" question mark. Here's what my browser requested from Google when I entered a query for "Jimmy Carter":
    http://www.google.com/search?q=%22Jimmy+Carter%22&sourceid=opera&num=0&ie=utf-8&oe=utf-8
  • The main page of a search engine is one example of a familiar input page.
• Data-driven pages: These look like normal information pages, but are actually put together using templates and data retrieved from a database.
  • The template is a standard HTML form that provides elements common to all pages of that type - such as company logo, navigation, and decoration - plus styling for the data.
  • The data is brought out of the database in response to a user's request for information.
  • A familiar example of a data-driven page is what you see when you use a search engine. The list of Web sites that match your search is retrieved from the search engine's database and plugged into its template. The resulting HTML code is sent to you and displayed in your browser so it looks just like a normal (static) Web page.

What are the elements of a good Web page? Good information, of course! But there are also a number of elements common to any good Web page:

• Navigation, so visitors can get around the site;
• Possible a search feature;
• Name of the author;
• Date created or modified;
• Enough of a uniform appearance to make it look like part of a Web site.

Let's take a look at each.

Navigation is finding your way to where you want to go - whether on the planet, or on the Web. The ability to navigate is what makes Web pages so useful.

Navigation is implemented in Web pages using "hypertext links". Links can be text or images, and that gives Web designers a lot of scope for creativity!

• Text links are usually underlined, but may be styled to look any way the designer wants.
• Graphic links can be ordinary pictures, or they can be made to look like buttons.
• A special kind of image link is the link map, in which different parts of the picture can be made to link to different information. This is useful in geographical maps, pictures of many people, where each person's image is linked to information about that individual, or diagrams depicting different concepts.

Placement of navigation elements is important. Usually, they are placed on the edges of a page, but it's important to make sure the placement fits the purpose of the page. This can be verified through user testing.

What should site navigation link to? In part, that depends on the overall organization of the site. Certainly, each of the important subdivisions of the site should be linked from every page. But the critical factor is, where are visitors most likely to want to go? That is another of the main functions of user testing.

Though not necessary, a site-search window is helpful on larger sites. This is the little text-box that lets visitors type in words or phrases, then activates a search engine to search only the site.

A search window may be a useful alternative to a site map, but is never a substitute for good navigation.

The person or organization that actually created the Web page should be listed on each page. This is for two reasons:

• Credit should be given where credit is due. If someone creates a work of art - whether painting, sculpture, novel, symphony, or Web site - it is totally appropriate for their name to be associated with it.
• In designing Web sites, some degree of management supervision is usually necessary. Having the author's name on each Web page can assist management in keeping a project on course.

This does not mean that the author's name needs to be visible to visitors. Often that's appropriate - especially if the author is responsible for actual content on the page. But more often the author's name should be in the head of the page, where it won't be seen by casual visitors. There is an HTML tag used for this purpose:

<meta name="author" content="Sarah Strong" />

Though invisible to the casual visitor, this can be seen by anyone who takes the trouble to view the code by using the browser's View > Source menu option.

What's the difference between a Web "site" and a random collection of Web pages?

Actually there are a number of differences, but to a visitor one of the most important is that a site's pages look similar to one another. Of course, they won't look exactly alike, but they should have identifiable features- for example:

• Same color scheme
• Navigation elements in the same place
• Organization logo
• Text and links styled the same

Can think of other examples of unifying features...?

Dates are an important way of relating the information on a page to reality. If you see a news item without a date, it's obviously not much good. Besides news, other types of information grow stale as they grow old, such as...

• Concert and event information
• Medical information
• Legal information
• Technical information
• ...and much more

Plus, one way of telling whether a Web page is reliable is by determining whether the author still "cares" about it. Web pages are often abandoned and left on their servers (I should know - I have far too many instructional modules to be able to keep them all up-to-date!)

And in order to maintain a Web site effectively, it's important to know when a page was put onto the Web. So even if you'd rather not make the date of composition visible to visitors, you should put the date into a comment in the code, like this:

<!-- Written 9/23/2004 -->

Web sites should have some over-all organizational structure, if only to prevent chaos from taking over the development process. There are many ways to organize a site, including:

• Hierarchical
• Star
• Distributed
• Ring or linear

In this section, we'll take a look are each.

In a hierarchical structure, there is one master page - the home page - from which there are links to a few other pages. These pages are the home of sub-sections, each with several pages linked to the sub-section home.

Hierarchy is a very simple and familiar concept. We see it in the structure of folders and sub-folders on our computer disks, in the way companies and armies are organized, and even in the way tree branches are attached. In fact, this type of structure is often referred to as a tree structure.

• Advantages:
  • Everybody is familiar with this way of organizing things
  • It's efficient
  • It matches the way disk storage is organized
  • It allows different groups within an organization to be in charge of their own part of a Web site
• Disadvantages:
  • If followed strictly, a hierarchy can be slow and clumsy for users to navigate, because cross-references don't fit into a hierarchy

In a star structure, like a hierarchy, there is one primary page. The difference is that all the other pages are connected only to the one primary page. This makes it a simpler structure, and suitable only for small sites or sub-parts of larger sites.

• Advantages:
  • Simple
  • Suitable for small sites
• Disadvantages:
  • For larger sites, the star structure is too simple -
  • Doesn't allow for subdividing a site
  • Does not allow cross-references

Distributed structures allow connections between any page and any other page. Our highway system is an example.

• Advantages:
  • Very flexible
  • All references are "cross-refrences" - any page can refer to any other page
  • The Internet itself is a distributed network system
• Disadvantages:
  • When put in a diagram, distributed systems look untidy and complex
  • When designing a distributed system, it's easy to get confused and overlook useful connections

Linear structures are used to tell stories, where one event follows another. In Web sites, linear structures are used when one page links to the next, which links to the next, and so on forming a chain of links.
A ring structure is linear, except that the last page links back to the first.

• Advantages:
  • Linear and ring structures are very simple
  • They can be used to guide users through a process, such as placing an order or buying an airline ticket
• Disadvantages:
  • Because of their simplicity, they can't be used for most purposes
  • A linear or ring structure does not have cross-references

In practice, Web sites don't use purely one kind or organizational structure or another. Instead, they use aspects of each type of structure when appropriate. The flexibility to use these different structures is what makes the Web such a vibrant, useful way of presenting information.

Since each type of structure has its advantages and disadvantages, Web designers usually use them this way:

1. Hierarchical structure is used for over-all site planning. The basic structure of most Web sites is hierarchical, but not strictly so.
2. Star, linear, and ring structures are used in small sites or for portions of larger sites where the purpose makes them useful.
3. Distributed structure is added to a site in the form of global navigation links: the links that make it possible to get from any page to the most important pages on the site. Also, designers and authors can put links into any part of their pages whenever it seems useful, taking advantage of the full power of the Web as a hypermedia system.