Is sticky header good for user navigation?

15/02/2015 By Waka Reading Time: 2 Minutes

Is sticky header good for user navigation?

Sticky header, also called fixed header, is a smart navigation tool that fixes the menu to the top of screen as the user scrolls down a page.

Today we see many web designers adopting sticky headers as a way to arrange and structure a website for a better user navigation, using not-so-complicated CSS coding.

It goes without saying why some designers prefer this technique. And our intuition tends to agree with this popular web design trend.

Before we jump into a conclusion that it is the best solution for all types of websites, from a social media to content-heavy site, we need to step back and evaluate its pros and cons.

Pros and cons of sticky header

So, there was an interesting discussion on an online forum on whether sticky headers improve user experience or not. And here are the most common arguments for the use of sticky header:

Pros:

Time-saving

You have probably experienced this before – scrolling endlessly to go back to the menu bar on the very top after realising that you were browsing the wrong page. With sticky header, however, users are able to jump to different sections easily as the menu bar always appears on the screen.

Good navigation

So, it is the fastest and the most useful way to access to the right information for the end users. That should make a sticky header good for user navigation. For example, a study showed that they are 22% faster to navigate and many participants preferred a website with fixed headers without knowing the exact reason. This particularly comes in handy on mobile interface where text tends to be longer.

Branding effect

Here’s another minor advantage to add – it also helps you build your brand as your brand logo/name will always be there on the page next to the header.

Cons:

Waste of space

But here’s a catch – sticky header tends to eat up some valuable space as it is fixed permanently on the screen. Imagine you already have a beautiful and functioning website, adding a fixed header may seem excessive. It not only reduces the space for text, but also cuts off background imagery.

Distracting

Also if implemented badly or incorrectly, it could even disrupt how the page is presented. Sticky navigation ‘does not always render effectively on mobile and tablet devices’. Those who are against sticky header often argue that users visit the website for content, not navigation. Some users may find it disruptive to the ‘natural flow’ of the web page, while others prefer it for navigation reason (and this is when user testing comes in useful).

Some recommended solutions

If you are a UX designer, you might have already found that there is no simple yes-no answer to this question. Everything depends on the context. Depending on what kind of website you are designing, you will need to weight the significance of both pros and cons.

If you are creating an informative, content-heavy web page then you might find having a fixed header more important than leaving your users feel lost and stranded. In this scenario, it is more plausible that a user is more likely to land on a wrong page on their first visit.

Also, a sticky header is highly recommended if it is clear that what tools are most-frequently used by the users. Like Facebook and Twitter, the users often update their statuses or read messages while scrolling down to browse what other people’s posts.

Otherwise, sticky header is not always a must-have if your website is primarily aimed for users to interact with content. Similarly, deciding what a menu bar should contain is just as equally important as deciding whether to include a sticky header at all. A sticky header that merely allows users to jump to a completely unrelated pages or sections targeted for distinctive audiences might not be helpful for end users.

But again, we can’t emphasise more on how every website is unique, and therefore need a bespoke navigation solution.