navigation usability Sticky Menus Are Quicker To Navigate

Advertisement

Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges.

Sticky Navigation Sign1

Sticky Navigation Defined

Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website. The image below shows the difference between standard and sticky navigation on a mobile device.

Standard Vs Sticky Navigation2

 

Usability Study

Research Conditions

For the study, I created two test websites that were nearly identical. The only difference was that one of them had standard navigation and the other had sticky navigation. Forty participants were timed in completing five tasks on the first website. Then they were asked to complete five different tasks on the second website. The order of the tasks was alternated between users to balance out the familiarity factor. The websites were tested on desktop machines, and participants were not told the differences between the websites until the end of their session. Data was not analyzed until the testing was completed. The results of the study yielded two interesting conclusions.

1. Sticky Menus Are 22% Quicker to Navigate

The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website. Of course, keeping visitors on the page longer is only a benefit if you are enhancing the user experience along with it. Forcing people to dig through a website to find something does not qualify as such.

2. 100% Preferred Sticky Menus Without Knowing Why

At the end of each session, users were asked whether they noticed the difference between the two user interfaces. No one was able to identify it. The changes were subtle, and none of the users caught on because they were focused on completing their tasks. Participants were then asked whether one of the websites felt easier to use. Six of the 40 participants had no preference, but of the 34 that did have a preference, 100% of them indicated that the website with the sticky navigation was easier or faster to use. Many comments along this line were made, such as “I don’t know how the websites were different, but I felt like I was spending a lot less time clicking with the first one.” Such comments indicated overwhelming favor for the sticky navigation.

Desktop Software Navigation Menus

Imagine typing a document in Microsoft Word and having to scroll up to the top of the first page every time you wanted to bold a word or widen the margins. Just the thought of that sounds frustrating. Most desktop software provides access to the entire navigation menu no matter what you are doing in the application. The Web browser is no different; we would find it ridiculous to have to scroll to the top of a website to access the address bar of a browser.

Some Good Examples

Facebook and Google+ recently adopted sticky navigation, but they are among the minority. Of the 25 most visited websites in the US3, only 16% currently have sticky navigation. Below are some examples of other websites that do an excellent job of pulling this off.

Fizzy Software4
This is a perfect example of horizontal sticky navigation at the very top. Everything feels comfortable while you’re using the website.

Fizzy Software Navigation5

Web Appers6
The navigation here is vertical and on the left, somewhat resembling Google+’s navigation. The only downside here is that if the screen’s height is shorter than 560 pixels, then the bottom portion of the menu could become inaccessible, which was the case when I tested the website on a netbook.

Web Appers Navigation7

MakeBetterApps8
Here is another great example. Making the navigation slightly transparent, giving a hint of the content beneath it, is a nice touch.

Make Better Apps Navigation9

Rodolphe Celestin10
This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly. Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent. Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page. Some nice transitions and hover effects make this website enjoyable to use.

Rodolphe Celestin Navigation11

Ryan Scherf12
The navigation on this website is vertical and only icons. The creativity here is impressive.

Ryan Scherf Navigation13

Web Designer Wall14
The sticky vertical navigation works well on this website because the menu has only four items. This works well enough for blogs that I wonder why others don’t adopt this approach.

Web Designer Wall Navigation15

While sticky menus aren’t the most popular form of navigation, more and more examples16 are popping up all the time.

Getting Started

Avoid iFrames

This might seem like a straightforward way to implement sticky navigation, but avoid this method. iFrames cause more problems than they solve, particularly with cross-browser compatibility, security and search engine optimization. iFrames have their place, but they shouldn’t be a major part of your HTML layout.

CSS

CSS is a great way to implement sticky navigation. It also seems to be the most straightforward, most lightweight and quickest to code. The three things to pay attention to are position, margin-top and z-index. Setting the menu’s position to fixed disables the element from scrolling with the rest of the page. This will likely throw off your margins if your navigation is horizontal, so you’ll want to adjust for that. Finally, use z-index with a horizontal menu to make sure the navigation sits on top of everything; this will make the other content slide underneath the navigation as you scroll. Here is the general idea:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

You will have to play around with the CSS to make this technique work right for your website. Additional information can be found on the W3C’s website17.

jQuery and JavaScript

Smart Sticky Bar Navigation18
The Simple Smart Sticky Navigation Bar is one of many good JavaScript implementations.

If you would prefer a jQuery or JavaScript solution to a CSS one, then you could try out one of the following options:

Many other solutions and scripts are out there. Please include your favorites in the comments below.

What’s The Bad News?

Give Me The Bad News23

There are many opinions24 on this topic, and some would argue that sticky navigation isn’t worth it. Here are some things to be aware of.

Design Limitations

