The bread crumbs show the users where they are and how the information is structured. Because users see the way the hierarchy is structured they can learn it more easily. Sites with a large hierarchical information structure, typically more than 3 levels deep, benefit the most from the use of breach crumbs. By making each label a link, the users can quickly browse up the hierarchy.
Example of bread crumbs on the NASA Portal:
How to Implement Bread Crumbs
The path shows the location of the current page in the total information structure. Each level of the hierarchy is labeled and functions as a link to that level. The current page is marked in order to give the users feedback about where they are now. Don't use the current page name in the breadcrumb as the only way to show section title, add a title anyway.
The path shows that a top-down path is traversed by using a > separator to
suggest a downward motion. If the path becomes too long to fit in the designated
place, some of the steps can be replaced by an elipsis e.g. "...".
The path is placed in a separate row that spans the entire width
of the content area. It is placed close to the content area, preferably above
the content area but below the page header.
The CMS generates bread crumbs automatically on the Portal. However, they will need to be manually created on the affinity websites. The HTML for your bread crumbs will look something like this:
<tr>
<td width="10">
<img src="/images/common/spacer.gif" width="1" height="1" alt="" border="0">
</td>
<td width="526">
<a href="/home/index.html">+ NASA Home</a>
> <a href="/missions/highlights/index.html">Mission Sections</a>
> <a href="/mission_pages/hurricanes/index.html">Hurricanes</a>
> <a href="/mission_pages/hurricanes/archives/index.html">Archives</a> > 2006
</td>
<td width="10">
<img src="/images/common/spacer.gif" width="1" height="1" alt="" border="0">
</td>
</tr>
|
