Mixing Full Page-Width Navbar With A 960px Body

Question

Is there ever a use case for mixing a full-width top navigation bar (meaning the navigation bar content is also full-width) with a contained body (around 960px)? What are the benefits or drawbacks to doing so in terms of usability and design?

IMO, it should either be full-width or contained, but not both because mixing would cause usability issues:

• Quick scan-ability isn't possible because of the difference in alignments.
• The disparity is especially bad on wider screens, forcing more eye and mouse movement to even use the navigation bar elements. This could minimize the effectiveness of the navigation bar.

Still, I'm interested in exploring the idea further. Are there any websites that have pulled this off successfully?

Edit

Here is an example mockup of what I'd like feedback on:

Edit Redux

Some examples have been given, but the heart of what I'm after is if this is a good idea and, if so, when it should be used. Even though Google does it, I'm not convinced that this is actually a user-friendly design pattern.

Answer 1

If you consider Google to be a successful company who have started to shape up on User Experience the last year, then that is your answer. They implement a full width top navigation bar on all of their sites, and some of the content is narrower and centered in the middle. It looks like the pattern in your question.

Google bar’s updated look

Posted on Googles support site one can read:

The Google bar is made up of two parts: A dark gray bar where you can click to access various Google services and a light gray bar to help you search, share, and manage your account. [...]

The light gray bar may contain a search box for the Google service you are currently using. If you are a Google+ user, to the right you will see a share box and notifications icon to participate in Google+ from any Google page.

Google have had a lot of comments to remove the bar entirely and made a try in november last year (2011). But that design (a hover drop down menu) where even more refused by the community. Google had to go back to the black bar again, but are asking the community what to do instead.

From my own personal view I like the black bar since I always know where to find my Google services. The "community" isn't always right, but they make a lot of noice. I think it's safe to use the browser window wide navigation bar on the top - since users can always find what they need with only one click.

Answer 2

I have used such stuff in some of the designs I have done.

In my opinion based on some of the research work done, both the things can be mixed if they don't have a direct relationship between the two.

Like in case of google, the content on top bar has no direct relationship between the content and the navigation on top. It can be termed as additional featured which doesn't effect even it removed.

I once designed a website where the user needed to login to access some of the content of a website. The website was already designed and I was working as a consultant to determine the drawback and give suggestion to some of the new featured introduced. My take on that was since the website layout remains the same and only the content of the site changes based on the login then it is better to use a dark top bar where we can list the user profile and edit option and keep the site below that. It actually acted like a toolbar which never interfered with the overall design of the site.

As for the alignment and scanning, since these are very rarely used option the user had no problem accessing them.

Answer 3

Currently the New York State Department of Labor uses a "full-width" persistent navigation bar for its persona based navigation (mega menu) at the top of the screen. Once you reach a more content specific area, an additional side bar appears to the left. The side bar then provides users with a form of content specific navigation.

Top Navigation

Side Navigation (Area in white denotes selected/current page)

Answer 4

If you want to check out an example play around with Swipely (you'll have to make an account to see the regular UI). I personally don't think it's a "bad" experience but not sure it adds much.

I can see a use case on a site a lot of text content where is may actually be beneficial. Content is contained within the body area and scrolls. Menu/buttons are pushed out to the sides to create a more "distraction free" reading environment. It's a stretch... but could be useful in some situations.