Lesson 2:
Organizing Your Information Effectively

By Leigh Stribling, Auburn University, Alabama Agricultural Experiment Station

In Lesson 1: Designing for Your Audience you learned about determining your site’s purpose and audience. Now let's look at the specific content of your site and how to organize it. 

Begin by getting input from others about what information to include on your site. There are several approaches you might try:

• Interview key decision-makers and stakeholders. 
• Create a Web advisory group (short term or ongoing, local or online).
• Survey your organization.
• Survey your potential users.

Put your ideas on paper.  

Write content suggestions on index cards. Organize the cards into logical groupings. Avoid organizing materials as an insider. Think like your user. Organize your groupings in ways that make sense to your audience, rather than following your company's flow chart or departmental divisions.   

Use your groupings to make a site structure list (an outline of sections, subsections, and sub-subsections) or draw a tree diagram (a sketch that shows the relationship between groupings) to help you determine the best structure for your site.¹

Return to Top

How to structure your Web site

Effectively organized sites allow users to make logical predictions about where to find information. Your goal is to produce a structure that helps users understand how your site is organized and gives them quick access to information.

A good rule of thumb is to keep all information only three clicks away from your home page. Avoid burying information beneath too many layers. Web structures that are too shallow (long lists of unrelated information in no particular order) will frustrate users as much as structures that are too deep.

Some choices for a site’s structure

Patrick Lynch and Sarah Horton (Web Style Guide: Basic Design Principles for creating Web Sites) describe some choices for a site's structure. These include:

• Sequential -- In a sequential structure, pages are ordered in a linear sequence, such as chronologically, alphabetically, or from general to specific information. 

• Hierarchical -- In a hierarchical structure, pages are arranged in tiers or levels. All pages stem from a single home page and content follows logical paths from the upper levels (sometimes called "parent" pages) to lower levels ("child" pages). 

• Grid -- When topics in a Web site have no particular hierarchy of importance, a grid structure works well. Many procedural manuals, lists of university courses, or collections of comparable information like encyclopedias, dictionaries or some catalogs are best organized as grids.

• Web -- Web-like organizational structures mimic associative thought and free flow of ideas. Multiple cross-referenced links allow users to select unique paths through the site and follow their own interests. Because the thought processes of individual users are often difficult to predict, designing an effective web-structured site can be challenging.²

To see illustrations of these structure types, go to Web Style Guide: Site Design -- Site Structure by Patrick Lynch.  

Consider using a metaphor as a basis for your site's structure.² 

A metaphor can help users understand how to use and navigate a site. A good metaphor relates the site’s structure to something with which users are familiar.

For example, if you are creating a 4-H Web site, you might try using the metaphor of a farm to structure your site. You could begin with a barn as "home." Farm images could be used as navigational icons, leading the user to "dairy," "poultry," and "wheat." See Virginia Cooperative Extension's 4-H Virtual Farm as an example of a site which uses a metaphor as the basis for its structure.

Name your sections or groups carefully.

Once you are satisfied with your groupings, name each section (folder) and subsection or page (file). The names of your individual pages (or files) will make up the URLs of your site. The most effective URLs make sense to the user.

Try to be as descriptive as possible. Avoid professional jargon (unless you are designing an intranet for your own company). Strive for clarity and flexibility. 

Create short, memorable names, resulting in simple URLs. Keep folder and file names consistent and simple by

• using lowercase letters for all folder and file names;
• avoiding spaces, underscores or questionable characters (like |, &, *, %, etc.);
• using periods only before the extension (like .html or .gif);
• not including more than one extension in your file name.

This is OK*: maine_early_strawberry.gif
This is better: maine.early.strawberry.gif
This is best: earliglow.gif

*Inexperienced users often find underscores confusing. They may mistake an underscore for a dash. Also, underscores "disappear" (or are assumed to be spaces) whenever a URL is hyperlinked (underlined).

Specific file naming rules may depend on the Web server. If in doubt, ask your server administrator.

Return to Top

Organizing information on individual pages

Once you have a general structure for your whole site, it’s time to focus on individual pages or files.

Think of your site as a pyramid with the home page at the top. The home page and top level pages are small, containing general information; the pages below gradually get bigger, containing more detailed information.³

The home page

• fits on one screen;
• displays critical content at the top;
• contains general information without detail;
• provides very obvious, easy-to-follow links to the next level (level one) pages.

Level one pages (pages linked to the home page)

