Breadcrumbs help hold a website together

In an upcoming website relaunch I’m working on, I’m making a few tinkers to the website. Overall, I’m trying to move the site from an organizational focus to a client focus – all in the hope of users finding the information they want and need quickly and easily.

One technique I’ll finally be deploying is breadcrumbs.

Breadcrumbs, for those that don’t know, are named after Hansel & Gretel. When being lead to their doom deep in the forest, Gretel threw breadcrumbs to mark their trail so they could return. To prevent you from getting lost in website wilderness, breadcrumbs are links on top of a webpage that show you where the page you are on is in the hierarchy of the site architecture.

Breadcrumbs don’t show you where you have been, as some believe they should, as that’s what the Back button and History files are for.

To see a sample of it, check out a HowStuffWorks’ article How Science Fiction Musicals Work. Note the links on the top-left corner that say “Main > Entertainment > Arts” – that’s breadcrumbs.

Jakob Nielsen Alertbox article yesterday Breadcrumb Navigation Increasingly Useful highlights the benefits of breadcrumbs and the arguments for and against.

Among the benefits Nielsen sites:

* Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
* Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
* Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
* Breadcrumbs take up very little space on the page.

The only convincing argument against breadcrumbs is the time it takes to add them to an existing site. It’s not something that can be phased in, so adding this to every page in a website is a significant effort, hence the reason I’m timing it with a relaunch.

The Missing Quick Link

I’m in the midst of a site remake.

The biggest challenge I’ve encountered so far is with the navigation. How to get as much as possible to a high-level? Can’t put too much in primary navigation or it overwhelms users. But if one rolls things up too much, the resulting labels can be cryptic and things can easily get buried deep.

One feature to help users get to the crucial destinations on a site easily is the Quick Links feature. Quick Links are generally a select menu with items in the menu being links. They usually are only available on the homepage of a site.

I started seeing Quick Links about two years ago and lately it seems to be becoming common practice.

Today, while scouring the Web for inspiration for my website remake, I checked out Microsoft’s site. In my travels over the biggest and brightest websites, I hadn’t found anything innovative in overcoming the basic navigation challenge. But at Microsoft I did find an invaluable tool to bypass those problems. (The feature isn't on all MS sites, so check out Microsoft Mobile to see it.)

Their Quick Links tool improves upon the common version dramatically!

1. It appears on every page.
2. It appears in the top-right hand corner (opposed to the center of the page). The top-right hand corner is pretty much the standard utility bar area and it’s where users expect sitewide functionality options and search methods (eg. Search engine, site map).
3. A mouse-over which is easy and quick to activate triggers a pop-up layer to appear with the links – this is easy to peruse and offers at-a-glance links
4. It allows a prominent, visual way to organize the links

I intend to use this approach on the upcoming website remake. It will go a long way to solving my navigation nightmares.

So Microsoft can be innovative – maybe just not in their browsers though.