Tutorial 27: The Care and Feeding of Hyperlinks, Part III
|
| ||||
| ||||
|
|
Breadcrumbs - The Web's "You Are Here" Signs
We've talked about hierarchies a lot in this tutorial, because almost every Web site out there has a hierarchical organization of one sort or another. One of the main functions of navigational links is to make the nature of this structure apparent to the user.
You have to remember that not all users will arrive at a given page through your home page, following links through sections and subsection until they get to what they where looking for. The nature of hyperlinks and the Web means that you can link to a page from anywhere. When a user happens upon a page through such means, you need to make it immediately apparent that this page is part of a whole, as well as which part of the whole it is.
Frames are particularly bad for this kind of thing; a Web search will often point to a page in a frameset which lacks navigational links entirely (since they're normally placed in a different frame), and the user will be unable to access any of the related pages in the site.
The best way to illustrate the structure of your site as well as the position of the current page in that hierarchy is to use "breadcrumbs." Breadcrumbs are a series of links, the first one pointing to your home page and the rest pointing to the pages upwards of the current one in the site hierarchy, all the way down to the current page. WebReference.com has breadcrumbs on every page; you can see them at the top of this one, they're the line that reads home / experts / html / tutorial27 / 5. If a user arrived at this page, he can immediately see that this page is part of a site, and specifically the fifth page of tutorial 27 in the HTML section of the Experts section. He can immediately navigate upwards to find what he wants. If he was looking for a different tutorial, he might follow the tutorials link. If he was looking for a different expert, he'd follow the experts link, and so on.
Breadcrumbs not only show the user how to get to other parts of the Web site, but can also help him get back to the current page after he's left. By illustrating the hierarchy of the site and the page's position in the hierarchy, it's easy for the user to follow the appropriate links and get to the page again in case he forgets to bookmark it.
