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.

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:

mockup of top navigation bar and content 960px wide

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.

share|improve this question
3  
The only time I can recall seeing this mix is in those terrible <iframe> sharing topbars: it definitely makes the page look and feel disjointed. –  msanford Apr 26 '12 at 17:51
    
This sounds like the beginning discussion of an iPad or other tablet UI. I would spend a few minutes browsing the Android, iOS, and Amazon Kindle marketplaces for some screenshots or examples. –  Mike Hill Apr 26 '12 at 19:11
    
It's actually not specifically for any mobile or tablet device. Just a normal website. –  Virtuosi Media Apr 26 '12 at 19:24
    
any examples? can't think of any site with full-width navbar content i.e. there are many with full-width navbar but its content would still be well-aligned –  o.v. Apr 27 '12 at 1:51
1  
like google.com and 37signals.com –  Emil May 11 '12 at 6:47

4 Answers 4

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

Labor home page showing mega menu

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

Labor page showing side navigation

share|improve this answer
    
Thanks for the answer, JeffH, but this is actually an example of a navbar where its content is contained and not full-width. While the navbar itself is full-width, I'm looking for examples where the navbar content is also. –  Virtuosi Media Apr 26 '12 at 20:36

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.

share|improve this answer
    
I only saw one page where it was mixed, the rest was either contained or full-width. I think that site has quite a number of usability issues, though, one of them being that they switch back and forth between full-width and contained content from page to page. Nothing is ever in the same place. –  Virtuosi Media Apr 26 '12 at 22:14

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 full width navigation bar

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.

share|improve this answer
    
Do you know if Google has published anything on why they decided to go this route? –  Virtuosi Media May 10 '12 at 23:22
    
@VirtuosiMedia It's very hard to find the original idea of the bar, but I've made my best to edit the answer on what's going on at the moment. I hope it will be useful to you. –  Benny Skogberg MCSA May 11 '12 at 6:25
1  
@VirtuosiMedia Jon Wiley presented it at UXweek, the video is available at uxweek.com/2011/videos That's the closest thing to a "rationale" that I am aware of. –  Daniele May 11 '12 at 8:01
    
What is interesting is that it does give a degree of separation between the bar and the content, which I suspect is deliberate. Google wants to be the portal for everything, not just a search engine provider. So they have the top bar indicating all of the things they do, and the trivial content of the actual process comes below - sometimes full width, sometimes not. –  Schroedingers Cat May 11 '12 at 8:48
1  
really good example, google have got this hierachy technique spot on –  Chris Jun 22 '13 at 21:01

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.

share|improve this answer

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.