Top Menu Usability research can make site navigation faster 22%

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Absrtact: Navigation is one of the most important elements in Web sites, but it is difficult to use in design. "Top navigation" can accelerate the navigation speed of the website, speed up about 22%. can be achieved through CSS and JavaScript (or jquery) technology. But it also has some disadvantages, such as the compatibility of mobile devices, the limitations of design.

SirsiDynix company Ux/ui designer Hyrum Denney in Smashing magazine published an article "Sticky Menus Are quicker to Navigate", sharing their own "top menu" The availability of research results, and the implementation of technology and related challenges. Csdn compiled the text as follows:

Navigation is one of the most important elements of a Web site, and most designers agree. Still, navigation isn't always easy to use. Typically, users must scroll to the top of the site to access the navigation menu. Recently, I am studying whether the "sticky menu" can speed up the navigation of the website. I did a usability study on this. The results of this study, along with some of the technologies and related challenges, are presented below.

Figure 1

Definition of top Navigation

Top (or fixed) navigation is a menu that is locked in a site somewhere, and the navigation does not disappear when the user scrolls the page, in other words, users can access the navigation anywhere on the site without scrolling the page. Although the top navigation can be applied to any menu, such as the footer, social media button, but generally mainly for the navigation of the site. Figure 2 shows the difference between standard navigation and top navigation on a mobile device.

Figure 2

Usability Research

Research background

For this study, I created two almost identical test sites. The only difference is that one has standard navigation and the other is top navigation. In the first web site, 40 participants were required to complete 5 tasks in a limited number of hours. Then go to another website to complete another 5 different tasks. Both sites are tested on a desktop computer until the end of the day to tell the user the difference between the two sites. After the test was completely finished, I came up with two interesting conclusions through the analysis of the data.

1. Top menu can make navigation faster 22%

Research data show that participants can quickly find what they need without scrolling the page to the top. 22% may not seem like a big data, but it has a big impact on visitors. Based on this data, top navigation can help visitors save 36 seconds per 5 minutes. Of course, if you're enhancing the user experience, letting users stay longer on the page is just one of the benefits. Users should be allowed to explore the site in depth and find what they need without any restrictions.

2.1% of participants prefer a sticky menu, but don't know why

At the end of the test, I will ask the user if they notice the difference between two sites. But no one can say. The changes are tiny and nobody notices it because they are all focused on accomplishing each other's tasks. Ask participants to feel which site is easier to use. 40 of participants agreed that Web sites with top navigation are easier to use (faster). Many people commented: "I don't know what the difference is between the two sites, but I feel I can save more time by clicking on the top navigation." This comment shows the user's absolute support for top navigation.

Top Navigation for desktop software

Imagine that you are typing a document in Word, and whenever you want to make a word bold or widen the margins, you must scroll to the first page to set. If you think about it, let people down. No matter what you are doing, most desktop software will always provide a complete navigation menu for you to visit. Web browsers should do the same, if we have to scroll to the top of the site to access the browser's address bar, it is ridiculous.

Excellent case sharing

Recently, Facebook and Google + have also adopted top navigation. Of the 25 most visited sites in the United States, only 16% now use top navigation. Here are a few websites that have done a great job.

Fizzy Software

This is a good example of horizontal top navigation, located at the tip. Users feel comfortable when using the site.

Figure 3

Web appers

The site's navigation is vertical and on the left, a bit like Google + 's navigation. The only downside is that if the screen is less than 560 pixels high, the section below the menu is inaccessible, and I discovered the problem when I tested the site on a netbook.

Figure 4

Makebetterapps

Makebetterapps This is another wonderful example. The navigation is slightly transparent, the content below it is faintly visible, this is a very good attempt.

Figure 5

Rodolphe Celestin

Rodolphe Celestin the top navigation across the site, but when you scroll down the page, the navigation design changes slightly. As long as consistency is maintained, simplifying the design is a good technique. At the same time, the site's designers also adopted the current popular design method: The entire site has only one page, navigation link is a anchor point, click to jump to the corresponding position of the page. All this makes the site comfortable to use.

Figure 6

Ryan Scherf

Ryan Scherf The site's navigation is vertical, with only icons on it. The innovation was impressive.

Figure 7

Web Designer Wall

Web Designer wall The vertical, top navigation of the site works fine, because menus are only 4 menu items. It works well for blogs.

Figure 8

Although the top menu is not the most popular form of navigation, more and more websites are being used.

Start designing now.

Avoid using IFRAME

IFrame seems to be a direct way to implement top navigation, but avoid it. Because IFRAME can cause many problems, especially cross-browser compatibility issues, security issues, search engine optimization issues. An IFRAME can be useful, but it should not be a major part of the HTML layout.

CSS

Using CSS to implement the top navigation is a good way. It is also the most direct, lightest and fastest method. There are three points to note: position, margin-top and Z-index. Set the menu's position to fixed, and the menu will not be able to scroll through the rest of the page. If the navigation is horizontal, you do not have to set the margin property. Finally, on the horizontal navigation, the Z-index property is used to ensure that navigation always resides on top of other elements. When you scroll the page, other content will slide in the navigation.

For more information, see the website of the Consortium.

jquery and JavaScript

Figure 9: This simple and sophisticated top navigation bar is implemented by JAVASCRPT

If you prefer jquery, JavaScript, you can try the following:

Jscroll

Simple Smart Sticky Navigation Bar

JQuery waypoints

Sticky MenuBar

Disadvantages of Top Navigation

Figure 10

Design Limitations

Using top navigation may require you to discard some design choices that the team may not want to give up. For example, a horizontal top navigation is positioned above a page, other elements. Although it is easy to implement, it is not necessarily what the user needs.

Easily distracted, disturbed

carelessly, the vertical navigation can let the user be distracted. Some of the top elements may be delayed while the user scrolls the page, and other elements may be too high (or too wide) to affect access to the content. Navigation should be easy to access while not grabbing the attention of the content.

Compatibility with mobile devices

The CSS and JavaScript implementations mentioned above do not provide support in some mobile device browsers. Luke Wroblewski's article "organizing mobile" shares a number of principles that need to be focused on creating navigation on a mobile device. The response design technique also provides some solutions for adjusting navigation based on screen size.

Understand how each device supports it. Understanding these compatibility issues in advance can save you more time. The "When Can I use?" article describes the desktop and mobile browsers support for CSS property "Position:fixed". Brad Frost has also tested and analyzed this, and has provided a wonderful view in his video.

Conclusion

As designers, developers, why do we constantly force users to scroll the page up and down to find navigation? This is no longer a problem on desktop software, and we have some data to show the benefits of a top menu. In the United States, 84% of the 25 sites with the highest number of visits can speed navigation through top navigation.

Of course, top navigation does not apply to any situation, especially when resources are tight. The use of top navigation requires careful consideration and guarantees the usability and overall user experience of the site.

Author Introduction:

Hyrum Denney, focusing on web design and development. is now working in SirsiDynix, as Ux/ui Designer. He has created his own UX studio and has been the head of network operations in the E-commerce industry. Keen to learn new knowledge, the user experience design, users use the psychology of the site has a special interest in hobbies.

Original link: Sticky Menus Are quicker to Navigate