Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

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.