Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

It's becoming almost customary for responsive designs to have fixed-position navbars, where the navbar is fixed to the top (usually, or even bottom sometimes) of the viewport of the browser.

Don't understand what I mean? Take a look at Twitter Bootstrap's project page. There's the dark navbar at the top. Now scroll down. You'll notice that the navbar doesn't go away. It stays, affixed to the top.

It's not just Bootstrap. Many large websites have been switching to responsive design lately, and most of them (like 90%) have incorporated fixed-to-top navbars. Some examples include: Mashable, ReadWrite, TechCrunch (not responsive design, but still), etc.

The question is, why? What's the reason behind this UI decision? Does it have any prominent advantages other than providing quick access to the menu?

Personally I find it very obtrusive (on desktop / laptop -- it's more natural on touch devices). And is there any study stating that the fixed-to-top navbar is intuitive?

share|improve this question
    
@mauris provided the reason enough to stick with fixed-position navbars, so I am marking it as the answer. Any input is still welcome as I'll continue to watch this question. –  its_me Jan 6 '13 at 15:06
    
Since last year when this question was asked, two of the three sites mentioned have reneged on their fixed navbars (at this moment, ReadWrite and TechCrunch no longer have fixed navbars). I would love to see more discussion about this design paradigm, pros and cons. –  thirdender Feb 5 at 21:56
add comment

4 Answers

up vote 13 down vote accepted

Other than the answer provided by @icc97, a fixed navbar allows users to quickly switch to another page without having to scroll all the way up.

This is only exceptionally useful when your page contents may be lengthy (e.g. infinity scroll, blogs or articles) and your users browse through many pages on your site. Facebook, Mashable, ReadWrite and TechCrunch are magazine blogs which may have lengthy articles and most users don't only stop reading after one article.

share|improve this answer
4  
Right... this is especially true with pages that have infinite scroll enabled + very useful on mobile devices where you'd have to swipe your way up. –  its_me Jan 6 '13 at 14:39
1  
The counter argument however is that by fixing the navigation you're taking up valuable screen real-estate, something increasingly important on responsive sites because when viewed on a mobile there is already limited space to view the content. Is navigation more important than content? –  JonW Jan 6 '13 at 15:18
    
@JonW Here mobile = smartphone, where (in general) the minimum resolution is 320x480 pixels. A < 30 pixel navbar doesn't feel that obtrusive. IMO a fixed navbar feels more natural on touch devices than on desktops. Anyway, this is just what I think. –  its_me Jan 6 '13 at 16:23
    
@JonW indeed that fixed navbar takes up a lot of valuable space. But what's more valuable than providing the ease of navigation through the app? That's why the Facebook mobile app has a short fixed navbar, then a sidebar that extends out for more options - a good balance between the two factors we've described. –  mauris Jan 6 '13 at 21:18
add comment

If you use almost any desktop application - the menu bar will always be visible. e.g. if you Page Down in Microsoft Word the toolbar doesn't disappear off the top.

The fixed navbar is replicating that functionality.

share|improve this answer
    
Good one, makes sense! –  its_me Jan 6 '13 at 16:52
add comment

Not an answer, but I want to point out some of the downsides to the fixed header (if a non-answer like this is out of line please let me know).

The fixed header is somewhat problematic on devices (Safari iPad and Chrome iPad): when you zoom a section of the page the header can become unfixed or semi-fixed. It will scroll but at a different rate than the rest of the page. The behavior is hard to predicts and it's mildy confusing. A fixed sidebar can have more erratic behavior and overlap zoomed content depending on implementation. I suggest testing on tablets with zooming and shrinking and reloading to check for behavior that might be unacceptable.

Another problem I've found is when you page scroll a fixed header page, the page will scroll down the full height of the page disregarding the fact that the effective viewport height smaller than the page height. In other word it scrolls up too much and you need to scroll back down (by the height of the fixed header) in order to not miss content.

There may be implementation ways to address these issues but most fixed header sites do not address them.

share|improve this answer
    
There are two things I'd like to ask. (1) Why would you zoom on a tablet such as an iPad, especially when the whole web page fits in quite well on the large screen? (2) Okay, lets consider that some people are only comfortable at a certain font-size, and therefore zoom-in. Unless you zoom-in a lot, the fixed navbar doesn't seem like a problem on a tablet. (3) I'd agree that zooming would be a problem on smartphones. But in most cases, people who use a smartphone to browse the web on a smartphone don't have to zoom-in (esp. since content has already adapted to the phone's layout). –  its_me Jan 7 '13 at 6:08
    
It doesn't sound like its a downside of the concept of a fixed header - more like the downside of a badly coded fixed header. The position:fixed should be a fairly standard css implementation. Have you tried to see if the Twitter Bootstrap fixed header works correctly in the iPad? –  icc97 Jan 7 '13 at 13:30
    
Zooming behavior is still broken under on iOS 6.0. –  mcb Jan 10 '13 at 5:38
add comment

I think that this may have more to do with the sizing of the whole page. As screens get larger, so does the content. And that means more scrolling.

If you increase the width of the page content, you would generally also increase the height and this will create more scrolling when the user tries to click a navigation link.

Two of your examples (Mashable & ReadWrite) both make use of infinite scrolling, and this can produce some long pages.

Finally, by using a fixed navigation, designers are creating an experience similar to that of desktop and mobile applications (both of which have fixed navigation elements).

share|improve this answer
    
Welcome to the UX Stack Exchange. Nice first post! I have a couple of questions on it that maybe you can clarify. (1) Do you have any citations that could support your assertion that "screens get larger." I would think that with the proliferation of mobile devices, screens are actually getting smaller. (2) Assuming that screens are getting larger, wouldn't that mean that they can display more content per screen, and would thus require less scrolling? (3) Do you have any sources to support the assertion that amount of content is correlated with screen size? –  3nafish Jan 6 '13 at 18:02
    
If you change your ideas about any of the assertions, you're welcome to edit your post. We prefer that posts be supported by evidence whenever possible. You might also want to complete the last sentence: "designers are creating an experience similar"...to what? Welcome again to the site. I hope you enjoy using it! Please don't take my criticism personally; you have some interesting ideas in this post, and I look forward to seeing you around the site. –  3nafish Jan 6 '13 at 18:07
    
@3nafish Sorry, I don't have any definitive sources other than the web usability lab that I work in and seeing the general changing trend. Your point about mobile devices is a good one that I hadn't thought about as we have only recently stared working with mobile/tablet devices. –  Rob Farr Jan 6 '13 at 21:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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