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 has compiled the text as follows:
Navigation is one of the most important elements of a Web site, and most designers agree with it. Still, navigation is not always easy to use now. 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.
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.
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 no one notices it because they are 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 in this area.
This is a good example of horizontal top navigation, located at the tip. Users will feel comfortable when using the site.
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.
Makebetterapps This is another wonderful example. The navigation is slightly transparent, the content below it is faintly visible, this is a very good attempt.
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 of these make the site very comfortable to use.
Ryan Scherf The site's navigation is vertical, with only icons on it. The innovation was impressive.
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.
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 the 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. The IFRAME has its application, but it should not be a major part of the HTML layout.
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. If you set the menu's position to fixed, 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, the other content will move in the navigation slide.
For more information, see the website of the Consortium.
Figure 9: This simple and sophisticated top navigation bar is implemented by JAVASCRPT
Simple Smart Sticky Navigation Bar
Disadvantages of Top Navigation
Using top navigation may require you to discard some design choices that the team may not be willing 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
Be aware of 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.
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 visitors can navigate through top navigation to speed up navigation to the user.
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 of the site and the overall user experience.
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
Compile Link: CSDN