Visualizing Connections

The hardest part of site design is imagining how all of the pages interconnect. Once you have the "storyboards" in hand, you'll need to sit down and organize that information. This can be time-consuming and difficult. It is best to tell others that you cannot be disturbed while doing this (it is very easy to lose track of the IDEA of the site structure).

First of all, there are a few givens in site navigation.

1. You will need a navigation bar. What can make or break a site is a well-designed navigation bar or lack of one altogether. Your viewers need to be able to understand where they are in your site and how to get back to main areas. A navigation bar needs to provide a link to the HOME page, and links to other critical information (such as contact info or help pages), and links to each main area of the site. The navigation bar needs to be present on every page. Other information can be present, such as a date modified, or copyright info. This information should follow any nav bar.

2. You will need to link back to main areas from any page in that area. For example, a tutorials index links to several tutorials. Each tutorial should link back to that index page.

3. You will need to name links descriptively. Page2 is not as descriptive as Contact Information. The first may not mean anything to your viewers, but the second tells the viewers exactly what information they are linking to.

The basic navigation links are essential to the way the viewer moves through your site. If you have logical, well-planned navigation, the viewer's experience will be pleasant. If you have inconsistent, confusing navigation, your viewer will be uncomfortable and lose confidence. If you have only casual viewers, the viewer may not return. If you have regular viewers, for online classes and other required users, the viewer will not have an enjoyable experience, and will rate the site negatively on evaluations. Added to this is the fact that the viewer will not learn as much from the site itself if they are caught up in just trying to understand the navigation.

Visualizing the Connections

Once you've figured out what information needs to be linked and how, it is time to sit down and THINK about the site structure and navigation.. I've found that it really helps to sit down and sketch out the connections between pages and areas. I tend to categorize information, or make an outline that shows what information belongs together. If you are lucky, the content person has already done this for you. If not, you get to do it yourself (it truly helps).

Here is an example of one of the units from the online course I am helping to develop.

Notice how certain areas are grouped and how the information is arranged in those groups. This unit happens to be comprised of two main concepts, each of which will be represented by an image map. As the viewer clicks the image map, a new window will open and display the text and image information for that concept. I needed to indicate to the other programmer what information needed to be displayed in the same window, and what information would be displayed in its own window. I also included the HTML name of that page (the name was derived from the storyboard number). The programmer can then build the framework and create the Flash movie while I work on refining the individual pages, and the artist works on the images. We all understand where we are in the process and how our information will be linked to other information. I make these mini-concept maps for each unit. When they are put together, we can cross-reference ideas and information to make that information clearer to the students. Pretty cool, huh?

The key to creating a well-designed site is navigation. Once you can visualize the connections between information, you can design logical navigation and make viewing your site a pleasure instead of a pain.

[Back to the Articles]