Breadth Versus Depth: More Examples - Page 17

The navigation bar from my own site shows the user's current location relative to a hierarchical structuring of the site's content. Note how much easier it is to read the human-authored hierarchy outline in the breadcrumb trail than having to decode a URL and its directory names in the browser's location field.

Two different implementations of breadcrumbs from Looksmart (the 1997 and 1999 designs, respectively). Neither is perfect. The old design is cleaner and makes it very clear how the various elements in the breadcrumb trail are related. Placing a > mark between each name implies a hierarchy or sequence between the elements. In contrast, the elements are separated by a - mark in the newer design. This character does not have nearly the same connotation of hierarchy. On the contrary, the breadcrumb trail looks too much like a simple listing of alternatives that do not have a structure. Unfortunately, the old design did not list all the navigation levels and elided the upper levels, which were accessible by clicking on the somewhat obscure triangle glyph. The new design has the advantage of listing all the levels in the navigation hierarchy that are above the current location, from the very top (World) to the name of the current page (Usability). Of course, it is a mistake to make the name of the current page into a hypertext link; never have a link that is a no-op and points right back to the place the user already is.

Fisheye view of four levels of site content from the 1997 LookSmart design. A fisheye presentation provides progressively more detail at levels closer to the user's current focus of interest. In this example, I was interested in HTML tools for web design, and a click on that option would give me a list of the tools. But the display provides additional breadth by also showing me the other types of web design tools discussed on the site. Stepping up one level takes us further from the user's current interest, so less breadth is provided. The third column indicates that more information is available about other Internet-related issues, but these topics are not described in as much detail as the web design tools. Going one step farther up, the second column lists other computer-oriented topics, but this level is described at a very coarse level of granularity.

The 1999 LookSmart design provides only a fisheye view of three levels of content. The very top level is not shown at all, and the second level is shown only by the headline "Internet." There is no way to find out that the current top-level category is "Computing" or what the other second-level categories might be within Computing. I prefer the 1997 design over this one. (As an aside, why would anybody run an advertisement for "brand-name bargains starting at $7" without telling us what brands or what types of products are being sold? I can't imagine many people being attracted by the promise that some unknown thing can be had for $7.

Breadth Versus Depth: Examples - Page 16
Designing Web Usability
Breadth Versus Depth: Still More Examples - Page 18