Mega Breadcrumb Pattern

a.k.a. one part of the solution to broken local government websites

As public services, local governments are obliged to provide the public with access to various information and services. It costs a lot less to deliver information online than through other channels, and if local government websites could be made easier and more enjoyable to use then there could be fantastic savings in operating costs – and lowered frustration for us, the general public.

In my time working with local government organizations to improve their online presence I've seen a recurring pattern of Kafkaesque website disasters. The NYC.gov website demonstrates many of these patterns.

To explore some solutions, I created a prototype of a sample page on the NYC.gov website.

NYC.gov page for Dog Licenses

This is a typical page on the NYC.gov website, and is representative of most local government websites that I've seen.

Some interesting points:

Only 25% of the viewport is used to show the main content of the page.

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.

There are two calls to action, but with non descriptive 'Click here' anchors and obscured by content in the lower half of the page where they are not easily seen.

Prototype using a mega breadcrumb navigation

Here's what my prototype looks like. 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 Optionswithin the top half of the viewport.

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 Mega Breadcrumb

A mega breadcrumb combines a typical breadcrumb (which shows the current page in relation to the hierarchical structure of the website) with mega menus for each part of the breadcrumb.

It provides a minimal approach to navigation without providing excess distraction.

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 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?

Getting down below the fold

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.