Some Thoughts on Web page navigation based on famous websites at home and abroad

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

[Core Tip] What are some of the logic behind the seemingly simple design for paging navigation?

Edit Note:

This article is our reader Weiyangliang some thoughts on the design of Web page navigation, and analyzes some ideas and ideas on the design of the website paging navigation.

When browsing a Web page, you often experience paging navigation. Paging navigation has four main functions: Tell users to browse the amount of information, let users quickly skip some do not want to see the message, easy to locate and find, reduce the page size, improve loading speed. In addition, paging navigation actually gives users a certain pause to browse the Web page, allowing the product to be "more rhythmic" and to reduce the user's sense of fatigue.

Following the common domestic and foreign websites (mainly for search engines and E-commerce sites) For example, from several aspects to talk about the design of pagination navigation.

1: Length of paging navigation

Paging navigation can be neither too long nor too short. Too long paging navigation, aggravating the user's burden; Too short paging navigation, can not play a good role in navigation.

The number of pager pages for Taobao and Jingdong is 6,google, Bing and Yahoo are 10. Baidu and Amazon use variable-length forms. Baidu's starting length of 10, with the page down, page number of pages gradually increased, and ultimately maintain the length of 20 pages, and Amazon initially only 4 pages, and finally maintained on 5 pages.

Google's paging navigation

Bing's Pager

Yahoo's paging navigation

Baidu's Paging navigation

Amazon's paging navigation

Taobao pagination Navigation

BEIJING-East Pager

As you can see, the number of page-navigation pages in E-commerce sites is generally less than search engines. The main reason, of course, is that the number of search results on the website is far below the search engine. Second, because the electronic business site is mainly selling things, compared to the information presented to users as the goal of the search engine, they are more willing to let users carefully browse the previous pages of goods, rather than to guide users randomly click on any page to view the product.

2: Do you need the first last page navigation links

Google, Bing, Yahoo, Amazon, Baidu, Taobao, Beijing East, the page of the pages of the site is not the first and last links.

Google, Bing, Yahoo and Baidu these search engines do not have the home page and the last page, we can understand, because the number of search results is too large, too many pages, so provide the last page does not have much meaning. And their paging length is more than 10 pages, and users are likely to be within 10 pages can find the information they want, even if not found, you can click on the 1th page to easily return to the homepage, so "Home" link is not useful.

And Amazon, Taobao and Beijing-east, such as the electricity business site, users of the commodity information needs more personalized, the search accuracy requirements as high as the search engine. Therefore, the user of the electricity business website needs the product information to be closer to the average distribution to each search results page, rather than the search engine as the focus on the home page. In addition, another possibility is that if the user turns to a certain number of pages, the results are increasingly deviating from their own needs, usually modify the search conditions (such as limited men's, women's, brand, etc.), or search again.

In addition, the similarities between the above two types of websites are that the link in the search results will be opened in a new window, so, if the user browses to the back of the page, but also want to browse the homepage of the product information or search results, you can switch the window to achieve (if you do not close the window of obsessive-compulsive disorder).

3: Do you want to customize the page number

Custom pages are common for a limited number of pagination. Taobao and Jingdong provide this kind of navigation. However, I think that on such a large amount of information on the page, users often do not know the specific page number of the specific content, so it is not likely to customize a page to see. We can take Taobao and Jingdong to provide this function to be not in the navigation page number in the "Home" link to a supplement. In addition, the Electronic business site to provide this custom page number function, can also improve the ranking of merchandise exposure, from the point of view of the electric business platform, this is a need.

4: Spacing of page numbers

The number of page numbers is too small, the user is easily delayed, and the spacing is too large to increase the mouse. At this point, Google seems to be doing a bit poorly. After a double digit page number, Google's paging navigation seems a bit crowded. Let's take this as a Google to ensure that each page number is aligned with the letter o above the pager.

Google's page number spacing is too small when two-digit page numbers appear

5: Mouse Response

Ideally, the page number should respond when the mouse is over or the page number is clicked. This will alert the user to the page number that is currently across or clicked on the mouse. When the mouse across the page number, Taobao will be the corresponding small box plus orange border, Jingdong will be the corresponding small box into blue, Baidu and Bing will be the corresponding small box into gray, and Google is the corresponding number of page number plus underline. When the mouse clicks, Baidu and Google will change the corresponding page number to red.

