Sticky Navs are the Browser Toolbar Extensions of the Modern Web
A website design trend I rarely hear any complaints about are sticky headers. It seems to be a nearly universal trend and I myself have even implemented a few for my apps and sites. The problem with trends, however, is that often people stop thinking critically about why something became a trend in the first place, and whether the reasoning is sound. Worse yet, trends often seem to be intuitively correct which adds to the lack of critical thinking.
Sticky headers on the surface seem intuitive. Navigation is key to any website and it’s often the most prominent element in a design. But they are often built off of the assumption that every item in them has equal weight, and worse yet, that users actually need access to those items at all times.
Think about some of the website and apps you use most often and ask yourself just how often you flip between their different sections in a given session. If you’re anything like me, you probably tend to stay in one main section for the duration of a session, and only rarely do you navigate to another. Furthermore, think about how often you’ve lost track of the main navigation and not known how to get back to it. Probably not very often at all, considering most navigation either resides on the far left or top of a given interface.
Let’s be honest with ourselves — these “sticky headers” are modern day toolbar extensions. They’re the weather bug of the modern web. In fact, they’re worse — at least toolbar extensions of old could be disabled and removed. Sticky headers, however, you’re stuck with, and this time there’s no standard height they need to adhere to. In an era of smaller and smaller devices, where screen real estate can come at a premium, the worst thing an interface is do is further restrict the viewport. If the designer of a website decided they needed 150px in which to cram their ever so important navigation, social sharing, or notifications items into you’re going to have to either deal with it or pound sand.
This trend reminds me of the old trope of refusing to design anything “below the fold”. Even that phrase is silly because it refers to the crease that newspapers have when stacked onto each other. Seriously — newspapers! I wonder what non-digital analogy sticky headers harken back to. Whatever the justification, it’s likely that it’s not based on actual usability studies. Maybe we just miss frames?
As I write this I am noticing that even Medium has fallen victim to the sticky header scourge. Of the 7 items in this 66px sticky header, only one is even moderately useful to me while I’m writing or editing an article and that’s the “Draft/Saved” notification, which could easily pop into frame on either side of the main copy if it’s really that important to remind users that their work is being saved (frankly, I shouldn’t need the reassurance).
I think sticky headers started to become popular when web “applications” started to become more prevalent. Desktop applications usually came with “chrome” that remained static during use, and in most cases it was for good reason. Imagine having to scroll to the top of your Word document every time you wanted to make some text bold. If your website is legitimately a web application—such as a photo editing or word processing app—then by all means, add to the chrome browsers already have so that your users can conveniently access the most commonly used features. But if your website is say, a news aggregator, I would take the time to consider just how often you expect your users to be jumping between different sections.
I will admit that I feel the pain of sticky headers more than the average computer user because of my 12" Macbook’s small screen size. Every pixel is precious to me and when some garish toolbar follows me down a page as I scroll I can’t help but feel claustrophobic. It takes a lot of careful consideration and discipline to pear an interface down to its bare essentials. Using sticky headers when there is no point, like cramming as much content above the fold used to be, is lazy and misguided. Use with caution.
