Sitemap Footer

The footer for wholefoods.com

What

Place a site map into the footer of every page in a site. Treat it as part of the global navigation, complementary to the header. Abridge the site map if you need to make it fit into a compact space.

Use when

The site you’re designing uses a generous amount of space on each page, and you don’t have severe constraints on page size or download time. You don’t want to take up too much header or sidebar space with navigation.

The site has more than a handful of pages, but not an outrageously large number of categories and “important” pages (things that users will look for). You can fit a reasonably complete site map—at least for pages that aren’t in the header—into a strip no taller than about half of a browser window.

There may be a global navigation menu in the page header, but it doesn’t show all levels in the site hierarchy—maybe it only shows the top-level categories. You prefer a simple, well-laid-out footer instead of Fat Menus, perhaps because of implementation ease or accessibility issues.

Why

Sitemap Footers make a complex site more discoverable. They expose many more navigation options to visitors than they might otherwise have.

By showing so many links on every page, you make it possible for a user to jump directly from any subpage to any other subpage (or major page, anyhow). You thus turn a multi- level site—where subpages aren’t linked to the subpages in other site sections—into a fully connected site. The footer is where the user’s attention lands when she reads to the end of a page. By placing interesting links there, you entice the user to stay on the site and read more.

Finally, showing users the whole site map gives them a strong sense of how the site is constructed and where they might find relevant features. In complex sites, that could be valuable.

You may find yourself trying to choose between a Sitemap Footer design and a Fat Menus design. In conventional websites, a Sitemap Footer would be easier to implement and debug because it doesn’t depend on anything dynamic: instead of showing fly-out menus when the user rolls over items or clicks on them, a Sitemap Footer is just a set of static links. It’s also easier to use with screen readers and it doesn’t require fine pointer control, so it wins on accessibility as well.

On the other hand, the footer may be ignored by busy or casual users who focus only on the page content and the headers. Usability-test if you have any doubts, and watch the click metrics to see if anyone even uses the Sitemap Footer.

How

Design a page-wide footer that contains the site’s major sections (categories) and their most important subpages. Include utility navigation, tools such as language choice or Social Links, and other typical footer information such as copyright and privacy statements.

This might constitute a complete site map for your site, or it might not. The idea is to cover most of what visitors need to find, without overloading the header or sidebar navigation. In practice, what often happens is that the global navigation options at the top of the page reflect a more task-oriented design—it tries to answer visitors’ immediate questions regarding “What is this about?” and “Where do I find X right this second?” Meanwhile, the Sitemap Footer shows the actual hierarchical structure of the site itself. This two-part arrangement appears to work well.

If your site deals with content that itself requires complex navigation—such as a large set of products, news articles, music, videos, books, and so on—you could use the top of the page for content navigation and the Sitemap Footer for almost everything else.

Here are some features that can often be found in Sitemap Footers:

  • Major content categories
  • Information about the site or organization
  • Partner or sister sites—for example, sites or brands owned by the same company
  • Community links, such as forums
  • Help and support
  • Contact information
  • Current promotions
  • Donation or volunteer information, for nonprofits

Examples

REI’s website demonstrates the difference between task-oriented top-of-page global navigation and an effective Sitemap Footer. Shopping, learning, and travel dominate the header, as they should—these are what most site visitors come for. The footer handles secondary tasks that are nevertheless important: “about” information, customer support, membership, and so on.

The footer for REI.com

The Los Angeles Times footer shows much of the same content as the double tab in the header, but flattened and organized somewhat differently.

The footer at latimes.com

The Wall Street Journal has an immense footer. This is probably larger than you’ll want to make yours.

Very large footer at the WSJ site

Flickr, as always, is minimalist. It eschews the column structure that most other sites use for their Sitemap Footers, and uses rows instead. MapQuest uses columns, but it also does a lovely job in a small amount of space.

Flickr's footer The footer for MapQuest

In other libraries

Sitemap Footer at Welie.com
Fat Footer at UI-Patterns.com

The name “Fat Footer” has sometimes been used for this pattern, with a slightly expanded definition. For some wonderful examples, see the Smashing Magazine article titled “Informative and Usable Footers in Web Design”.