Simplifying Navigation

Hyperlinks are hardly a trouble-free technology. The problem is that since navigation is no longer linear, it becomes difficult for users to understand where they are. I like to refer to this state as being hyperlost. Although Web designers struggle to organize their sites in an understandable hierarchy, Jared Spool has discovered through user testing that often users have no clue what that organization is. This problem is a least partially solved by having both browsers and Web sites make navigation more visible using the following techniques:

• Showing the context
• Using home pages
• Using navigation bars
• Using the Web browser navigation mode

Let's look at each of these techniques in more detail.

Showing the Context

Hierarchically arranged Web sites often indicate directly in the page where the user is, such as in the following Yahoo! example.

This technique makes it clear where the user is and where he has been. Windows Explorer in effect does the same with the Address bar:

For one more example, notice how Microsoft Encarta dedicates the left-hand side of its window to display an outline of the currently displayed subject to give the user the context.

In all three cases, the interface helps make it clear to users where they are, where they have been, and how to get back to where they came from. Showing the context helps prevent users from getting lost.

Using Home Pages

The typical Web site uses a home page as a launch pad to the other pages in the site. The home page is a simple, visible, and convenient mechanism to display the features that are available. A good home page contains all the features a user would commonly want to use. For example, Microsoft Outlook Express displays its home page when nothing specific is selected. The home page shows the features that are available and provides a simple means to access them. This is what the user sees the first time he runs the program.

Note that if the home page weren't displayed in this case, the alternative would be to display an empty window or a meaningless graphic. The home page takes full advantage of the available screen space.

The Microsoft Money home page, shown below, packs even more functionality, providing quick access to charts, accounts, and overdue bills.

Using Navigation Bars

Another Web technique used to make navigation visible is a navigation bar. A navigation bar is similar to a toolbar, except that it is used to quickly access Web pages instead of to issue commands. The previous screen shots from Money and Encarta show typical navigation bars at the top of each window. Microsoft Outlook has a more standard-looking navigation bar, called an Outlook bar, on the left-hand side of the window. These navigation bars list the important places where a user is likely to want to go. Ideally, the user should be able to get where he wants to go with just a couple of mouse clicks.

Using the Web Browser Navigation Model

In the standard Windows navigation model, the user selects a command that results in a new window being displayed. The user interacts with the new window and either gives another command resulting in another window or closes the window by clicking the OK, Cancel, or Close button and returns to the original window. This procedure can create a stack of windows. As long as only a couple of windows are displayed at a time, this model works fairly well, but it breaks down when it results in a big pile of windows on the screen. The windows used in such cases are usually modal dialog boxes, which is preferable. Having a modal dialog box display a modeless dialog box that in turn displays another modal dialog box would be confusing. Perhaps the most significant problem with the Windows navigation model is that beginning users don't understand modal dialog boxes. They become frustrated when they click something they want to use on the screen and receive a beep instead of the expected results.

TIP

---

Beginning users don't understand modal windows.

The Web browser navigation model eliminates these problems. A browser displays only a single page at a time, so windows never pile up on the screen. With only one window displayed at a time, all interactions are modeless. As a result, you can never click an element on a Web page and receive a beep as an error. Instead of displaying multiple windows, a Web browser displays multiple pages one at a time in a single window and relies on the ability to navigate between these pages. Browsers simplify this navigation by providing the Back, Forward, and Home buttons in addition to the Favorites menu (providing favorite pages selected by the user) and the History list (providing pages recently accessed by the user). If the user gets lost, all he has to do is click the Back or Home button to return to a familiar place. The single modeless window with easy access to the most useful pages makes the Web Browser Navigation Model much more simple and uniform than the standard Windows navigation model.

Windows Explorer makes an interesting use of the Web Browser Navigation Model. By providing Back and Forward buttons, it makes it easy to toggle between two folders anywhere on the network. Also, the Up button lets you easily navigate up the folder hierarchy, and the Favorites menu lets you easily access often-used folders. My only complaint is that Windows Explorer favorites are jumbled together with the Microsoft Internet Explorer favorites. When I'm using Windows Explorer, I just want to see my favorite folders, not Web pages.

For one last example, consider how Outlook and Outlook Express handle navigation from the home page. Whenever you navigate from the home page to another Web-style page, that page always has a Back link displayed at the top of the window to visibly maintain the navigation model, as shown in the screen shot below.