Creating a site navigation map

No matter how much you know about the technologies behind creating Web solutions, unless you're adept at Web design, your efforts will be wasted. One of the areas where great design is crucial is when you're developing a Web site's navigation (or site) map.

The navigation map is a valuable resource because when you create it you can define the constraints on a user's navigation and define the data that will be carried from page to page.

Designing the navigation map
Begin by identifying the Web pages for each action in the use-case model. If you use UML in your design, it's easy to see how the use-case model drives the design of the navigation map since this model generalizes what actions will be available for the user.

Now, virtualize a generic page to identify the actions available to the user. These virtual pages are templates for the user interface. A verb or action specifies the navigation from one page to the next. This action is realized through an event, such as a button click. The implementation of this could be as simple as a login page with an OK button. When the user clicks the OK button, the application will attempt to log in the user. Therefore, both the virtual page and the action could be Login.

You don't need to specify any of the technical details at this point. This makes it easy for the backend developer to encapsulate the activity necessary to carry out this action. If the user succeeds with the Login, he or she could be directed to the next page in the navigation map, perhaps the User Info page.

Developing the navigation map
Once the stakeholders approve your navigation map design, you can begin development. Designers will focus on the actual look and feel of the page layouts, while you can create the business logic necessary to complete the actions specified by the navigation map.

An example of combining business logic and navigation map development is a Web shopping cart. When the user logs in to the Web application, they can choose items to add to their cart. Then, he or she proceeds to the checkout area where totals are generated and then to the order submission area where user shipping information is gathered.

Here's an example of a navigation path:

• Home.asp: User chooses to log in. (GetCredentials)
• Login.asp: User logs in to system. (Login)
• ItemsList.asp: User selects item for purchase. (AddItem)
• ItemsList.asp: User proceeds to the checkout area. (Checkout)
• Checkout.asp: User reviews order. (SubmitOrder)
• Finalize.asp: User completes order and enters shipping info. (ShipAndThanks)
• ThankYou.asp.

The action in parentheses is the application action or business function necessary to continue to the next page. The detailed action after the page name is the virtual event that will create the application action. The page name is the physical page that supplies the user with the necessary functionality to create the business action.

A sample navigation map in action
Let's look at this in a realized sense. A user visits your site by navigating to Home.asp. On this page, there's a link for a user to log in. The user clicks the login link and is directed to Login.asp by GetCredentials, which is a verb that creates the result, but it could also be realized as a function. The user then enters his or her username and password in the Login.asp page. When the user clicks an OK button, the Login action occurs.

In this action, the user's credentials are validated and (for simplicity's sake) are assumed to be valid. The Login action results in the user being navigated to the ItemsList.asp page, where items for sale are displayed. The user then clicks on an Add to Shopping Cart link. The AddItem action adds the item to the shopping cart and returns to the ItemsList.asp page. The user can then check on the Checkout link where the Checkout action will total the user's order for review.

The user then reviews his or her order on the Checkout.asp page. In this simplistic view, everything in the user’s order must be fine because the user's only option is to SubmitOrder. On the Finalize.asp page, the user enters the shipping information and clicks a Complete Order button. The ShipAndThanks action stores the completed order and directs the user to ThankYou.asp.

From this basic navigation map, you can imagine the different paths that may come about when the user interacts with the system. An example would be a user adding a greater quantity of a product in the shopping cart. The user would then need another path with an Update action.

In a graphical representation of this interactivity, pages can be defined by boxes with the page names inside the box. Actions can be realized through arrows initiating from the current Web page and terminating in the resulting Web page. This is a nice method of adhering to the KISS (Keep It Simple, Stupid) approach.

Through effective design, you can provide the functionality necessary to complete each action in an encapsulated method.

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client server to corporate intranet applications.