navigation tips

There's a lot which can be said about this subject, as it is one of the most important and noticeable things when surfing the web - an activity which, after all, directly involves following links. More information can be found in the Web Design printed booklet and the lectures. Here, I only sketch out here some tips. They're worth thinking about, though!

In general terms, make all your links clear. This isn't simply a matter of making them stand out from the text; although that's obviously important. (Very dark coloured links on this site wouldn't have been helpful at all.) It's also a matter of ensuring that links are not hidden away in large clumps of text, almost as if the page's author is embarrassed about them. I've seen sites where almost half the content is accessible only from a tiny, almost invisible link to which the author draws no attention at all. It's like an important road junction which has no signpost on it. If you miss the turn, that's half the site made redundant, so display your links proudly! This was demonstrated in the lecture, but it's worth repeating.

Along with this, make sure the reader knows where the link will take them. URLs and/or filenames aren't always descriptive. So just putting click here isn't very helpful, with the status bar being unenlightening. Add some form of textual description alongside your link, to let readers know why they might wish to follow a link, as well as where it's going to take them: for instance, follow this link to open, in the second browser window, a site devoted to discussions of the work of Robert M. Pirsig (well, you know, you could, if you wanted to.)

This is also an accessibility issue. You may have noticed that you can manipulate links via the keyboard: Tab will "focus" on each of your page's links in turn, and you can then press Return to follow the link. (It's in this circumstance that the a:active pseudo-class comes into operation: the reason I find this of little use is that this browsing technique is really only used by those with non-visual browsers for whom the style of the link is irrelevant.) For users unable to use a mouse for whatever reason, particularly those using non-visual browsers, this is how they will navigate around your site. For browsers like this, non-descriptive link text (e.g., "click here") is very little help as it will be "seen" out of context. See the page on non-visual browsers for more details.

One answer is to add an attribute to your link, title. This provides a longer description for the link. For instance, we could have done the following:

<a href="http://www.moq.org" title="Work of Robert M. Pirsig: Metaphysics of Quality">http://www.moq.org</a>

Best of all though is to make your link text descriptive in its own right. But if you read the link text by itself, out of context, and can't work out where it'll take you, add a title.

With long pages - and that really means anything over a screenful - use "back to the top" links to minimise the need for the reader to use the scrollbar. If you feel it's appropriate, and on longer pages it usually is, include a table of contents at the top of the page, again, by exploiting anchor links.

Think about, research, and maintain your external links. If the concept of the "Web" is to mean anything at all then some happy medium needs developing between the sites which refer to nothing other than themselves, and therefore sit in little isolated pockets, not part of the Web at all - and at the other extreme, sites which are highly promiscuous with their links, supplying the user with dozens, many of which turn out to be broken or useless.

If you're thinking of putting an external link on your site, check the link out first!. That's so much better than simply finding a URL and bunging it on there, if the site at the other end is of poor quality, isn't actually about what you've said it's about, or is itself nothing more than an undiscerning collection of links. Be selective! The best "link pages" strike a balance between quantity and quality. Not always easy: but nothing good ever is! And as part of this enhancing of quality, do maintain your list of links, as I'll guarantee that about 5% or more of any set of links will go out of commission every month or so, as other sites move or disappear. It's a pain, but it's the way it is.

Ensure you plan the structure of your site. We talked about this in the lecture but here are the important points again. You will have a certain amount of material, so how is this material best divided up into separate pages? Remember - try and have one subject per page whenever possible. How are you going to move people between them? For a small site - five pages or fewer - I recommend you link every page to every other page. With such a small number, you might as well. Beyond this, you should think about a hierarchy of pages. An oft-quoted rule regarding navigation is the "three-click rule": no page of your site should be more than three mouse clicks away from any other page. It's one worth remembering.

Finally, do not create "dead-ends" on your site! Except in the case of links to non-HTML files, where it's unfortunate, but unavoidable, there are few things more irritating when browsing the web to end up stuck on a page that has no links out. At the very least you should return readers to whence they came. Yes, I know the "back" button is an option, but it's very bad web design to force readers to use it. It should always be just an option - and that means every page should have at least one link out.

The above will all suffice for a very simple level of web design, but if you are intending to take this at all seriously, you are strongly recommended to read the much more detailed discussion of good navigation and site structure contained in the course booklet. At the most basic level, do remember that you are writing your site to be read by others. Yes, the Web lends itself to random wanderings, but random wanderings will be just that - random - unless, at some point, some order is imposed upon the material. There is nothing wrong with guiding people through the forest of links, pointing out paths, and making preferred routes clear. That's what good, well-planned navigation will do.

Back to the top

Back to the menu for lesson 3