Is a website with a Fixed Header good for end-users of a Web2.0 website?

Question

Fixed Header is the header that is always visible to users even the user scrolls down. It uses the fixed-position in CSS.

There a lot of websites nowadays that use a fixed header, such as gmail or Facebook. When you've logged into Facebook you scroll down you still see the header with the search bar and some other functions at the top. Similar functionality exists in gmail, but not in yahoo mail.

The benefit of a fixed header is that if the user need to use a function they can easily jump to the header without the need to scroll up, as would be required for a non-fixed header. However, if there is more content then users might lose some space because the header occupies some permanent screen real-estate. Also using fixed position CSS is not easy to do and so if you implement incorrectly the page can render incorrectly due to Fixed Position.

Web2.0 is website that interact with end user more, user can do all sort of things like move image around... like facebook opr tumblr.

So do users prefer a fixed header or non-fixed one in Web2.0?

Answer 1

Here's a study published by Smashing Magazine that supports the use of sticky navigation:

http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

Two key points from the study:

1. STICKY MENUS ARE 22% QUICKER TO NAVIGATE: The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors.

2. 100% PREFERRED STICKY MENUS WITHOUT KNOWING WHY: ... Participants were then asked whether one of the websites felt easier to use. Six of the 40 participants had no preference, but of the 34 that did have a preference, 100% of them indicated that the website with the sticky navigation was easier or faster to use. Many comments along this line were made, such as “I don’t know how the websites were different, but I felt like I was spending a lot less time clicking with the first one.”

I also don't agree with Tony's second point. One of the reasons why sticky navigation is effective is that once you've scrolled, and then realize you want to be somewhere else in the site, it's easy to navigate elsewhere. You cannot assume that someone's first choice is going to be their last.

The popularity of infinite scroll and long pages (see comment below) contribute to the effectiveness of sticky navigation.

Another very important thing to consider is mobile. Sticky navigation is very effective with mobile sites because those pages tend to be longer, and having the navigation accessible eliminates the requirement for a user to scroll for a long time to reach navigation to take them elsewhere. Yes, it takes up precious real estate on the screen but that's better than stranding your users on every page.

Answer 2

The design problem you want to solve with a fixed header is to provide quick and easy access to additional pages or tools. The negative effects you get with that solution is that you end up stealing precious pixels from the content. That's the problem we had 15 years ago when everyone wanted frames on their site. This might not be a big problem on desktop based sites but on mobile devices it is. 99% of the time a user spends on a site is interacting with the content, not the navigation.

I would recommend the following rule:

• Use a fixed header if the header mainly contains tools that the user would use frequently and when those tools doesn't belong to a specific context or a specific task flow. Twitter and Facebook as you mention is two good examples of this rule. When a visitor uses Facebook he/she might scroll down and look at all the status updates. Then he wants to write an own status update and uses the header for that purpose. After a couple of minutes someone sends the user a message and a notification appears in the header. All these events could happen in any order.

• Do not use a fixed header if the header mainly contains a global menu that leads to distinct site sections that contains information for different audiences and user tasks that are not related to each other. Usually people don't spontaneously browse around a whole site or have multiple very different goals. Therefore the need for instantly reach the other menu links isn't necessary. In that case - it's better to leave more room for the content.

In the case of using an infinite scroll effect you might want to add some sort of back to top or "show menu" link or yes even a header. Some mobile apps, such as Pocket and the new Safari for iO7, have solved the problem with getting to the menu fast by revealing the header/footer when the user taps on the screen. So in an infinite scroll scenario you might end up somewhere in between the two rules.

Answer 3

One important feature in common on most of those sites is the use of infinite scroll to display long lists of user-contributed content. This means, the user can go down a long distance when the heading is needed (navigate, search, display notifications, or jump to contribution mode).

Forcing the user to scroll up, requires an extra effort of scrolling, but also losing the current context. So, in general having the header bar available anytime is a good idea to save the scrolling effort (although alternative solutions can be used for this), but it is especially relevant when keeping the current context is important for the functionality provided in the header.

Answer 4

Fixed headers are a very bad design choice from user experience point of view no matter what research says. 1% of the time they are useful when a user needs to navigate somewhere and 99% of the time they just sit there providing no utility to the user.

Fixed headers are allowed only when they automatically hide when scrolling down and show up whenever the user starts scrolling back up. The reason they are bad is because they steal screen space from user. This is very important especially if a particular user is using a laptop or a mobile device such as a smartphone.

Good example of handling this issue is Safari for iOS, when tab bar with address bar slide up when scrolling down but appear immediately whenever user starts scrolling up. Thus way users will get the benefits of faster navigation as was mentioned in the study without stealing screen estate and using it effectively for presenting content itself.

I really hope that this fashion for fixed headers goes away in the future, as people realize that, especially on mobile devices and small laptops screen space is valuable asset for presenting content and not clogging it with useless navigation bar, which sits there doing nothing except obscuring content most of the time.

In the example above literally 10% of the screen space is stolen from me, giving me a smaller effective screen size. If I wanted to have a laptop with a smaller screen, I'd get myself one. So it is not for the web designer to decide what screen size I should use. For this reason I avoid websites with fixed headers that are too large or if I really need that content, I use Reader View in Safari, which is a really good function that display content on the whole screen, allowing you to consuming it without being distracted.