• are mini-home pages for the various sections of the site;
• organize your topics;
• contain general information with very little detail;
• provide clear descriptive links to sections deeper in the hierarchy of the site;
• provide obvious links back to the home page.

Level two pages (pages linked to level one pages)

• include more detailed information;
• are designed consistently within each section and are clearly part of the same Web site (You will learn more about effective design techniques in Lesson 3: Using Color, Graphics and Text Effectively);  
• include an obvious link to level one pages and the home page (because users don't always come to your site through the home page);
• include links to lower level sections/pages of your site.

Think of your home page as your front door.

If your URL is your address, then your home page is your front door. It is usually the first thing a user sees when accessing your site. 

Think about what sort of first impression your home page gives. Is it obvious to users that they are at the right place? Can they easily determine where to go next? Or is your front door too cluttered (or too bare), making it difficult or impossible for users to find the information they seek? Have you locked anyone out by using a browser-specific design or requiring a special plug-in?

Your home page should establish the overall design (structure and graphic "look") of the site. It should also identify the site, give a brief explanation of the site's purpose, and provide links to its major sections. This type of front door lets users know: Where am I? What is it like here? What do these people do? What kind of information will I find?

NOTE: It is important to include meaningful text on your home page so that search engines have something to index. 

Consider including the following types of pages:

• Links to "other related sites"

• Bibliographies, indexes, appendices

• Frequently asked questions (FAQ) page

• Detailed contact information (every page in your Web should include a way for users to contact you)

• Membership or subscription information

• Product information

• Directories

• Mission statement

• Calendar, news, or other frequently updated information

• A "what’s new" page

• A way for readers to respond

• A site map (a list or diagram of the entire contents of the site. A comprehensive site map allows the user to see at a glance what he will find at the site.)

 Return to Top

Setting up a navigation system

Getting lost in a large Web site is frustrating. An effective site structure reduces the likelihood that users will become lost, and a well-designed navigation system helps users move easily through a site.

Your navigation system should let users know where they are and how to get back to previous information. The most effective navigation systems are obvious, simple and consistent throughout the site.

Provide consistent navigation.

Web users appreciate consistency. Providing consistent navigation means using a consistent page design, with consistent navigational elements (text or graphic elements) in the same place on every page. If you have navigation instructions, make sure they are clear and consistent.

Keep your navigation obvious and simple.

Navigation systems -- whether tool bars, simple lists, or linked images -- are most often placed at the tops of pages where they are easy to find. They should be streamlined to minimize the amount of space they require on the page, as well as to allow for minimal download times. 

Be sure to replicate toolbar or graphic-based navigation systems with text links. Text links are universally accessible, providing a method of navigation to users who turn off graphics while browsing (to decrease download times), rely on text-only browsers, or arrive at your site through a slow connection.

Consider including a search feature on your site.

Many Web users rely on search engines to navigate pages.

User Interface Engineering (UIE) found that users say they either initiate a search or use links exclusively to navigate a site, but what they say they do and what they actually do are not the same. UIE found that if the site was search dominated, the user was search dominant, and if the site was link dominated, the user was link dominated. Both methods frustrated the user if they couldn't find their information. So whichever method you use, make sure it is designed so that the user can find what they are looking for.⁴ 

Don't include "dead end" pages in your site. 

Don't leave your users stranded at a dead end. Always provide a way back to your home page from every page in your site. Also include identification on every page, in case users arrive from somewhere other than your home page. 

Return to Top

Using hyperlinks

Hyperlinks are one of the World Wide Web's greatest strengths. They provide quick access to information and there is nothing comparable to hyperlinks in traditional media.

Links guide users quickly between Web pages or from one location on a page to another location on the same page. They may be titles, names, phrases, or single words. Users scan Web pages for hyperlinks to the information they seek. 

Too many links on a page can confuse the user. Too few can leave the user wanting more. Strike a balance, providing the user with enough links to get him where he wants to go without overwhelming him with too many choices. 

Position less relevant links in the page’s margin or at the end of the document under a "see also" label. 

Don't link to pages that are under construction.

Absolute vs. relative links⁵

Absolute links

An absolute link includes the location of the server, as well as the directory and file names -- in other words, the entire URL. 

Example: http://www.ag.auburn.edu/resinfo/publications/forestry.html 

The absolute link in this example tells the browser to go to the ag.auburn.edu server to look for the forestry.htm file in the publications subdirectory in the resinfo directory.

Always use absolute URLs when linking from your site to another.

When you're linking to another file on your own site, you are often better off using a relative link.

Relative links

"Relative" links don't include the entire URL; they define the linked file by its position relative to the current file.

Relative links to files in the same directory:

If you're working on fisheries.html in a directory called publications, for example, and you want to link to a file called forestry.html that is in the same directory, you can use a relative link. So instead of:

<a href="http://www.ag.auburn.edu/resinfo/publications/forestry.html">

... you would use:

<a href="forestry.html">

Using a relative link instead of an absolute link saves the browser time. The browser does not need to return to the root level (in the above example, that would be the ag.auburn.edu server) and dig through all of the folders to locate forestry.html. 

Using relative URLs also means that you can move your entire site to a new server, and all of the links will still work. 

Relative links to files in another directory:

When you want to make a relative link to a file in another directory in your site, use the following command:

../  (TWO periods and one slash with no spaces between them)

This command tells the browser to leave its current directory and go to the parent directory (the folder that contains the current folder). For example, if you're in fisheries.html in the publications directory and you want to link to archive.html, which is in a directory called old, both old and publications are in the same folder, so you can use this relative link:

<a href="../old/archive.html">

You can string together as many dot-dot-slashes (../) as needed to get to the correct folder. Each ../ will take you to the next level up from where you began.

If a link starts with a slash (/), the browser will go immediately to the root-level folder and start looking from there. For instance, to link from http://www.ag.auburn.edu/resinfo/publications/wildlife/fish/fisheries.html to the company homepage (http://www.ag.auburn.edu/index.html), you could use this simple link:

<a href="/index.html">

Return to Top

Activities:

1. Brainstorm metaphors for sites with different purposes and audiences: a site for the general public that presents research information. (Where would a person go to find information? A library? A classroom? A bookcase? A bulletin board? A chalk board? A scrapbook?)

2. With the purpose and audience of your Web site in mind, take a look at other sites with similar purposes and audiences. What would your user find on someone else’s site that they would not find on yours? Would any of the things that appear on the other sites be appropriate for your site? Use a checklist that includes things like download time, page size, layout, look and feel, and ease of use. Be sure to note any features or functions that you find interesting.

3. Browse the Web and evaluate home pages. Does the most important information appear on the first screen? Do the navigational elements make sense? Does the site use a metaphor? Does it make sense? What general impression of the company or organization do you get from the home page?

4. When you make a decision to build (or reorganize) a Web site, you should answer a few basic questions about the site’s audience and content:

• What target audience(s) do you want to reach, and why?
• Why will people come to your site? What will they need?

Use the answers to these basic questions about your audience and what they will be looking for, to set up scenarios about various characters and the situations in which they would need to come to your site. Will they find what they need? Invite a typical user to take your site for a test drive. Give them specific questions to try to answer.

5. When you make a decision to build (or reorganize) a Web site, you should answer a few basic questions about the site’s content:

• What kinds of content, including services, will interest your target audience(s)?

Write the answers about content and services on index cards. Take the cards and organize them into natural groups. Try organizing them in different ways. You want the organization to make sense to you, especially if you’re in charge of maintaining the site. Give the cards to other people in your organization and ask them to organize them. Is their way of organizing different from yours? When you are satisfied with the organization, name each group. Try to be as descriptive as possible.

6. Develop scenarios for users with disabilities using your site; then invite users with disabilities to explore and comment on your site.

Return to Top

Examples of effective Web sites:
sites with effective organization

Example: AGropolis uses a metaphor for its organizing principle.

Examples: L.L.Bean and amazon.com include both search and links for navigating their Web sites. Users would most likely use the links to go to women's pants, etc., at the L.L. Bean site, whereas they would use the search to find a particular book at Amazon.

Return to Top

Resources:

• Design Basics, Jim Frew.
• Home Page Design, North Dakota State University.
• Information Architecture Tutorial, John Shiple.
• Is Navigation Useful?, Jacob Nielson. 
• Navigation, North Dakota State University.
• Navigation, Sun Microsystems.
• Organizing Your Site, Joshua Allen.
• Prioritize: Good Content Bubbles to the Top, Jacob Nielson.
• Site Building, Wired Digital, Inc.
• Site Design, North Dakota State University.
• The Foundation of Web Design, Jeffrey Veen.
• Web Page Design, North Dakota State University.
• Web Style Guide: Site Design, Patrick Lynch.
• What Can <META> Do for You?, Zach Waller.

Return to the main index.