Top menu availability research can make website navigation faster by 22%

Abstract: navigation is one of the most important elements of a Web site, but it is not easy to use in design. "Top navigation" can accelerate the website navigation speed by about 22%. It can be implemented through CSS and JavaScript (or JQuery) technologies. However, it also has some disadvantages, such as compatibility with mobile devices and design limitations.

Hyrum Denney, UX/UI Designer at SirsiDynix, published an article Sticky Menus Are Quicker To Navigate on Smashing Magazine, sharing the results of his research on "top menu" availability, and technical and related challenges. CSDN has compiled the document, the content of which is as follows:

Navigation is one of the most important elements of a Web site. Most designers agree to this. However, navigation is not always easy to use. Generally, you must scroll to the top of the website to access the navigation menu. Recently, I am studying whether the "top menu" can accelerate the navigation of the website. I conducted a usability study on this. The results of this study and implementation technologies and related challenges will be presented below.

　　

 

Figure 1

　　Definition of top navigation

A top (or fixed) navigation is a menu that is locked at a certain position on the website. When a user scrolls the page, the navigation does not disappear. In other words, you can access the navigation from anywhere on the website without scrolling the page. Although top navigation can be applied to any menu, such as footer and social media buttons, it is generally used for website navigation. Figure 2 shows the differences between standard navigation and top navigation on mobile devices.

　　

 

Figure 2

Availability Research

Study background

For this study, I have created two test sites that are almost identical. The only difference is that one has standard navigation and the other is top navigation. In the first website, forty participants are required to complete five tasks at a time. Then go to another website to complete the other five tasks. The two websites are all tested on the desktop, and the difference between the two websites is not reported until the end. After the test is complete, I can draw two interesting conclusions by analyzing the data.

　1. Set the top menu to make the navigation faster than 22%

Research data shows that participants can quickly find what they need without having to scroll to the top of the page. 22% may not seem like a big data, but it has a huge impact on visitors. Based on this data, the top navigation can help visitors save 36 seconds every 5 minutes. Of course, if you are enhancing the user experience, it is only a benefit to allow users to stay on the page for a longer time. Users should be allowed to explore the website in depth and find what they need without any restrictions.

　2.100% of participants prefer the top menu, but do not know why

At the final stage of the test, I will ask the user if they have noticed the differences between the two websites. But no one can tell. The changes were minor and nobody noticed it, because they were all focused on completing their tasks. Ask the participants which website is easier to use. All 40 participants believe that websites with top navigation are easier to use (faster to use ). Many people commented: "I don't know what are the differences between the two websites, but I feel that clicking the top navigation can save more time ." This comment shows the user's absolute support for top navigation.

　　Top navigation of desktop software

Imagine that you are entering a document in Word. Every time you want to bold a Word or widen the page margin, you must scroll to the first page for setting. Is it frustrating to remember it. No matter what you are doing, most desktop software always provides a complete navigation menu for you to access. The Web browser should do the same. If we have to scroll to the top of the website to access the address bar of the browser, it would be ridiculous.

　Sharing excellent cases

Recently, Facebook and Google + have also adopted top navigation. Of the 25 most visited websites in the United States, only 16% use top navigation. The following lists some websites that have done a great job in this area.

　　Fizzy Software

This is a good example of horizontal top navigation, located at the top. When using this website, users will feel comfortable.

　　

 

Figure 3

　Web Appers

The navigation of this website is vertical and located on the left side. It is similar to Google + navigation. Its only drawback is that, if the screen height is lower than 560 pixels, the content below the menu will not be accessible. I found this problem when testing the website on the netbook.

　　

 

Figure 4

　MakeBetterApps

MakeBetterApps is another wonderful example. The navigation is slightly transparent, and the content below it is vaguely visible. This is a good attempt.

　　

 

Figure 5

　Rodolphe Celestin

Rodolphe Celestin the top navigation of the website spans the top of the website, but when you scroll down the page, the navigation design changes slightly. It is a good technique to simplify the design as long as consistency is maintained. At the same time, the designers of the website also adopted the current popular design method: the whole website has only one page, and the links on the navigation are anchor points. After clicking it, they can jump to the corresponding position on the page. These make the website very comfortable to use.

　　

 

Figure 6

　　Ryan Scherf

Ryan Scherf the navigation of this website is vertical, with only icons on it. This innovation is impressive.

　　

 

Figure 7

　Web Designer Wall

Web Designer Wall the vertical top navigation of the website works well, because the menu is only in four menu items. It is suitable for blogs.

　　

 

Figure 8

Although the top menu is not the most popular navigation mode, more and more websites are using it.

　　Design now

Avoid using iFrame

IFrame seems to be a direct method to implement top navigation, but avoid using it. IFrame may cause many problems, especially cross-browser compatibility, security issues, and search engine optimization problems. IFrame is useful, but it should not be a major part of HTML layout.

　　CSS

It is a good method to use CSS to implement top navigation. It is also the most direct, lightweight, and fast method. Note three points: position, margin-top, and z-index. Set the position of the menu to "fixed", and the menu cannot scroll with other parts of the page. If the navigation is horizontal, you do not need to set the margin attribute. Finally, in the horizontal navigation, use the z-index attribute to ensure that the navigation is always on top of other elements. When you scroll the page, other content slides under the navigation bar.

　　

 

For more information, see the W3C website.

　JQuery and JavaScript

　　

 

Figure 9: this simple and sophisticated top navigation bar is implemented by JavaScrpt

If you prefer jQuery and JavaScript, you can try the following method:

● JScroll

● Simple Smart Sticky Navigation Bar

● JQuery Waypoints

● Sticky MenuBar

　　Disadvantages of top navigation

　　

 

Figure 10

　Design limitations

Some design options may need to be abandoned when using the top navigation, which may be unwilling to be abandoned by the team. For example, the horizontal top navigation is located at the top of the page and on top of other elements. Although it is easy to implement, it is not necessarily required by users.

　　Easy to be distracted and disturbed

If you are not careful, vertical navigation will distract you. When you scroll through a page, some top elements may be delayed. Other elements may be too high (or too wide), which affects content access. Navigation should be easy to access, and should not capture the attention of the content.

　　Compatibility with mobile devices

The CSS and JavaScript implementation methods mentioned above are not supported on some mobile device browsers. Luke Wroblewski's article "Organizing Mobile" shares several important principles for creating navigation on Mobile devices. Responsive design technology also provides some solutions for adjusting Navigation Based on screen size.

Measure the test taker's knowledge about the support of each device. Understanding these compatibility issues in advance can save more time. When Can I Use? This article introduces the support for CSS attribute "position: fixed" in desktop and mobile browsers. Brad Frost also tested and analyzed this and provided a wonderful point of view in his video.

　　Conclusion

As designers and developers, why do we constantly force users to scroll up and down pages to search for navigation? This is no longer a problem with desktop software, and we have some data to show the benefits of the top menu. In the United States, 84% of the 25 most visited websites can use top navigation to accelerate user navigation.

Of course, top navigation does not apply to any situations, especially when resources are tight. When using top navigation, You need to carefully consider and ensure the availability of the website and the overall user experience.

Author profile:

Hyrum Denney focuses on Web design and development. He is now working at SirsiDynix and serves as a UX/UI Designer. He once founded his own UX studio and served as the network operation director in the e-commerce industry. They are keen to learn new knowledge and have special interests in user experience design and user psychology in website use.

Original article: Sticky Menus Are Quicker To Navigate