Usability research on sticky headers?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

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.

Answer 5

I get migraines.

So for me, there are three problems. First, most sticky headers start with a large block which changes size as users start scrolling, and this can trigger migraines. Second, most sticky headers move the edge between scrolling and non-scrolling elements closer to the middle of the screen, and this adds eye strain. Third, depending on the software sticky headers can break page up and page down.

I think if you need sticky headers, it would help to have a narrow header down one side of the window.

P.S. Since sidebars are getting more common, and they are even worse for my migraines, I would now recommend a narrow animation-free header at the top.