Going with sticky navigation could rule out some design choices that your team might not be willing to give up. For example, the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else. While easy to implement, it might not be what your users need.

Distracting and Intrusive

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

Mobile Compatibility

Fixed-position CSS and certain JavaScript implementations lack support in some mobile browsers, which is a cause for concern among some developers. The article “Organizing Mobile25” by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices. Responsive design techniques also offer some solutions26 for adjusting the navigation based on the size of the screen.

Be aware of the level of support offered by each device. Knowing compatibility issues beforehand will save you time in the end. When Can I Use?27 has some interesting information on support for position: fixed. Brad Frost has also done some of his own testing and analysis28, providing some interesting insight in his accompanying video29.

Conclusion

Why do we Web designers and developers continually force our users to scroll up and down the page in search of the navigation? This is not a problem in desktop software, and we now have the statistics to show the benefits of sticky menus. Navigation on 84% of the top 25 most visited US websites30 could be made quicker by implementing sticky navigation.

Of course, it’s not appropriate in every situation, especially when real estate is tight. But do seriously consider sticky navigation, while always accounting for usability and the overall user experience.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2012/07/sign.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2012/07/standard-vs-sticky-500.jpg
  3. 3 http://www.alexa.com/topsites/countries/US
  4. 4 http://www.fizzysoftware.com/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/07/fizzy-software.jpg
  6. 6 http://www.webappers.com/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2012/07/web-appers.jpg
  8. 8 http://www.makebetterapps.com/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/07/make-better-apps.jpg
  10. 10 http://www.rodolphecelestin.com/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2012/07/rodolphe-celestin.jpg
  12. 12 http://ryanscherf.net/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2012/07/ryan-scherf.jpg
  14. 14 http://webdesignerwall.com/
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2012/07/web-designer-wall.jpg
  16. 16 http://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/
  17. 17 http://www.w3.org/Style/Examples/007/menus.en.html
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2012/07/smart-sticky-bar.jpg
  19. 19 http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery
  20. 20 http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/
  21. 21 http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/
  22. 22 http://codecanyon.net/item/jquery-css3-sticky-mega-menu-bar/239093
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2012/07/bad-news.jpg
  24. 24 http://martymoo.com/blog/2011/11/01/the-trouble-with-sticky-headers/
  25. 25 http://www.alistapart.com/articles/organizing-mobile/
  26. 26 http://www.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/
  27. 27 http://caniuse.com/css-fixed
  28. 28 http://bradfrostweb.com/blog/mobile/fixed-position/
  29. 29 http://vimeo.com/31894069
  30. 30 http://www.alexa.com/topsites/countries/US

↑ Back to top Tweet itShare on Facebook

