18

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?

10
  • 3
    What sort of website are you talking about? Websites are not all the same, every site is different and has different users and requirements.
    – JonW
    Oct 1, 2013 at 14:08
  • 2
    OK, I've edited your header to say it's a Social Media site as we need more specific targets otherwise it's too broad. And please write your posts in full English, not in abbreviated text speech as you had done before I edited it. This is an English language site and we expect a degree of professionalism in all posts being made.
    – JonW
    Oct 1, 2013 at 14:17
  • 9
    @Akaren "Web 2.0 website" doesn't really mean anything.
    – Matt Obee
    Oct 1, 2013 at 14:34
  • 2
    The "Web 2.0" buzz word was around long before Facebook, Twitter, or any other social media websites existed. Web 2.0 didn't mean anything back then, either. It's just a marketing word to make interactive websites sound more special than they really are.
    – cimmanon
    Oct 1, 2013 at 15:16
  • 3
    But surely you're not working on a "Web 2.0 site". That would never be a project brief. You'll be working on "A site that allows people to upload, tag and share images with each other" or something like that. Sure, someone in Marketing may well have said they'd like it to "be a bit web2.0-y" but nobody would actually give you a brief that says "I want a Web 2.0 site" and nothing else. That's like saying "I want a Drupal website. I don't care what it's about, I just want one".
    – JonW
    Oct 1, 2013 at 15:28

4 Answers 4

18

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.

1
  • thax u very much forur info, i go with sticky menu then
    – Akaren
    Oct 1, 2013 at 16:16
8

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.

5
  • 1
    I don't entirely agree with what you say. I think a header should be fixed if the content itself is ever lasting like a continuously scrolling page. That means that the navigation should be accessible at all times.
    – UXerUIer
    Oct 1, 2013 at 15:17
  • 1
    +1 for the second bullet. I'd estimate 90% of the sticky headers I've encountered wasted screen space and offered nothing I found of value prior to becoming the target of a new ad block rule to hide them permanently. Oct 1, 2013 at 18:50
  • 1
    @Majed – Good point. I've updated my answer. Oct 3, 2013 at 9:51
  • @DanNeely That's a good point, since a lot of sticky headers can be obtrusive and can obscure elements that are deemed necessary by the user. I think sticky headers shouldn't be more than 50-100 pixles, and that might be pushing it. TonyBolero - You're other points were valid as well!
    – UXerUIer
    Oct 3, 2013 at 13:00
  • Apparently this isn't always the case and there are times when users care more about screen space then quick navigation.
    – Tot Zam
    Sep 18, 2017 at 14:27
2

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.

1
  • ok, agree if the current context & the menu have some sort of relationship, ex the current context is about adding some comments while the mail message is in the menu. If the current context has no relationship whatsoever with themenu then we won't need right?
    – Akaren
    Oct 1, 2013 at 16:04
-1

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.

enter image description here

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.