Sticky Menus Are Quicker To Navigate // navigation usability

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, 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.

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.

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.

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.

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.

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

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

Web Appers
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.

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

Rodolphe Celestin
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.

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

Web Designer Wall
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.

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

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 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 website.

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.

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

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.

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.

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 Mobile” by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices. Responsive design techniques also offer some solutions 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? has some interesting information on support for position: fixed. Brad Frost has also done some of his own testing and analysis, providing some interesting insight in his accompanying video.

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 websites 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)

Hyrum Denney

Hyrum has a BA in Computer Science and has been in the web design and development industry for a number of years. He is currently a UX/UI Designer at SirsiDynix. He previously operated his own ux studio as well as worked as the Director of Web Operations in the eCommerce industry. Hyrum has a passion for learning new things and is particularly interested in anything to do with user experience design and the psychology behind how people use websites.

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 it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

Read more >>

Tweet

TomTom expands Map Share to all navigation devices

There’s nothing worse than relying on a GPS unit with incorrect map information, so TomTom has opened up its Map Share community so that around 60 million units can take advantage of daily map changes for free. TomTom say that Map Share was previously restricted to a limited number of devices, but now just about everyone can get in on the action.

Any changes in the immediate area, such as new speed limits, blocked roads, or different street names, can now be modified directly on the device. If the user then chooses to do so, they can send the updates to TomTom and the Map Share community so that everyone reaps the benefits for free.

Major changes such as brand new roads or roundabout placements are logged with TomTom, validated, and added to maps on a quarterly basis. The collaborative approach to creating the maps apparently helps TomTom to create “maps [that] accurately reflect reality.”

Want a preview of Map Share? Take a peek at the video below to get a better idea of what it’s all about.

Read more >>

Tweet

How to organize website content for easy navigation

Takeaway: Justin James offers practical tips on creating a site navigation strategy that effectively guides users/customers to the information or products they are looking for.

If you’ve ever struggled to find something on a company’s Web site without resorting to using a public search engine, you’ve probably encountered an issue with how the data is organized. Far too many websites have their pages structured in a way that makes sense to them, but not to their visitors. There are a number of causes of this issue, but most of the time, it is that the site either uses a navigation that reflects the company’s organization chart, or it is because they are using wording that real-world visitors do not. I am going to show you how to approach your site’s content organization to help visitors easily find what they need.

The structure of a site is the hardest to correct once the site is in place, so it is best to get it right from the beginning. Once the structure is in place, moving pages around can mess up bookmarks and search engines if the URL paths reflect the site layout. If this is the case, make sure that you use HTTP status 301 (”permanent”) redirects when the move is complete to ensure that bookmarks and search engines know to be updated.

The key here is to understand how users look for information. They usually drill down, and they really do not want to have to go more than three or four layers deep. The first mistake that Webmasters make is at that first layer. They offer choices which make little sense to users. For example, I was recently looking to purchase a server. One site I looked at immediately presented me with a choice of product lines. Unfortunately, the only way for me to know which product lines were right for me was to look at each one, then look at every product in each one, and then find one I liked. The only reason why I bothered is because I really like this company’s products! Why should I have to spend so much time and effort to learn which product was right for me? Instead, they should have started with the rough size (”4U,” “3U,” etc.) or purpose (”file server,” “application server,” “VM host,” etc.). This would have let me start with the most important consideration (size or purpose), as opposed to a distinction (product line) which was meaningless to someone who is not familiar with their product lines already.

Another similar mistake that happens is when the company divides their products into a usage category based on criteria that their customers would not use. Again, while looking for servers, some companies start with “home,” “small business,” “medium business,” and “enterprise” for their servers. What’s the distinction? Who determines what a “small business” needs? I have seen some small businesses with a lot more server power, storage, etc. than many “enterprises” so the label is really meaningless.

If you can, use a guided search system once people are in your products/services area. If you can’t use a guided search, then it is even more critical that the page structure is based on the lines that customers use. It should also be well understood that a well-oiled search system for your site is a must!

Do not ignore the “typical Web site pages” either (like About Us, Contact Us, and so on). Customers use those much more than you think! These pages should be universally visible; if the main navigation lacks the space for those links, putting the links on the bottom of the page is just fine; people know to look for them there. But one thing that hangs up many sites is the terminology. Users do not want you to use “innovative” or “unique” names for these pages, they want familiar names. Here is a list of the names that visitors expect to see:

Shopping Cart, or Cart (not “bag,” “buggy,” “backpack,” or any of the other cute names some sites try using)ServicesProductsAbout UsContact UsSupport (”help” is fine too, but “support” is much more common)DownloadsPricingRequest a QuoteSearchAdvanced SearchHome (not “front page”)Buy NowAdd to CartWishlist

Another problem with wording is that companies tend to use company or industry jargon whereas users have different terms (anyone who has worked at a help desk knows this pain!). A great way to see what words your customers use is to take a look at your Web traffic logs and paid search engine advertising accounts to see what search engine keywords are drawing users in. Also, if you can, record the searches on your on-site search system to mine that as well. You may find that your users can’t find what they need simply because of the mismatch in terminology.

Luckily, there is an inexpensive, easy way to test your site structure before you even write a line of code, and that is to use paper. Take some index cards, and make various sets representing the most important workflow through your site (that’s the one that leads the customer to giving you money, usually). For example, a computer maker would want the user to end up looking at a particular model and selecting “Buy” or “Customize.” Your first set of index cards would represent proposed navigation at the top level. Make a few different sets using different terminologies. Get a handful of people who are not familiar with your Web site or products and use them as your test group. It cannot be stressed enough that these people should not have an intimate understanding of your offerings, or else they will throw your results off! You only need 3 - 5 people to make this work. Give them different sets of cards and have them attempt to find a product through your “navigation.” Time each level with a stop watch and record your findings. You will quickly see what navigation systems and wording work best for your site. A great alternative to index cards is the Verify application from Zurb. It lets you mock up screens and see where users click to do things.

Once the reorganization is complete, you will want to take a look at your site metrics to see where you have improved and where you have not. To get an apples-to-apples comparison, use percentages, not overall numbers. What you are going to look for are two things: primarily, what percentage of users ended up at the desired conversation pages, and how many clicks did it take them? You will want to compile a good size sample from before the redesign to after, to ensure that you see what is working and what isn’t.

By keeping your users in mind when setting up your content structure, and sticking with terminology that they use, you will see visitors getting information much more easily, which should lead to increased conversions.

Read more >>

Tweet