The 3 golden rules of sticky navigation

The topic of sticky headers and sticky navigation is muddled in controversy. Some claim that they drag a person’s attention away from what they should be focusing on. Others believe they’re an essential part of the structure of modern websites. In fact, as in many optimization cases, there is truth in both ideas.

What is sticky navigation?

Sticky navigation is a term used to describe a fixed navigation menu on a webpage that remains visible and in the same position as the user scrolls down and moves about a site. Persistent navigation bars - or “sticky headers” - are now a web design standard. Sticky navigation examples, best practices and demonstrations of how different sites and brands interpret this standard are plentiful across the web.

Fixed top navigation

Fixed side and bottom navigation

People prefer sticky navigation

We know that users favor sticky navigation in general, but can we learn how to use it to its fullest potential?

Well, yes. Using insights gleaned from our in-page digital customer experience software, the Customer Experience Consultants here at Clicktale can draw some unique conclusions about how people interact with and experience websites of all shapes and sizes. And for the question of sticky navigation, we’ve discovered three golden rules:

Rule 1: Sticky navigation works best on actionable websites

Sticky navigation works best with retail, e-commerce and other types of ‘actionable’ sites – sites where the designer intends a specific action, such as a click to purchase a product. In those cases, sticky navigation has been shown to significantly improve the customer experience, as well as keeping users oriented and giving them more control.

In one example from a very well-known retail site (sorry – we can’t release the name), once the sticky navigation was implemented, visitors began to scroll further and pay more attention to the individual products on the pages. As a result, the company experienced a major reduction in bounce rate, and conversions increased from 30% to 33%.

That may not sound like much, but a 10% increase in conversions can make a huge difference. And if you’re a leading retailer with annual revenues of, say $100 million, we can make a quick calculation to see how much that’s worth to your business:

  1. If we assume revenues from online are just 8% (as we mentioned in this blog post), then you currently have $8 million in direct website revenues.

  2. A 10% conversion increase on that figure gives you a further $800,000 in additional revenue – from just one small website change!

  3. If we then substitute our 8% for 53% which are the proportion of “web-influenced” sales in the US, then we have a much larger ROI. (in the region of $5 million).

Rule 2: Sticky navigation is ideal for long pages?

In pages with lots of content and long scroll, navigation must be friendly and intuitive. Clear and understandable in-page navigation helps visitors make a smooth journey through the content on the page in a manageable way. While in the past this was achieved by ‘back to top’ links, today it’s sticky navigation that does the job.

Below, we see part of a long, content-heavy page from a travel website. The left-hand Clicktale mouse-scroll heat map was generated before they implemented sticky navigation. The right-hand heatmap shows how much further people scroll down once the site implemented sticky navigation: the results speak for themselves.

Rule 3: Sticky navigation works best with specific demographics?

Alongside other interactive navigation techniques, the effectiveness of the sticky element was found to improve the performance in basic selection tasks of older adults and to provide similar benefits (although smaller) to younger users.

So, why do older adults and much younger users respond better to sticky navigation? It’s because of the relatively lower confidence levels of older adults and much younger users on the web, and their subsequent need for additional support, which the sticky navigation provides.

Older adults and young users respond to the confidence that sticky navigation instills.

Here’s a deeper explanation as to why this is the case:

The psychology behind sticky navigation

The psychology of web design comes into play here: sticky elements increase visitors’ confidence as they scroll up and down the page, giving them a sense of control while interacting with the site. They know what their options are and have no reason to feel uneasy because everything they might need is right in front of them.

People need to be in control. Imagine a situation where you are unaware of what is happening around you. Very quickly, the “stress” button is switched on and you try to do everything you can to regain control. You can achieve this by ‘sticking’ to something or somewhere familiar, adopting an old pattern of behavior, or relying on someone you trust.

The same logic can be applied to web navigation and the digital experience. Visitors can feel lost trying to find their way through very long webpages. In most cases, this feeling will trigger stress that will cause them to leave the site. This is exactly the purpose of sticky navigation: to help people explore a webpage in a comfortable and controlled manner.

The need to control our surroundings

In a study in which two groups of participants were exposed to a loud, extremely unpleasant noise, participants in group A were told they could stop the noise by pressing a button, but were urged not to do so unless absolutely necessary.

Participants in group B had no control over the noise.

The results were eye-opening: None of the participants who had a control button actually pressed it. But performance on subsequent problem-solving tasks was significantly worse in group B – in those that had no control.

That feeling of being unable to control a situation has dramatic effects on the human psyche.

Businessman Speaking On Mobile Phone By Noisy Freeway

Translated into the web optimization world: even if people do not take advantage of sticky navigation features, just knowing that the options are always there will improve the digital customer experience. And that’s true even at a subconscious level!

Some sticky best practices

Now, that you’re going to implement sticky navigation on your site, you should ensure you make the most of it by following these best practices:

  1. Avoid iFrames. Don’t fall for what may seem like a simple implementation. When you need your site to look good and work well in multiple browsers and on different devices, iFrames are not your friend (not to mention the security and SEO issues...).

  2. Say ‘yes’ to CSS. If you like simplicity and speed, this is how you want to code your sticky navigation. Pay attention to: position, margin-top and z-index.

  3. Half-hide your search. If you’re going to have a permanent menu, you should keep it as simple as possible so it still provides the safety net your users need, but doesn’t distract them. Try hiding the search input field in favor of just the magnifying glass icon.

  4. Collapsing menus. Perhaps some of your users know their way around your site and don’t need to see sticky navigation. You could make your menus collapsible to give them the option! No one solution works for every case, so be flexible.
Book a demo to see how customer experience analytics can improve your business