Docking Navigation Bars – Web Navigation Trend

I a previous post I pointed to a recent trend of having a static navigation bar at the bottom of the page–the static footer bar. This navigation mechanism is usually a type of utility navigation or tool bar of sorts.

A conversation over on the IxDA discussion board highlights a similar technique that locks a navigation at the top of the screen. I call these docking navigation bars. One example discussed comes from GamePro.com. Here’s how it works:

A normal main navigation bar is presented towards the top of the page inline below the site logo, as shown in the image below:

Figure 1: GamePro.com homepage, at the very top of page.

Then, as you scroll down the page, there will be a point where this main navigation bar is no longer visible. At this moment the bar docks to the top of page, allowing the content to scroll behind it. The docked navigation then stays visible and accessible as you scroll the entire page, which on GamePro.com is fairly long. Figure 2 shows the docked main navigation bar as I scrolled about half way down the page.

Figure 2: GamePro.com homepage with a docked navigation bar

Comparing the two figures above, you may also notice that the logo is re-positioned from the top left to the right, and it is smaller as well. So the docked navigation bar is a slight variation of the main navigation bar, but consistent enough to be predictable.

Overall, docking navigation bars are a clever use of real estate: instead of the main navigation scrolling away completely, or instead of having a large fixed non-scrolling header area, the docked navigation bar provides ready access to the main areas of the site without intruding on the content too much. And if the docking doesn’t work on a specific browser or device (e.g., it didn’t seem to work on Safari on an iTouch), there’s not much of a disadvantage: the page still works as expected.

I also previously posted about scroll-activated dynamic menus. The docked navigation bar is also scroll-activated and fits in that category. But it’s more static and generally serves a different function than the examples I pointed to in that previous post.

My UX team tried docking navigation bars in the past–perhaps 5 years ago. So it’s not really new. But at that time, it was difficult to get the navigation bar to dock smoothly and consistently on all browsers. Back then, it tended to flicker as you continued to scroll. These days it seems much more feasible and very smooth. On GamePro.com there’s even a subtle animation as the navigation bar docks.

You can find other examples of this on the web, for sure, and I suspect we’ll see more of it as well as variations of docking navigation bars.

I don’t know of any usability studies around this technique, so if you have anything on it let me know. Overall, I personally don’t have an issue with the approach. But it would seem to make more sense with functional options that work together with the page content somehow. For instance, for a web app if you had options to print, copy to clipboard, and the ability to navigation from search term to search term in a docked navigation bar, that would make sense. For a fairly flat, static navigation like on GamePro I’m not sure of it’s real value.

There may be disadvantages with docking navigation bars, as well. For one, it’s an extra cost to program and maintain. But there might also be accessibility issues with it. (Of course, it could also be an advantage for accessibility). If you have insight into the accessibility of docking navigation bars let me know that as well.

Let me know your thoughts on the pros and cons of docking navigation bars.

To learn more about web navigation and IA in general, come to one of my workshops this year. I have two coming up–one in German in Hamburg and one in English in Sydney:

1. In GERMAN: UX Workshops in Hamburg by NetFlow, 11-12 April
a. Prinzipien der Informationsarchitektur
b. Elemente des Navigationsdesigns
Die online Anmeldung ist offen.