Advertising
  1. 1

    I think I must have only seen websites that are doing it wrong, because I’m not a huge fan of sticky navigation on the top of websites. It usually hides a part of the screen and tend to get on my nervs while I’m reading the content. Did you test reader actually reading a long article (5min+) on a site with sticky navigation, or only user looking for something?
    I’ve nevertheless seen some nice sticky sidebar navigation that hide content.

    Another nice think I saw (but can’t find the link) is a sticky menu, that gets hidden after a little scroll with just an arrow to remind the user that he can get the menu back in the middle of the page. This requires two clics (open menu + clic on link) but at least it does not obscurcificate part of the content while reading.

    1
    • 52

      You make some great points. I think it is very easy for sticky navs to be poorly implemented. This study did not include the reading of long articles. It was primarily to find out if sticy navigation made it easier to navigate around a website and find information. This study could definitely be reproduced from a number of different angles. Thanks for your thoughts.

      0
  2. 103
  3. 154

    You can also approach this conditionally with jQuery or media queries that check if there’s enough vertical space to be sticky.

    Check the second demo in this post: http://css-tricks.com/responsive-web-above-the-fold/

    0
  4. 205

    Great post, these stats reinforce what we’ve seen and are implementing in our own work.

    As many people pointed out in the comments though, all sticky nav are not created equal. You can’t just design a site and then lock the whole header — it’s too clunky. The applications I’ve seen that work the best use a truncated version of the header. Pinterest is a great example. So is http://nikeplus.nike.com/plus/products/fuelband.

    And fixed side nav is a great option if the site is small and nav doesn’t need to get very deep. (Non-mobile) screens these days are so wide, it’s often easier to devote vertical space to nav. Our agency site uses a side nav and we’re happy with the results: http://www.copio.us.

    A particular pet peeve is the combination of both sticky top nav and sticky footer. There’s really no reason why this should ever happen!

    0
  5. 256

    Thanks for the share. In a recent UX-Test I conducted I also compared sticky to non-sticky navigation. 100% users did not notice the difference (which you obviously also experienced). But, when asked, most preferred the sticky one. And they used the sticky navigation, lets say intuitively. I’m happy to hear that your research approved!
    Only Issue: we have to validate whether it might cause real estate problems, as our navigation is not very slim (130px).

    0
  6. 307

    I do think sticky menus are nice, but it absolutely depends on the type of site. They should be used appropriately and not just for the bling factor.

    *Although*

    I have never felt that I just wasn’t able to surf *fast* enough in the days before sticky menus.

    Aside > Do you think there is a point where UX for web browsing will hit a dead end? I mean the medium *is* limited to a certain degree. I think there will be a point where a video screen cant be optimized any further. Where we kind of say ” yep, we know the most effective way to present a form and navigation.” You cant just keep optimizing forever?

    0
  7. 358

    Really, i feel that comfort when navigated by sticky menu one. :D

    By the way, thanks so much Dude! :)

    0
  8. 409

    Great article!

    One of the first websites I experienced using a sticky menu is the Chalmers University website, http://www.chalmers.se/en/Pages/default.aspx

    I think that they made it really nice as well!

    0
  9. 460

    Great article, thank you. I have wanted to try sticky navigation for a long time but just didn’t have time to explore the pros and cons. Personally I really dislike having to reach even for the top of the screen to click, let alone the very top of a page! (I’m a very lazy ‘clicker’). The article and comments have got me now wondering if a sticky navigation bar across the bottom on the screen would work better? Is such a thing possible? If a user has come to the end of a page / article, wouldn’t their eyes be focussed on the lower part of the screen rather than the top? They may not even see the sticky navigation at the top. Would probably take a different approach for mobile though. Would love to hear others’ thoughts on this.

    0
  10. 511

    I actually dislike sticky menus, but I don’t know if it’s rational or just traditionalistic. You see, websites “shouldn’t” have content floating on the top. Now the question is – are other users disturbed by this kind of over-the-top content? Because I am.

    Maybe there are other, more gentle, solutions than sticky menus.

    0
  11. 562

    I implemented this on http://grandtarghee.com with a header above that the biggies internally like.
    // jQuery Navigation Sliding
    var offset = $(“#menu-content”).offset();
    $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
    $(“#top_nav”).stop().animate({top: 0}, 100);
    $(“#top_nav”).addClass(‘fixed-menu’);
    $(‘.maincont’).css(‘margin-top’, ’45px’);
    } else {
    $(“#top_nav”).stop().animate({top: 0}, 100);
    $(“#top_nav”).removeClass(‘fixed-menu’);
    $(‘.maincont’).css(‘margin-top’, ‘0px’);
    };
    });

    0
  12. 664

    I can understand that it would be faster to NAV from page to page because it takes up restate and he context going under it would make it harder to focus on reading it. I always find that adding a BACK TO TOP button on the bottom of the screen does more justice for the user because it does blind you from reading the text and does not take way from the design of the website. General the only time I find fixed NAV would be filtering products or items. Besides that it’s just a waste of space for the user.

    0
  13. 715

    Why’s the menu on the left of this page not sticky then? :-P

    0
  14. 766

    > I actually dislike sticky menus, but I don’t know if it’s rational or
    > just traditionalistic.

    That’s rational–there are practical effects on the user that designer don’t think (or care) about:

    A sticky top menu breaks the user’s usual ability to choose to use the full height of the browser pane to display the content of the page (by scrolling the page header off the top of the pane).

    That is, if the height of the core content (or any contiguous element) of a page fits within the height of my browser window, I should be able to see it all at once (by scrolling vertically). If the top navigation content insists on staying visible at the top of my browser pane, then it’s stealing some of the height of my browser pane.

    > Now the question is – are other users disturbed by this kind of over-the-top content?

    Definitely.

    0
  15. 817

    Levi | Stat Centric

    July 5, 2013 11:19 am

    I absolutely dread sticky menus. They are such a waste of screen space — distracting — annoying — useless. I’ve yet to find them useful – ever. Google plus… What a kludge. Facebook… Yeh I use it everyday and have never taken advantage of the sticky menu. And like has been pointed out, it gets implemented so poorly. The new fiverr site takes up 20% of my screen for their new fixed menu. I think it’s one of those trends that just hurts usability. I am shocked that people favored it. I think if you are telling them to navigate around… Maybe. But, someone that is going to a site for content and doesn’t need to navigate constantly… it’s just intrusive.

    4
    • 868

      ” I think it’s one of those trends that just hurts usability. I am shocked that people favored it.”

      This is why you make design decisions based on data, not personal preference. The people have spoken (in this study), and overwhelmingly have preferred a sticky navigation. BUT…. this study was not performed on mobile, where screen space is lacking. I suggest you perform your own UT with your customers, and make post the results.

      bnh

      0
  16. 919

    Wrong, wrong, wrong. This is a perfect way to get me to leave a site – THEFT OF MY SCREEN REAL ESTATE! There is absolutely NOTHING wrong with a fixed menu – do street signs always stay in front of you on the road? Do the contents of a book always take up half the page you are reading? NO! This is just another useless change forced on people by a fascist who wants others to like the same things he does. The only thing worse than this is the endless page, where you keep scrolling and scrolling and scrolling and never ends – but I bet you have instructions for doing that too. In any case it’s because of people like you I’ve stopped going to sites like Lifehacker and Geek.com like I used to.

    4
    • 970

      “This is just another useless change forced on people by a fascist who wants others to like the same things he does.”

      In what way is he being fascist by reporting the results of his own User Testing. Based on his study and the results of that data, his Users (not him) prefer the sticky nav. He was being responsible with the data he is sharing, unlike those that post information without citing research and findings.

      bnh

      0
      • 1021

        User data is not everything. I would never have a sticky menu on a website I developed because they annoy the crap out of me and take up valuable real estate (especially on my smaller laptop screen).

        It’s the same with pop up ads/opt-in offers. Maybe data says they’re effective–but I immediately leave any site that has one. So again, I would never develop a website with one. It’s okay to trust your instincts and personal preferences–even if they go against the majority.

        0
  17. 1072

    I do believe sticky navigation is easier and quicker to navigate with. But if they’re the full width of the website it also obstructs the use of the website itself. Find a site with that kind of navigation (arstechnica.com or behance.com for example) and try using the Page Down/Up button. The page scrolls and entire “page’s length”, meaning that the bottom images are going to fall underneath the menu.

    With lengthy articles it’s very convinient to use the page down/up button… it’s a one-click-action to move down one page after all, saving you scrolling or RSI-tapping the up/down buttons. But if the menu is obstructing the top of the article it’s more in the way if anything.

    0
  18. 1123

    Sticky menus are enforcing the user to have a focus on the nav continously. If the user wants to go to the menu, its obvious to scroll up.

    Only on rare occasions it can work where there is a great deal of relationship between the scrolled area and the main nav.

    Its best to avoid it and do AB testing to see how users react, get their feedback through adding close option.

    2
  19. 1174

    Just to add my 2c, as a user, I HATE HATE HATE sticky navs. I want a clean interface without a bunch of branding nonsense distracting me from the content and taking up screen real estate (yes, even on a full-sized monitor). Felix Salmon’s recent article on sticky nav pretty much sums up my opinion; definitely worth a read if you want to other side of the debate on this.

    2
  20. 1225

    Okay nice article, Is it good or bad to keep sticky menu for personal website? Can it be done for horizontal scenario?

    0
  21. 1276

    Nice post! (I think you live in my neighborhood, incidentally ;-)

    0
  22. 1327

    I would love to see some data or research on whether Sticky Navigations are good or bad for conversions. As written, it would seem clear that users prefer them or that they can complete tasks faster; but does that mean they “find what they’re looking for and buy” or could it lead to issues where it’s “too easy to navigate away” and therefore not reach the order form, email signup, or whatever (which all tend to be down the scroll).

    0
  23. 1378

    Simple Sticky Footer : http://bit.ly/turaniaTSF

    0
  24. 1429

    The fastest way to get me, an average user to leave a webpage is to have “sticky” elements of any kind. It may also lead to a boycott, if they’re intrusive enough. The situation is even worse when “pinching to zoom” on some mobile browsers. The “sticky” elements are scaled exponentially compared to the content below making for a comically unusable page. Thank you for an informative article.

    1
  25. 1480

    Thanks smashing magazine for your reseach. Now I start to hate sites that use sticky headers.

    99% gaming sites and wordpress sites now have that sticky header, now I have to spend time using the Firebug + Stylish to make it position:relative again (and in some cases, display:none).

    Ironically how your site don’t use sticky header (please don’t!)

    If I didn’t had skills of writing custom css, I would completely stop visiting those sites (stylish plugin is my saviour!)

    I really really hate them for those reasons:

    1. Headers are absolutely useless, I noticed I have never went to any links on it. The only useful links are below it: articles, etc.
    2. It gives kinda claustrophobic feel, or just attracts too much attention.
    3. It makes it look like it’s part of browser UI.
    4. Annoying animation is often used.
    5. When you scroll down, I have a habit of reading from top, and header cuts text and images by half. Why do I have to break habit and have to thing about header’s height?
    6. If I ever need header, I can just scroll it up. It takes about 0.5 seconds to do so (unless you are very slow person)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top