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.

Sticky (or fixed) headers are not so uncommon nowadays, and for a large website that relies heavily on catalog and search functionality it may be a good choice to aid the user.

As I am currently designing such a website, I was wondering if there was any research done on how users re-act to them? Of course it all depends on how you implement it, and how savvy your user base is, but is there any research-based pattern information available? Common pitfalls, best practices, etc?

share|improve this question
2  
Common Pitfall #1 - If your site is responsive you'll need a different header for mobile users. Having 40 pixels static at the top on a mobile screen would be very bad UX. –  dubrod May 29 '12 at 12:06
1  
Personally, I really dislike the concept. I always find it irrating except on Facebook and Twitter for some reason. Maybe because it's kept to a minimum. –  Tony Bolero Jul 7 '12 at 7:29
add comment

5 Answers

Also if you're worried about screen height, you could have the menu collapse from full size to a smaller size when they scroll down. Then have a down arrow or some other way to let them know to click or rollover and it expands to full size again

share|improve this answer
    
Nice answer, Earle! Welcome to UX.SE :) –  Benny Skogberg May 26 '12 at 12:53
    
Great idea, thank you! –  Vincent van Scherpenseel May 26 '12 at 18:51
    
Bug tracking software called 'Jira' does this. It's nice because it's gone when you don't need it but very easy to restore.. just scroll to the top of the page! –  Captain May 29 '12 at 15:50
add comment

Sticky headers may seem like a new concept, but they are not much different from frames (visually).

To my knowledge, there is unfortunately no direct research on sticky headers. Hopefully others can share their insights from their own user research...

As a best practice, I would include sticky elements when they are useful (i.e. recognition rather than recall). See Vanguard as an example: https://personal.vanguard.com/us/funds/vanguard/all?sort=name&sortorder=asc

Be careful not to use too much screen real estate. If the user is scrolling down, then they are likely interested in the content. I like the idea of decreasing the size of the header as the user scrolls down. If you have a large logo, you can use a smaller version as the user scrolls and shrink the header a bit. Also make sure that page scrolling works if the user is using the space bar or scroll bar; when using those scrolling methods, the last one or two lines of text are typically displayed at the top of the page.

The most important best practice is something you already should be doing: Make the header useful and understandable. If the header is useless to begin with, then the sticky header will just be an annoyance.

Sticky elements can also be used to draw attention to CTAs (calls to action) that can appear on the far left or right if the user scrolls down (again, make sure not to interfere with content). We have found success using sticky elements for contact us, help desk, and "back to top" links.

share|improve this answer
    
Thank you for your reply. Your point on making the header useful seems obvious, but is something I've seen going wrong many times. –  Vincent van Scherpenseel May 26 '12 at 18:51
add comment

In the lack of real research data I thought I would share some things I found while studying sticky headers (most of these points are also pointed out by the other respondents):

  • Keep the header small, the largest part of the viewport should be reserved for the content.
  • Only put absolutely necessary things in it (do you really need your logo there?).
  • Make sure the header contrasts with the content part well enough. It's much harder to do that with only space (which usually does work for non-sticky headings). Using a darker background color for the sticky header works fine.
  • Sticky headers hardly ever work when viewing websites on small screen devices like phones (web applications are something else).
  • Minimize flashy animations when the user scrolls down and the menu 'snaps', it only disrupts the focus on the content and has hardly any use.
share|improve this answer
add comment

I appologice for not having any research to reference, but there are other sources. Shawn Borsky, professional User Interface designer and an author have commented the sticky header like this:

When users are reading scrolling content such as a feed or an article, its easy to get tunnel vision and ignore the navigation. When they finish consuming content or come out of that tunnel, it can be frustrating or disorienting to no longer have access to the main actions on the site because you were reading or engrossed in the content.

I think that is one good explanation why you should have it. But one need to be careful since screen height varies a lot. Apart from the browser window header, possibly with annoying toolbars and other built in browser bars, such as the favorite bar, there is less space left for the actual content. If you do implement a sticky header, make it reasonably small (to avoid taking too much space from the actual content) but high enough to implement the rules of Fitts’s law.

In practice I would do like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
Thank you very much for your great reply. Applying Fitt's law is definitely an essential consideration when designing the sticky header. –  Vincent van Scherpenseel May 26 '12 at 18:53
    
@vvanscherpenseel You're welcome. I hope you get some research answers too! –  Benny Skogberg May 27 '12 at 7:27
add comment

Hyrum Denney did some usability testing on sticky menus and shared the results in his Smashing Magazine article: http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

Although there's not a lot of information on how the test was conducted, the results definitely look promising.

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.