Static Footer Bars – Web Navigation Trend

Well, maybe the title of this post is a little misleading: static footer bars aren’t really new. Facebook had one years ago. What’s new(ish), however, is how widespread they’ve become–something of a trend these days.

Below is one from CNET.com as an example:

Figure 1: Static footer bar on CNET.com (click to enlarge)

You can see the black bar at the bottom of the screen with several options: recently viewed products, my lists, something called TechTracker, log in, and join CNET links. It’s a toolbox of options from across the site brought together in a single mechanism. This bar is static and stays in view as the user scrolls down a page.

In Designing Web Navigation, I use David Fiorito’s and Richard Dalton’s navigation types to distinguish between different functions a navigation mechanism can have. (See their IA Summit 2004-05 presentations “Creating a Consistent Enterprise Web Navigation Solution.”  and “Thinking Navigation.”) Based on these categories, here’s how I describe the three fundamental types in my book:

• Structural Navigation – This type of navigation connects one page to another based on the hierarchy of the site; on any page you’d expect to be able to move to the page above it and pages below it.
• Associative Navigation – Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.
• Utility Navigation – Connects pages and features that help people use that site itself;. these may lie outside the main hierarchy of the site, and their only relationship to one another is their function.

Static footer bars fall into the last type: utility navigation. As in the CNET example (Figure 1), they usually include functional and helpful features for the site.

Previously on the Crate and Barrel site, the static footer bar contained the online shopping cart, lists, and a link to check out. Figure 2 shows a screenshot from the site from about 6 months ago (i.e., middle of 2010).

Figure 2: Static footer on Crate and Barrel with shopping cart feature (circa June 2010)

Since then, they’ve removed the static footer and move the utility options to the top of the page. Perhaps the static footer wasn’t working well with users? I can imagine it would be easy to overlook it, and putting something as significant as the shopping car in a footer might not give it the prominence it needs. Visibility is likely to be an issue with static footer bars.

The AllAboutJazz.com website recently introduced a fairly extensive static footer menu (Figure 3). It includes social media links, RSS options links, radio stations, and even provides quick links to some main content on the site.

Figure 3: Static footer on AllAboutJazz.com

There are several things to note in this example:

1. It does not extend across the whole page, as in the Crate and Barrel example (Figure 2). Instead, there is a small gap between the ends of the footer bar and the sides of the browser (when viewed at 1024 wide or wider). This is important to maintaining a sense of something that sits on top of the page as an overlay and not something that takes space away from the content. Though I’ve never tested static navigation footers, I also suspect that not extending the bar all the way across the page reduces the chance of “blindness” to the bar itself. The CNET example (Figure 1) also takes this approach.
2. The static footer bar on AllAboutJazz is semi-transparent. This provides the sense that it’s an overlay, and it feels less intrusive on the page and its content.
3. If the above two points aren’t enough, users can collapse the static footer bar on AllAboutJazz.com. It’s open by default, but with a single click it can be reduced to the size shown on the lower right of the next screen shot (See the “Tools” overlay in Figure 4.)

Figure 4: Collapsed static footer on AllAboutJazz.com

Static footer bars aren’t going to solve any major structural or navigation issues with your site, but I imagine they can be useful to help keep page navigation from getting in the way of content or tasks users are trying to accomplish. It also potentially keeps utility navigation options close by for visitors who need them.

There are other examples out there on the web. If you have used them, I’d like to hear what went well or not.

I’ve not implemented static footer bars in any of our designs, but I’m starting to explore their use. Nonetheless, from surveying examples found on the web, my recommendations for static footer bars are:

• Avoid teasers and promotional links. This extra “noise” may give the illusion that all of the options there are just ads and none of them can be useful.
• Don’t extend the bar all the way across the page. Leave a gap between the left and right edges of the footer and the sides of the browser. It could even be smaller than the width of the content area on a fixed width layout.
• Use a transparency for the background of the bar so the page behind it comes through a little.
• Allow users to collapse a static footer bar, and then to expand it again.

—

If you’d like to find out more static footer bars and related topics, I have two sets of workshops already planned for 2011, in English and in German:

1. In ENGLISH: Part of UX Fest in London, February 9-10
a. Designing Web Navigation
b. Faceted Search & Beyond

2. In GERMAN: Workshops in Hamburg by NetFlow, April 11-12
a. Prinzipien der Informationsarchitektur
b. Elemente des Navigationsdesigns
[details and online registration to come]

See my workshops page on this blog for descriptions of the sessions.

Tags: static footer bars, web navigation