Sticky headers have made their way onto just about every web site over the past few years and they are without a doubt a great way to provide the user with the main site navigation from anywhere on the page. The proof is by just how many sites have adopted them. But what’s in it for the user, and equally what’s in it for you?
There’s nothing more annoying than the lack of visible navigation, just at the point you really need it. Finding yourself at the footer of a long, content-heavy page with your only option to climb back up through that content to navigate the site. Pair that with an infinite scrolling page and you’re just asking for the user to ragequit your site, never to return. The sticky header definitely solves that issue.
There’s a lot that goes into making a brand, it’s certainly not only the logo, but exposure is exposure and keeping that logo in front of the user, following them as they navigate the site will reinforce a stronger brand message. It also keeps the client happy… even if they do want to make the logo 20% bigger!
Using a sticky header also gives you the opportunity to push other content which adds to the experience. On a magazine site utilise the space by placing the search into the header giving quick access to other articles. Designing for a shop? Place the shopping bag there, users can keep track of items in their basket and have quick access to the checkout process. Or how about pushing your social channels with Facebook and Twitter links?
Although most sticky headers are slight they do obscure content, it’s a fact. On larger displays this may have little to no effect on the end user, what’s 40-60 pixels at the top of the page when you have a thousand others to look at? At smaller resolutions the lost space starts to actually make a real difference, especially on article driven sites where share buttons or adverts anchor themselves to the bottom of the screen. A well designed, responsive website should take these factors into account but give a thought as to whether you can justify the obstruction.
Content is there to be read and if it’s well written and relevant to the user, then it will keep their interest. It’s worth thinking about what your site is trying to achieve, is it necessary to continuously remind the user that there are other places to be?
How much time you want the user to spend on a single page is going to vary based on your site and content – a brochure site might be aiming to have the user read all of the content on a single page before moving on their own journey through the site. On the other hand, an article driven site would likely be looking to have the user moving from page to page frequently. After all, monetisation is a thing.
If you are worried about taking up too much space at the top of the screen, but just can’t let go of those navigation links, we recently created an an efficient two-tier sticky nav on desktop for Gallantry. We tucked away the main links until the user scrolls back up through the page; neat and it looks great!
Or how about this solution, collapsing all the navigation into a hamburger menu like on Taylor Made. Very little real estate is taken up, it follows you on scroll and it works great on mobile where pixels are at a premium.
There are other examples of sticky headers, similar to Gallantry, where there’s no nav bar at all only to appear as the user scrolls back up. Visually this gets rid of any intrusion on the content and keeps the focus on that.
We’ve all seen our fair share of poorly built, janky websites, let’s be honest. And when implemented poorly, sticky headers can present distracting transitions, jarring content jumps and use up large amounts of precious screen space. So when designing a sticky header into a site look at the best application for one and look at how far the user has to scroll on each page, if your site scrolls in one or two scrolls is it really worth it?
We love a good sticky header, hell we’re using one right now on this page. This brain dump is just food for thought, to create a debate around what we consider to be a pretty ‘standard’ website element. Maybe, just maybe, it’s not the fix-all solution it appears to be… or maybe it is. From a user experience it certainly is, from a visual perspective as designers we need to consider the best way to execute it.