As media and e-tailing sites develop more and more content, organizing its diversity has never been a bigger challenge. It's easy to imagine and communicate a taxonomy for a site where pages are dispatched to less than three category levels. But it's harder to classify all products in a mature department store that carries everything, from toys to food, to auto parts, or a daily newspaper site that releases tens of articles every hour.
That huge quantity of content requires far more than three category levels (according to Internet Retailer, Wal-Mart carries 500,000 SKUs online), and the user has to understand and navigate properly through these numerous categories. Recently, the answer to these web usability problems seems to be changing... for the better?
Usually, when we drill down numerous category levels, the menus simply develop themselves through a long succession of indented left menus and/or tab-like horizontal menus (like the ones that can be seen on the newly-redesigned Cyberpresse [post in French] website). This approach, however, has a big drawback : as you can see, the Cyberpresse header (from its top to the end of the breadcrumbs) uses up to 55% of the vertical estate on a 1024 x 768px screen. Say hello to scrolling!
Other recently designed sites directly use the breadcrumbs like a top menu on all but the home page, like the Guardian :
Wal-Mart (I introduced this approach while writing about removing main menus to give internal search engines the prime spot) :
And MarketWatch (a Wall Street Journal subsection) :
Finally, Bell.ca uses such a presentation for the two first levels, with appropriate visual support (however, the site also uses standard breadcrumbs, just below) :
This new method has a few key benefits :
- Spared screen estate (more relevant content above the fold)
- Visual simplicity (less elements to be evaluated/recognized by the eye)
- Technically lighter pages (shorter load time)
- No duplication of navigation elements (the navigation purpose is served by a single element)
But it also brings new problems :
- Only the user's path is displayed (thus hindering error recovery in case that path is wrong)
- Opacity of site structure (the menu doesn't help users understand how the information architecture is constructed as much as in a typical menu)
- Content discovery is more difficult (a user is only in contact with a single category from each level)
- Adoption delay before a new interface element is recognized by all users (this is less of an issue since this "new" element is in fact a merge between two well-known elements)
- Finally (this nuance deeply affects most findability problems) : a blurrier definition of categories (an element is often defined by its surroundings : each label in a menu is clarified by opposing to the others, an element's [a menu's] purpose is clarified by opposing it to other elements [including the breadcrumbs]).
So, how do I know which approach works best for me?
- If you need less than three category levels, the breadcrumbs-as-menu are not for your site (two category levels [plus the page itself] are really easy to understand, and you don't want your breadcrumbs navigation to be to small on the left)
- If you have less than 343 pages, also stick with the classic approach. Why 343? As a rule of thumb, there should be 7 +/- 2 elements in a menu, so 7 (cat.1) x 7 (cat.2) x 7 (pages in cat.2) = 343. Ok, I had to give a number, but I'd say "a few thousand pages" is likely to be a better estimate, considering that with a third category level, we're over 2000 pages.
- If not, evaluate the screen estate spent by the two options.
- Then, evaluate the impacts on customer experience of using each of them : what is the cost on content discovery of not having a full menu? What is the cost of a longer scrolling (are all important calls to action visible)?
- If you use the breadcrumbs as a menu, make sure that there are other ways to navigate, including an efficient search engine, and that the back button can be used (but you've already figured that out, right!?)
- Also make sure that there are hard links to all important categories for SEO purposes (like Wal-Mart's "See all departments" menu and the main menu on the Guardian site)
