The Trouble with Sticky Headers

A recent trend in UI design is to use “sticky” navigation headers where a website’s navigation stays visible as you scroll down the page. Sticky headers can be a useful addition to a website, but they can easily become an annoying mess. The recent reaction to the Google Reader redesign has really brought sticky headers and wasted space into renewed focus. I’d like to break down the good and the bad of sticky headers.

Google Reader feature's a honking big sticky header

Context-sensitive sticky headers can be wonderful

Gmail and both provide excellent context-sensitive sticky headers. In gmail’s “new preview” theme, the action buttons stick at the top of the page, making it easy to reply / delete or label messages as I scroll down the page. Menupages smartly displays a restaurant’s phone number at the top of a page while scrolling down the menu for that restaurant.

Sticky headers at menupages and gmail

Sticky headers should be as small as possible

The taller the sticky header, the more annoying it is. Good sticky headers are compact and don’t draw attention to themselves.

Twitter has a compact=

Sticky headers are intrusive

When I scroll down a webpage, I’m used to all the content scrolling with me. When part of the page stays visible it is distracting: my attention is drawn upward when my focus should be on the new content I’m bringing into view. This can be especially bad with sites that use animated transitions to collapse down a banner (I’m looking at you, Remember: the focus should be on your content, not on your navigation.

Sticky headers block content

Every pixel taken up by a sticky header is a pixel that could be showing content instead. Is the trade-off worth it? Remember, many users will be using smaller sized screens or may have nightmarish toolbar clutter in their browser already. What’s more important: your site’s navigation or the content (and ads!) your site is serving up? Google Plus has an innovative approach to this: they make the header sticky or not depending on how big your browser is (or, relatively speaking, how important your pixels are given the overall size of your screen).

Sticky headers can be helpful

1-click access to important features from anywhere on the page can be a compelling argument. Both Facebook and Twitter pull this off nicely: they have compact, useful headers that are generally useful. Coincidentally, both of these sites have extremely long, “infinite scroll” pages, so the sticky header prevents a lot of scrolling back and forth.

Here is some practical advice for when to employ sticky headers on a website. I strongly advise designers to think very hard before actually using sticky headers in a site; there are more reasons to NOT use a sticky header than there are to use one.

Good reasons for using a sticky header:

  • The header provides information that is critically important anywhere on the page
    Examples: Facebook, new gmail theme
  • The page is an “infinite scroll” that goes on forever and getting to the top of the page may require a lot of scrolling.
    Example: Twitter

Bad reasons for using a sticky header:

  • Branding & Site Navigation. Your website logo is not important enough to have it cover up content and advertisements. People come to your page for content, not navigation.
    Examples: Techcrunch, TheVerge,
  • Consistency. This is the trap I think Google Reader has fallen into. Sticky headers should not be used just to make the site structure more consistent with, say, maps or other apps. I’ve long been a believer in context trumping consistency, and in this case Google Reader’s sticky header is a big failure. It’s too big and it doesn’t provide genuinely useful controls. I actually think a tiny header with action buttons may have been OK, but as it is, the content itself is sacrificed for navigational consistency, never a good trade-off.
    Examples: Google Reader

One comment

[...] are many opinions on this topic, and some would argue that sticky navigation isn’t worth it. Here are some things [...]