Web Interaction Design: Pagination Talking about case analysis different paging forms

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

Action: Jumps to the previous page or next page.

Elements: The basic elements of the classification are: Top page + page + next page (such as callout 1), total page number (such as callout 2), jump page (such as callout 3), confirm button (such as callout 4);

Scenario: Depending on these basic elements in different scenarios there will be different combinations

(Scene 1) 19 Floor Forum:

The number of forum pages will reach thousands of pages, the content of the page is most of the top or the original update posts, so the general users will see the original page, and then selectively check the message page. The chance to flip all of them manually is almost 0; so the forum page will have the following characteristics:

1. Most users will read the original post directly after the page or choose to return to the list of posts, in addition to the bottom of the top Add page and set the "return list" shortcut operation

2. So the first "1" page is the role of home, always have the first "1" page, the middle with "..." to indicate the number of the page not displayed;

3. Only provide "first 1+5 consecutive page number + last page" page number; developers should consider a maximum of 5 pages of content that are viewed by the average user. Or just skip to the last page to view so display the last page page number and the shortcut button that jumps to the last page directly;

(Scene 2) Weibo:

The information that the user browses is the information of the attention, will read the page as the newspaper reads down, therefore, the "previous" "Next" is the most frequently used, followed by the jump page, in order to reflect the concept of lightweight micro-blog, the traditional page of the middle page section simplified into a drop-down menu, not only to identify the current position of the pages can be paging switch jump;

Sina Weibo: one page 45 meager, more then page, Prev, Next and several pages, the default push 10 pages

(Scene 3) Baidu search page:

1. The search results provide only 10 page numbers for the first time, and the average user cannot find what they want in these 10 pages. The search content should be replaced. Footprint graphics and the following page numbers can be clicked to page, adding fun pages

2. Because the search page users generally will not return to the first page so the page only prev and the next page of the shortcut button

3. Click on any page to continue browsing, found that the following page number is: the current page +9;

4. Provides up to 20 page numbers;

(Scene 4) Information scrolling page:

1. Tencent Weibo: A page 45 meager, more default display more buttons, click below and show more than 45, and so on; at the same time, Tencent also launched page numbering mode for users to choose

More humane.

2. Petals "Unlimited scrolling page", when the user browse to the bottom of the pages, automatically refresh the page to display new information, after a lot of pages, when no content can be displayed, automatically appear the associated information button "See more Information", Guide users to browse other relevant information; The page is too long to provide "back to the top" button;

Expansion: The following are different forms of paging

This is a small share of the interactive team on pagination.

Original: http://www.lpued.com/?p=1447