The above approach should all be correct, but Google's approach is a bit confusing. Underlining the link, which would have been the default way of handling HTML, would remind the user that this is a link, as the web's father, Tim Berners Lee, defined. However, as users become familiar with the web, many times, even without underlining, users know that it is a link. I remember the June, Sina has to go in addition to its first page all the links underline, then I really feel the page refreshing a lot, but not long, it again to add. Again, look at Google's navigation links, the mouse will appear when the underline, even the "prev" and "next" these two links are underlined. I personally feel that this may not be necessary, because most users actually already know that it is a clickable link. Maybe Google is using this retro style to highlight the difference. Anyway retro and cock Silk is a step away.

6: "Prev" and "Next"

The previous page and the next page are generally placed on the left and right side of the page number navigation, and usually have arrows to the left and right to visualize the user, such as Yahoo, Amazon, Baidu, Taobao, and Jingdong.

The location of the previous and next pages is also important. The location is preferably relatively fixed, allowing users to easily use the previous and next pages for page switching. At this point, these sites are doing a good job. And Baidu's first 20 page pagination page will be with the page down and move to the right, this experience is not too good. Perhaps Baidu's starting point is to let users within 20 pages of easy to switch pages.

In addition, Taobao and Jingdong in the upper right corner of the page to provide a simple upside down and down function. Below is the complete paging feature, which is simplified. The product page needs the full paging function well understood, because the user is browsing the page after the product and then page, so the full function at the bottom. When does the user need to use paging on the product page? It may be that when the user does not want to look at the product page content, it may be when the user wants to know where they are. In addition, because the page of the top page module is often and product screening criteria module placed in one place, so the function here needs to be as simple as possible, save space. In addition, Taobao and Jingdong also show the total number of pages in the search results, possibly providing information on whether or not to re-enter the search terms or modify the criteria for decision support.

Taobao page in the upper right corner of the simple paging function

The simple paging function in the upper right corner of Jingdong page

7: Current Page

The page number of the user currently on it should be different from the style of the other page numbers, which prompts the user for the current location and facilitates navigation. Google, Bing, Yahoo, and Baidu all use black fonts to indicate the page number of the user's current pages, with an orange-yellow font, and Taobao sets the small box background of the current page to yellow.

In addition, the current page should be not linked, so the mouse should be put up, should not become hover state. On the Beijing-East page, when the mouse is placed above the current page, the current page will be like other page numbers, the background becomes blue, the mouse will become the shape of the finger, which will mislead the user, thinking that the current page can be linked.

It is worth mentioning Sina Weibo. The default of Sina Weibo is that as the user browses down, the load is automatically loaded two times, then the paging occurs. For most users, browsing micro blogs in their spare time, loading two of times content has been able to satisfy them, for users who need to browse more information, let them know how much they have browsed. This method is undoubtedly more flexible, not only ensure the continuity of user browsing information, but also provide the role of fast navigation and estimating information.

Page number navigation in the information flow of Sina Weibo

8: Differentiate between visited/unread page numbers

Depending on the default settings for HTML, the link colors that have been accessed and not visited are different. However, only Baidu and Bing have identified the color of the page navigation links that have been visited and not visited. I personally think it is necessary to make this distinction, especially when I use search engines to search for information.

9: Brand promotion in the navigation page number

As mentioned before, Google's navigation page number above is a distorted Google logo, each page number corresponds to a logo inside the letter O. Users can even click on these o to jump to the page where the corresponding navigation page number is located.

In addition, the color can also be combined with the brand publicity. The blue of Google's navigation number is very similar to that of G and G in its Logo. Baidu's navigation page number above the display is Baidu's logo, Jingdong navigation page number used in orange and blue is the main color of its logo, Taobao navigation page number used in the Orange is also its logo and the main colors of the site.

10: Other

In the product design, we are all from the point of view of the user needs to think and design. But the product is something that meets both the needs of the user and the needs of the company (usually profitable), so sometimes you have to think about something else. For example, when you browse certain news websites, you will find that the content of each page is only poor one or two paragraphs, and then have to page, a not long article, was divided into more than 10 pages. This to increase the site PV and deliberately split the page to increase the number of pages to attract users to click the behavior is really outrageous.

A similar problem was recently encountered in the design of the product, so the problem was sorted out.