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.

I am creating a site where I have decided to place the navigation bar above the site header (below).


enter image description here


I was just wondering if anyone has experience using this technique in a website, and had any feedback from users on whether on not they like this. My concern with this is that I don't want users to be searching for the navigation when they scroll down and the navigation becomes hidden.

share|improve this question
    
You could fix it to the top of the screen so it's always at the top. The Google blog comes to mind, but there are other good examples of doing this. (BoxedIce is another one) –  Matt Jun 7 '12 at 17:11

2 Answers 2

up vote 4 down vote accepted

There are plenty of successful websites out there using this navigation layout, so it not all bad or all good. I personally am against it, an here's why. It violates visual hierarchy. With the nav above the site name (and/or) tagline.

With the traditional layout, the nav is clearly a child, and the logo and page name are clearly the parent item. Clearly indicating to the user that these buttons will move you around the parent site.

Traditional

mockup

download bmml source – Wireframes created with Balsamiq Mockups

With the nav on top layout style, it is less clear that the nav is a child of the site name, and not independent. For example, I as a user may think that this is an inter-site nav (like the top nav on google, or cheeseburger network); rather than the normal intra-site nav.

Your Layout

mockup

download bmml source

If you must put the nav above the header, here are some alternatives to consider: With this one the containers are organized so the nav is still the child, but its still less clear.

Alternative 1

mockup

download bmml source

Or you could do something like TechCrunch and keep the logo inline with the nav, which works very well and is quite clear:

Alternative 2

mockup

download bmml source

Lastly you might consider just putting the nav below the header, and on user scroll, fix it to the top of the browser.

share|improve this answer
    
Thank you, I agree that the way I have it laid out right now may give the user the impression of an inter-site nav instead of the intra-site nav. I think I may try something like your Alt2 example and see how that works out. I would +1 you but I don't have enough rep yet ;). Anyways, thanks a lot. –  Yallow Jun 7 '12 at 18:39
    
Glad to help. :) –  Fresheyeball Jun 7 '12 at 18:41
    
"Lastly you might consider just putting the nav below the header, and on user scroll, fix it to the top of the browser." It would be really helpful if you could you suggest a tutorial site to do this :) –  pansp Jan 18 '13 at 6:24
1  
@pansp that, my friend, is a question of engineering and for stackoverflow not UX exchange. –  Fresheyeball Jan 18 '13 at 18:39

Your concern shouldn't be that navigation disappears when people scroll down (it will also disappear if it's part of the header or under it - unless it's sticky). Your concern should be that people won't notice in to begin with. This for two reasons:

  1. Users are accustomed to treat the header as the top cut-off of the page, it won't be natural for them to search for anything above the header.

  2. Regardless of users' habits, the large header draws all attention away from the small navigation bar at the top simply because it's so much larger and visually heavier. You will need to work hard on graphic design to make the navigation stand out - and if you accomplish that, you'll find that your header feels like it doesn't belong there.

Also - the navigation bar usually controls the area underneath it. The way you propose to do it, you break this connection and the area immediately under the navigation bar remains the same on all pages. This is confusing and weird and it interferes with your users' understanding that the nav.bar is indeed a nav.bar.

share|improve this answer
    
I agree that my navigation might disappear when scrolling regardless of where it is, but my main concern is that the user knows where to look for it when they want to come back up and use it. The only reason I tried the nav this way is to attempt to break from the norm of nav under header site. –  Yallow Jun 7 '12 at 18:43

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.