This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.

LiteracyTech

Web Projects: Navigation and the Site Map


Navigation and the Site Map

On a Web site, the user can usually choose a number of different ways to navigate the site, but the possible paths he or she can take are determined by the information architects and designers of the site. If there are too many options, the navigation can be confusing. If it's unclear, the users may get lost, or not be able to return to where they started.

Most sites are hierarchal in terms of organization. The diagram below illustrates how this kind of site is organized.

Home page and page in hierarchical structure

Note, however, that not all sites are organized this way. For example, a class might decide to build a Web site chronicling a trip they took together. Their site may be organized in a linear fashion in order to recreate the experience of going on the trip from start to finish. The diagram below depicts this site's basic organizational structure.

Home page to other pages in a horizonal line

Most sites, however, are hierarchal, and an important first step is to decide on the major categories of that hierarchy. These are almost certainly going to be the major links on the home page of the site.

For example, the home page for the site depicted in the first diagram might look like the page in below.

A site map is basically a diagram that shows the relationship between all of the pages on your site. It basically provides the blueprint for your project. Moreover, the process of working as a group to build the site map--thinking carefully about how users will travel through the site--often leads to great new ideas for additions to the site.

A hierarchal site map resembles a family tree or an organizational flow chart. At the top of the map is the home page; links are represented by lines leading to other pages below the home page. By understanding where each page sits in the hierarchy, the information architects can help the designers determine which navigation elements are needed on each page.

There are many ways to develop site maps. Some people prefer to draw it out on paper; others use the "sticky-note" method, using individual sticky notes to represent pages; and others use a chalkboard, or whiteboard; a group of York, Maine ESOL students used construction paper and string, as shown below.

Remember that orientation is also very important. What are the visual clues that will let users know where they are on the site? Make sure it is clear how to get back to the home page.

Women connecting string to model web pages
A team in York, Maine construct a map of their site using construction paper and string to represent the links between pages. Photo: York Adult and Community Education

Next »

Last Updated October 23, 2003