navigation – Usability research on sticky headers?

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.