navigation usabilitySticky 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 topShare on Twitter

Advertising
  1. 1

    Very interesting article! I always wondered why the sticky nav was never used more often. Obviously as you pointed out, it can become annoying when things start following you down a page. But if done unobtrusively, I think it could be a great tool, especially for longer pages.

    The only downfall is when it becomes popular, and marketing departments start to say things like “Let’s have the ads follow the user, it’ll increase conversion!” :|

    1
  2. 2

    Was great to see some statistical data surrounding sticky navigation. I have somewhat recently begun to use it in a number of my projects and really feel most of them benefit from a UX perspective as well as a design perspective. I think this will function and look even better as some browsers start to lose the chrome at the top of the page (particularly in mobile/tablet spaces); the site navigation then becomes to top bar of the page.

    I do, however, often disable it in mobile browsers via media query due to some issues with the position:fixed not really translating well, particularly in iOS (it gets super jumpy when scrolling; thank you, Apple). There are some fixes for this, but none have seemed worth it for my projects.

    0
  3. 3

    Michaël van Oosten

    September 11, 2012 5:43 am

    Thanks for your article. I wonder; have you done any research on mobile devices as well?

    0
    • 4

      I have not done any research of this type yet for mobile devices although that would be a great next step. I imagine there is a whole world of data to uncover with those devices and users.

      0
      • 5

        As per above comment, position:fixed is badly implemented in iOS devices and many android/other devices as well. The reason fo this is that it is much more process heavy on a browser. The processor is forced to redraw every frame on scroll. However, most native apps do feature that function.

        0
  4. 6

    That’s why we add “top of page” link underneath.

    0
  5. 7

    Well that’s exactly (no: allmost) what we were doing years ago using the -technology in the late 1990s/early 2000 to make the navigation sticky. ;-)

    0
  6. 8

    100% agreed

    0
  7. 9

    Thanks for the useful post and research!
    Drawing conclusions from the research, as described, is problematic. Quite naturally, people complete tasks faster second time around, whether you’re comparing sticky vs. regular menu, or the same site exactly. To truly test the validity of your claims regarding speed, you’d have to test two groups of similar people, both using the site in the same situation+experience (first time / after some use / prolonged use).

    0
    • 10

      I completely agree and what you described is how I preformed the study. First time users of the sticky navigation completed their tasks 24% faster than standard first time users. Second time sticky users performed their tasks 19% quicker than second time standard users. The two averaged together resulted in the 22%. So, my test did include multiple groups of similar people who all performed their test on the same website (except location and attachment of navigation) and I tracked first and second time users separately. I can see how the article could have went into more depth about this so sorry for the confusion. Thanks for keeping me honest in my conclusions though.

      0
      • 11

        Did you publish the numbers and the analysis somewhere?
        I would be interested to read the full analysis.

        0
        • 12

          I agree on this one. Using your article as literature for an essay of mine, and it would be interesting to read the whole analysis.

          0
      • 13

        How do sticky vs. non-sticky menus affect bounce rates? That’s the clincher.

        I personally hate sticky menus on content sites because they often carry ads and non-navigational content — they seem to “stalk” more than “follow” me, intruding upon my reading experience. I associate persistent menu bars with “work” oriented application controls. So while the faster navigation experience stats are impressive, the aesthetic and experiential compromises (in addition to the other drawbacks mentioned in the article) make me wonder when/if/how sticky menus are most appropriate.

        For WordPress users who want a sticky nav menu, I would suggest altering the existing WP sticky admin menu so it can show the main nav options and social media links (etc) to all users as well as a pared down selection of the essential admin links for logged in users. With WP’s sticky admin panel, it’s a bad idea to add a separate sticky nav menu without turning off the admin panel or else move one of them to the bottom of the screen.

        0
  8. 14

    Great article, Hyrum! Sticky menus are becoming a fairly popular trend on the web. I appreciate your usability points and tips you made about them. This was something I really wanted to do on my website, but keep with the idea/trend of not having it start at the top. I think its great in single page sites or ones that have quite a bit of scrolling. Take a look at mine if you’d like (I’m interested to hear what you think): http://www.timothywhalin.com – Again, thanks for sharing this with us!

    0
  9. 15

    An EXCELLENT example of non intrusive and well designed sticky navigation can be found at the website of Rule Of Three Copywriters: http://rule-of-three.co.uk/

    Go check it!

    0
    • 16

      I like the use of the sticky menu on that site alot, however, when using my netbook to view it I had to scroll back up a couple of times before I got use to the speed the website was unfolding at. I kept loosing the top of the page. But once I calmed the mouse wheel action down I liked how the menu blended in with the overall theme and style of the website and I can almost say became invisible until I wanted to use it.

      0
    • 17

      The sticky menu use is great on that site! However, I am not really a fan of the single page scroll on a business-centered site. That is however, just my opinion. Many may love it.

      0
  10. 18

    Yes! I have been arguing for sticky menus for a while. I think especially for smaller screen sizes. It is not hard to add a media query to fix the menu for smaller screen sizes. The only issue I have seen is that fixed positioning does not work on some devices, but there are work arounds.

    0
  11. 19

    Interesting article. I was never much in favor of sticky navigation since you lose screen size with it, certainly on mobile devices. (but I think it will be even more useful on a mobile device, since desktop users kan easily hit the “home” button on the keyboard, but mobile users really have to scroll up completely)

    It would be great to design a really condensed but still usable sticky nav, so you get the best of both worlds.

    An excellent example of well designed sticky navigation can be found at “Rule of Three Copywriters”

    http://rule-of-three.co.uk/

    0
  12. 20

    Interesting article. I was never much in favor of sticky navigation since you lose screen size with it, certainly on mobile devices. (but I think it will be even more useful on a mobile device, since desktop users can easily hit the “home” button on the keyboard, but mobile users really have to scroll up completely)

    It would be great to design a really condensed but still usable sticky nav, so you get the best of both worlds.

    An excellent example of well designed sticky navigation can be found at “Rule of Three Copywriters”

    0
  13. 21

    Very good article – I’ve been looking at implementing sticky navigation more and more recently, where appropriate. In a CMS I designed recently we implemented it after user testing showed several participants struggled to complete some of the tasks without it. The default Twitter Bootstrap examples also use it.

    0
  14. 22

    Just implemented a sticky banner on a one-page site. It works really well for keeping the focus of the site working whilst not being too intrusive. Definitely see this as being the ‘way forward’.

    0
  15. 23

    Regarding your comparison with the desktop software – i will only mention that in web design the top is also used by browser interface , this resulting in less space for content. Anyway, there is place for everybody and especially the examples with the vertical menu seems more practical. An horizontal menu should therefore be more careful approached with this techniques. Indeed “Real Estate” is important sometimes :) Good article !

    0
  16. 24

    Interesting stuff. Thanks

    0
  17. 25

    ^same here. although this sticky navigation could be a personal preference too. But all in all I like the idea that you guys took the time to really test it.

    0
  18. 26

    Great article!

    I agree with it 100%. Although sticky navigation will be a little bit tricky, but it will improve the usability of the website.

    0
  19. 27

    For me most pages with sticky navigation is exactly distractin and intrusive.

    0
  20. 28

    You might have a look at twitter bootstrap frame work. It allows for a fixed menu. It is also responsive. So if user is viewing from a desktop all menu items are visible. If viewing from a phone the menu is collapsed and a menu icon allows user to toggle menu.

    See this link for example
    http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

    0
  21. 29

    I love sticky menus. Imho the biggest issue is the lack of support on iOS Safari version 3.2 – 4.3… We cannot just ignore it… suggested workaround?

    0
  22. 30

    Dear Smashing Magazine, implement this! haha

    0
  23. 31

    Decided to go with this in the next iteration of my portfolio website, so it’s good to see evidence backing up my instincts on whats good.

    0
  24. 32

    Ever since I started noticing sticky navigation I’ve thought it has been an improvement to usability. With the ability to scroll being so easy now with mouse wheels users are no longer sticking to the top of the page. Long pages can become cumbersome to navigate away from so solving this issue seems like a no brainer: make the navigation follow the user. It’s like constantly having a remote strapped to your hand.

    The only problems I see is when navigation is pushed far up in the hierarchy. It should be very subtle. If you have several sub navigations you should probably only include the main one in the sticky part of the navigation. Users want to be able to go to other pages quickly but don’t like their screen being cut by 1/3rd because the navigation is so dense.

    I’ve also seen social share bars done this way, which I disagree with strongly. Sharing should be strategically placed on the page to be available only when the user is most likely to share something (usually at the end of a post or after they’ve bought something.).

    Great article! I especially like the webappers example, it’s very consistent with the design.

    0
  25. 33

    Awesome study and summary. I was still very skeptical until I got to the bad news, which was summarized very well – I’ve always found sticky menus hateful because they nearly always noticeably impede reading or using the content I’m actually trying to access, and it takes a very disciplined approach to design to create navigation that doesn’t take up a significant amount of space. Maybe in action-heavy applications (as opposed to content-heavy reading sites) sticky nav is worth another look.

    0
    • 34

      This design trend is definitely on the rise. Just take a look at LinkedIn or TechCrunch. Clearly there is a benefit to giving our users an option to always be able to navigate easily without having to scroll all the way up. This is not a break-through though. Most native desktop software, especially function-oriented ones features this function (just take a look at your browser). But I do agree that it does get bad sometimes, some of the worst cases is Microsoft Word series, that never fail to amuse me in the complexity and the size of their top nav.

      What I believe is happening in terms of innovation, however, is that these top nav bars are now beginning to react to actual user page/scroll location. They are not there to obstruct the splash picture when the user are at the very top but they are reviled once the user scrolls. There is a good example posted in the comment above. Another approach is on http://artsocket.com which gives only a slim slither at the top (priming the user for that option) with the most basic stuff and expands down to outline further navigation once the user scrolls down. Pardon for being a bit biased with this example choice, but I do like to speak from my own experience.

      0
  26. 35

    > the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else.

    Not strictly true. With a little JavaScript, you can have your menu wherever you like it and only “stick” it to the top of the browser once the user scrolls beyond it. I recently did the CSS/HTML for a site (www.dixcart.com) with a sticky top menu that does exactly this, and also catches the left navigation on certain long pages as well (People section best example). It’s not 100% pixel perfect if you are trying to catch it out, but no real users will spot it.

    0
  27. 36

    This is a little different, but could also work for menus:

    .sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
    }

    Of course, this is far from being a totally accepted standard, but one can only hope browsers will pick it up soon! :-)

    More: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    0
  28. 38

    This is a good issue to bring up. I didn’t really appreciate the sticky navigation until I became a netflix user. When jumping between Netflix and IMDB I find myself getting frustrated having to ‘scroll back up’ on IMDB to search again. While it’s not ideal for all sites or designs, most sites that heavily rely on searching or category breakdowns could really benefit from it.

    0
  29. 39

    What a coincidence, I’m already working on my one page responsive portfolio which also has a custom made sticky navigation (at the top). I always try it out on my mobile phone before I upload it and sometimes the sticky footer is intrusive because you may want a full screen experience. To solve this problem I made a close button, so users can decide if they want the sticky navigation or not. If they want the navigation back, they just have to go to the top of the page again. I’m not sure but I don’t know any website who has a close button if you find the navigation intrusive on your experience.

    0
    • 40

      Could be a good idea. In a way I imagine it to function like twitter notifications, or something that HelloBar is doing, with exception of it being navigation instead of notification.

      0
  30. 41

    Thanks a lot for mentioning Fizzy Software. Always been a big fan of Smashing Magazine and feel great to be recognized for the small things.

    The stats are def interesting and will be recommending it to all future clients and internal projects (if it seems suitable).

    0
  31. 42

    …and yet Smashing isn’t using it…

    0
  32. 43

    Voila, I have turned the main menu on one of my main sties to sticky right away. Already up and working, all done with 5 new lines in CSS. But I need to mention, that it was really easy to implement, since the navigation was already present in the very first div inside body.

    Anyhow, I experienced some problems if the WordPress navigation bar and the menu are present at the same time. But I’ll try to fix that later, I temporary disabled the WP nav bar.

    I am thinking of testing out the real performance of sticky menus with Google Analytics Experiments. The test will clearly show what are the improvements (bounce rate, time on site, conversion etc).

    0
  33. 45

    The #anchor issue with a fixed header.

    After following a link with an anchor the content is hidden behind the navigation top positioned. No css solution working on ie8.

    Going through this fundamental navigation principle is a big choice.

    0
    • 46

      What is this #ancor issue you are talking about? Maybe if you are more descriptive one of us could help..

      0
      • 47

        Dmitri:
        If your menu is actually in-page navigation, it means every destination id needs enough top-margin or top-padding to prevent the sticky menu from covering it.

        A setup like this (not sure if code will translate so I’ll try to avoid):
        menu:
        href=”#aboutus”, href=”#contact”, href=”#someOtherInPageLink”…

        If we have
        h2 id=”aboutus” About Us /h2
        if it doesn’t have a bunch of room above it, clicking on the link in the menu will move this h2 to the top of the viewport… and under the sticky menu who’s sitting right on top.

        Having that space there all the time, esp if the menu is thick, will make your page look weird. Basically, if your menu is in-page links then a sticky menu has this particular disadvantage. Most menus actually link to separate pages so you wouldn’t notice the problem.

        On an unrelated note, navigating in-page links via keyboard alone in webkit browsers is horrid due to an old bug where the focus does *not* skip to the destination as it does in all other browsers. You get the job of your focus remaining back on the link you clicked and you get to tab through everything else to get to where the browser has visually moved you. Bleh.

        0
        • 48

          That’s it Stomme poes. Thanks for this reply to Dimitri.

          But the problem remains even if you do not have a anchored link in the navigation. Each time you will follow an anchor links, you’ll notice this issue.

          Anyone know how to fix that in a clean way ?

          0
        • 49

          Stomme: If I understand you correctly the issue is using ancor tags. Personally, I hate this browser built-in function, it simply jumps the page to the location where the ancor ends up at the very top of the page. Not helpful because it’s confusing (no transition at all) and I do not always expect things I’m looking to be at the top. I’d say middle of the screen is the best place. I recommend using JS solutions, such as MooTools SmoothScroll; I’m sure jQuery has similar or better plugins. And if you use JS, you can add that padding to all of your ancor tag positions very easily.

          0
          • 50

            Dmitri,

            i agree with your point of view about the anchor behavior and issues. It remains a fundamental navigation principle. Avoiding using anchor is a nice dodge but not a solution.

            Using js is not a solution in all cases and not a clean way in my opinion.

            If I test the mootools smoothscroll it works if I click on the link but it doesn’t work if the the hash is directly put in the address bar. I don’t think that testing the address each time you load a page is the right way to fix this problem.

            How many js lines you will need to reproduce this native behaviour ? How many hours to avoid all the possible bug ?

            That’s for theses reasons that I wanted to warn people who wanted to use a top fixed header. I think that this point should be in the “Bad news” paragraph of this article.

            I think that having a top fixed header remains a big choice.

            And do not forget the conditions of this study : on destkop only, with only 5 tasks we don’t know which one …

            0
    • 51

      I ran across the same issue in my design and came up with a simple solution that I thought I’d pass on… I simply added the following to my css:

      a[id] {
      height: 35px;
      display: block;
      }

      This grabbed every anchor and gave them the same height as my persistent nav, thereby fixing the issue.

      Of course, I didn’t want every anchor to have this height, so I fixed those heights with some additional selectors:

      h3 > a[id],
      h2 > a[id] {
      height: 10px;
      }

      …and voilà! Problem solved. Of course, my design allowed for this as not all will, but I thought I’d pass it on. Happy coding! :)

      0
  34. 52

    Quick tip: keep an eye on position:sticky arriving in browsers for greater flexibility when working with sticky elements – http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

    0
  35. 54

    Great insight! And I love the responsiveness that this site has incorporated. Very user friendly.

    0
  36. 55

    Thanks for the article Hyrum;

    by the way,Hi SM;

    Would you like to try a sticky menu?It would be better to see if it performs well for Smashing Magazine.

    0
  37. 56

    Good study, though 40 people isn’t many it’s still something to think about. I’ve experimented with sticky navs/headers a few times lately but haven’t committed to any particular method because ultimately I was never happy with how much real estate they consumed. The next time I will try a responsive sticky nav that changes height based on screen size. This article has pushed me a little more :-)

    Cheers.

    0
  38. 57

    I’m sure I’ll get minus’d for not 100% agreeing. I do mostly agree, but the comparison to desktop applications is a misleading one. Yes, it would be annoying to have to scroll back up to the top in Word every time you wanted to embolden some text — that’s why you don’t have to! But that is function, not navigation. Web pages very rarely have functional choices at the top — it is strictly navigation. (The most common exception to that is an shopping cart feature.)

    Also, I have never scrolled to the top of a screen to access the navigation bar; I merely hit the Home key on my keyboard. Hardly a time-consuming or frustrating task.

    I could go on, but what it boils down to is, I think on a great many websites the point is moot. That does not mean we shouldn’t implement this if we can do so unobtrusively. I actually think it’s generally a good idea and rarely a bad one. But I think we should understand why it is a good idea, rather than resorting to fallacious arguments. They won’t pass muster with upper management.

    0
    • 58

      You are right that this is a technique that does not work in all situations. I would consider this article a failure if the take-away was that sticky navigation was a silver bullet. That was not my intent. You have a good point about the desktop software comparison. I feel that desktop software migrating toward the web in the form of web applications. This type of product is very functional in nature. I appreciate that you use the home key to go to the top of the page but I would not suggest forcing people to the keyboard to perform actions. I personally love navigating with the keyboard but not everyone does and not all devices have a hardware keyboard with a home button. I do appreciate your thoughts.

      0
    • 59

      In all my years as a UX designer doing usability testing, I can probably count on one hand the times someone has used the home, end, page up or page down keys to navigate. You need to make sure you understand your target audience before deciding that this approach isn’t necessary because of keyboard navigation.

      0
      • 60

        Though I do hate it when the floating nav messes up by covering content when I’m navigating by space bar or page down through a page.

        0
  39. 61

    Good stuff! I have been to a few sites that use this technique and sometimes it is overdone. I suppose the best advice is keep it very simple but not too little so people don’t notice it at all. I suppose that is the balance we all work for. I do like the thought of a disable button especially for those mobile devices.

    0
  40. 62

    I agreed with your thoughts and Thanks to describe with great examples.

    0
  41. 63

    Thanks a lot for the coverage of Fizzy Software.

    Sticky menus are always a preference when designing portfolio products and other sites where the navigation can improve.

    One thing we are trying to solve and will update when we do is how to fix the issue of zooming on tablet and smartphone browsers because that makes the navigation useless unless the user zooms out.

    Suggestions?

    0
  42. 64

    Thanks, interesting subject !

    0
  43. 65

    Personally, I don’t like sticky navigation. I find it intrudes into the page too much and I don’t feel I know “where I am” on the page.

    The nature of many articles on this and other websites is such that you the author feels they need to be controversial or opinionated to be heard. Unfortunately in this case it feels like that bias pervades into the (pseudo)science of the experiment.

    I don’t mind an opinion when it is just that, but when it masquerades as scientifically proven it loses credibility.

    0
    • 66

      Thanks for your thoughts and trying to keep me honest in my presentation. When I conducted the study I didn’t explain the difference between the two versions they were testing and when asked at the end of the study, none could identify to me the differences. I did my best to avoid any bias. I would love it if someone else would reproduce this study on a much higher level with thousands of participants and angles or even in attempt to prove the contrary. I did the best with what I had and thought it was worth sharing.

      0
  44. 67

    Nice article. Could you give a little more insight into demographics of the 40 testers please? Naturally if these were 20 something digital natives, it’s a little different to a set of over 50s (the demographic my site is focussed on)

    Thanks!

    0
    • 68

      A good portion of the participants were in their 20′s but there were also some in their 40′s, 50′s, and 80′s. Although I found an increase of time to complete a task with the increase of age, the relative completion time between sticky and standard navigation remained the same. I did not anticipate this but found it interesting none-the-less.

      If you decide to use this technique I think the key is not to make it obvious that the menu is sticky but instead have a simple and unobtrusive to the function of the website.

      The more feedback I receive, the more I realize there are many angles to this study that would be interesting to explore further.

      0
  45. 69

    I recently redesigned a large Australian website and added sticky menus. We too found that users can navigate the website much faster when they scroll anywhere through the page. We chose to only add sticky menus on long pages however as they generally aren’t required with a “short” pages. http://www.agedcareguide.com.au/

    0
  46. 71

    Great read and very interesting subject! I want to redesign my company it’s website and this is definitely something I’m going use.

    0
  47. 72

    One thing I’ve never liked about sticky menus (or footers!) is the lack of horizontal scrolling. Whenever people mention small screens they think “mobile” but users may have their browsers squeezed thinner who are not on mobiles or netbooks… and then if you were not careful to keep your menu under 3-4 items, the right side of your menu is inaccessible to them. This is something I’ve seen on web pages myself where I wonder if the developers knew about this.

    Using JS or something to check the width of the browser viewport and then compressing the menu down to few items (like many responsive menus do) would help this problem.

    0
    • 73

      You can use media queries to style the menu differently on small screens or perhaps apply a little JS to fit as much as you can and add a “more” menu item that opens a popup or dropdown with the items that didn’t fit. It doesn’t matter if the small screen is a small window on the desktop or a mobile device for it to work.

      0
  48. 74

    I’ve actually used the sticky sidebar, and in order to solve the problem with parts of the sidebar not being accessable on smaller screens – you just include mobile query that changes the css if the screen is below a certain height. You usually use this for mobile devices and set the content to change based on the browser width for responsive design, but you can do this just the same with the height.

    put this in your head –

    For example, check out http://www.clevercanines.ca and try shrinking the window height manually and see what I mean.

    0
  49. 75

    Great article. Thanks!

    0
  50. 76

    No, no, no, no, no.

    This obsession with always-over-the-content hover bars needs to stop – websites now have sticky footer bars and sticky menu bars. While a basic UI assessment on a semi-trivial site may yield positive results the reality is you are obscuring content and reducing space. On some websites this obviously doesn’t matter but on forums, blogs and other text heavy sites it does matter for one simple reason – the spacebar.

    Pressing space scrolls you down 1 page. It’s incredibly useful for reading without using the scrollwheel, arrows, etc, especially if you are trying to eat something at the same time. By blocking the top of the content space now scrolls down, technically, over one page so you then need to up arrow afterwards to get to the top of the next page of what you were reading. It’s incredibly annoying.

    tl;dr: Context, people. Don’t just start shoving this on your sites without considering it.

    0
    • 77

      I completely agree that it does not work in many cases. I also don’t agree with many of the techniques that are being implemented out there. My only hope is that developers and designers would carefully consider it. This is the final line of the article, “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.”

      0
    • 78

      The vast majority of people don’t use keyboard shortcuts in their browser. So although, this might not be great for your personal usability, you have to remember that the goal is to make it usable for a *specific* target audience. That said, I am sure there is way it could implemented such that it didn’t cause problems for keyboard navigators but you would be hard pressed to find a company that wants to design around the needs of a very small portion of users. That’s not to say that they shouldn’t care about every last user. It’s just that budget is always a top consideration.

      0
      • 79

        Not taking keyboard users into consideration, no matter how small the audience, affects the accessibility of the site.

        It seems to me that proper coding of the page can adjust the size of the screen to allow for proper use of the space bar or Page Down key. A site mentioned further down this page, http://www.chalmers.se/en/Pages/default.aspx, appears to be coded correctly. When I page down, none of the unread portion of the page winds up underneath the sticky menu.

        0
  51. 80

    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.

    0
    • 81

      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
  52. 82
  53. 83

    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
  54. 84

    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
  55. 85

    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
  56. 86

    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
  57. 87

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

    By the way, thanks so much Dude! :)

    0
  58. 88

    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
  59. 89

    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
  60. 90

    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
  61. 91

    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
  62. 93

    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
  63. 94

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

    0
  64. 95

    > 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
  65. 96

    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.

    0
  66. 97

    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.

    0
  67. 98

    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
  68. 99

    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.

    0
  69. 100

    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.

    0
  70. 101

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

    0
  71. 102

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

    0
  72. 103

    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

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