Chapter 11. Providing a Way Back


Imagine that you walk through a door into a room, but when you turn around to leave, the doorway isn't there. You wouldn't design a house this way unless you worked for the carnival. However, there are plenty of funhouse sites on the Web that do essentially the same thingstranding their visitors on a page without providing a way back.

Designing good navigation helps to prevent the funhouse effect. Take the diagram in Figure 11.1. In this navigation scheme, the visitors go from the top-level page to the lower-level pages in a nice, clear, linear fashion, step by step by step. Providing a way back is as easy as including a link on each lower level page to the next page up in the site structure, just as you include a link from each upper level page to the next page down.

Figure 11.1. When a site unfolds in a linear fashion, make sure the links go both ways: higher level page to lower level page, and lower level page to higher level page.


TIP

When the visitor drills down through several levels of pages, it's common to link from each of the lower level pages directly to the top-level page. This is a great convenience, as it allows the visitor to take a couple of steps at once. But don't forget to include the single-step moves, too. Always give your visitors the option of going back to the page immediately above the current one.


Many Web sites aren't strictly linear like this. In fact, a good Web site is usually nonlinear, allowing the visitor to make huge leaps across the site structure in the interest of speed. Diagrams like the one in Figure 11.2 aren't uncommon at all. Here, the visitor can arrive on a product page several different ways: by browsing step by step through the hierarchy, by going through the Specials section, or jumping directly to the product from the featured items on the home page.

Figure 11.2. A nonlinear site offers many avenues of getting to the same page. Providing a way back isn't as straightforward as linking both ways.


In this scenario, providing a way back isn't as straightforward as linking both ways. You'd clutter up the screen with links to all the possible referring pages. At the same time, in a nonlinear site, it's more important to provide a way back because of the sheer number of possibilities. You don't want your visitors to feel lost at sea.

If your visitors get lost, they'll go for the Back button on their browser, which does the job. It also breaks their focus on your site and your content, which isn't good for you. It isn't good for them, either, because it slows them down. A simple JavaScript link solves this problem entirely:

TIP

Some designers who work too closely with the marketing department feel the need to disable the browser's Back button as a way to force the visitor to stay on the site, as if the visitor will somehow forget to close the browser window and never come back. Please resist the impulse to control the visitor's browsing experience. Your site should never disable the Back button (or any other browser buttons, for that matter), even if your navigation is flawless. Some visitors prefer to use the browser interface. Who can blame them? It's usually more reliable than the site's interface.


 <a href="javascript:history.back();">Go back</a> 

The history.back method works exactly like the Back button. It loads the previous page. No matter which door your visitors end up using, a Go Back link leaves the same door open.

TIP

Make sure your Go Back link is easy to find, or your visitors will just use the Back button on their browser, which defeats the purpose of including a Go Back link in the first place.


History.back isn't the only method in JavaScript's history object. Table 11.1 lists some of the others for your information, but don't go crazy with history methods. A Go Back link is very useful indeed, but a Go Forward link or a Go Two Steps Back link is clutter.

Table 11.1. JavaScript History Methods

METHOD

DESCRIPTION

EXAMPLE

back()

Goes one step back

history.back()

forward()

Goes one step forward

history.forward()

go(x)

Goes x steps forward (positive value) or x steps back (negative value)

history.go(3), history.go(2)




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net