Navigation is an important element of Web sites: The design of the top menu

Article Description: navigation is the most important element in a Web site.

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.

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

Fizzy Software

This is a good example of horizontal top navigation, located at the tip. Users will 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 of these make the site very comfortable to use.

Figure 6

Note: related website Construction skill reading, please step to the construction station tutorial channel.

[1] [2] Next page