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.

Looking for best practices when designing a persistent navigation like below: NFL (the scores in the banner)http://www.nfl.com/

Facebooks blue header http://www.facebook.com/

Creatticas header and left buttons http://creattica.com/

share|improve this question
1  
I think we need more context here to be of help with specific best practices. It really depends on the type of site, the content, page layout, etc. –  DA01 Nov 8 '11 at 3:58
    
Its for a web app. For a health/fitness website. The navigation would house pages and well as buttons that are used for specific actions like 'logging an activity'. The point would be to have those buttons visible at all times, since they are the whole point of the site. –  Christie Day Nov 8 '11 at 13:54
add comment

1 Answer

up vote 4 down vote accepted

I haven't seen any formal write-ups on this convention, and I think "best practices" are a little dubious given the variety of UI layouts and aims, but having recently designed one of these I would offer a few pointers:

  • Keep the navigation compact. Persistent nav takes up real estate, effectively permanently stealing that space from content. In our case, we very subtly compressed the header as it bumps the viewport and hide unnecessary elements. Your example at Creattica already has a fairly compact header, so this wasn't necessary
  • Make transitions subtle. If you do change elements in the nav as you scroll down, try to be subtle about it - a well-done transition should be barely perceptible. TechCrunch has a very noisy transition that I find distracting - here it is at it's most awkward moment:

enter image description here

Note how the logo is a mess at this moment. They do have a very compact header nav once the clunky transition is over with.

  • If relevant to you, make sure it degrades gracefully. In our case, we needed to support down to IE6, which doesn't have position: fixed CSS support and needed a javascript shim, which in turn proved to be too taxing on the rendering and caused flashing, so we just turned this feature off for browsers without that CSS attribute.
share|improve this answer
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.