Mathew Sanders /

Mega Breadcrumb Pattern

Mega Breadcrumbs is a design patten intended for primary navigation that simply combines breadcrumbs with mega menus.

Background

Working on a range of projects for government departments in 2009 I noticed a reoccurring issue where patterns designed with commercial sites in mind were being used on .gov websites.

In some cases this is appropriate, like check out flows where in both cases we want to help drive people through a flow with as little interruptions as possible.

On the other hand, navigation patterns used on commercial websites that are designed to encourage visitors to spend more time on their site (to increase revenue or increase sales) can harm the effectiveness of a public service website.

Customer Goals & Choice…

Communicating the content and services that are available on a public service website is an important goal, but people don’t come to government websites to browse or for entertainment, they come to complete some task as fast as possible and then leave.

Online channels are the most cost efficient means of serving customers. Because tasks are generally seen as chores rather than entertainment, any barriers that people encounter on a customer website will lead them to easier1 channels: either visiting a department person or via phone.

Example

Here is the current NYC.gov page that people will find when looking for information about registering their dog.

This page is overwhelmed with 75% of the viewport taken up with navigation

Instead of focus on the unique content of the page, the majority of space is used to promote 40 hyperlinks to pages of unlikely interest.

With mega breadcrumb

Here is the same page redesigned using the mega-breadcrumb pattern. It takes the design philosophy of the current website and turns it upside down:

  • 77% of the viewport is used to display the main content; the remaining space is used to display a global navigation – of 6 hyperlinks;
  • calls to action are clearly listed in a more visible Your Options within the top half of the viewport; and
  • equally important, the page has benefited by removal of design junk gradients, arbitrary chucking and repeated iconography that serve no purpose other than to add noise to the page.

In an instant, it’s easier to grasp the purpose of the page, and what actions are possible.

The Compromise

Using the mega breadcrumb as the main navigation you loose an overview of the first-level of navigation. For a lot of websites this may be a bad idea because with it you loose the ability to showcase the variety of content available to your audience.

But for local government websites this overview of content may be an unnecessary complexity and a distraction — how many visitors who come to find out about dog licenses will want to serendipitously discover crime statistics for their neighborhood?

Scrolling down the page the header is fixed to the top of the viewport providing quick entry points into other part of the website if information can not be found directly on this page.

Because navigation has been moved from left and right columns to the header, content now has the full width of the page available allowing for contextual navigation or media to inserted where appropriate.

  1. This was written before I had immigrated to the United States and was living in New Zealand where customer service in government departments while not often pleasurable is typically a lot more easier than compared to American counterparts. ↩