Designing for navigation

David Walker writes a column on Web Design for The Age newspaper in Melbourne Australia. The articles are archived at Lighthouse on the Web. Here we reprint an article on designing for navigation.

Where's the steering wheel on this thing?

Ever been lost on the Web? It happened to me in the first week after I plugged in to my ISP, and I didn't like it. I clicked in from Alta Vista to a page that referred to other pages in the same site, but didn't tell you how to reach them. I clicked on a link, found myself in an obscure German Web site, clicked the back button, tried again ... and eventually gave up and typed in a new Web site location. The Web gives you nothing if not easy alternatives.

The image of viewers clicking out of the site, never to return, is a nasty one to most Web-site creators. Ever since I started experimenting on the Web, I've wondered how to best guide people around a site. As designer Peter Morville remarked in an article for Web Review magazine last year, one of users' biggest gripes with the Web is that they can't find information.

Putting aside the book

The simplest early Web sites often relied on a simply link at the bottom of the page, declaring "Click here for the next page" or something similar - and in some cases, a "click here for the previous page" link and a link to a clickable table of contents, a home page at the start of the presentation. Such layout gave Web sites much in common with their print predecessors.

But Web creators soon realised their sites needn't mimic the straight-line characteristics of a book, designed to be read from start to finish. Some authors moved to "site maps", graphical representations of their sites' material. But maps load slowly, Web sites don't lend themselves to being mapped, and lots of people can't read maps of their own country, let alone maps of Web sites.

Web creators then realised that any site larger than three pages or so could be split into sections, and viewers invited to choose one area, browse through it, and then pick and explore again - the model not of the book or magazine, but of a library. From that grew a new model for page design, one where each page contained links to key pages at the start of different sections. Different corners of particular sites would be marked as library shelves are marked "biography" or "fiction Q to S". Nowadays every second professionally-designed page you visit, from Microsoft to David Jones, boasts a navigation bar down the left-hand side or across the top.

The rise of the navigation bar

That page-side navigation bar seems almost a Web cliche. Yet it works well precisely because it's so common; newcomers to the site will feel reasonably at ease. Since it will be loaded onto every page in a site, it can show a series of small images which users' browsers will need to download only once. Proper use of these images can also tell viewers which part of the site they're actually in. The navigation bar may even provide a decent use for the far-too-common Netscape frames device: you can create a single borderless frame to the left of the page whose elements stay in position as you scroll down the page.

Done well, a navigation bar can give viewers the same sense of location that we get from a book simply by glancing at how many pages we've read. In that sense, the navigation bar is no more a cliche than the title page of a book, a device which evolved only slowly over the century after Europe took up the printing press.

As you can see, this site uses a navigation bar. It also uses buttons at the bottom of the page to point to the next and previous pages - buttons which readers encounter as they finish reading the page. These buttons have "titles" so that even users who visit the site with their images turned off can find their way. The pages also use small text links which ensure users will be able to navigate even if their browsers don't support images.

With these links in place, people may "read" the site from start to finish if they choose. Truth is, many people like this sort of straight-line exploration; after all, most of us have spent years reading books. Web designer Joe Gillespie found this out soon after posting his wonderful Web Page Design For Designers site; e-mail response forced Gillespie to add a "next" button to his pages.

Still not content?

But in sites of any complexity, the next button and the navigation bar may not be enough. The Lighthouse site also allows viewers to look at an old-fashioned table of contents. It was added after e-mail feedback from Age reader Dr Jeremy Keens of RMIT. Such tables, common on academic sites, just don't appear on the trendy Web sites of 1996. But as I mulled over Dr Keens' suggestion and surfed the Web, I found myself wishing many a time that a site would describe its own contents at the start. The table of contents, I'm starting to think, is a convention that Web site designers have been too eager to discard.

The end result at this site quite closely resembles Gillespie's, and follows the model recommended by Apple in its excellent Web design tutorial.

Hypertext purists may complain that all these navigation devices seek to impose too much order on the chaos of the Web. And not every site needs to order its "information" like this; some need to create mystery in order to entertain. But truth is, human minds like a certain amount of order. The Web is messy enough already. Helping people around it is a worthy goal for any site designer.

Up to => Home / WebRef / Navigation

Guide Keywords Lexicon Site Map Top 100 Tutorials


Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers